A 24-point stroke set for a coastal tide and weather station. Organic water, mechanical kit, and the abstract chrome of a dashboard — drawn to sit in a single row without the weight shifting under you.
The hard test. All eighteen at 24px, one line, no labels. If they were sourced from different sets, it shows here.
Sixteen pixels is the honest size — the set is drawn to hold there, not only on a specimen at 24. Ninety-six shows whether the joints were authored or traced.
Every mark is currentColor. Stroke width lives in CSS, not locked inside the symbol, so a station can thicken a toolbar without redrawing the sprite.
Optical correction is applied where the grid lies. A compass ring is 16.4 across, not 16 — a mathematically equal circle sits small beside a square. Hubs and the alert stop are the only solid fills; they are pivots, not a second drawing language.
Decorative marks are hidden from assistive technology. Controls that are only an icon are named on the control, not on the path.
Sprite once. Instance with <use>. Paint from CSS. Do not set stroke on the symbol geometry — it must inherit so weight can move.
<svg class="icon" aria-hidden="true"> <use href="#i-swell"/> </svg>
If the icon is the only content of a control, name the control. If the icon carries its own meaning and has no parent name, give the svg a title.
<button aria-label="Gale warning">
<svg class="icon" aria-hidden="true">
<use href="#i-alert"/>
</svg>
</button>