1# Icons
2 
3**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
4 
5---
6 
7## Icons in Button use data-icon attribute
8 
9Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
10 
11**Incorrect:**
12 
13```tsx
14<Button>
15  <SearchIcon className="mr-2 size-4" />
16  Search
17</Button>
18```
19 
20**Correct:**
21 
22```tsx
23<Button>
24  <SearchIcon data-icon="inline-start"/>
25  Search
26</Button>
27 
28<Button>
29  Next
30  <ArrowRightIcon data-icon="inline-end"/>
31</Button>
32```
33 
34---
35 
36## No sizing classes on icons inside components
37 
38Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
39 
40**Incorrect:**
41 
42```tsx
43<Button>
44  <SearchIcon className="size-4" data-icon="inline-start" />
45  Search
46</Button>
47 
48<DropdownMenuItem>
49  <SettingsIcon className="mr-2 size-4" />
50  Settings
51</DropdownMenuItem>
52```
53 
54**Correct:**
55 
56```tsx
57<Button>
58  <SearchIcon data-icon="inline-start" />
59  Search
60</Button>
61 
62<DropdownMenuItem>
63  <SettingsIcon />
64  Settings
65</DropdownMenuItem>
66```
67 
68---
69 
70## Pass icons as component objects, not string keys
71 
72Use `icon={CheckIcon}`, not a string key to a lookup map.
73 
74**Incorrect:**
75 
76```tsx
77const iconMap = {
78  check: CheckIcon,
79  alert: AlertIcon,
80}
81 
82function StatusBadge({ icon }: { icon: string }) {
83  const Icon = iconMap[icon]
84  return <Icon />
85}
86 
87<StatusBadge icon="check" />
88```
89 
90**Correct:**
91 
92```tsx
93// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
94import { CheckIcon } from "lucide-react"
95 
96function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
97  return <Icon />
98}
99 
100<StatusBadge icon={CheckIcon} />
101```
102