Iconography
Icons are provided by Lucide React, a clean, consistent, open-source icon library with 1,000+ icons. All icons are SVG-based, tree-shakeable, and render at the current text color.
Library
This design system uses Lucide React (lucide-react). Icons are imported individually for tree-shaking and render as inline SVGs that inherit the current color and can be sized via className.
Usage
// Import
import { Search } from 'lucide-react';
// Default (24×24)
<Search />
// Custom size
<Search className="h-4 w-4" />
// With color
<Search className="h-5 w-5 text-muted-foreground" />
// In a Button
<Button iconLeft={<Search />}>Search</Button>
import { Search } from 'lucide-react';
// Default (24×24)
<Search />
// Custom size
<Search className="h-4 w-4" />
// With color
<Search className="h-5 w-5 text-muted-foreground" />
// In a Button
<Button iconLeft={<Search />}>Search</Button>
Sizing
16px
20px
24px (default)
32px
Stroke Width
1
1.5
2
2.5
Icon Reference
A curated set of commonly used icons, grouped by category. Icons labeled in use are currently used on this site.
Navigation
ArrowLeftin use
ArrowRightin use
ChevronDownin use
ChevronLeftin use
ChevronRightin use
ChevronUpin use
ChevronsUpDownin use
ExternalLink
Home
Menuin use
MoreHorizontalin use
MoreVertical
Actions
Checkin use
Copyin use
Download
Filter
LogOut
Pencil
Plus
RefreshCw
Searchin use
Settings
Share
Trash2
Upload
Xin use
Communication
Mailin use
MessageSquare
Media & Content
Eye
EyeOff
FileText
Image
Layers
Status & Feedback
AlertCirclein use
Circlein use
Dotin use
Heart
Info
Loader2
Lock
Star
Terminalin use
Text Formatting
AlignCenter
AlignLeft
AlignRight
Bold
Italic
Underline
Brand & Social
Githubin use
Globein use
Linkedinin use
Youtubein use
Utility
BookOpenin use
Calculator
Calendarin use
CreditCard
GripVerticalin use
User
Guidelines
- Use h-4 w-4 for inline/button icons and h-5 w-5 for standalone icons.
- Always pair icon-only buttons with an
aria-labelor Tooltip for accessibility. - Use the default stroke width (2) for consistency. Only adjust for decorative or display use.
- Avoid mixing icon libraries. Stick to Lucide for visual consistency.
- Import icons individually — Lucide is fully tree-shakeable, so unused icons won't bloat your bundle.