Icons. The small, seemingly insignificant, hieroglyph-esque things you see everywhere. While small, they are mighty, and play a crucial role in our modern life. From helping us find our way through a foreign city, to making a new service feel intuitive to use, those little icons do a lot of heavy lifting.

As an international brand, these simple and recognisable visual metaphors are one of the ways we can communicate on a global scale. But we can’t do that if our icons are misunderstood and messy. As part of our rebrand, our challenge was to take our unorganised and illogical icon library, and create something streamlined, usable, and ready for the world.

Less is more

Wise’s updated brand vision is to be bold, ownable and accessible. With ambiguous metaphors and loose design rules, our existing icon suite wasn’t that. In order for our new icons to speak to everyone, everywhere, we needed to make foundational changes.

We started by simplifying the visual metaphors and removed cryptic naming. In other words, we called a spade a spade, and made it look like one too.

We used solid lines and simple shapes, with no unnecessary parts, to create stronger recognisability at all sizes. Because less is always more.

Finally, we created visual alignment with our typography, ensuring we matched the terminals and weight. Leaving us with a uniquely Wise set.

Humble Chaotic beginnings

Imagine this.

You’re working on a new experience and need an icon that represents ‘like’. You search your company’s design system and the closest thing you find is a heart, but it’s called ‘family’.

You’re then told it’s function specific and can’t use it, so you request an icon with an external designer for a ‘like’ icon, which is also a heart. The Design Systems team then adds this icon to the library, which requires 3 platform engineers and a designer to update their libraries.

All in all, the process takes about a month. Sadly, this was a very real scenario for us, and it was messy.

Test, fail, test again!

So where did we start? We knew we needed clearer names and search terms for our icons. This required us to better understand how teams within Wise used the library, so we went to the source and did some research.

I started by sending our Design team a mammoth Figjam file containing 150+ icons, and asked them to add extra search terms to each icon. Not surprisingly, no-one took me up on the offer. Except Kenny — thanks Kenny!

Learning an important lesson from the first round, we knew the research needed to be simple to be engaging. I also decided that we’d get more variety if we didn’t limit the research just to our Design team. 

Wanting to keep it fun, I created a Slack game called ‘name that icon’. The rules were simple — every day over 2 months I shared 5 icons with no context and asked everyone to name the icon. The results were the total opposite to our first round, and we ended up with an overwhelming amount of engagement.

Some people put their own spin on the game and had a lot of shared fun with it, which brought even further engagement overall. 

Thanks to the success of this game, we were able to name our icons in a way that made sense to our users.

Now to our process problem

While our icons and their categorisation were now in much better shape, we still had a process problem. As it stood, every time we wanted to update an icon we needed to export from Figma, share on Slack, and create 3 tickets. We knew this process wasn’t sustainable or scalable.

Thanks to our engineers, we landed on a simple solution, — a single source of truth Github repository we named Wise Atoms. This repository would house all of our reusable visual assets, including icons, flags and illustrations. Not only did this cut a significant amount of engineering time, it ultimately allowed us to keep all platforms in sync all of the time, which is traditionally a massive problem in multi-platform systems.

Now, you may be asking yourself, why didn’t they use Figma, or Sketch, or Photoshop (lol), as their single source of truth? As much as we love Figma, we know that design tools come and go, but our icons are forever, so Github made the most logical sense. And given that it’s where our code lives, it kept things simple too.

Closing thoughts

If you take anything away from this article, let it be this — the simplest solution is often the best. Call a spade a spade, don’t overcomplicate your research, have a single source of truth, and most importantly, take everyone on the journey with you.

I believe that the visual language of iconography is by far the most universally understood in the world. These key changes to how we see and use our icons meant that we could tick another check mark (icon) to Wise becoming the most international account.