COMPONENTS

Icon

The Icon component offers standardized sizing for our Iconography.

View detailed information about our Iconography.

icon-intro

Icon has two variations — filled or outline.

icon-variations

Icon has three standardized sizes — large, medium, and small. Custom sizes can be used as long as they are a multiple of four and keeps a square 1:1 ratio.

icon-sizes
icon-do-1

DO: Ensure that selectable icons have a large tappable area by adding additional padding or using Icon-only Button.

icon-don't-1

DON’T: Put actionable icons too close together on touch device interfaces. Tappable icons need to have a touch area of at least 44 pixels.

icon-do-2

DO: Use a distinct icon color to have icons standout when being used to highlight features of a product or system.

icon-don't-2

DON’T: Use a distinct icon color when the icon is meant to be paired with the text next to it and both are selectable. In this case icon color should match the text.

icon-do-3

DO: Keep icon size relative to the text size when using together for an action.

icon-don't-3

DON’T: Make icon size too large or small relative to text size when using together for an action.