Iconography
OpenBridge icons for maritime concepts, Lucide for generic UI, and icons in content as well as navigation.
On this page
Maritime icons: OpenBridge
These are the vendored OpenBridge icons, available through @bosunkit/icons. They
are filled shapes that take currentColor, so they follow the theme and the text color around them.
Where OpenBridge offers both an -iec icon and a -proposal icon for a concept, the -iec icon is
used: its shape follows the IEC 62288 symbol set used on certified displays. A rotating icon, such as a
wind arrow, is rotated with a CSS transform; the set holds no pre-rotated copies.
Generic icons: Lucide
Lucide icons are stroked, 2px at 24px, with round caps. They cover controls and concepts that have nothing to do with the sea.
Sizes
An icon is sized in em of the text beside it, so it grows with the size class: 1.375em in a navigation row, 1.8em in the tab bar. An icon-only button keeps its 48 px square whatever the icon's size. Each specimen below sits in the element it belongs to.
Icons in content
Icons are not only for navigation. A readout label, a list row and a section title carry the icon of the quantity they show, so the eye finds depth or wind by shape before reading the label.
The OpenBridge set
The kit carries the whole maritime set of OpenBridge 2.0 (the pinned 2.0.0-next.128 package), grouped into families by the concept an icon draws. The gallery shows every icon, searchable by name and filterable by family, with the import that draws it. Each family answers one question the crew ask:
| Concept | Families | What they draw |
|---|---|---|
| Own vessel and others | own, vessel, ais | Own ship in its alternative forms, ship types and AIS targets |
| Position and track | location, navigation | Positions, waypoints and routes |
| Marks and lights | beacon, buoy, light, harbour, anchor | Aids to navigation, lights and anchorages |
| Chart and radar | chart, radar | Chart layers, radar modes and symbols |
| Water and weather | depth, tide, wind, weather | Soundings, tidal marks, wind and sky |
| Alerts | alarm, notification | The alert marks and notices; the alert's shape and word carry its priority |
| Power and forces | battery, force | Charge and load states, and the forces on the hull |
Choosing an icon
Choose by the concept, not by how an icon looks.
- Look for the concept in the set first. If OpenBridge draws it, use that icon; Lucide is for controls with no maritime meaning, such as search, settings and chevrons.
- Take the family's
-iecicon where there is one, since its shape follows the IEC 62288 symbol set. - Keep to one icon per concept, in every place the concept appears.
- Do not make an icon carry a status. A severity, an integrity level or a state has its own shape and word; an icon says what a thing is, never how it is doing.
Color and state
An icon is a filled shape in currentColor, so it takes the color of the text it sits beside and follows the theme. It
never has a color of its own: where it must stand out, its container's text color changes.
Alert colors retain their operational priority meaning. Other semantic systems, such as port/starboard direction, data integrity and editorial categories, use their own named roles and visible labels. Do not select an alert role merely to make a generic icon colorful. A wind arrow or bearing icon can rotate within its instrument's defined direction convention.
Icon and label
An icon sits before its label with a small gap and is as tall as the label's line, so the two read as one unit.
Accessibility
- Beside a word, an icon is decorative. It is hidden from a screen reader (
aria-hidden), because the label already names it; a second announcement is noise. - Alone, an icon needs a name. An icon-only button takes an
aria-labeland shows the name in a tooltip, and its target is at least 48 px, whatever the icon's size. - An icon is never the only sign of a state. The rule that severity, integrity and state carry a shape and a word holds for every icon; see Accessibility.
- Contrast. An icon that carries meaning has at least 3:1 against its surface in all four themes, which the
--text-dimand--accenttokens meet.
Importing
An icon is imported by its family and name, so a screen loads only the icons it draws:
import { AnchorIec } from '@bosunkit/icons/anchor/AnchorIec';
import { Wind } from '@bosunkit/icons/wind/Wind';
<AnchorIec size={20} aria-hidden="true" />A name is the file's kebab-case name in PascalCase: anchor-iec is AnchorIec. The component takes size (24 by
default) and every SVG attribute, and the raw file is @bosunkit/icons/svg/anchor-iec.svg for a report or a document.
Lucide icons come from lucide-react. Both providers' icons are sized in em in the kit, so they follow the text.
The reports render the kit's React icons, as they build with the kit; the public site copies the raw SVGs from
@bosunkit/icons/svg and lucide-static at the kit's pinned versions.
Using icons
Names, categories and diagram symbols
Hide an icon from assistive technology when adjacent text already provides its meaning. An icon-only control needs an accessible action name; a tooltip supplies additional context, not the control's only name. Keep the same icon for the same concept in navigation, reports and diagram legends.
Editorial icons may identify a report category with document tone roles. Diagram symbols and line styles identify services, paths or direction. Neither assigns a maritime alert priority. Operational alerts retain their dedicated shape, priority word and state; a decorative category icon cannot carry that responsibility.