Get help Color blind mode Low vision mode

Icon Ready

Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to customize the size and color of the icon.

You can use any of the icons listed under Iconography section. By default the icon will inherit the text color from the parent element, but you can use the color property to override this behaviour.

Examples #

Open in new window 
<duet-grid responsive distribution="space-around" alignment="center">
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-family" name="category-personal"></duet-icon>
  </duet-grid-item>
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-vehicle" name="category-car"></duet-icon>
  </duet-grid-item>
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-finance" name="category-wealth"></duet-icon>
  </duet-grid-item>
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-pet" name="category-pet"></duet-icon>
  </duet-grid-item>
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-home" name="category-apartment"></duet-icon>
  </duet-grid-item>
  <duet-grid-item margin="none">
    <duet-icon size="x-large" background="category-travel" name="category-travel"></duet-icon>
  </duet-grid-item>
</duet-grid>
Open in new window 
<duet-grid responsive distribution="space-around" alignment="center">
  <duet-grid-item>
    <duet-icon outline="category-family" name="category-personal"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="category-vehicle" name="category-car"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="category-finance" name="category-wealth"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="category-pet" name="category-pet"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="category-home" name="category-apartment"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="category-travel" name="category-travel"></duet-icon>
  </duet-grid-item>
</duet-grid>
Open in new window 
<duet-grid responsive distribution="space-around" alignment="center">
  <duet-grid-item>
    <duet-icon name="action-arrow-down-small" size="xxx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down-small" size="xx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="x-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="medium"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="x-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="xx-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon name="action-arrow-down" size="xxx-large"></duet-icon>
  </duet-grid-item>
</duet-grid>
Open in new window 
<duet-grid responsive distribution="space-around" alignment="center">
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="xxx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="xx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="x-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="medium"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="x-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="xx-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon outline="danger" name="action-delete" size="xxx-large"></duet-icon>
  </duet-grid-item>
</duet-grid>
<duet-grid responsive distribution="space-around" alignment="center">
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="xxx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="xx-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="x-small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="small"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="medium"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="x-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="xx-large"></duet-icon>
  </duet-grid-item>
  <duet-grid-item>
    <duet-icon background="danger" name="action-delete" size="xxx-large"></duet-icon>
  </duet-grid-item>
</duet-grid>
Open in new window 
<duet-icon size="x-large" background="gray-lighter" color="primary" name="category-personal"></duet-icon>
<duet-icon size="x-large" background="gray-lighter" color="secondary" name="category-car"></duet-icon>
Open in new window 
<duet-icon shape="brand" size="xxx-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="xx-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="x-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="medium" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="x-small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="xx-small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand" size="xxx-small" background="primary" name="category-apartment"></duet-icon>
Open in new window 
<duet-icon shape="brand-rotated" size="xxx-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="xx-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="x-large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="large" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="medium" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="x-small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="xx-small" background="primary" name="category-apartment"></duet-icon>
<duet-icon shape="brand-rotated" size="xxx-small" background="primary" name="category-apartment"></duet-icon>

Properties #

Property Attribute Description Type Default
background background Custom color to be used for a circular background, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". string ""
color color Custom color to be used for the icon, as a design token entered in camelCase or kebab-case. Example: "color-primary". This property can also be set to "currentColor" which forces the icon to use the CSS text color of parent element instead. Useful when you want to control the color in stylesheet instead. string ""
icon icon A raw SVG string. string undefined
margin margin Controls the margin of the component. "auto" | "none" "auto"
name name Icon name from Duet to display. string "action-add"
outline outline Custom color to be used for a circular border and icon outline, as a design token entered in camelCase or kebab-case. Using this option the icon will always be resized to $size-icon-medium on mobile viewports. Example: "color-primary". string ""
responsive responsive Whether the icon changes its size responsively or not. boolean true
shape shape Shape of the background. Brand follows new designs and currently doesn't support xxx-small size. "brand" | "brand-rotated" | "circle" "circle"
size size Icon size. Entered as one of the icon size design tokens. "auto" | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small" "medium"
src src A URL from which to load an icon. string undefined
theme theme Theme of the icon. This setting will be overridden when you set the color property "" | "default" | "turva" ""

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To provide additional meaning in addition to a text label.
  • To help users who have difficulties with reading and attention.
  • In places where text label doesn’t fit.
  • For illustration purposes.

When not to use #

  • Avoid adding icons to subheadings, links and captions for decorative purposes.
  • Avoid when a button’s action is already clear based on a text label alone.

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
default Default icon style is the most common variation. Only switch to another style if you need to adjust the visual weight of the element. Please note that the default style does not have a background so it works nicely on different background colors.
circular Circular style is used for different categories together with matching category colors. See an example of the usage in this template.
circular outline Circular outline style is most often used in Hero and Footer components.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.