Forma 36

Icon

StorybookGithub
stable

Icons are used to indicate actions, statuses and navigation. The Icon component can be used in Button, TextLink, Note and other components.

Table of contents

  1. Best practices
  2. Variations
    1. Icon colors
    2. Icon sizes
    3. Icon type

Best practices

  • Select an icon that accurately represents the subject
  • Pair icons with text
  • Position buttons consistently in the interface
  • Ensure the behavior of the button is consistent in all use cases
  • Consider how the button fits into the context of the screen and reduce complexity where possible

Icon variations

The Icon component can be configured in different ways using variations in color, size and icon type:

Icon colors (color)

Primary
Positive
Negative
Warning
Secondary
Muted
White

Icon sizes (size)

Tiny size
Small size
Large size

Icon type (icon)