import { Icon } from "@elabs-ai/components-icons";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-iconsPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Icon component (from @elabs-ai/components-icons) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look Icon up before writing code: `npx -y @elabs-ai/components-cli docs Icon` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-icons is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-icons` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-icons`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Avoid
- Reaching here for a generic glyph (chevron, close, search, menu) — those come from lucide-react.
- A meaning-bearing icon with no title — an untitled Icon is decorative and hidden from assistive tech by design.
- A raw color on an icon — it inherits currentColor so it adapts per theme.
Works with
Examples
Titled
Titled icon: the title prop is set, so the icon gets role="img" and an aria-label. Assistive technology announces the provided name.
Sizes
Sizes: the same glyph rendered at 16, 24 and 32 px to demonstrate the size prop.
Color Inheritance
Color follows currentColor: wrap the icon in a container with a text color utility to confirm the stroke inherits automatically.
Stroke Widths
Stroke width: thinner (1) vs default (2) vs heavy (3).
Variants
`variant="outline" | "solid"` forces the glyph on an icon `createIcon` gave a solid counterpart (here `BookmarkIcon`), regardless of the theme's `--icon-fill` token. An icon without a solid glyph always renders outline.
Fill Token
With `variant` omitted, an icon built with a solid glyph renders both glyph groups and the theme's `--icon-fill` token (set on an ancestor via CSS, defaulted to `outline` in every theme) picks between them — a theme can flip the whole surface to solid icons without touching a single call site. The base rule lives in `themes.css`, which Storybook's preview loads.
API
Icon
| Prop | Type | Description |
|---|---|---|
size | number | string | Pixel size for both width & height. Defaults to 24. |
title | string | Accessible name. When provided the icon is exposed to AT as an image; when omitted the icon is treated as decorative (aria-hidden). |
variant | IconVariant | Force the outline or solid glyph, overriding the theme's `--icon-fill` token. Only icons created with `createIcon`'s `solid` option have a solid glyph to switch to — every other icon renders outline regardless of this prop. `Icon` used directly with raw `children` ignores it (it has no separate solid content to switch to). |
Theming
The tokens each state resolves to. Change the token and every theme follows.
| State | Token |
|---|---|
| color | currentColor (inherits the text token) |