Nordicons3.3.0

File / Picture

Name file-picture

Installation #

Before moving further, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Nordicons in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can install Nordicons by following these instructions.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/icons

Install using Yarn #

Run in your project or website root directory (where package.json lives):

yarn add @nordhealth/icons

Please note that 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 with:

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 for example compiling your code with Webpack and therefore have to be mindful of your package size:

import icon from "@nordhealth/icons/lib/assets/arrow-right.js";
console.log(icon);

// …OR…

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 Web Component that allows you to use all our icons and set their size and color according to our design tokens. The icon component provides properties that allow you to adjust the following:

Name of the icon from Nordicons.
Size of the icon according to our icon sizing tokens.
Color of the icon.
Accessible label for the icon.

<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. The below example shows how to import an icon so that it can be customized later:

// Import Nordicons
import nordicons from "@nordhealth/icons"

// Applying inline SVG
render() {
  return (
    <div class="my-icon" innerHTML={nordicons["arrow-right"].svg} />
  )
}

To style the above icon that was imported, we can use the design tokens that Nord provides:

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

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 an UNIX-like environment, you can use & as the separator:

"start": "copy:icons & dev"

CDN usage #

Icons can also be directly downloaded and served from Nord CDN. To include an individual SVG file, specify a version and icon name in the URL:

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

Eleventy usage #

To get started using Nordicons with Eleventy, install Nordicons and eleventy-plugin-svg-contents NPM packages:

npm install @nordhealth/icons
npm install eleventy-plugin-svg-contents

Once installed, add the following to your .eleventy.js configuration file:

const svgContents = require("eleventy-plugin-svg-contents")

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(svgContents)
}

With this configuration added, you’re now able to use Nordicons anywhere in your app with the following code (replace arrow-right with the icon name):

<span class="nordicon">{{ "/node_modules/@nordhealth/icons/lib/assets/arrow-right.svg" | svgContents | safe }}</span>

To style the above icon, you can use the design tokens that Nord provides:

.nordicon {
  color: var(--n-color-icon);  /* Set icon color */
}

Figma usage #

The easiest way to use Nordicons in Figma is through our Web interface. To get started, follow the below steps:

Click on an icon that you want to use in Figma. This will open up a details panel from the bottom right corner (shown in below screenshot).
In this new panel, click “Copy file” button.
Now switch to Figma, open a design file, and paste the vector file there.

Resizing icons in Figma #

Most Nordicons are drawn using a stroke. When you resize this type of an icon using the Move tool in Figma, you’ll quickly notice that 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 shown below, or use the "K" shortcut and you’ll find the Scale tool. The Scale tool resizes stroke as well.

Can I use Nordicons in my own project? #

Nord Design System is solely meant for building digital products and experiences for Nordhealth, you can’t use Nordicons in your own project. 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. We can usually add an icon during the same day if there’s a hurry. Please keep in mind though that if there’s a similar icon already in use, we will suggest you to use that instead.

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.

Edit page