Iconography

The icon vocabulary is inline SVG via <IconGlyph> — every name resolves to an Iconify-sourced SVG (Lucide for UI primitives, Phosphor for soft variants, simple-icons for brand logos). Rendered at text weight, monochromatic, in currentColor, always centered in a generous square.

The names live in packages/icons/src/icon-manifest.ts; swap a single tuple there to change the icon everywhere it's used. Generated SVG bodies are materialised into src/icon-data.ts at build time so the runtime has zero network dependency. This page is derived from the live manifest — adding a new glyph in icon-manifest.ts makes it appear here on the next build.

Full inventory#

Logos#

Brand marks for first-class data sources. Use <IconGlyph kind="logo" />.

Sizes#

Treatments#

Usage#

import { IconGlyph } from '@ship-it-ui/icons';
 
<IconGlyph name="ask" size={14} />
<IconGlyph name="service" size={22} />
<IconGlyph kind="logo" name="github" size={20} />

<IconGlyph> is the canonical surface — it handles sizing, ARIA, and currentColor propagation. For runtime-computed names use <DynamicIconGlyph>, which accepts any string and falls back to centered SVG text when no icon is registered.

For non-React surfaces (cytoscape background-image, canvas, Mermaid), call iconToSvgDataUrl(name, { color, size }) for a ready data:image/svg+xml;… URL — used internally by the cytoscape adapter to paint entity glyphs on graph nodes.