Eighteen icons at 24px — one family, one afternoon.
organic · mechanical · interface
Specimen
Hover for id. Names follow station vocabulary.
Size ramp
Reads at 16px, holds at 96px.
16
20
24
32
48
96
Optical forms
Rainfall ships a deliberate small form for ≤16px.
rainfall — full
Three droplets, detailed cloud. Used 20px and above.
16
24
32
48
rainfall-sm — small
Two droplets, simplified cloud. Preferred at 16px and below.
12
14
16
20
In context
Station reading card — icons carry meaning here.
Station 14 · Hook Buoy
2.41m tide
rising
Wind
14 kt
Sea
13.2°
Press
1014
Rain
0.8 mm
Updated 2 min ago
Icon roles
Swell — primary sea state, used in headers and readouts.
Anemometer — mechanical sensor; paired with wind speed.
Tide gauge — station instrument; appears in station setup.
Alert — abstract; status only, never decorative.
Favourite — toggle; filled state via color, not a second asset.
Construction
One grid, one hand, optical correction.
Viewbox
0 0 24 24
Padding
2 px all sides
Live area
20 × 20 (2 → 22)
Stroke
1.5 px, inherited from CSS
Caps / joins
round / round
Corners
radius 0.5–1 px on mechanical forms
Fill
none — focal dots only, in currentColor
Colour
currentColor only; no second dark copy
Optical
circles & wide forms pulled ~0.5 px inside live area
Nodes
≤ 24 path commands per icon
organicmechanicalinterfaceno rasterthemeable
Usage
One sprite, referenced by id.
Markup
<!-- sprite included once at document head -->
<svg class="icon" role="img" aria-label="Swell">
<use href="#i-swell"/>
</svg>
<!-- decorative instance: hidden from AT -->
<svg class="icon" aria-hidden="true" focusable="false">
<use href="#i-wind"/>
</svg>
<!-- stroke weight is themeable from CSS -->.icon { stroke-width: 1.5; }
.icon--bold { stroke-width: 2; }
Meaningful — role="img" + aria-label, or a <title> inside.Decorative — aria-hidden="true", adjacent text label carries meaning.Sizing — set width/height on the SVG; the symbol scales.