Icon (design)

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.

All icons are available in sets of four different sizes, where the default size is 24px x 24px.

<Icon as={Brand} size="small" color="primaryBase" />
<Icon as={Brand} size="medium" color="primaryBase" />
<Icon as={Brand} size="large"  color="primaryBase" />
<Icon as={Brand} size="xLarge" color="primaryBase" />

Icons have access to the full Chameleon color palette, but need to pass a color contrast ratio of 4.5:1.

Fill vs. outlined

Switching between icon styles should always be intentionally. For example, indicating an active state by choosing for a filled icon and a deactivated state with the outlined style. We also recommend not to mix up styles when grouping icons.

Tooltips

Whenever you're desging icons without text labels, they should always be paired with a Tooltip component to provide the user more context and meaning.

When designing new icons

Icons should always be designed on a 24px art board with a padding of 2px.