Lucide Icons

Overview

Lucide is a community-maintained open-source icon library that started as a fork of Feather Icons. With 1,500+ carefully crafted SVG icons and a consistent 24×24 design grid, it has become one of the most popular icon libraries in the React ecosystem. Every icon uses a clean 2px stroke style, ensuring a uniform look across your entire UI.

Key Features

• Consistent 24×24 grid with 2px stroke width
• Adjustable stroke width via prop
• TypeScript and JSDoc support
• Works with React, Vue, Svelte, and Angular
• Tree-shakeable — import only what you use
• Actively maintained with frequent updates

Installation

npm install lucide-react

Usage Example

Basic React usage with Lucide Icons

import { Home, Search, Settings, User } from 'lucide-react';

export default function App() {
  return (
    <div>
      <Home size={24} color="#6366f1" />
      <Search size={24} strokeWidth={1.5} />
      <Settings size={32} />
    </div>
  );
}

Best For