Icons

Icons are symbols that represent things, concepts, and actions. Icons are used with text to quickly and clearly communicate the purpose of that item. Iconography livens up the interface and imparts information in a friendly, familiar, and easily recognizable manner.

Icon Sizing

Icons follow the same scales as our typography. Do not use icons in sizes other than these:

Icon scales

How to Use Icons

We follow some very simple guidelines for using icons with our products.

Alignment

Center align icons and text

Text

Always pair icons with text

Stay simple

Use simple and established icons and icon concepts

Be professional

Be professional when using and choosing icons

Icon fonts & SVGs

Use icon fonts and SVGs if necessary. Don't use PNGs or JPEGs as icons

Use when necessary

Only use icons when they are necessary — don’t use icons just to use icons

Accessibility

Icons can be tricky when designing for accessibility and internationalization.

Guidelines

• Pair icons with descriptive text labels
• Aria labels
  • For informational icons, add aria labels that provide the textual equivalent — be descriptive and accurate
• Hide decorative icons from assistive technology
• Use established, simple, and easily recognizable icons

Internationalization

Icons need to be taken into consideration when internationalizing content.

Guidelines

• Translate aria labels
• Use globally recognized symbols
• Don't use region specific icons or symbols