Wise Design - Icons

Icons

They say a picture paints a thousand words. Well, our icons do that too. They're the ultimate shorthand — straightforward, simple, accessible.

Approach

Less is more

Solid lines, simple shapes, no unnecessary parts. Easy as that.

Universally understood

We’re not trying to reinvent the wheel (icon). Clarity trumps clever concepts, especially for a global audience.

A perfect pairing

The icons are designed to complement our 2 typefaces — Wise Sans and Inter.

They feature the same rounded corners of Wise Sans, the cleaner form and light weights of Inter, and the square terminals of both.

Choosing the right asset

Our assets each come with their own set of strengths. So we’ve outlined which asset to use where. And what the impact of that will be.

An icon of two arrows pointing in different directions horizontally, one on top of the other

Icons

If you’re talking about product functions, or there are multiple products on one screen, use icons.

A multi-color twirling ribbon with confetti behind it

Illustration

If it’s a moment of celebration, something metaphorical, or just something bigger on screen, use an illustration.

Words

Finally, if you’re after a change of pace, or it’s more easily said than done, just use words.

Colour variations

In most cases, icons sit on neutral backgrounds. And the icon colour depends on whether it is interactive or informational.

There is also a white version designed to work against a neutral surface. The bright green background is used very sparingly.

Go to colour guidance.

Interactive

For interactive elements like close buttons we use Forest Green (Interactive Primary) on a neutral background.

Informational

For informational icons in lists, like in option components, use Content Primary on a neutral background.

White background

For use on neutral backgrounds, there is an alternative version with a white circular background.

Highlight

Bright Green backgrounds are used very sparingly to highlight — whether it’s a button or the selected category in a list.

Using icons expressively

Icons can be used outside of their functional boundaries to communicate key features in a far more expressive manner.

Key feature icons

Send

This icon symbolises sending money to others worldwide.

Receive

Knock, knock, your money’s here. This icon symbolises receiving money straight to your account.

Convert

Real rates. Quick speeds. Fair fees.  This icon symbolises converting money between different currencies.

Spend

Dollar isn't the default — we want to speak to our customers in their own currency. So we have a set of currency icons for the currencies we support.

Keep

Have 54 currencies on hand? This icon symbolises holding onto them.

Invest

Time to put your money to work. This icon symbolises investing your money with Wise.

Best practice

A receive icon next to text that reads "Quids In".

Key feature icon used in appropriate message.

A few convert icons surrounding copy that reads "Give your money room to grow".

Key feature icon used as decorative graphic.

Sizing

We have two different sizing rules for product and marketing.

Product

In product you can use icons at 16px, 24px and 32px.

Marketing

In marketing you can use icons at 16px, 24px, 48px, 64px and 96px.

Full library