Skip to main content

Icon
New

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

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

Dependencies #

Used by #

Graph #

graph TD;
duet-alert --> duet-icon
duet-button --> duet-icon
duet-card --> duet-icon
duet-choice --> duet-icon
duet-collapsible --> duet-icon
duet-date-picker --> duet-icon
duet-empty-state --> duet-icon
duet-footer --> duet-icon
duet-header --> duet-icon
duet-hero --> duet-icon
duet-input --> duet-icon
duet-link --> duet-icon
duet-modal --> duet-icon
duet-number-input --> duet-icon
duet-step --> duet-icon
duet-tooltip --> duet-icon
style duet-icon fill:#f9f,stroke:#333,stroke-width:4px

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.



Tutorials

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

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

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