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.
<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>
| || ||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".|| || |
| || ||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.|| || |
| || ||A raw SVG string.|| || |
| || ||Controls the margin of the component.|| || |
| || ||Icon name from Duet to display.|| || |
| || ||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".|| || |
| || ||Whether the icon changes its size responsively or not.|| || |
| || ||Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.|| || |
| || ||Icon size. Entered as one of the icon size design tokens.|| || |
| || ||A URL from which to load an icon.|| || |
| || ||Theme of the icon. This setting will be overridden when you set the color property|| || |
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.
This section describes the different component variations, their purpose, and when to use each variation.
| ||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 style is used for different categories together with matching category colors. See an example of the usage in this template.|
| ||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.
- If you need a hidden label, use visually hidden component.
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With Markdown
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.