# Nordicons

> Nordicons are used to provide additional meaning or in places where text label doesn't fit.

**arrow:** `arrow-down`, `arrow-down-double`, `arrow-down-long`, `arrow-down-small`, `arrow-expand-down-small`, `arrow-expand-right-small`, `arrow-left`, `arrow-left-double`, `arrow-left-long`, `arrow-left-small`, `arrow-refresh`, `arrow-replace`, `arrow-right`, `arrow-right-double`, `arrow-right-long`, `arrow-right-small`, `arrow-undo`, `arrow-up`, `arrow-up-double`, `arrow-up-down-long`, `arrow-up-long`, `arrow-up-small`

**file:** `file-code`, `file-generic`, `file-invoice`, `file-multiple`, `file-notepad`, `file-notes`, `file-patient-records`, `file-picture`, `file-script`, `file-treatment-plan`

**generic:** `generic-ambulance`, `generic-amphibia`, `generic-arachnida`, `generic-bank`, `generic-bar-code`, `generic-birds`, `generic-bug`, `generic-building`, `generic-cable`, `generic-calculator`, `generic-canine`, `generic-car`, `generic-cattle`, `generic-chip`, `generic-cloud`, `generic-company`, `generic-computer`, `generic-consent-agreed`, `generic-consent-declined`, `generic-consent-expired`, `generic-consent-not-asked`, `generic-credit-card`, `generic-cube`, `generic-database`, `generic-emoji`, `generic-equidae`, `generic-farm`, `generic-farm-2`, `generic-feline`, `generic-fish`, `generic-gift`, `generic-github`, `generic-hospital`, `generic-keyboard`, `generic-laptop`, `generic-leporidae`, `generic-location`, `generic-mail`, `generic-module`, `generic-passport`, `generic-pet-food`, `generic-pet-paw`, `generic-port`, `generic-qr-code`, `generic-reptilia`, `generic-rodents`, `generic-server`, `generic-sheep`, `generic-shipping`, `generic-signal`, `generic-slack`, `generic-storage`, `generic-suidae`, `generic-telephone`, `generic-truck`, `generic-unchipped`

**graph:** `graph-bars`, `graph-line`, `graph-pie-chart`, `graph-trend-down`, `graph-trend-up`

**interface:** `interface-add`, `interface-add-small`, `interface-ai`, `interface-alarm`, `interface-archive`, `interface-attachment`, `interface-bookmark`, `interface-bookmark-filled`, `interface-calendar`, `interface-calendar-checked-in`, `interface-cancelled-small`, `interface-chat`, `interface-checked`, `interface-checked-circle`, `interface-checked-small`, `interface-circle`, `interface-clipboard`, `interface-close`, `interface-close-small`, `interface-complete-small`, `interface-container`, `interface-content-book`, `interface-copy`, `interface-cpr-acpr`, `interface-cpr-unknown`, `interface-customer-support`, `interface-delete`, `interface-dislike`, `interface-dislike-filled`, `interface-dnr`, `interface-download`, `interface-dropdown-small`, `interface-duplicate`, `interface-edit`, `interface-edit-2`, `interface-edit-off`, `interface-edit-on`, `interface-email`, `interface-emoji-happy`, `interface-emoji-neutral`, `interface-emoji-sad`, `interface-error`, `interface-expand`, `interface-eyedropper`, `interface-face-id`, `interface-fast-forward`, `interface-fast-forward-2`, `interface-favorite`, `interface-favorite-filled`, `interface-filter`, `interface-fit-screen`, `interface-fit-screen-small`, `interface-folder`, `interface-globe`, `interface-grabber`, `interface-grid`, `interface-help`, `interface-history`, `interface-home`, `interface-horizontal-adjust`, `interface-inbox`, `interface-incomplete-small`, `interface-info`, `interface-key`, `interface-layers`, `interface-like`, `interface-like-filled`, `interface-link`, `interface-loading`, `interface-location-off`, `interface-location-on`, `interface-lock`, `interface-login`, `interface-logout`, `interface-menu-small`, `interface-microphone`, `interface-mode-dark`, `interface-mode-light`, `interface-new-window`, `interface-new-window-small`, `interface-partially-complete-small`, `interface-password`, `interface-pause`, `interface-payment-terminal`, `interface-play`, `interface-presentation-mode`, `interface-print`, `interface-record`, `interface-remove`, `interface-remove-small`, `interface-rewind`, `interface-rewind-2`, `interface-send`, `interface-setting-slider`, `interface-share`, `interface-shield`, `interface-shopping-cart`, `interface-sort-down-small`, `interface-sort-small`, `interface-sort-up-small`, `interface-spinner`, `interface-star`, `interface-star-filled`, `interface-stop`, `interface-stop-filled`, `interface-table`, `interface-tag`, `interface-tag-filled`, `interface-thumb`, `interface-time`, `interface-time-reset`, `interface-unlink`, `interface-unlock`, `interface-upload`, `interface-video`, `interface-voice-id`, `interface-volume`, `interface-volume-off`, `interface-warning`, `interface-warning-small`, `interface-whiteboard`, `interface-zoom-in`, `interface-zoom-out`

**keyboard:** `keyboard-arrow-down`, `keyboard-arrow-left`, `keyboard-arrow-right`, `keyboard-arrow-up`, `keyboard-arrow-up-down`, `keyboard-backspace`, `keyboard-command`, `keyboard-option`, `keyboard-return`, `keyboard-shift`

**medical:** `medical-bandage`, `medical-birthday`, `medical-blood`, `medical-death`, `medical-disability`, `medical-drip`, `medical-female`, `medical-flask`, `medical-heart-rate`, `medical-heart-rate-2`, `medical-heart-rate-3`, `medical-instrument-stethoscope`, `medical-insurance`, `medical-insurance-2`, `medical-male`, `medical-neutered`, `medical-pill`, `medical-prescription`, `medical-radio-active`, `medical-radiology-scan`, `medical-ribbon`, `medical-spayed`, `medical-storage-device`, `medical-surgery`, `medical-syringe`, `medical-temperature`, `medical-temperature-cold`, `medical-temperature-hot`, `medical-test-tube`

**navigation:** `navigation-catalog`, `navigation-dashboard`, `navigation-drawer-left-collapse`, `navigation-drawer-left-expand`, `navigation-drawer-right-collapse`, `navigation-drawer-right-expand`, `navigation-finances`, `navigation-notifications`, `navigation-payments`, `navigation-reports`, `navigation-reports-2`, `navigation-scheduling`, `navigation-search`, `navigation-settings`, `navigation-tasks`, `navigation-timeline`, `navigation-toggle`, `navigation-toggle-lock`

**text:** `text-bold`, `text-center`, `text-font-size`, `text-heading-1`, `text-heading-2`, `text-heading-3`, `text-indent-decrease`, `text-indent-increase`, `text-italic`, `text-justified`, `text-left-align`, `text-list`, `text-ordered-list`, `text-paragraph`, `text-quote`, `text-right-align`, `text-strike-through`, `text-to-speech`, `text-translate`, `text-underline`

**user:** `user-add`, `user-block`, `user-checked`, `user-delete`, `user-edit`, `user-multiple`, `user-single`

## Installation

Before moving further, please make sure you have [Node.js](https://nodejs.org/en/){rel="[\"nofollow\"]"} installed on your machine.

### Install using NPM

Run in your project or website root directory:

```bash
npm install @nordhealth/icons
```

### Install using Yarn

```bash
yarn add @nordhealth/icons
```

**Note:** In most cases you will want to install our [Web Components](/docs/developer/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:

```js
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:

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

console.log(icon)
```

Or using require:

```js
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](/components/icon/) that allows you to use all our icons and set their size and color according to our design tokens.

```html
<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](/components/icon/)

---

## Changing Icon Color

You can customize the color of an icon using our [design tokens](/core/tokens/):

```jsx
import nordicons from '@nordhealth/icons'

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

To style the icon:

```css
.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:

```html
<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:

```bash
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:

```json
"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:

```json
"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](https://nordhealth.com){rel="[\"nofollow\"]"}. Please see the [terms of use](/resources/terms/) for full license details.

## Need a New Icon?

All new icons should be added to Nordicons first. Please see [Support page](/resources/support/) for more information on how to contact us.

## Designing New Icons

Please see our [Iconography documentation](/design/foundations/iconography/) for guidelines, base grid, keyshapes, and more.

## Getting Support

Need help with Nordicons? Please head over to the [Support page](/resources/support/) for more guidelines and ways to contact us.