# Icon

Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.

> Primitive · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add icon
```

## Import

```tsx
import { Icon } from "@/components/ui/icon/icon";
```

## Variants

- `gallery` — Gallery: `npx @lumioui/cli add icon-gallery`
- `sizes` — Sizes: `npx @lumioui/cli add icon-sizes`

## Props

### Glyph

| Prop | Type | Notes |
| --- | --- | --- |
| `size?` | `number` | Rendered size in pt — the 24 grid scales to it. Default 24. |
| `color?` | `string` | — |
| `strokeWidth?` | `number` | Stroke width on the 24 grid — default 2. |
| `fill?` | `string` | Fill colour for the glyph's shapes; "none" (default) keeps it a stroke icon. |

### Icon

| Prop | Type | Notes |
| --- | --- | --- |
| `name?` | `IconName` | Glyph name — e.g. "check", "chevron-down", "star". |
| `color?` | `keyof ColorTokens | ColorValue` | Color: a theme token ("foreground", "mutedForeground", "primary", …) or hex. |
| `filled?` | `boolean` | Fill the glyph (heart, star, bookmark). |
| `strokeWidth?` | `number` | Stroke width — default 2. |
| `size?` | `"sm" | "md" | "lg" | "xl"` | Size preset. |
| `className?` | `string` | — |
| `textClassName?` | `string` | Extra classes for the glyph text (when children is a string). |
| `accessibilityLabel?` | `string` | Icons are decorative by default (hidden from screen readers). Provide a label for a standalone semantic icon — it is exposed with role "image". |
| `children?` | `React.ReactNode` | Custom element (e.g. your own SVG) — overrides `name`. |

## Icons rendered

- `check` — /icons.html?i=check
- `star` — /icons.html?i=star

Source: https://lumioui.com/components/icon