Foundations

Icons

Lucide icons at the kit sizes and stroke, through one Icon component you can point at another set.

import { Icon } from '@alea/ui';
import { Search } from 'lucide-react';

Examples

sm 16, md 20, lg 24, or any number. Tones come from the tokens.

Strokes are 2 in the 24 px grid by default, like Lucide's default. Thinner reads lighter.

Icon takes any component with size and strokeWidth, so a set of your own drops in.

Show 13 React Aria props

An icon from the set (Lucide by default) at the kit's sizes and stroke.

Prop	Type	Default	Description
`icon`required	`IconComponent`	-	The icon, e.g. `Search` from lucide-react. The set can be swapped for any component with the same props.
`label`	`string`	-	Name it for screen readers when the icon means something on its own. Without it, the icon is hidden from them.
`size`	`IconSize`	`'md'`	sm 16, md 20, lg 24, or a number of px.
`strokeWidth`	`number`	`2`	Stroke width in the 24 px grid (it scales with the icon). Default 2, Lucide's own.
`tone`	`"danger" \| "success" \| "warning" \| "accent" \| "info" \| "current" \| "muted"`	`'current'`	Color from the tokens: currentColor (default), muted, accent, success, warning, danger, info.

Decorative icons are hidden from screen readers (aria-hidden).
Give an icon a label only when it carries meaning on its own; a button with only an icon gets its name from aria-label on the button.

Don't

The Figma kit uses the same Lucide icons as components with a size property.