Icons

Every icon renders through one component, <Icon name="..." /> — there's no per-icon named export. name is typed against IconName, a union of every glyph actually drawn in the catalog, so an invalid name is a type error, not a silent blank render.

<Icon name="download" size="m" />

Icons are hand-drawn on an 8×8 pixel grid rather than imported from a general icon set: ready-made icons have rounded strokes and non-integer coordinates that read as visually foreign next to the pixel type system. size scales the fixed grid in three steps (s/m/l); fill comes from currentColor, so an icon always matches its surrounding text.

Examples

Icon fills with currentColor, so it inherits whatever text color is already active — set color on a wrapping Text/Row, not on the icon itself, to keep an icon+label pair in sync:

<Row gap="4" alignItems="center">
  <Icon name="check" size="s" />
  <Text color="strong">Verified</Text>
</Row>

Most components that accept an icon prop (Button, Input, IconButton) take an IconName directly rather than a rendered <Icon> — they own the sizing themselves so it always matches the rest of that control:

<Button icon="download">Download</Button>

Full catalog

Read straight from iconNames — the same array the type IconName is derived from, so this list can never drift out of sync with what's actually valid.

Icons outside the catalog

For a glyph the hand-drawn catalog doesn't have — a brand logo, a niche symbol — ExternalIcon adapts an icon component from react-icons (or any similarly-shaped icon set) instead, with matching size steps and an optional monochrome override:

import { FaHeart } from "react-icons/fa";

<ExternalIcon icon={FaHeart} size="m" />;