Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Nordicons New

File / Picture

file-picture.svg

nordicon, file, document, picture, image, photo, photograph

import filePicture from "@nordhealth/icons/lib/assets/file-picture.js"; How to install

DownloadCopy file

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

Usage #

Nordicons ships in 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);

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 in SVG format #

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/1.3.0/assets/[ICON NAME].svg" />

Usage with Eleventy #

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 */
}

Usage with Figma #

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

  1. 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).
  2. In this new panel, click “Copy file” button.
  3. Now switch to Figma, open a design file, and paste the vector file there.
Nordicons in Figma

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.

Nordicons in Figma

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.

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.

Getting support #

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

 
Edit page