Lucide Icons

Lucide Icons Skill

Search, download, and customize Lucide icons - a beautiful & consistent icon library with 1000+ icons.

Features

• Search icons by name or keyword with fuzzy matching
• Download icons as SVG files
• Generate TypeScript React components with full type safety
• Customize icons (color, size, stroke width)
• Metadata caching for fast searches
• Works offline with local cache (optional lucide-static package)
• Multiple data sources with automatic fallback

Quick Start

# Search for icons
lucide search heart

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

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

# Customize icon
lucide download star --color "#ffd700" --size 32 --stroke-width 1.5

Installation

Before first use, install dependencies in the skill's scripts directory:

cd scripts && npm install

Optional - For offline support:

npm install lucide-static

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, or 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
• --json - Output as JSON

Examples:

# Basic download
lucide download heart --output ./icons/

# With React component
lucide download heart --format svg,react --output ./src/icons/

# Customized icon
lucide download star --color "#ffd700" --size 32 --stroke-width 1.5

# Overwrite existing
lucide download check --output ./icons/ --overwrite

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 ~/.codebuddy/skills/lucide-icons/scripts && npm install

Output Formats

SVG

Standard SVG file with Lucide's default styling:

• 24x24 viewBox
• Stroke-based icons
• currentColor for easy CSS styling
• Customizable color, size, and stroke-width

Example output (heart.svg):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
</svg>

React (TypeScript)

Generates a fully-typed React functional component with:

• TypeScript interfaces for props
• Customizable size, color, strokeWidth
• className and style support
• Accessibility props (aria-label)
• onClick handler support
• Full type safety

Example output (HeartIcon.tsx):

import React from 'react';

export interface HeartIconProps {
  size?: number | string;
  color?: string;
  strokeWidth?: number | string;
  className?: string;
  style?: React.CSSProperties;
  'aria-label'?: string;
  onClick?: React.MouseEventHandler<SVGSVGElement>;
}

export const HeartIcon: React.FC<HeartIconProps> = ({
  size = 24,
  color = 'currentColor',
  strokeWidth = 2,
  className,
  style,
  'aria-label': ariaLabel,
  onClick,
  ...props
}) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-label={ariaLabel}
     
      role={ariaLabel ? 'img' : undefined}
      aria-hidden={!ariaLabel}
      {...props}
    >
      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
    </svg>
  );
};

HeartIcon.displayName = 'HeartIcon';
export default HeartIcon;

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

Customization Options

Color

Any valid CSS color value:

• Named colors: red, blue, green
• Hex: #ff0000, #f00
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)
• CSS variables: var(--primary-color)
• Default: currentColor (inherits from parent)

Size

Any number (interpreted as pixels):

• 24 (default)
• 16, 20, 32, 48, etc.

Stroke Width

Any number:

• 2 (default)
• 1, 1.5, 2.5, 3, etc.

Data Sources

The skill uses multiple data sources in order of preference:

1. lucide-static (npm package) - Fastest, works offline
2. GitHub Raw Content - No rate limiting, no authentication needed
3. GitHub API - Fallback for icon listing

Caching

• Icon metadata is cached in the skill's cache/ directory
• Cache TTL: 24 hours
• Use lucide refresh to force cache update
• Works offline with cached data

Error Handling

The skill handles common errors gracefully:

• Icon not found: Suggests similar icons
• File exists: Prompts to use --overwrite
• Permission denied: Shows clear error message
• Network errors: Falls back to cached data or local package

Troubleshooting

"Cannot find module" errors

Make sure dependencies are installed:

cd scripts && npm install

Rate limiting from GitHub

Install lucide-static for local icon access:

npm install lucide-static

Outdated icon list

Refresh the cache:

lucide refresh

Data Source

Icons are fetched from the official Lucide repository.

More Information

See README.md for detailed documentation.