Icon system for coastal weather and marine monitoring dashboards. Eighteen icons spanning organic (wave, wind, moon, rain), mechanical (anemometer, buoy, gauge, mooring), and interface (filter, export, alert, history, compare, favourite, settings, info).
All icons inherit currentColor for seamless theming.
Light
Dark
24×24 viewBox with 2px padding on all sides. Live area 20×20px. All marks aligned to whole pixels. No anti-aliased strokes.
Uniform 1.5px stroke width. Round line caps and round joins throughout. No variable weight. Consistent optical balance across all weights.
Every icon element inherits currentColor. No hardcoded colors in SVG paths. Works on any background color via CSS.
Organic: Wave, wind, moon, rain — flowing curves and natural variation. Mechanical: Anemometer, buoy, gauge, mooring — precise geometry. Interface: Filter, export, alert, history, compare, favorite, settings, info — minimal abstraction.
Tested 16px through 96px. Maintains readability and visual weight across the range. Stroke width inherits from CSS and scales with container size.
All icons under 24 path commands. Geometric primitives (circles, rects, lines) used where appropriate. No tracing; every mark is intentional.
Use aria-label for icons that convey meaning. Use aria-hidden="true" for purely decorative instances. Pair with text or use labels in HTML.