Icons

Icons provide visual context and enhance usability. They are powerful visual helpers, and should be used with care. Overuse quickly results in UI’s that are visually overwhelming or distracting.

Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the reference table.)

Structure and Implementation

The <svg> with the class o-icon contains the reference to your icon.

When placing the icon code into your page, customize the path in the use attribute of the svg to the proper path and icon name for your specific icon. For example, the mail icon in the standard sprite would have a path like this:

<svg class="o-icon" aria-hidden="true">
  <use href="#mail"></use>
</svg>

Reference Table

A collection of our icons.
Click on the icon to copy the SVG code on your clipboard.

  • approval Copy SVG
  • edit Copy SVG
  • chart-dot Copy SVG
  • clock Copy SVG
  • file-long Copy SVG
  • inventory Copy SVG
  • inventory-search Copy SVG
  • mail Copy SVG
  • telephone Copy SVG
  • schedule Copy SVG
  • pdf-file Copy SVG
  • excel-file Copy SVG
  • comments Copy SVG
  • gear Copy SVG
  • facility Copy SVG
  • print Copy SVG
  • refresh Copy SVG
  • globe Copy SVG
  • mappin Copy SVG
  • people Copy SVG
  • duplicate Copy SVG

Sizes

Size modifiers can be added to the .o-icon element on any icon.

There’s three sizes available:

  • Small (10px) Copy SVG
  • Default (16px) Copy SVG
  • Large (32px) Copy SVG

Small

To change the size of an icon to small, add the .o-icon--sm class to the svg.

<svg class="o-icon o-icon--sm" aria-hidden="true">
  <use href="#mail"></use>
</svg>

Large

To change the size of an icon to large, add the .o-icon--lg class to the svg.

<svg class="o-icon o-icon--lg" aria-hidden="true">
  <use href="#mail"></use>
</svg>

Colors

The default fill of all icons is currentColor to inherit the color of their parent. Is possible to change the fill color to a different one but it should be avoided to keep an uniform experience.

This is a red example text

This is a green example text

Design System