Lucide for React
Lucide provides a React component library for using icons in your applications. Each icon is available as a standalone component that renders an optimized inline SVG.
List of features:
- Easy to use – Import icons and use them directly in JSX.
- Customizable – Adjust size, color, stroke width, and other properties via props.
- Tree-shakable – Only the icons you import are included in your final bundle.
- TypeScript support – Fully typed components for a better developer experience.
Overview
Getting startedLearn how to get started with Lucide for React.Migration from v0Learn how to migrate from v0 to v1 of Lucide.Migration from React FeatherLearn how to migrate from `react-feather` to `lucide-react`
Basics
ColorAdjust the color of your iconsSizingAdjust the size of your iconsStroke widthAdjust the stroke width of your icons
Advanced
TypescriptAll exported types and how to use themAccessibilityMaking your icons accessibleGlobal stylingApply global styles to all iconsWith Lucide LabUsing lucide-lab with lucide-reactFilled iconsUsing filled icons in lucide-reactAliased NamesUsing aliased icon namesCombining iconsCombine multiple icons into oneDynamic icon componentDynamically import icons as needed