Icons

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

Home icon and globe icon side by side.
Approach
Minus icon.
Eye icon.
Collapse icon.
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
A multi-color twirling ribbon with confetti behind it
The words Riyal to Real Really Fast on a yellow background with lots of custom glyphs
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.

Beach icon
Freeze icon.
Beach icon.
Beach icon highlighted in green.
Using icons expressively

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

Expressive arrow
Key feature icons
Send icon
Receive icon
Convert icon
Spend icon
Keep icon
Invest icon

Best practice

A receive icon next to text that reads "Quids In".
A few convert icons surrounding copy that reads "Give your money room to grow".
Sizing

We have two different sizing rules for product and marketing.

Icon sizes in product
Icons sizes for marketing
Full library