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 Guidelines/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="color-category-family" name="category-personal"></duet-icon>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon size="x-large" background="color-category-vehicle" name="category-car"></duet-icon>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon size="x-large" background="color-category-finance" name="category-wealth"></duet-icon>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon size="x-large" background="color-category-pet" name="category-pet"></duet-icon>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon size="x-large" background="color-category-home" name="category-apartment"></duet-icon>
</duet-grid-item>
<duet-grid-item margin="none">
<duet-icon size="x-large" background="color-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="color-category-family" name="category-personal"></duet-icon>
</duet-grid-item>
<duet-grid-item>
<duet-icon outline="color-category-vehicle" name="category-car"></duet-icon>
</duet-grid-item>
<duet-grid-item>
<duet-icon outline="color-category-finance" name="category-wealth"></duet-icon>
</duet-grid-item>
<duet-grid-item>
<duet-icon outline="color-category-pet" name="category-pet"></duet-icon>
</duet-grid-item>
<duet-grid-item>
<duet-icon outline="color-category-home" name="category-apartment"></duet-icon>
</duet-grid-item>
<duet-grid-item>
<duet-icon outline="color-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>

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". string ""
margin margin Controls the margin of the component. Can be one of: "auto", "none". "auto" or "none" "auto"
name name Icon name from Duet to display. For example "action-add" or "action-arrow-right". 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 ""
size size Icon size. Entered as one of the icon size design tokens. Can be one of: "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large". "auto" or "large" or "medium" or "small" or "x-large" or "x-small" or "xx-large" or "xx-small" or "xxx-large" or "xxx-small" "medium"
theme theme Theme of the icon. This setting will be overrided when you set the color property. Can be one of: "default", "turva". "" or "default" or "turva" ""

Dependencies #

Used by #

Graph #

graph TD;
duet-hero --> duet-icon
duet-modal --> duet-icon
duet-number-input --> 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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes


Troubleshooting

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