Tidemark — coastal station icons

The row, at 24

Equal slots, one stroke, no optical favourites. If a mark looks borrowed, it does not ship.

24 × 24 · stroke 1.5

The set

Six sea and sky, six instruments, six interface. Select a mark to inspect it on the keyline.

Organic

Swell

16 24

Scale

Readable at 16, still a drawing at 96. Stroke scales with the viewBox — it is not a hairline pasted on top.

1624324896

At 16, the whole set

The anemometer swaps to its small cut here. Nothing else does.

Primary · 96

Primary · 16

Cut · 16

Cut · 96, not used

Cups at 16 fall under two pixels across. The small form keeps the three-arm silhouette and replaces cups with terminals. Above 16, the primary drawing is the icon.

Theme

One sprite. currentColor for stroke and the few functional fills. No night-mode duplicate.

Sea Advisory Saved

Parent color, on a dark ground. Stroke width still comes from CSS.

In use

A station board. Icons next to a name are decorative. The export control is icon-only, so the button carries the name.

Small craft advisory until 18:00

North Breakwater

Station 04 · Live

1.84 m Tide · rising

14 kt Wind · NE

1016 Pressure · hPa

1.2 m Swell · 8 s

Rain 0.0 mm
Visibility 6 km
Waxing crescent
Ebb 0.6 kt

Mast nominal Mooring secure 042°

Use

Decorative instances are hidden. A meaningful instance is named on the control, or on the svg itself when it stands alone.

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

<svg class="icon" viewBox="0 0 24 24" role="img"
     aria-label="Swell, 1.2 metres">
  <title>Swell, 1.2 metres</title>
  <use href="#i-swell"/>
</svg>

.icon {
  width: 1.5rem; height: 1.5rem;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Each symbol carries a <title>. Do not rely on it through <use> — name the instance you actually show.

Grid

One viewBox, 0 0 24 24. Ink stays in a 20 × 20 live area with padding 2, so a 1.5 stroke is never clipped. Coordinates are at most two decimal places. No transform stacks, no empty groups.

Stroke: 1.5 · CSS
Cap / join: round / round
Corner radius: 1.2
Square keyline: 15.5
Circle keyline: Ø 16.6
Commands: ≤ 24 / icon

Circles are drawn about 7% large of the square keyline — a circle and a square of the same nominal size are not the same size to the eye. The star sits a touch low of center so its points don’t float. The alert triangle is inset so its mass matches a ring. Radius 1.2 is for interface blocks; a 3px housing scales the radius down rather than forcing the system radius onto a detail.

Stroke width is not written on the marks. It inherits, including through <use>, and a class or an inline style can change it.

1.25

1.5

2

Dashed box is the live area. Black square is the rectilinear keyline. Teal circle is the optical match — same weight, larger geometry.