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