Icons

Ready

Icon library using Lucide React - beautiful, consistent open-source icons

Icon Sizes

Different sizes for various use cases

12px (w-3 h-3)
16px (w-4 h-4)
20px (w-5 h-5)
24px (w-6 h-6)
32px (w-8 h-8)
48px (w-12 h-12)

Icon Colors

Icons adapt to text color classes

slate-900
slate-600
indigo-600
teal-600
emerald-600
amber-600
rose-600

Common Icons

Most frequently used icons

Check
X
Plus
Minus
Search
Settings
User
Users
Mail
Bell
Home
FileText

Navigation Icons

Arrows, chevrons, and menu icons

ChevronRight
ChevronLeft
ChevronUp
ChevronDown
ArrowRight
ArrowLeft
ArrowUp
ArrowDown
Menu
MoreVertical
MoreHorizontal
ExternalLink

AI & Intelligence Icons

Icons for AI-powered features

Bot
Brain
Sparkles
Lightbulb
Wand2
Target
Zap
TrendingUp

File & Action Icons

Files, folders, and common actions

Folder
FileText
Image
Download
Upload
Copy
Save
Edit
Trash2
Share2
Link
Paperclip

Status & Feedback Icons

Alerts, info, success, and error states

AlertCircle
AlertTriangle
Info
HelpCircle
Check
X
Lightbulb
Sparkles
Star
Heart
Award
Flag

Media & Communication Icons

Playback, recording, and messaging

Play
Pause
SkipBack
SkipForward
Volume2
VolumeX
Camera
Mic
Video
Image
Phone
MessageSquare

Business & Analytics Icons

Charts, finance, and e-commerce

TrendingUp
TrendingDown
BarChart2
PieChart
Activity
DollarSign
CreditCard
ShoppingCart
ShoppingBag
Gift
Package
Tag

Technology & Devices Icons

Code, hardware, and connectivity

Code
Terminal
Database
Server
Cpu
HardDrive
Smartphone
Tablet
Laptop
Monitor
Wifi
Bluetooth

Usage

How to use Lucide icons in your components

// Import icons from lucide-react
import { Settings, User, Bell } from 'lucide-react'

// Basic usage
<Settings className="w-5 h-5 text-slate-600" />

// With colors
<User className="w-6 h-6 text-indigo-600" />
<Bell className="w-5 h-5 text-rose-600" />

// Different sizes
<Settings className="w-3 h-3" />  // 12px - Small icons
<Settings className="w-4 h-4" />  // 16px - Default UI icons
<Settings className="w-5 h-5" />  // 20px - Medium icons
<Settings className="w-6 h-6" />  // 24px - Large icons
<Settings className="w-8 h-8" />  // 32px - Extra large

// In buttons
<button className="flex items-center gap-2">
  <Plus className="w-4 h-4" />
  Add Item
</button>

// With stroke width
<Star className="w-6 h-6" strokeWidth={1.5} />
<Star className="w-6 h-6" strokeWidth={2.5} />

// Filled variant
<Heart className="w-6 h-6 fill-rose-500 text-rose-500" />

Features

  • 1300+ icons - Comprehensive icon library from Lucide
  • React components - Native React components with TypeScript support
  • Customizable - Adjustable size, color, and stroke width
  • Consistent design - All icons share the same 24x24 grid
  • Tree-shakeable - Only import icons you use
  • Open source - Free to use with MIT license
  • Browse all icons - Visit lucide.dev