# Icons

## Libraries

| Library | Use |
| --- | --- |
| `lucide-react` | Default UI icons (nav, actions, social) |
| `@iconify/react` | Occasional extended sets when Lucide lacks a glyph |

Do not mix many icon libraries in one view. Prefer Lucide for consistency.

## Sizing

| Context | Size |
| --- | --- |
| Inline with `text-sm` | `size-4` (16px) |
| Buttons (default) | Controlled by `--btn-icon-size` (0.875–1.25rem) |
| Icon buttons | Match button box; glyph ~20px (`size-5`) for menu |
| Cards / features | `size-5` / `size-6` |
| Decorative empty states | `size-8`–`size-10` max |

Use Tailwind `size-*` from the spacing scale. Avoid arbitrary `w-[18px]`.

## Color

- Inherit from parent text (`currentColor`) whenever possible.
- Semantic: `text-muted-foreground`, `text-primary`, `text-destructive`.
- Never hardcode icon hex fills in JSX.

## Alignment

- Pair icons with labels using flex + `gap-2` / button gaps.
- Decorative icons: `aria-hidden`.
- Standalone icon buttons: mandatory `aria-label` (or visible text).

```tsx
<Button variant="ghost" size="icon" aria-label="باز کردن منو">
  <Menu aria-hidden className="size-5" />
</Button>
```

## Stroke

Lucide defaults are fine. Do not globally remount icons with custom stroke widths that fight the set.

## Forbidden

- Emoji as UI icons.
- PNG icons for simple glyphs.
- Different visual weights in the same toolbar.

## Related

- [buttons.md](./buttons.md)
- [accessibility.md](./accessibility.md)