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.

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-dev

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 directly downloaded and served from Duet’s own CDN. To use the @duetds/icons npm package through Duet CDN, specify a version in the URL like in the following example:

<img height="24" width="24" src="https://cdn.duetds.com/api/icons/4.0.36/lib/assets/[ICON NAME].svg" />

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

<img height="24" width="24" src="https://cdn.duetds.com/api/icons/4.0.36/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.

Terms of use #

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