Skip to main content

Icon

Icons can be used to provide extra visual context for other items.

Usage​

Chameleon icons should be used to communicate action, draw attention and convey more meaning. They should, when possible, always be paired with a text label.

Size​

All icons are available in sets of four different sizes: small 16, medium 24px, large 28px, xlarge 32px. The default size is medium.

Do's & Dont's​

Pair the Tooltip component with an icon without a label.
An icon should always be designed on a 24px grid with a padding of 2px.
Don't be overly literal and avoid complexity when designing icons.
Your icon color need to pass a color contrast ratio of 3:1