Icon

Mask icons — host apps serve matching SVGs at /icons/{name}.svg.

Preview

Live

<span class="ui-icon ui-icon--send" aria-hidden="true"></span>
<span class="ui-icon ui-icon--edit" aria-label="Edit"></span>

Variants

Common set

Subset of the Caustica Design icon names.

In a button

Pair with .btn-with-icon / .btn-icon.

Accessibility

  • Decorative icons default to aria-hidden; add aria-label when the icon is the only name.
  • Prefer adjacent visible text for actions; icon-only controls need an explicit accessible name.
  • Host must serve SVGs at /icons/{name}.svg matching ICON_NAMES.

API

HTML classes

Class Description
.ui-icon Mask icon base.
.ui-icon--{name} Icon glyph (e.g. --send, --filter).

React props

From src/core/Icon.tsx — name must be an IconName.

Prop Type Default Description
name IconName — Required icon id from ICON_NAMES.
className string — Merged onto .ui-icon.
aria-label string — If set, aria-hidden is not forced.