Icon library overhaul and redesign

Ahead of the rebrand I had started the icon overhaul project knowing we had a deep rooted scalability issue within our existing icon system.

With a bold new direction on the way it was prime time to start fixing our processes and foundations to make this a smooth transition.

You can see the live documentation on icons at wise.design.

The Team

Visual direction

Ragged Edge

Design Lead

Ness Grixti — Me

Staff Designer

Felipe Gonzalez

Tooling & plugins

Henrique Gusso

Mobile Development

Ilya Puchka, Joao Cevada

Web Development

Jon Stieglitz, Anton Dozortsev

The Process


01 Audit

As part of the icon audit, I reviewed the existing icon set. This included looking at in-product usage, naming and categorisation.

I interviewed designers and monitored their interaction with our icon designer to get a better understanding of the current processes and issues.

Key findings

Function specific naming & categorisation

Making it hard to reuse them for different functions.

Confusing metaphors

There were a number of icons that visually visually made no sense.

Size limitations

Different designs per size, limiting our ability to scale them, and doubling our work for new icons.

Time consuming

Every time we created a new icon, we would manually share it with 3 different platforms to update.

02 Discovery

Naming & search

From here, I wanted to understand how our teams were currently perceiving our icons. I knew we needed to rename them, but we also needed to define relevant search terms to make them easier to find.

So I asked the design community to go into a (very) large Figma file containing 150 icons and rattle off some search terms. Only one designer did it, thanks Kenny, but I needed to find another method.

Name that icon

I turned it into a game, which subsequently became the gateway to how I did research from then on.

The game was called name that icon, and it wasn’t limited to our designers, it was for everyone.

The rules were simple, every day I posted 5 icons with no context and asked everyone to name the icon exactly as they would call it.

The engagement went through the roof, with people looking forward to playing.

Collecting the data

I created a detailed document that outlined the findings for each icon—whether people understood what it represented,

how they interpreted it, and what alternative names they might have used.

Happy accidents

People had a lot of fun with the game and got surprisingly creative with their responses. Many sent in clever or intentionally funny guesses—some even turned it into a running joke.

Which not only gave us insight into how icons were interpreted, but also helped build a sense of community and boost engagement in a really organic way.

Categorisation Workshop

To understand how our teams perceived the icon library, I ran a grouping session where designers sorted unnamed icons based on what felt right. This revealed natural categorisation patterns that informed both renaming and search terms.

I then adapted the library structure to align with the team's mental model, making adjustments where needed.

03 Design

These new designs—created by Ragged Edge and refined by Felipe Gonzalez—were developed as part of our rebrand to address key issues with our previous icon set, such as visual inconsistency and lack of clarity.

The updated icons brought greater cohesion and better alignment with the brand direction.

Simplification

They use simple metaphors, allowing us to streamline our set and repeat icons across the library.

Scaleable

We start with one size then scale from there, meaning we are able to have our icons at any size we want.

Complimentary

Redesigned to compliment our new primary font, Inter.

04 Implementation & Automation

With developers spending 2–9 hours a week updating assets, we created Wise Atoms—a GitHub repo with all reusable assets and metadata for naming, categorisation, and search.

Platforms, including Figma via a plugin, pulled directly from it, automating updates and ensuring consistency. The icons were also redesigned to complement Inter, one of Wise’s new fonts.

Icon remapping

Given the large number of changes that were made to our existing set, we needed to remap the old names to the new so that each platform were able to migrate cleanly to the new structure and setup.

05 Support

New icons and improvements

Our library continues to grow, to support requests we have a workflow in slack. In certain instances we will also play ad hoc games of name that icon to validate designs ideas.

The results


Better naming

Call an icon by what it looks like for re-usability.

Fixed metaphors

We identified icons that visually made no sense.

Streamlined set

Different designs per size, limiting our ability to scale them, and doubling our work for new icons.

Search terms

A collection of words that accurately represented how our teams saw each icon.