Foundations
Library
Technology
Brand
Iconography
We use Lucide as our icon library because it is the official icon set for ShadCN, offers over 1,000 consistent icons, is lightweight, and maintains perfect visual harmony with our design system.
Common Icons
The 20 most frequently used icons. Browse the full library at lucide.dev/icons.
Search
Home
Settings
User
Mail
Bell
Heart
Star
ChevronRight
ChevronDown
Plus
X
Check
AlertTriangle
Eye
Download
Upload
Trash2
Edit
ExternalLink
Usage
import { Search, Bell, ChevronRight } from "lucide-react";
// Inline with text (16px)
<Search className="w-4 h-4" />
// In a button (20px)
<Button><Plus className="w-5 h-5" /> Add Item</Button>
// Standalone decorative (24px)
<Bell className="w-6 h-6 text-primary" />Icon Usage Guidelines
Default size is 16px
Use w-4 h-4 for inline icons next to text. Scale to w-5 h-5 for buttons and w-6 h-6 for standalone decorative use.
Icons inherit text color
Use stroke="currentColor" (the Lucide default). Apply color through the parent's text class — text-foreground, text-muted-foreground, text-primary, etc.
Stroke width stays at 2
Lucide defaults to strokeWidth={2}. Do not change this — thinner strokes break visual consistency with shadcn components.
No filled icons
Lucide is an outline icon set. Do not mix in filled icons from other libraries. If you need a filled variant, use fill="currentColor" on a Lucide icon only when explicitly needed (e.g., a selected state).
Import individually
Import each icon by name from lucide-react (e.g., import { FileText } from "lucide-react"). Never import the entire library.
Pair with labels
Icons should always appear alongside text labels in navigation and buttons. Icon-only buttons require an aria-label for accessibility.