Iconography

We use icons and symbols to re-enforce our content. Iconography helps maintain context between views, provides clarity and guidance to actions, and reduces the cognitive load for our users.

Font Awesome

We leverage the very popular icon framework Font Awesome. Talk to your manager about obtaining the pro version and all the icons you'll need to develop your products

Learn About Font Awesome

Basic Guidelines

1

Consistent Styles

FontAwesome provides icons in three styles, solid, regular and light. When designing a product, pick one of the styles and stick with it throughout the design of the entire product.

2

Usage & Context

When using an icon to support content make sure the icon you choose is relevant to the content material. For example, if you have an add user button you could use either or

but avoid using because a trash can icon would not make sense when adding a user.

3

Sizing

Icons are meant to support text and actions so treat them like fonts. The general rule is, your icon size should be the same as the font size for the element it is supporting. For example, if your button font size is 14px then your icon should be 14px as well. However, this rule is not set in stone. We expect our designers and developers to use their best judgement depending on the situation. If there are any doubts, please don't hesitate to reach out to the Product Design Team.