Iconography

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.

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

Icon Library

Navigation Icons

Social Icons

Communication Icons

Content Icons

Weather

Date & Time Icons

Alert Icons