Icons
Foundation
Lucide
Icon library using Lucide React - beautiful, consistent open-source icons. Over 1300 icons with customizable size, color, and stroke width.
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-reactimport { 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-primary-default" /><Bell className="w-5 h-5 text-danger-default" />
// 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
Icon library capabilities
- 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 at lucide.dev