| name | lucide-icons |
| description | Auto-generated frontmatter |
Lucide Icons Skill
Search, download, and customize Lucide icons (1000+ beautiful SVG icons).
Quick Start
node ./scripts/lucide.js search heart
node ./scripts/lucide.js download heart --output ./icons/
node ./scripts/lucide.js download heart --output ./icons/ --format svg,react
node ./scripts/lucide.js download star --color "#ffd700" --size 32
Commands
search <keyword>
Search for icons by name or keyword.
lucide search heart --limit 10
download <icon-name>
Download a single icon with optional customization.
Options:
-o, --output <dir> - Output directory (default: current directory)
-f, --format <formats> - Output formats: svg, react (default: svg)
-c, --color <color> - Icon color (default: currentColor)
-s, --size <size> - Icon size in pixels (default: 24)
-w, --stroke-width <width> - Stroke width (default: 2)
--overwrite - Overwrite existing files
list
List all available icons.
lucide list --limit 50
info <icon-name>
Show detailed information about an icon.
lucide info heart
refresh
Refresh the icon metadata cache.
lucide refresh
Installation
Before first use, install dependencies:
cd ./scripts && npm install
Output Formats
SVG
Standard SVG file with optional customization (color, size, stroke-width).
React (TypeScript)
Generates a fully-typed React component with props:
size - Icon size
color - Icon color
strokeWidth - Stroke width
className - CSS classes
style - Inline styles
aria-label - Accessibility label
Examples
lucide download heart -o ./src/icons/
lucide download star --color "#ffd700" --size 32 -o ./icons/
lucide download check-circle --format svg,react -o ./src/components/icons/
lucide search arrow --limit 20
Data Source
Icons are fetched from the official Lucide repository.
More Information
See README.md for detailed documentation.