Icons

The style

Grid

24px, drawing inside the central 20

Stroke

1.5round caps and joins, from --syntara-icon-stroke

Set

243drawings in 11 groups, 480 components with the duotone twins

• Curves over corners. An arc or a curve wherever a corner would do: rounded chevron tips, arc shoulders and handles, scalloped mechanical shapes.
• Only the strokes you need. No inner detail lines, decorative ticks or shading. Most icons are three paths or fewer.
• Colour follows the text. Every icon draws in currentColor and sizes to 1.25em, so it matches the label beside it.
• Quiet by default. Icons are aria-hidden unless you give one an aria-label; then it’s announced as an image.

Why Syntara draws its own instead of using an off-the-shelf set: ADR-014. The full spec sits at the top of create-icon.tsx.

Usage

import { IconBell } from '@syntara/icons';

// Decorative next to text (the default): hidden from assistive tech, sized to the text.
<Button><IconBell aria-hidden /> Notify me</Button>

// On its own, it needs a name.
<IconBell aria-label="Notifications" size={20} />

Duotone

Every outline icon has a duotone twin: the same drawing, untouched, with a tint layer painted behind it. The tint isn’t drawn a second time — it’s derived from the outline’s own subpaths, so the two layers can’t drift apart. 237 twins, named Icon<Name>Duotone.

One token controls the second tone: --syntara-icon-tint, defaulting to color-mix(in oklab, currentColor 16%, transparent). So duotone still follows the text colour like every other icon — it works on any surface and inside a solid button with no setup — and a theme, a tenant or one component can set the token to make the tint a real colour.

import { IconBellDuotone } from '@syntara/icons';

// Works with no setup: the tint is the text colour at 16%.
<IconBellDuotone size={32} />

/* Make the second tone your own — one token, anywhere above the icon. */
.promo { --syntara-icon-tint: var(--syntara-color-accent-muted-bg); }

Duotone is a fill style, so 54 of the 237 have no tint: a check, an arrow, a chevron and the other bare strokes enclose no area, and there is nothing to fill. Their twins exist and render exactly like the outline, so you can move a whole product to duotone in one import change without a missing export. Why the set gained a second style, and what was rejected: ADR-036.

All icons