Usability of solid icons

How to make good solid icons

Martin LeBlanc avatar
Written by Martin LeBlanc
Updated over a week ago

We have noticed an increase in the popularity of a certain style of solid icons. It is the practice of creating an outline icon and then inverting it so that it looks like a solid one. Other times, the same outline source file is used as a starting point for the solid version of the same icon. This creates problems for the usability of the solid icons that were created in this way.

When designing solid icons, the icons need to be rethought based on the style limitations, making sure that they are easy to understand.

The essence of solid icons

Solid icons are almost always exclusively used for user interfaces in very small sizes (for example, as menu elements). You will almost always find solid icons used in 16px or 32 px.

Solid icons are characterised by the use of negative space and by being very simplified. When used in very small sizes, they are still recognisable.

If a customer would want to use an icon in a larger size, they would most often go for an outline or a filled outline icon instead.

Bad practices

This is an example of solid icons that are not well designed. They have too many details and very thin white lines (the negative space). When these icons are reduced to 16px or 32px, they become blurry and you can't make out what they are trying to represent.

In small sizes, these icons lose their functionality.

In contrast, a pack like the one below can still be recognised when the size is reduced:

Bad solid icons

In some cases, we see how the solid icon has been almost directly converted from its outline version, by inverting the colours.

Good glyph icons

In the examples below, the icons are not simply converted directly to glyph. Instead, the designer has paid attention that the concept that the icon represents is still very clear.

Here are some more examples of good icon families in solid style:

Did this answer your question?