Icon

Styled SVG icon from the icondata catalog at 1em by default, with fill tracking foreground theme tokens via currentColor.

  • Decorative or supplementary glyphs beside labels, in buttons, menus, and status rows
  • Primary visuals in empty states and headers when sized above 1em
  • Icon-only controls when paired with an accessible name on a native wrapper
  • Import an icon from icondata (for example icondata::AiHomeOutlined).
  • Render <Icon icon=... /> beside text or inside Button via its icon prop.
  • Set width / height when the glyph should not inherit 1em from surrounding text.
  • Use BaseIcon only when composing a custom wrapper that should not add display: inline-block.
  • For clickable icons, pass on_click and put aria-label on a wrapping element (see clickable example).
Default beside label

1em size and currentColor inherit text size and foreground from the parent line.

Home
Size matrix

Compare default 1em with explicit pixel sizes for emphasis tiers.

1em
16px
24px
32px
Color inheritance matrix

The same glyph adopts each parent's foreground color via currentColor.

Brand foreground
Danger foreground
Neutral secondary
Style override

Pass inline style for one-off opacity or color overrides on the SVG.

Clickable control

Pair on_click with aria-label on a native wrapper for icon-only actions.

Base vs core

BaseIcon is headless; Icon adds display: inline-block for predictable alignment in text rows.

BaseIcon
Icon
In button context

Prefer the Button icon prop so labeling and hit targets stay consistent.