Skip to main content
LocalTapiola Turva

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". string "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". string "medium"
theme theme Theme of the icon. This setting will be overrided when you set the color property. Can be one of: "default", "turva". string ""

Dependencies #

Used by #

Graph #

graph TD;
  duet-hero --> duet-icon
  style duet-icon fill:#f9f,stroke:#333,stroke-width:4px

Integration

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