Icon
Stable
No usage guidance yet. Add packages/react/src/components/Icon/Icon.docs.json to fill this page. Props and tokens below are generated from the code.
No usage guidance yet. Add packages/react/src/components/Icon/Icon.docs.json to fill this tab.
Anatomy and tokens
Read from packages/react/src/components/Icon/Icon.module.css at build time. Every value is a token: open one to see its
alias chain in both themes.
- icon
.icon - xs
.xs - sm
.sm - md
.md - lg
.lg
Props
Parsed from the TypeScript types in packages/react/src/components/Icon/Icon.tsx, so this table cannot drift from the
code.
| Prop | Type | Default | Description |
|---|---|---|---|
icon required | LucideIcon | none | A Lucide icon component, for example `import { GitBranch } from 'lucide-react'`. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' | Token size: xs 12, sm 16, md 20, lg 24. Default `sm`, the size used inside controls. |
label | string | none | Accessible name. Omit for decorative icons next to text (they are hidden from assistive tech). |
Playground
Icon has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation .
Changelog
- New
Base UI foundation: components now wrap `@base-ui/react` for behavior and accessibility. Adds `ThemeProvider` (theme, brand and density scope, passed to portaled overlays), `Icon` (Lucide with token sizes), `VisuallyHidden`, and global base styles at `@bridge-ds/react/styles.css`.
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
- New
Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026