Icon

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

Show source

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

Icon sizes (size)

 Tiny size
 Small size
 Large size
Show source

Icon type (icon)

Show source