Skip to main content
LocalTapiola Turva

Iconography #

Icons are used 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.

Duet Design System provides an NPM package for LocalTapiola and Turva that makes it easier to install and use our icons. Each icon ships in SVG and JavaScript formats that can be required in your application. Scroll down for installation and usage instructions.

Sketch usage #

Icons can be downloaded in Sketch format directly from the documentation. To download all the icons, head over to Resources page.

Node usage #

The recommended way to use Duet Icons is through our npm package. To install, simply run:

npm install @duetds/icons

The API can then be used as follows:

import duetIcons from "@duetds/icons"
console.log(duetIcons["action-edit"]);

/*{
  title: 'action-edit',
  svg: '<svg role="img" viewBox="0 0 24 24" ...'
}*/

Alternatively you can import the needed icons individually. This is useful if you are e.g. compiling your code with webpack and therefore have to be mindful of your package size:

import icon from "@duetds/icons/lib/assets/action-edit"
console.log(icon);

// …OR…

const icon = require("@duetds/icons/lib/assets/action-edit");
console.log(icon);

Styling icons #

While you can’t apply styles to icons that are served via the CDNs, you can easily style the ones that are imported through Node. The below example shows how to import and style an icon when working with Duet’s components.

/* Import Duet icons. */
import duetIcons from "@duetds/icons"

/* Then later use one of the icons in render() function */
render() {
  return (
    <div class="icon" innerHTML={duetIcons["navigation-user"].svg} />
  )
}

To style the above icon that was just imported, we can use basic CSS or the Design Tokens that Duet provides:

.icon svg {
  color: $color-primary;      /* Set icon color */
  width: $size-icon-x-small;  /* Set icon width */
  height: $size-icon-x-small; /* Set icon height */
}

Importing basic SVG files #

Duet Icons ships in both SVG and JavaScript formats. While the most straightforward way to use the icons is to import the Node package, it’s also possible to copy and use the basic SVG files. To get started, install copyfiles NPM package:

npm install copyfiles --save

Once installed, add a script to your package.json that copies the icons from Duet’s package into a location you’ve specified:

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

You can 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"

Otherwise, if you need a cross-platform solution, use npm-run-all module:

"start": "npm-run-all copy:icons dev"

CDN usage #

Icons can also be served from a CDN such as JSDelivr or Unpkg, but this should be only used for prototyping purposes. To use the @duetds/icons npm package and specify a version in the URL like the following:

<img height="24" width="24" src="https://cdn.jsdelivr.net/npm/@duetds/icons@2.0.0/lib/assets/[ICON NAME].svg" />
<img height="24" width="24" src="https://unpkg.com/@duetds/icons@2.0.0/lib/assets/[ICON NAME].svg" />

Where [ICON NAME] is replaced by the icon name, for example:

<img height="24" width="24" src="https://cdn.jsdelivr.net/npm/@duetds/icons@2.0.0/lib/assets/action-edit.svg" />
<img height="24" width="24" src="https://unpkg.com/@duetds/icons@2.0.0/lib/assets/action-edit.svg" />

Icon missing? #

All new icons should be added to the design system first. Please see Support page for more information on how to contact us. We can usually add an icon in a matter of hours 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.

Troubleshooting #

If you experience any issues while getting set up with Duet Icons, please head over to the Support page for more guidelines and help.