Tide & weather station

Signals from the shore.

A small, steady icon vocabulary for reading the coast: natural forces, station hardware, and the controls that bring their measurements together.

24 × 24 viewBox 20 × 20 live area 2 units clear padding 1.7 stroke weight Round caps & joins

The set

Eighteen single-purpose symbols, drawn on the same quiet, open line.

Icons shown at native 24 px

Swell

Wind

Moon phase

Rainfall

Anemometer

Buoy

Tide gauge

Mooring anchor

Filter

Export

Alert

History

Compare

Favorite

Sun

Temperature

Compass

Pressure

Scale & theme

One outline form stays clear from a compact control to a display-size mark.

Size ramp · swell

16 px

24 px

32 px

48 px

64 px

Same drawing · dark surface

Night conditionsColor inherits from the surrounding text.

In context

A station overview uses the same symbols for readings, actions, and alerts.

North Head buoyStation 04 · Updated 2 min ago

Tide height

2.84m

Rising

06:0009:0012:0015:0018:00

Wind18 km/h

Air temp16.2 °C

Pressure1013 hPa

Use the sprite

Reference a symbol with <use>. Decorative marks stay out of the accessibility tree; meaningful ones get a name.

Decorative instance

<svg class="icon" aria-hidden="true">
  <use href="#i-swell"></use>
</svg>

Meaningful instance

<svg class="icon" role="img"
     aria-label="Wind speed">
  <use href="#i-wind"></use>
</svg>

Grid & padding24 × 24 viewBox; live area spans 2–22 on each axis, leaving 2 units of clear space.

One stroke1.7 units, round caps and joins. Set --icon-stroke to tune weight with CSS.

Optical balanceOpen forms share the same visual footprint; compact circular marks are optically inset.

Small-size clarityDetails are kept broad and sparse so the same authored form remains legible at 16 px.