Skip to content

Icon

A Lucide icon drawn as inline SVG, in the current text colour. Decorative unless it has a label.

PrimitivesServer-rendered

Examples

Sizes

16 in controls and navigation, 14 inline with 13px text, 20 in empty states. Every name is listed and searchable on the icons page.

Light
Dark
Example
<Icon name="server" size={12} />
<Icon name="server" size={14} />
<Icon name="server" size={16} />
<Icon name="server" size={20} />
<Icon name="server" size={24} />

Colour follows the text

The stroke is currentColor, so set the colour on the parent, not the icon.

Light
Plugged in Connected Auth failed
Dark
Plugged in Connected Auth failed
Example
<Text as="span" tone="ink-2"><Icon name="plug" /> Plugged in</Text>
<Text as="span" tone="success"><Icon name="circle-check" /> Connected</Text>
<Text as="span" tone="danger"><Icon name="alert-circle" /> Auth failed</Text>

Meaningful icons

When the icon alone carries information, give it a label. It becomes role="img".

github-mcp
Example
<Text as="span">
  github-mcp <Icon name="lock" size={14} label="Requires authentication" />
</Text>

Usage

Usage
import { Icon } from '@switchboard/ui'

<Icon name="server" />

Props

Every component also takes mix, for css() and mixins applied after its own style.

Icon

Icon props
PropTypeDefaultDescription
name*IconName–Which icon. Only names in the set are valid; see /design/icons.
size12 | 14 | 16 | 20 | 2416Width and height in px.
labelstring–Accessible name. Without one the icon is aria-hidden.
mixMix–Extra css() or mixins, applied after the icon style.

Also accepts every <svg> attribute except children and innerHTML.

Accessibility

  • Without `label` the SVG gets aria-hidden="true", so screen readers skip it; the text next to it names the thing.
  • With `label` it gets role="img" and aria-label.
  • focusable="false" keeps old browsers from putting the SVG in the tab order.
  • Inside an icon-only control, name the control (IconButton `label`), not the icon.

Guidance

Do

  • Pair an icon with a word in navigation and buttons.
  • Match the size to the text beside it: 14 with 13px, 16 with 14px.

Don’t

  • Add icons to every row or heading for decoration.
  • Let an icon colour carry state on its own; say the state in text too.
  • Paste SVG from elsewhere; add the icon to the set instead.