lucide-react
Beautiful, consistent open-source icon library for React — 1,500+ pixel-perfect SVG icons as individual tree-shakeable components.
lucide-react
ReactBeautiful, consistent open-source icon library for React — 1,500+ pixel-perfect SVG icons as individual tree-shakeable components.
Fit
Bundle (gzip)
158.1 kB
630.7 kB raw
Install size includes transitive dependencies. Bundle size is gzipped browser payload.
Freshness
The Problem
Icon libraries often ship as a single large bundle, bloating your JavaScript even when you only use a handful of icons. Custom SVGs require manual copy-pasting and lose consistency across your app.
What It Does
Lucide-React exports each icon as an individual React component. Tree-shaking ensures only the icons you import end up in your bundle. All icons accept standard SVG props (size, color, strokeWidth) for consistent customization.
Installation
npm install lucide-reactUsage Example
import { Search, Bell, Settings, ChevronRight } from 'lucide-react';
export function Toolbar() {
return (
<div className="flex gap-2">
<Search size={20} className="text-gray-500" />
<Bell size={20} strokeWidth={1.5} />
<Settings size={20} color="blue" />
<ChevronRight size={20} />
</div>
);
}Related packages
Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.
@dnd-kit/coreReactModern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.
embla-carousel-reactReactLightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.
flagsReactProvider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.
framer-motionReactProduction-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.