Iconography
Small details that add clarity
Icons help people scan and understand. They are supporting players: useful, clear and quiet, never the hero.
Our library has 121 icons: 8 North originals drawn for our products, and a curated set from the open-source Lucide family, restyled to our specification so everything feels like one set.
Specification
One grid, one stroke
| Property | Value |
|---|---|
| Canvas | 24 × 24px, 2px padding (20px live area) |
| Stroke | 1.75px, centred |
| Caps and joins | Round |
| Corner radius | 1–2px on rectangles |
| Fill | None. Outline only |
| Colour | Midnight 80 on light, Snow on dark. currentColor in code |
North originals
Drawn for our products
These icons describe ideas unique to North. Use them for exactly these meanings.
| Icon | Meaning |
|---|---|
| north-star | North itself; a highlight; navigation home |
| agent | An AI agent in NorthStar |
| residency | Data residency, on-premises boundary |
| sovereign-cloud | NorthCloud, sovereign hosting |
| model-garden | The model garden and catalogue |
| human-in-command | Human approval of an AI action |
| edge-inference | NorthEdge, fast inference |
| dune | Place, region, the North landscape |
Sizes
Scale the canvas, keep the stroke
Use icons at 16, 20, 24 or 32px. At 16px use a 1.5px stroke; at 32px and above, 2px. Keep icons the same size within a component, and align them to the text cap height or centre line.
Colour
Midnight, almost always
- Midnight 80 on light surfaces, Snow on dark.
- Inside buttons and links, the icon takes the text colour.
- Status icons take the status colour and always come with a label.
- Oasis only for live AI states on dark (agent running).
Using icons over images
Give them a white box
When an icon sits on a photo or illustration, place it in a white (or Snow) rounded box with clear padding, anchored to a corner. Add a short label if it helps: “Email”, “On-premises”.
On-premisesUsing icons in code
Use the sprite, which inherits currentColor:
<svg class="icon" width="20" height="20" aria-hidden="true">
<use href="/assets/icons/north-icons-sprite.svg#n-shield-check"/>
</svg>Dos and don'ts
Do
- Use icons to add meaning, next to a label.
- Check the library before drawing anything new.
- Keep one size and one colour per group.
- Use a white box when an icon sits on an image.
Don't
- Use icons as hero images or decoration.
- Mix icon styles: filled, duotone, emoji, 3D.
- Change the stroke weight within a set.
- Use more than two icons on a photo.
- Use icons without labels for anything that matters.
Last updated on 14 October 2026