Lucide Icons
Lucide provides framework-specific packages—each icon is an individually importable component/element that renders an inline SVG. All packages are fully tree-shakeable.
Icon Naming
- Package exports use PascalCase:
Camera,ArrowRight,CircleAlert - CSS/HTML data attributes and icon font classes use kebab-case:
data-lucide="circle-alert",icon-circle-alert - Find icon names at lucide.dev/icons
Universal Props
All framework packages share the same core props:
| prop | type | default |
|---|---|---|
size | number | 24 |
color | string | currentColor |
strokeWidth | number | 2 |
absoluteStrokeWidth | boolean | false |
All packages also accept any SVG presentation attribute as a prop (e.g. fill, stroke-linejoin).
Best Practices
- Always tree-shake: Import only the icons you use. Never import
* as iconsin production bundles. - Direct icon imports (e.g.
from 'lucide-react/icons/camera') improve build performance by bypassing the package barrel. - Dynamic by name: Use
DynamicIcon(React) or a generic wrapper only when icon names come from dynamic data (e.g. a CMS). - Accessibility: Icons default to
aria-hidden="true". Addaria-labelwhen the icon conveys meaning.
Framework Reference Files
Read the relevant reference file for the framework in use:
| Framework / Environment | Package | Reference file |
|---|---|---|
| React | lucide-react | references/lucide-react.md |
| Vue 3 | lucide-vue-next | references/lucide-vue-next.md |
| Svelte 5 (or 4) | @lucide/svelte | references/lucide-svelte.md |
| SolidJS | lucide-solid | references/lucide-solid.md |
| Preact | lucide-preact | references/lucide-preact.md |
| Angular | lucide-angular | references/lucide-angular.md |
| Astro | @lucide/astro | references/lucide-astro.md |
| React Native | lucide-react-native | references/lucide-react-native.md |
| Vanilla JS / HTML | lucide | references/lucide.md |
| Static / No-framework / Node.js | lucide-static | references/lucide-static.md |
Lucide Lab (Custom / Unofficial Icons)
Lucide lab provides additional icons not in the main library. All packages support lab icons via their Icon component:
// React example — same pattern works across React, Preact, Solid, Astro, Svelte, Vue
import { Icon } from 'lucide-react';
import { coconut } from '@lucide/lab';
<Icon iconNode={coconut} color="red" size={32} />