The Icon component offers standardized sizing and interaction states for our iconography.
View detailed information about our Iconography.
Icon has two variations — filled or outline.
Interactive icons have 5 possible interaction states — enabled, hover, active, focused and disabled.
Icon has three standardized sizes — large, medium, and small. Custom sizes can be used and should be a multiple of four and keep a square 1:1 ratio.
DO: Ensure that selectable icons have a large tappable area by adding additional padding or using Icon-only Button.
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.
DO: Use a distinct icon color to have icons standout when being used to highlight features of a product or system.
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.
DO: Keep icon size relative to the text size when using together for an action.
DON’T: Make icon size too large or small relative to text size when using together for an action.