The row test
All eighteen at their intended default size. The live area runs from 3–21 on a 24 × 24 canvas: 3px nominal padding, with small optical allowances for round forms.
Full set
Observation, instrument, and interface icons are balanced to the same visual mass rather than mechanically identical bounding boxes.
Construction rules
- Canvas: 24 × 24. Live area: 18 × 18, nominally inset 3px.
- Stroke:
var(--icon-stroke, 1.7), round caps and joins. Set--icon-strokeon any instance to tune weight. - Geometry is direct: no transforms, masks, raster assets, or glyph substitution. Corners resolve through the same rounded stroke language.
- Curves favour two or three broad movements. Small symbols simplify by removing detail, not by shrinking it.
3pxnominal padding
18pxlive drawing area
1.7pxdefault stroke
16
24
40
64
96
One source, both themes. Icons inherit their colour from their container and remain honest at 16px through 96px.
In product context
A compact station overview where icons act as wayfinding and data labels, not decoration competing with the reading.
Next high water
LIVE1.4 m
18 kt
0.8 mm
Accessible usage
<!-- Decorative in a metric label --> <svg class="icon" aria-hidden="true"><use href="#swell"/></svg> <!-- Meaningful standalone control --> <svg class="icon" role="img" aria-label="Export tide data"> <use href="#export"/> </svg>
Each sprite symbol also carries its own title; name meaningful instances in their surrounding context or with an explicit accessible label.