Christmas is still far away, but we decided to give presents to our users a bit early this year. In the last few weeks, we released a fresh set of icons to reflect our platform’s look and to honor the launch of our brand-new design system, known as Soul.
Christmas is still far away, but we decided to give presents to our users a bit early this year. In the last few weeks, we released a fresh set of icons to reflect our platform’s look and to honor the launch of our brand-new design system, known as Soul.
Why make a new icon set?
Over the ten years that our platform has existed, we’ve collected and applied hundred of icons from several sources. Until now, we were using a combination of Material Icons, whatever free icon sets we found, plus custom icons we designed for our unique needs.
Each designer had their own taste when it came to selecting and designing, and even though we tried to keep the style of icons unified, by the end of 2021 we hit the point where inconsistency started to be a problem.
Around this time, we decided to create our Soul Design System to overcome other points of inconsistency across our ever-growing platform. This would allow us to remove our old libraries from the product and impose the new design system everywhere. And it also presented the perfect opportunity to refresh our icon set.
Choosing our path
We grabbed the opportunity to make our icon set consistent, and we had two options for how to do it.
The first was to use an open-source icon set or to buy one. Initially, this seemed like the easiest and fastest option to achieve our goal, but we quickly eliminated it. While we did find a lot of pretty good sets, no single one covered all of our needs. (You can find the list of icon sets that we considered at the end of this article.)
Our second option, after failing to find an existing icon set, was to create our own from scratch. To be honest, this option wasn’t on the table at first — the simple reason being that it takes a lot of time and, after all, there isn’t any point in creating something that already exists.
We weighed our options carefully. Since we weren’t able to find a set to cover all the icons we needed, and also to ensure better control of outcomes, we ultimately decided to create our own set.
Starting from scratch
Now, it was time to have some fun. We started by specifying a few guidelines.
In our previous icon set, the icon space we used was 16x16px. This turned out to be a bit limiting and made it more difficult to create icons properly in some cases. At that point, we also hadn’t defined different icon sizes, so everything was a bit random.
For our new icon set, we decided on the default size “Medium” (18x18px), plus two extra sizes: Small (12x12px) and Large (24x24px). Each size would be defined by its grid and guide the creation of all future icons.
Picking a style
After settling the size issue, we had to pick a style to follow. We debated between filled and outlined icons, and in the end, we decided to use both styles.
The outlined style is our default for UI icons, using a 1px shape for all three sizes.
We use the filled style for the platform icons representing our in-product apps to help users easily recognize them.
Designing the foundations
Once we decided on the sizing strategy and the style, it was time to begin the creation process, starting with setting the foundations.
We used a 1px safe zone for the Medium size for each icon. This unit is also applied to opposite-meaning icons. For subtraction, we defined 2px negative space to help readability.
Border radiuses were carefully selected to work across the whole set without any need to use a different one. Each of them has its special place within the whole form.
The angled system we follow is pretty simple: 45˚ as a default option, and 15˚ for scale.
There is no magic behind these rules, nor any revolutionary discovery, but we were lost in the past without them.
Creating Soul UI icons
Icon by icon, we recreated the whole set, reduced or combined some icons into one, and added a few new ones.
We created a set of Medium-sized icons first, so that we could update all the new icons in the product as soon as possible. Small and Large variants were added after we finished the foundational set, which ultimately saved us a lot of time in getting started.
After a few weeks, we had accomplished our mission. Our set of more than 500 unique icons was alive and ready to apply.
The last step was to hand the icons off to our development team so they could update the design system and apply it to the platform. There was a great effort especially from our coders team, who refactored every repository and changed some icons literally one by one.
At the same time, we had to update our Figma libraries and the projects our design team worked on. This had to be done hand in hand, to avoid a situation where our designs had a newer version of the design system than our product.
This final process took a few months, but our set is finally here, and we are proud of the result. Of course, we are not done yet, as design is never final; we continue to create and apply new icons as new products and features get introduced to our Emplifi CX Cloud. But we are happy that the toughest part is behind us.
Soul UI icon set
If you are curious, you can also discover our Soul Icon set live on soul.emplifi.io and if you like it, feel free to visit our Figma Community page and duplicate the set for yourself. We’re constantly adding new icons to cover our needs, so watch this space.
Ready-to-use icon sets
All of that said, just because we made our own icon set doesn’t mean you have to. I don’t believe in ego design. It may be cool to say, “I made this,” but the question is, do you really need to make your own, or is it just ego blocking you from using something done?
The truth is that there are plenty of great icon sets out there (other than ours). Here are some that we looked at for our Cloud that I would recommend:
