cssicons

Dynamic CSS icon generation system with smart optimization, gradients, animations, and responsive sizing.

Features

• 🎨 300+ Icons - Comprehensive icon library with variants
• ⚡ Dynamic Generation - Icons generated on-demand, never stored
• 🌈 Gradient Support - 10+ gradient presets plus custom gradients
• 🎭 18 Animations - Spin, pulse, bounce, shake, and more
• 🔄 Transformations - Rotate, scale, flip, skew with presets
• 📱 Responsive Sizing - Breakpoint-based icon sizing
• 🚀 Smart Optimization - SVG compression and minification
• 🎯 Multiple Variants - Filled, outlined, rounded versions
• 🌐 REST API - Complete HTTP API for integration
• 💻 Web Interface - Beautiful demo and testing interface

Installation

npm install cssicons

Quick Start

Programmatic Usage

const { generateIcon, generateIconCSS } = require('cssicons');

// Generate a simple icon
const homeIcon = generateIcon('home', { size: 32, color: '#007bff' });

// Generate with gradient
const gradientIcon = generateIcon('heart', { 
  size: 48, 
  gradientPreset: 'sunset' 
});

// Generate with animation
const animatedIcon = generateIcon('loading', { 
  size: 24, 
  animation: 'spin' 
});

// Generate CSS
const css = generateIconCSS('star', { 
  size: 20, 
  className: 'my-star-icon' 
});

Server Usage

const cssicons = require('cssicons');

// Start the server
cssicons.startServer(5312);

Then visit http://localhost:5312 for the web interface.

API Reference

REST API Endpoints

• GET /api/icons - List all available icons
• GET /api/icon/:name - Generate specific icon with options
• GET /api/animations - List available animations
• GET /api/gradients - List gradient presets
• GET /api/transforms - List transform presets
• GET /api/icon/:name/variants - Get icon variants
• POST /api/icons/batch - Batch generate icons

Query Parameters

• size - Icon size in pixels (default: 24)
• color - Icon color (default: #000000)
• fill - Fill color (default: none)
• strokeWidth - Stroke width (default: 2)
• animation - Animation name (spin, pulse, bounce, etc.)
• gradientPreset - Gradient preset name (sunset, ocean, fire, etc.)
• transform - Transform preset (rotate-90, flip-h, scale-2x, etc.)

Example API Calls

GET /api/icon/home?size=32&color=blue
GET /api/icon/heart?gradientPreset=sunset&animation=pulse
GET /api/icon/arrow-right?transform=rotate-45&size=24

Available Icons

The library includes 300+ icons across categories:

• UI & Navigation (home, menu, close, arrows)
• Media (play, pause, volume, camera)
• Communication (mail, phone, message)
• Files & Folders (file, folder, download, upload)
• Social Media (facebook, twitter, instagram, github)
• Business (trending, chart, briefcase, calculator)
• Weather (sun, moon, cloud, rain)
• Transportation (car, plane, bicycle, ship)
• And many more...

Animations

18 built-in animations:

• Continuous: spin, pulse, heartbeat, flash
• Entrance: fade-in, zoom-in, slide-in, rotate-in
• Attention: bounce, shake, swing, wobble, tada
• 3D Effects: flip-horizontal, flip-vertical

Gradients

10 gradient presets:

• sunset, ocean, fire, mint, purple
• rainbow, gold, silver, neon, cosmic

Plus support for custom CSS gradient strings.

Transforms

Transform presets include:

• Rotation: rotate-45, rotate-90, rotate-180, rotate-270
• Scale: scale-sm, scale-lg, scale-xl, scale-2x
• Flip: flip-h, flip-v, flip-both
• Skew: skew-x, skew-y
• Combined: tilt-left, tilt-right, perspective

Responsive Sizing

Generate responsive CSS with breakpoint-based sizing:

const responsiveCSS = generateIconCSS('home', {
  responsive: true,
  responsiveSizes: {
    base: '20px',
    sm: '24px',
    md: '28px',
    lg: '32px',
    xl: '40px'
  }
});

License

MIT

Contributing

Contributions welcome! Please read our contributing guidelines.

Support

• GitHub Issues: https://github.com/iconteam/cssicons/issues
• Documentation: https://github.com/iconteam/cssicons#readme