Icon

Primitive for SVG icons from `src/assets/icons`.

Open Icon Playground • Open Icon in Figma

Preview

Usage

<span
  class="icon"
  style="--icon-src: url('/assets/icons/search.svg')"
  aria-hidden="true"
></span>

{% import "macros/ui.njk" as ui %}

{{ ui.icon("search") }}
{{ ui.icon("menu", "Open menu") }}

import { Icon } from "ui-foundations/react/icon";

<Icon name="search" />
<Icon name="search" label="Search" decorative={false} />
<Icon src="/assets/icons/search.svg" />

Used tokens

Token
`--icon-src`

React props

name (required without src): icon filename without .svg
src (optional): direct icon URL instead of name + folder
label (optional): accessible name for non-decorative icons
decorative (optional): defaults to true when no label is set
folder (optional): asset subfolder under assets/ (default: icons)
Size behavior: icon is square and follows the inherited line-height of the parent element (for example, 24px -> 24x24)