Harbor Icons · v1.0

Coastal tide & weather station icon system

Eighteen marks drawn on one 24×24 grid — organic sea state, mechanical instruments, and dashboard chrome — sharing a single stroke, density, and optical weight.

Full set

Row test · 24px

Size ramp

Light & dark

In context

Station metrics
  • Significant wave 1.8 m
  • Wind · gust 24 kt
  • Anemometer NNW
  • Tide height +2.14
  • Lunar phase Waxing
  • Precip · 6h 3.2 mm
Pier 4 · live board
Buoy HB-04 Moored 341°
Gale watch — wind building after 16:00. Mooring tension elevated on north lines.
Sky
Clear
Vis 12 nm
Cover
18%
Broken high
Depth
14.6 m
Chart + tide

Construction

Canvas
viewBox="0 0 24 24"
Live area
20×20, inset by 2px padding on every side
Stroke
1.5px · round caps & joins · inherits currentColor
Corners
~2px optical radius on mechanical boxes; organic curves unbroken
Density
One primary mass; detail only where the concept needs it
Optical
Circles drawn ~4% larger than peer squares; crescents & stars nudged on-center
Nodes
≤24 path commands per symbol · no transforms · coords ≤2 dp
Scale
Single form, readable at 16px, clean at 96px

Usage

<!-- Decorative (adjacent text carries the name) -->
<svg class="ico" aria-hidden="true">
  <use href="#icon-swell"/>
</svg>

<!-- Meaningful control -->
<button type="button" aria-label="Export readings">
  <svg class="ico" aria-hidden="true">
    <use href="#icon-export"/>
  </svg>
</button>

<!-- Theme & weight from CSS -->
.ico {
  color: inherit;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}