Iconography

Nord Design System uses icons to provide additional meaning or in places where text label doesn’t fit. They communicate messages at a glance and draw attention to important information.

Our icon library is called Nordicons. Nordicons are designed to be used at small sizes and were built on a 20px grid which ensures that they render well when used with inline text or inside small interface items and buttons. Their design language is friendly and matches closely the shape and thickness of Nordhealth’s logomark.

When designing new icons, try to stick to symbols that represent the most basic ideas, objects or actions. Always prioritize representing the function, rather than how nice the icon looks.

Base grid

A 20 × 20px grid is used as the foundation for all Nordicons to determine line thickness, proportions, and shape across the entire icon set. This foundational grid guides you when designing new icons and ensures a unified visual look.

Keyshapes

Predefined key lines give you consistent sizing for basic shapes and proportions across the icon set. This helps to establish relationships between similar icons.

Style and Anatomy

The stylistic conventions of Nordicons create a meaningful connection with our UI typeface and the Nordhealth logomark. The overall style is friendly, rounded, and matches closely the shape and thickness of both Nordhealth’s logomark and the typeface we use to set text in user interfaces.

1. Corner
2. Stroke
3. Stroke terminal
4. Bounding area
5. Counter stroke
6. Counter area

Stroke

Nordicons use a consistent stroke width of 2px, including curves and angles. When designing new icons, maintain the same visual weight by using this stroke thickness for all new icons.

The only exception to this rule is when designing icons for tiny contexts. These icons use a stroke width of 3px and are marked with -small suffix in our icon library.

Icon sizes

Nordicons are drawn on a 20 × 20px grid and are scaled up and down linearly to different sizes. The most common sizes Nordicons are used in are:

var(--n-size-icon-xxs)

var(--n-size-icon-xs)

var(--n-size-icon-s)

var(--n-size-icon-m)

var(--n-size-icon-l)

var(--n-size-icon-xl)

var(--n-size-top-bar)

var(--n-size-icon-xxl)

Creating an icon

1. Create a 20 × 20px artboard for each icon.
2. Use 2px stroke to draw regular icons and 3px stroke to draw -small versions.
3. In most cases Nordicons shouldn’t have padding around them.
4. Set your workspace to snap to pixels and round most values to whole pixels.
5. Don’t use borders or strokes to draw the icon.
6. All possible shapes and paths should be combined into one.
7. Make sure to properly name layers and artboards.

Figma usage

You can find the design guidelines for Nordicons from our Figma Toolkit.

Getting support

Have a question about iconography guidelines? Please head over to the Support page for more guidelines and ways to contact us.