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.
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.
- Stroke terminal
- Bounding area
- Counter stroke
- Counter area
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:
Size Icon XXS
This is a xx-small size for icons. Most commonly used for the caret icons inside navigation items and page progress icons.
Size Icon XS
This is a x-small size for icons. Most commonly used inside small form fields and buttons.
Size Icon S
This is a small size for icons. Most commonly used for icons inside buttons and select menu toggles.
Size Icon M
This is a medium size for icons. Most commonly used for icons that sit inside large buttons.
Size Icon L
This is a large size for icons. Most commonly used for illustrative purposes.
Size Icon XL
This is a x-large size for icons. Most commonly used for illustrative purposes.
Size Icon XXL
This is a xx-large size for icons. Most commonly used for illustrative purposes.
Creating an icon #
- Create a 20 × 20px artboard for each icon.
- Use 2px stroke to draw regular icons and 3px stroke to draw
- In most cases Nordicons shouldn’t have padding around them.
- Set your workspace to snap to pixels and round most values to whole pixels.
- Don’t use borders or strokes to draw the icon.
- All possible shapes and paths should be combined into one.
- 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.