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
12px
15px
22px
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