Skip to content

Icons

Syntara draws its own icons: curvy and minimal, one stroke weight, colour from the text around them. 243 of them, each a React component in @syntara/icons.

  • IconCheckA curved check, not two straight strokes meeting at a corner.

  • IconChevronRightA rounded tip. Every chevron and arrowhead shares it.

  • IconBellArc shoulders instead of corners.

  • IconSettingsScalloped, not toothed.

  • IconCreditCardBox corners of 4.5, 3.25, 2.5. Never sharp.

Drawn on a 24px grid: the dashed square is the 20px live area, the circle the keyline. At this size the 1.5 stroke scales with the drawing.

The style

Grid
24px, drawing inside the central 20
Stroke
1.5round caps and joins, from --syntara-icon-stroke
Set
243icons in 10 groups
  • 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} />

All icons

1.50

243 icons, shown at 24px with a 1.50 stroke. Click one to copy its import.

Core12

Navigation28

Status28

Objects29

Health28

Commerce28

Media28

Travel28

System28

Filled6