Iconography | Surflane

Principles

Draw every interface symbol with Icon. Its SVGs share one grid, stroke, and color, which emoji, icon fonts, and special characters can't match.
Let the parent control own the action. The button or link takes focus, clicks, and the hit area, so a smaller icon never shrinks them.
Name the action, not the picture. Give an icon-only button a name such as "Close details", and keep icons beside text hidden.
Pair a status icon with a word. Shape and color alone don't reach every reader.
Mirror only icons that point along the reading direction. Back and forward arrows flip in right-to-left layouts, while search, play, and external link keep their shape.

Sizes and stroke

Icon takes small, default or large, like every component: 14, 16 or 20px, and 16px when omitted. Inside a Button, the icon follows the button's size instead. Icons draw in currentColor, so they follow the text color and forced colors.

Icon sizes and stroke
Token	Use	Example
`--surf-size-icon-small`	14px: dense rows and small controls
`--surf-size-icon-default`	16px, the default: inline text, menus, selects
`--surf-size-icon-large`	20px: navigation items and standalone marks
`--surf-icon-stroke-width`	1.7 viewBox units, scaled with the icon	Round caps and joins

Icon set

Icon has 43 shapes: interface actions and states, and an infrastructure set for products that run machines (server, database, disk, chip, memory, network, bolt, token, thermometer), and view controls (pin, list, grid). To add one, put it in the shared source with a name and a use, and test it.

Accessible names

An icon beside text is decorative, so Icon hides it by default. Give an icon-only button an aria-label. A Tooltip doesn't replace it. A meaningful standalone icon sets decorative={false} and a label.

Local count: 0

A standalone icon with its own name.

The button takes focus. Don't add tabIndex or a click handler to the SVG.

import { Icon, Button } from '@surflane/ui'

<Button>
  <Icon name='plus' />
  Add environment
</Button>
<Button size='icon' aria-label='Close details'>
  <Icon name='close' />
</Button>
<Icon name='info' decorative={false} label='Additional information' />

W3C — SVG icons / WAI — Functional images

Direction

Only arrow-back, chevron-back, and chevron-forward mirror when dir is rtl. Give DirectionProvider the same direction, so arrow keys in Base UI controls match.

Preview direction

BackNextExternal link

Static markers for comparing direction.

Principles

Sizes and stroke

Icon set

Accessible names

Direction

Related