Harbour — Tide & Weather System

Eighteen forms. Three kinds of subject. One hand.

A hand-drawn icon family for coastal monitoring dashboards. The subject deliberately mixes organic, mechanical, and abstract interface shapes — the test of any icon system is keeping them feeling like they were drawn on the same afternoon.

Grid24 × 24 Live area20 × 20 Padding2 Stroke1.5 · round Icons18 + 2 sm

The Set

Row Test — Contrast & Colour

Scale

One hand at every size

Stroke scales with the viewBox. At 16 px the stroke is still legible; at 96 px the corners and joins hold up without fattening. Two icons ship reduced forms for very small UI.

In Context

Portsmouth Harbour · Berth 7
Live · Updated 4 s ago

Tide

1.42m ▲

Waxing crescent High 14:22

Wind

18.4kn NW

Gust 26 12.1°C

Swell

2.1m @ 9 s

0 mm Overcast

Small craft advisory until 19:00 local · gusts over 25 kn expected.

Usage

Decorative — hidden from assistive tech, used next to a text label that carries meaning.

<button type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="#export"/>
  </svg>
  Export report
</button>

Meaningful — the icon is the only label; expose a name to assistive tech.

<svg class="icon" role="img" aria-label="High wind warning">
  <use href="#alert"/>
</svg>

<!-- scale with width/height or CSS -->
<svg class="icon" style="width:48px;height:48px">
  <use href="#buoy"/>
</svg>

Construction

Viewbox

0 0 24 24

Live area

2 → 22

Stroke

1.5 · round/round

Budget

≤ 24 commands

Padding2 px on every side. Nothing touches the viewBox edge.
Optical correctionCrescent and gauge indicator deliberately overhang the geometric centre so they feel centered.
Corner radius1–1.5 px on mechanical containers; organic shapes use curves, not radii.
Density ruleMechanical icons get the same count of strokes as organic ones — no bolt, no extra tick.
ThemeEvery mark inherits currentColor. Stroke width is set in CSS so it can be overridden per-context.