Icons are a simple, easily graspable way to add visual emphasis or interest, signal an action, or indicate a feedback state — all while reducing a user’s cognitive load.
How to use
To draw attention to actions. Icons are helpful when combined with text to inform users about performing an action. The icon should directly relate to the text it accompanies.
To help readers find key information. Use icons as scannable, easy-to-understand visual indicators for key information like a phone number or email address.
To enhance an actionable target. Icons make great touch or click targets. Use an icon for common actions like opening a menu or sharing an article.
Anatomy
1. Stroke Terminal
2. Corner
3. Counter Stroke
4. Container
5. Stroke
Design Principles
Use established icons. Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly. We follow the Google Material icon set. If a specific icon is not available by that set, you may create a custom icon or request for a new icon to be developed.
We use the outlined and rounded icon style. For optimal legibility and recognition, some icons should remain filled. A selection of commonly used icons are shown here.
To maintain consistency, icons use a stroke width of 2px, including corners and angles.
Stroke terminals should be squared.
Contain icon within a 24 x 24px transparent square background.
Icon is limited to a 20 x 20px live area with a 2px padding around the perimeter.
Target Size
To ensure that users can easily interact with icons on a website or app, the touch targets for these icons should be 44 pixels or larger. Developers can use padding to increase the size of a touch target and meet this requirement.
A 24px icon centered in a 44px touch target.
Best Practices
Icon color generally follows the same color as the text.
When used next to text, icons should be center-aligned.
For interactive states and contexts, see Buttons & Links
