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.

System Set


When creating an icon it is important to understand the grid and styling decisions made to unify that icon within a family of icons. Use a 24px grid when designing for standard icons. A 16px grid can be used to design icons that are primarily or commonly displayed at smaller sizes.

Filled vs. Outlined

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


Our icons should be crisp and punchy. When creating new icons, use a radius on corners only when needed.


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


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


Colored icons can be used for emphasis and to indicate status. Use color sparingly bring attention to items.

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