Shape as background to align icons better

How to use it

Add a shape such as a circle behind icons and align the icons using the shape they're sitting on, instead of the boundary of the icons themselves.

When to use it

If you're using icons which are slightly different shapes and sizes, which is most of them, you can make a row or column of icons appear neater, and make it easier to align them optically, by adding background shapes. These shapes can be aligned, and the icons will look neater.

If you're using small icons as bullet points, this especially helps, since uneven bullet points will look odd.

What to watch out for

The shapes don't need to be too eye catching - they just need to provide a visual container for the icon. You might want to avoid bright or heavy colours.

You might want to use shapes that match the icons they're surrounding, assuming the icons are vaguely square, triangular, circular, etc., but you might be coming right back to the same problem of optically aligning different shapes.

Examples