Coloured background shapes for icons

How to use it

Add a faint coloured shape, such as a circle, behind an icon.

When to use it

If you want your icons to feel more on brand by using a certain colour, and you don't want to, or can't use coloured icons, you can add a colour to these icons by putting a faint coloured shape behind them. In the example below it's a circle. This can help icons feel more connected, even if they're different shapes and sizes, since you can align the coloured circles and the colour will connect them visually.

What to watch out for

This works better with icons made from light strokes, through which you can see the background. The heavier the icon, like the bar chart icon below, the less of the colour you can see.

The colour doesn't need to be bright at all, since you're just giving an impression - the icon itself should be the focus, so the colour should be low saturation and high brightness.

Examples