The littoral collection SVG / v1.0
Made for the edge of land and sea

A common language
for changing water.

Eighteen quiet, precise icons for coastal observation. From a passing cloud to a fixed instrument, each form belongs to the same horizon.

24 × 24 grid1.6 px strokecurrentColor throughout
18

Conditions, instruments
and everyday actions.

THE FAMILY, AT A GLANCE18 SYMBOLS · 24 PX · 1:1
01

Icon library

Three subjects. One hand.

SELECT A SYMBOL TO INSPECT ↓

02

Scale & contrast

Same geometry. No alternate assets.

Swell
#lt-swell

A curling crest over the shared waterline.

9 commands24 × 24
DAYLIGHT#FFFEFA / #233B38
AFTER DARK#193B35 / #E3EDE1
1.6 px Units scale with the viewBox; no non-scaling stroke.
03

In the field

A local, interactive station specimen.

North Spit

STATION NS–04 · DEMONSTRATION DATA

Tide height / metresObserved
Sample day · 14 JuneHigh 1.72 m · Low 0.28 m
Significant swell1.4 m / 8 s
Wind · southwest12 kn
Air pressure1018 hPa
Rising swell overnight. Check local conditions before heading out.

04

Built to belong

Small source. Clear rules.

01

One grid, a little breathing room

24 × 24 viewBox. Nominal live area: 18 × 18, from (3, 3) to (21, 21). Padding: 3 units to path centres; at least 1.4 units to ink at the maximum offered stroke. Circular instrument forms overshoot by 0.25 units to avoid looking undersized.

02

Round, not soft

1.6-unit stroke, round caps and joins. Panel corners use a 1.5-unit radius; small instrument corners use 1 unit, the export tray 2. Open shapes and generous gaps keep the instruments from becoming heavier than the weather.

03

Draw only what carries meaning

At most 24 command-equivalents per symbol, including primitives: a circle counts as 4, a rounded rectangle as 10. No transforms, fills, masks or alternate small-size forms. Use at 16–96 px; avoid fractional CSS dimensions when possible.

04

Colour and weight belong to the product

Every symbol uses currentColor. Stroke width is inherited from the instance, not fixed inside the drawing. Keep the sprite once in the document and reference its stable, namespaced IDs. The download contains just the standalone sprite.

USAGE / INLINE SVGlt-swell
Decorative icons are hidden with aria-hidden. Standalone meaningful icons have an explicit accessible name on the instance. Icon-only buttons name the button, not the SVG.