Project 2022

CRM Icon set revamp

Feature Summary

This year brings a new look for our apps. If you haven't seen them yet, we will be launching a refreshed, bolder look starting with our mobile and iPad apps.

My Role

Design, discovery and ideation.

Tools

Figma, Illustrator, Principle, Protopie

Problem Statement

The icon set that we had previously was almost 5 years old, which doesn't match up to the current trend. Having sharp edges on a fill icon made our icons less appealing for 2022. Additionally, we saw an opportunity to increase the readability of icons, especially when they are nested within a variety of different backgrounds.

What's New?

With a complete overall we are moving from a fill icon to a line icon system.

Four, bolder Sizes : 30, 24, 20 & 16px

We're increasing the stroke weight of our icons and simplifying our icon system by now only maintaining icons in these two sizes:

Solution

30px using a 2.5-pixel stroke size
24px using a 2-pixel stroke size (considered our main/default size).
20px using a 1.5-pixel stroke size
16px using a 1-pixel stroke size

Refreshed style across the set

We merged the sets by redrawing every single icon in the new style with the thicker strokes. The vast majority of icons keep the same metaphor as before.

Increased the difference for active states

To increase clarity, active states are no longer filling up a portion of the icon to using only subtle changes to weights with the theme colour.

Proper Icon Code

Naming the icon with a proper code number was really helpful for the engineering team and the design team with assets not getting repeated or recreated.