Skip to content
design
Foundations

OpenBridge icons

Every OpenBridge icon the kit carries, searchable by name and filterable by family, with the import that draws each.

On this page
934 of 934 icons
The OpenBridge set, searchable. Press an icon to see it at the sizes the system uses and to copy its import.

The kit carries the maritime icons of OpenBridge 2.0 (the pinned 2.0.0-next.128 package) as React components and raw SVGs, copied byte for byte from the pinned upstream package and grouped into families by the concept they draw:

  • Chart and surroundings: ais, anchor, beacon, buoy, chart, depth, harbour, light, lighthouse, location, navigation, radar, tide, sign (safety signs such as the embarkation ladder and the exit).
  • Own ship and its motion: own (own ship), vessel, ship (types of ship), sensor, speed, heading, motion, track, route, waypoint, target, collision, current, and the quantities cog, sog, stw, hdg, rot, roll, pitch and heave.
  • Navigational status, as AIS reports it: anchorwatch, moored, docked, underwaysailing, underwayusingengine, notunderway, fishing and pilot.
  • Alerts: alarm, alert, alerts, warning, caution, emergency and notification.
  • Machinery and tanks: battery, propulsion, engine, diesel, generator, energy, tank, bilge, pump, fire, winch, temperature, temp, pressure and limits.
  • Communications: satellite, antenna and com.
  • Weather: weather, wind, force, wave, swell, fog, rain, snow, sleet, lightning, clear, cloudy, partlycloudy and slightlycloudy.

Each icon is a filled 24 px shape in currentColor, so it follows the text color around it. The Google glyph duplicates, the weather-condition glyphs drawn in parts for color (-colour in the condition families, duplicates of the one-tone glyphs), the hydraulic, valve and electronics sets and the pre-rotated apparent-wind series are left out.

An icon is imported on its own, import { AnchorIec } from "@bosunkit/icons/anchor/AnchorIec", so a screen loads only the icons it draws; there is no barrel. The component takes size (24 by default) and every SVG attribute, and the raw file is @bosunkit/icons/svg/anchor-iec.svg. Where a concept has both an -iec and a -proposal icon, the -iec icon is the one the system uses.

01Find by nameAn icon is named for what it draws, in the order the concept narrows: wind-barb, wind-speed. Searching one word finds the family.
02One concept, one iconPick the icon once and use it everywhere the concept appears, so the crew learns one shape for anchor, depth or wind.
03Never redrawnAn icon is not edited, rotated in the file or recolored by hand: it takes currentColor and a CSS transform where it must turn.
  • Iconography: which provider draws which concept, the sizes, and the rules for icons beside words.
  • Color: the colors an icon inherits.
  • Accessibility: when an icon needs a name and when it is decorative.