Lucide Icons

Overview

Lucide Icons is the premier modern open-source icon suite for the web, created as an actively maintained community fork of Feather Icons. With over 1,400+ meticulously designed vector icons on a 24x24 grid, Lucide is the default icon library of choice for modern UI ecosystems like shadcn/ui and Tailwind CSS.

Key Features

• 🎯 1,400+ Consistent Vector Icons: Designed on a 24x24 grid with uniform 2px stroke weights for visual harmony.
• 🔄 Multi-Framework Official Packages: First-class packages for React, Vue, Svelte, Angular, Solid, React Native, and vanilla JS.
• 📦 Tree-Shakeable & Lightweight: Pure SVG components that compile into minimal bundle sizes.
• 🎨 Dynamic Customization: Control size, stroke width, color, and CSS classes effortlessly.

Installation & Quick Start

# React
npm install lucide-react

# Vue
npm install lucide-vue-next

Basic Usage Example

import React from 'react';
import { Camera, ArrowRight, Heart } from 'lucide-react';

export default function IconDemo() {
  return (
    <div className="flex gap-4 items-center">
      <Camera color="red" size={24} />
      <Heart size={20} strokeWidth={2.5} />
      <ArrowRight className="text-blue-500 hover:translate-x-1 transition-transform" />
    </div>
  );
}

When to Choose

• Ideal For: Modern web applications, mobile apps, design systems, and anyone using shadcn/ui or Tailwind CSS.
• Alternatives: For solid filled icons, consider Tabler Icons or Phosphor Icons.