Iconography

Icons are used to express actions, an item’s state, and even to categorize data. All icons created and added to the system must be clear, intuitive, and consistent. They should be used sparingly and in a way that is consistent with their original intent.
Demo and Developer Guidelines
Figma Document

System Set

Style

When creating an icon it is important to understand the grid and styling decisions made to unify that icon within a family of icons.

Filled vs. Outlined

Our icons predominantly consist of filled icons because they offer ideal contrast to the heavy content throughout our product.
Correct
Incorrect

Radius

Our icons should be crisp and punchy. When creating new icons, do not use a radius on corners when possible.

Naming

When possible, icons are named after the physical object they represent. For example, we would call an icon trash instead of delete.

Sizing

The default recommended sizing for icons is 24px x 24px. Icons can also be used at 16px x16px for small sizing and 32px x32px for large.

Adding New Icons to the System Set

Steps to follow:

1. UX Designer checks the current system set to see if an existing icon can be used

2. If no icon exists in the system that is appropriate, the UX Designer can explore a new icon to be used during the conceptual phase

3. UX Designer works with the Design Systems Team during this process to ensure the new icon meets the established design guidelines

4. Once the new icon design is approved and ready for development, the icon can be requested by the engineering team to be added to CORE for the next release

5. NOTE: If a specialty icon is needed that will not be used system wide, an .svg version can still be used in development, if needed