Last Updated: July 28, 2020

Icons

Iconography uses images and symbols to represent an idea visually. They communicate a message and should be distinct and informative.

Implementation

The design system supports using the Font Awesome icon library. Use these icons in your application by:

Icon	Label	Class Name
	Search	`<i class="fas fa-search"></i>`
	Menu Bars	`<i class="fas fa-bars"></i>`
	Envelope	`<i class="fas fa-envelope"></i>`
	Phone	`<i class="fas fa-phone"></i>`
	External Link	`<i class="fas fa-external-link-alt"></i>`
	Upload	`<i class="fas fa-upload"></i>`
	Up Arrow	`<i class="fas fa-chevron-up"></i>`
	Right Arrow	`<i class="fas fa-chevron-right"></i>`
	Down Arrow	`<i class="fas fa-chevron-down"></i>`
	Left Arrow	`<i class="fas fa-chevron-left"></i>`

Icons should be used sparingly throughout the application to provide clarity and reduce cognitive load on users.
Icons do not have globally recognized meaning, and will vary based on people’s past experiences. Always test the icons you use to make sure they are understandable
Provide a text label with icons to clarify meaning
Do not provide a text label when the icon is decorative
Use solid icons rather than outline icons

If your icon has a text label you should hide the icon from screen readers by using the aria-hidden="true" attribute
If your icon doesn’t have a text label, you’ll need to manually add a few things so that your icon is appropriately accessible
- Hide the text label from screen readers by using the aria-hidden="true" attribute
- Provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
- Include a title attribute on the icon to provide a tooltip for sighted mouse users.