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.
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.
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.
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.
Icon components are hidden from assistive technologies by default.
A text label is always required when an icon is used for a purpose other than illustration.
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.