lucide-react

Beautiful, consistent open-source icon library for React — 1,500+ pixel-perfect SVG icons as individual tree-shakeable components.

lucide-react

React

Beautiful, 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

bash
npm install lucide-react

Usage Example

tsx
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