How do I install the Lucide Icons skill?

Run npx skillmds@latest add bighardperson/lucide-icons in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Lucide Icons skill do?

Auto-generated frontmatter It is listed under Coding & Dev Tools on SkillMD.

Is Lucide Icons safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: CAUTION, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Lucide Icons?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Lucide Icons free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Lucide Icons?

bighardperson (@bighardperson) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Lucide Icons by bighardperson — Agent Skill

Name: Lucide Icons
Author: bighardperson

File contents

Lucide Icons Skill

Search, download, and customize Lucide icons (1000+ beautiful SVG icons).

Quick Start

# Search for icons
node ./scripts/lucide.js search heart

# Download an icon
node ./scripts/lucide.js download heart --output ./icons/

# Download with React component
node ./scripts/lucide.js download heart --output ./icons/ --format svg,react

# Customize icon
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

# Download heart icon to src/icons/
lucide download heart -o ./src/icons/

# Download with custom color and size
lucide download star --color "#ffd700" --size 32 -o ./icons/

# Generate both SVG and React component
lucide download check-circle --format svg,react -o ./src/components/icons/

# Search for arrow icons
lucide search arrow --limit 20

Data Source

Icons are fetched from the official Lucide repository.

More Information

See README.md for detailed documentation.

---name: lucide-iconsdescription: Auto-generated frontmatter---# Lucide Icons SkillSearch, download, and customize Lucide icons (1000+ beautiful SVG icons).## Quick Start```bash# Search for iconsnode ./scripts/lucide.js search heart# Download an iconnode ./scripts/lucide.js download heart --output ./icons/# Download with React componentnode ./scripts/lucide.js download heart --output ./icons/ --format svg,react# Customize iconnode ./scripts/lucide.js download star --color "#ffd700" --size 32```## Commands### search `<keyword>`Search for icons by name or keyword.```bashlucide 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### listList all available icons.```bashlucide list --limit 50```### info `<icon-name>`Show detailed information about an icon.```bashlucide info heart```### refreshRefresh the icon metadata cache.```bashlucide refresh```## InstallationBefore first use, install dependencies:```bashcd ./scripts && npm install```## Output Formats### SVGStandard 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```bash# Download heart icon to src/icons/lucide download heart -o ./src/icons/# Download with custom color and sizelucide download star --color "#ffd700" --size 32 -o ./icons/# Generate both SVG and React componentlucide download check-circle --format svg,react -o ./src/components/icons/# Search for arrow iconslucide search arrow --limit 20```## Data SourceIcons are fetched from the official [Lucide repository](https://github.com/lucide-icons/lucide).## More InformationSee [README.md](./README.md) for detailed documentation.

Frequently asked questions

Lucide Icons