Icons

Icons make functions or other content more informative, and accessible. We show users icons in parts of a page that may require additional description to portray the context or function of a piece of content.

Icons are exceptional and don't have to be pixelated before usage.

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

All components typically use icons on 16px artboards. Icons on 20px, 24px, and 32px artboards can also be used within the UI. Be sure icon size is consistent throughout your product.

16px and 20px icons are optimized to feel balanced when paired with Body or Title font styles. Use 24px and 32px when larger icons are needed.

All touch targets for interactive icons need to be 40px or larger. Developers can add padding to a touch target with CSS to meet the 40px requirement.

Icons use a limited color palette. Inaccessible branding colors should not be applied to icons.

When used next to text, icons should be center-aligned.

Consider optical illusion when apply paddings to components with icons.

Follow WCAG 2.1 Standards

In addition to icons in global headers or navigation, an icon or group of icons should inhabit a single point of emphasis on a page.

The icon you need is probably in the grid of popular icons below. If a project seems to call for an icon not part of that grid, it could indicate that another method of description should be used.

Icons should be accompanied by descriptive text. With the right text, an icon does not need to be called out for use with accessibility tools like a screen reader. If an icon must be described, use aria-label attribute.