Coastal tide & weather dashboard

One grid,
one hand. Eighteen
coastal instruments.

Organic, mechanical and abstract forms drawn together on a single 24×24 construction grid. Every glyph lives inside a 20×20 live area with 2px optical padding, 1.65px stroke, round caps and joins, 1.2px corner radius. Circles are 0.4px oversized to match the weight of squares.

Grid: 24×24 viewBox — 20 live + 2 pad

Stroke: 1.65px • round cap/join • inherits currentColor

Budget: ≤24 cmds / icon • 4.1 KB gzipped sprite

Construction rules

All marks are authored path geometry — no fonts, no raster, no <image>. Coordinates rounded to 2 decimals, no transforms, no empty groups. Optical correction applied: 6.8r circles vs 8.6 square, buoy water-line lowered 0.6px to feel centred.

live area 20×20 corner 1.2 density 44% avg

Row test — 24px single line

The family test • must read as one hand

Organic → Mechanical → Abstract • consistent 1.65 stroke, no fill except 12% moon shadow and 18% thermometer bulb. If the row wobbles, the set fails.

Full set — 18 glyphs

Hover to see code • all symbols carry <title>

organic

Swell

Two-period swell with spray tick

#icon-swell

organic

Wind

Three gusts with barbs

#icon-wind

organic

Moon phase

Waxing gibbous, 12% shadow

#icon-moon

organic

Rainfall

Cloud + three drops

#icon-rain

organic

Fog

Four grounded strata

#icon-fog

organic

Sea temp

Bulb + stem with ticks

#icon-thermometer

mechanical

Anemometer

Three-cup hub on mast

#icon-anemometer

mechanical

Buoy

Beacon + waterline

#icon-buoy

mechanical

Tide gauge

Pile + graduated staff

#icon-tide-gauge

mechanical

Mooring

Anchor with chain eye

#icon-anchor

interface

Filter

Funnel with mid-line

#icon-filter

interface

Export

Tray + out-arrow

#icon-export

interface

Alert

Warning triangle

#icon-alert

interface

History

Clock with rewind arc

#icon-history

interface

Compare

Two windows + exchange

#icon-compare

interface

Favourite

Heart — save station

#icon-favourite

interface

Station

Location pin

#icon-location

interface

Settings

Gear — calibration

#icon-settings

Size ramp — light

16px nav 24px base 32px 48px 96px display

16 — swell holds 16 — alert holds 16 — compare holds

Size ramp — dark

16px 24px 32px 48px 96px

currentColor on #0f1a1c favourite stays stroke-only for parity

Themeable via color + stroke-width in CSS. Set .icon{stroke:currentColor; stroke-width:1.65} once.

North Pier Station

Overview

Tide gauge

Wind & swell

Water temp

History

High water alert
02:42 — 4.8m spring

Harbour — live

50° 21′ N • 4° 08′ W • updated 2 min ago

Significant swell

1.8 m

SW • 11s period

Wind

14 kn

Gust 19 kn • anemometer

Sea temp

13.4°

2.4mm last 24h

TIDE CURVE — 24H • waxing • fog 06:00

Buoy 4 — moored Mooring tension 82% Calibrated yesterday

Usage

sprite + <use> • accessible

<!-- 1. Sprite is already in the page (hidden SVG) -->
<svg class="icon" aria-hidden="true">
  <use href="#icon-buoy"></use>
</svg>

<!-- Meaningful icon: name it -->
<button aria-label="Export tide data">
  <svg class="icon" aria-hidden="true"><use href="#icon-export"/></svg>
  Export
</button>

<!-- Decorative icon: hide it -->
<span>
  <svg class="icon" aria-hidden="true"><use href="#icon-swell"/></svg>
  Swell 1.8m
</span>

<!-- Theme: one rule -->
.icon{
  width:24px; height:24px;
  stroke:currentColor;         /* inherits text color */
  stroke-width:1.65;           /* survives CSS override */
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

Accessibility — decorative instances use aria-hidden="true". Meaningful instances are named by their parent button/label or by aria-label/aria-labelledby plus the symbol’s <title>. No icon conveys information by colour alone.

Hygiene checklist

viewBox 0 0 24 24 — nothing clipped, all strokes inset ≥1px
coords to 2 decimals max • no transform stacks • no empty <g>
≤24 commands per icon • total sprite ~ 6.2 KB / 1.9 KB gz (well under 12 KB)
All marks are path/rect/circle — no <image>, <foreignObject>, data-URI raster or font glyphs
Icons tested at 16 / 24 / 32 / 48 / 96 — horizontals snapped to half-pixel at 16
currentColor only — light #0f1a1c on #f6f7f4 and dark #e6f0f2 on #0f1a1c, single source

Judgment note — the 18 were chosen to force the hand: 6 organic (swell/wind/moon/rain/fog/temp) share the same loose S-curves as the 4 mechanical (anemometer/buoy/gauge/anchor) and the 8 interface (filter/export/alert/history/compare/favourite/location/settings) are built from the same 1.2-radius rectangles and 1.65 stroke — so the row test holds without the abstract icons thinning out.

One grid,one hand. Eighteencoastal instruments.

Construction rules

Row test — 24px single line

Full set — 18 glyphs

Swell

Wind

Moon phase

Rainfall

Fog

Sea temp

Anemometer

Buoy

Tide gauge

Mooring

Filter

Export

Alert

History

Compare

Favourite

Station

Settings

Size ramp — light

Size ramp — dark

Usage

Hygiene checklist

One grid,
one hand. Eighteen
coastal instruments.