Eighteen glyphs for stations that watch the sea.

One family across three kinds of form — organic readings, mechanical instruments and abstract interface actions — drawn on a single 24-unit grid with one stroke, one cap, one afternoon.

Grid 24 × 24 Live area 20 × 20 Stroke 1.5px Caps / joins round Budget ≤ 24 commands Paint currentColor Sprite < 3 KB

01 — The row

All eighteen at 24px, one line

The family test: organic, mechanical and interface marks side by side. If one glyph reads heavier, lighter or foreign here, it goes back to the drawing board.

· ·

02 — Library

The set

Toggle Construction grid in the header to inspect any glyph against the unit grid and the 2-unit live-area padding.

Organic — the readings

Swell#i-swell

Wind#i-wind

Moon phase#i-moon

Rainfall#i-rain

Sunrise#i-sunrise

Temperature#i-temp

Mechanical — the instruments

Anemometer#i-anemometer

Buoy#i-buoy

Tide gauge#i-gauge

Mooring#i-mooring

Barometer#i-barometer

Compass#i-compass

Interface — the actions

Filter#i-filter

Export#i-export

Alert#i-alert

History#i-history

Compare#i-compare

Favourite#i-star

03 — Construction

One grid, one hand

Barometer on the construction grid. The dial is Ø17 units — one unit wider than the square interface forms — because a circle drawn to the same nominal size as a square reads smaller. Round forms overshoot; nobody measures, everybody sees.

GridviewBox="0 0 24 24" · 20×20 live area · 2-unit padding, dashed. Nothing but optically-overshooting rounds may cross it.
Stroke1.5px, centred on whole or half units. Round caps and round joins everywhere — corner radius comes from the join, never from drawn fillets.
TerminalsStrokes end horizontal or vertical where the form allows. Dots (alert, thermometer) are Ø≈2.6 stroked circles, so they fatten with stroke width.
DensityOne primary silhouette, one tier of secondary detail. Water always sits on the same baseline (y≈16–19); verticals centre on x=12 unless the form forbids it.
Economy≤24 path commands per symbol, coordinates to 0.01, no transforms, no groups, no fills. This page’s sprite is the ship artefact.
PaintSymbols carry zero paint attributes. fill, stroke and stroke-width inherit from CSS through <use>, so colour and weight are themed from outside.

04 — Scale

16px to 96px

Strokes hold from chip size to splash size. At 96px the round joins and the curl of the swell do the talking; at 16px two symbols swap to reduced forms.

Tide gauge, 16px form. Four staff ticks collapse to two longer ones; the wavelets open up. #i-gauge-16

Rainfall, 16px form. Three streaks become two so the cloud keeps its air. #i-rain-16

05 — Theming

One sprite, any surface

Every mark is currentColor: the set takes the text colour of wherever it lands. Stroke weight is ordinary CSS, inherited into the shadow of <use> — set it per context, not per asset.

Light · #15212e on #f8fafc Swell 2.4 m · rising, period 11 s

Dark · #e4ecf4 on #0d1420 Swell 2.4 m · rising, period 11 s

1.25 1.5 2.0

06 — In context

Station card

A plausible fragment of the dashboard the set was drawn for: thirteen of the eighteen glyphs at working size, doing real jobs.

Porthcurno

STN-042 · 50.21°N 5.66°W · updated 14:05

14 kt WSW 2.4 m · 11 s 0.8 mm 11.2 °C 1013 hPa

High 14:32 · 5.1 m
rising · low 20:47

Small-craft advisory until 18:00 — WSW gusts 25 kt

Icon-only controls — the favourite, export, filter and compare buttons carry aria-label; the svg inside is aria-hidden.
Standalone meaning — the moon glyph has no text beside it, so it is exposed as role="img" with its own label.
Decorative in sentences — the advisory icon repeats what the text says, so it is hidden from assistive technology.
One paint source — chips mute their icons via color, the advisory tints amber, the sparkline takes the accent. Same symbols throughout.

07 — Usage

Drop-in

The sprite at the top of this document is the one rendering this page — view source and lift it verbatim.

<!-- sprite: include once per page -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
  <symbol id="i-swell" viewBox="0 0 24 24">
    <title>Swell</title>
    <path d="M3 14.4C6.5 9 11 8.6 13.7 11.9 …"/>
  </symbol>
  <!-- …19 more symbols… -->
</svg>

<!-- decorative: hidden from assistive tech -->
<svg class="icon" aria-hidden="true"><use href="#i-wind"/></svg>

<!-- meaningful: the icon is the content -->
<svg class="icon" role="img" aria-label="Gale warning">
  <use href="#i-alert"/>
</svg>

/* the whole paint system: symbols carry no
   fill/stroke attributes, so all of this
   inherits through <use> */
.icon {
  width: 24px; height: 24px;  /* or 1em to follow type */
  fill: none;
  stroke: currentColor;       /* light or dark, free */
  stroke-width: 1.5;          /* override per context */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* denser toolbar? heavier stroke, same sprite */
.toolbar .icon { stroke-width: 1.25; width: 20px; height: 20px; }

At 16px and below, reference #i-gauge-16 and #i-rain-16 in place of their full forms. All twenty symbols live in the same sprite and share the same paint rules.