Lucide — Beautiful & Consistent Icon Toolkit

What Lucide Does

• 1500+ icons — consistent minimalist style
• Customizable — size, color, strokeWidth via props
• Tree-shakeable — only imported icons ship
• Framework packages — React, Vue, Svelte, Solid, Angular, Web Components, React Native, Preact, Ember, Astro
• Icon font — optional CSS/font version
• Figma plugin — drop icons directly into designs
• SVG source — use raw SVG files if you prefer

Architecture

Single source: SVG files on a 24x24 grid. Build pipeline generates framework-specific packages. Each icon is a component that accepts size, color, strokeWidth, and any SVG prop.

Self-Hosting

Client library — ships in your bundle.

Key Features

• 1500+ icons
• Consistent 24x24 design grid
• Framework packages for 10+ frameworks
• Tree-shakeable imports
• Customizable stroke, size, color
• Web-optimized SVGs
• Free forever (ISC)
• Active community PRs

Comparison

FAQ

Q: What's the difference between Lucide and Feather? A: Lucide is a community fork of Feather (the original project stalled). It's compatible with all Feather icons and adds 1200+ more.

Q: How do I bundle only the icons I use? A: Use named imports: import { Home } from "lucide-react". Your bundler will tree-shake automatically.

Q: Can I customize colors? A: Yes. Pass a color prop, or use CSS currentColor (the default is stroke="currentColor").

Sources & Credits

• Docs: https://lucide.dev
• GitHub: https://github.com/lucide-icons/lucide
• License: ISC