Iconography

Overview

A unified, legible set that scales across UI and communications.

Specifications

Families & roles

Grid: 24 x 24 px Multiples of 4, Safe drawing area 20 × 20 px

Stroke: 1 px Multiples of 2, Rounded joins/caps; optical corrections allowed.

Corner radius: Multiples of 4

Sizes: 16 px (inline), 20–24 px (UI), 32 px Multiples of 4.

Color: Slate 700 on light White or Slate 100 on dark Teal for emphasis only.

Format: SVG master (no outlines/expanded strokes) PDF (for print) PNG @2x (when vectors aren’t supported)

Usage

Align to pixel grid at rendered size; center optically within frame.
Keep metaphors consistent (e.g., patient = figure with chart icon; clinician = stethoscope).

Don’ts

Mix filled and stroked styles in the same set.
Add drop shadows or raster effects to source SVGs.

Rationale

24 px grid matches common UI targets; scales cleanly to 20/32 px.
Multiples of 2 stroke balances legibility and visual weight with our type.

Quality checks

Does the icon remain recognisable at 16 px?
Is stroke weight consistent across the set?

AllOutlinedFilled