Nordicons3.17.2

Installation

Before moving further, please make sure you have Node.js installed on your machine.

Install using NPM

Run in your project or website root directory:

npm install @nordhealth/icons

Install using Yarn

yarn add @nordhealth/icons

Note: In most cases you will want to install our Web Components instead of Nordicons package directly. Nord's Web Components offer a dedicated Icon component that allows you to use all our icons and set their size and color according to our design tokens.

Usage

Nordicons package ships both SVG and JavaScript formats. Once you have the NPM package installed, you can import Nordicons in JavaScript format:

import nordicons from '@nordhealth/icons'

console.log(nordicons['arrow-right'])

Alternatively you can import the icons you need individually. This is useful if you are compiling your code with Webpack and need to be mindful of package size:

import icon from '@nordhealth/icons/lib/assets/arrow-right.js'

console.log(icon)

Or using require:

const icon = require('@nordhealth/icons/lib/assets/arrow-right.js')

console.log(icon)

Icon Component

The easiest and recommended way to use Nordicons is via our dedicated Icon Web Component that allows you to use all our icons and set their size and color according to our design tokens.

<nord-stack direction="horizontal" align-items="center">
  <nord-icon size="s" name="interface-star-filled" color="var(--n-color-status-success)"></nord-icon>
  <nord-icon size="m" name="interface-star-filled" color="var(--n-color-status-danger)"></nord-icon>
  <nord-icon size="l" name="interface-star-filled" color="var(--n-color-status-warning)"></nord-icon>
  <nord-icon size="xl" name="interface-star-filled" color="var(--n-color-status-highlight)"></nord-icon>
</nord-stack>

View Icon component

Changing Icon Color

You can customize the color of an icon using our design tokens:

import nordicons from '@nordhealth/icons'

function MyIcon() {
  return (
    <div className="m-b-icon" dangerouslySetInnerHTML={{ __html: nordicons['arrow-right'].svg }} />
  )
}

To style the icon:

.my-icon svg {
  color: var(--n-color-icon);
  width: var(--n-space-m);
  height: var(--n-space-m);
}

CDN Usage

Icons can also be directly downloaded and served from Nord CDN:

<img height="24" width="24" src="https://nordcdn.net/ds/icons/3.x.x/assets/[ICON NAME].svg" />

Importing SVG

While the most straightforward way to use the icons is by importing them through JavaScript, it's also possible to copy and use the basic SVG files. To get started, install copyfiles NPM package:

npm install copyfiles --save-dev

Once installed, add the following script to your package.json that copies the icons from Nordicons into a location you've specified:

"scripts": {
  "copy:icons": "copyfiles --flat node_modules/@nordhealth/icons/lib/* src/SPECIFY_YOUR_PATH"
}

You can then call this script while starting up your app to make sure you've always got the latest icons copied over. If you're using a UNIX-like environment, you can use & as the separator:

"start": "copy:icons & dev"

Figma Usage

The easiest way to use Nordicons in Figma is through our Web interface:

1. Click on an icon that you want to use in Figma
2. Click "Copy file" button in the details panel
3. Switch to Figma, open a design file, and paste the vector file

Resizing Icons in Figma

Most Nordicons are drawn using a stroke. When you resize this type of icon using the Move tool in Figma, the stroke won't scale with the icon.

To overcome this issue, use the Scale tool instead. You can either click the Move tool's dropdown icon or use the "K" shortcut.

Icon Categories

• Generic - General purpose icons
• Arrows - Directional arrows
• File formats - Document and file type icons
• Graphs - Charts and data visualization
• Interface - UI element icons
• Keyboard - Key and keyboard icons
• Medical - Healthcare related icons
• Navigation - Menu and navigation icons
• Text editor - Formatting and text icons
• Users - People and user icons

Can I Use Nordicons in My Own Project?

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.

Need a New Icon?

All new icons should be added to Nordicons first. Please see Support page for more information on how to contact us.

Designing New Icons

Please see our Iconography documentation for guidelines, base grid, keyshapes, and more.

Getting Support

Need help with Nordicons? Please head over to the Support page for more guidelines and ways to contact us.