Solid vs. Outline Icons: Which Are Faster to Recognize?

Image by @olegmagni

No doubt you’ve seen lots of icons while using your favorite websites and apps. Have you ever thought about which icons are easier to recognize? Icons are one of those little details that can make or break the experience of using an app. They need to be easy to recognize in all sorts of situations, yet they can’t look like everyone else’s icons or your app looks generic.

A few researchers at UNC Chapel Hill did a study to see if solid or outline icons are faster / easier to recognize. Here’s what they found.

So we should all use outline icons, Right? Not so fast. Recognizability varied relative to the shape of the icon itself.

“Despite this, users are still able to recognize outline icons. But it’ll take them longer to do so if the icon’s shape outlines are too close together. The study found that the thumb, scissors, phone, and tools icon were faster to recognize in a solid style. This is because the outline style of these icons all have narrow inner spacing on their cues that create visual noise.”

UX Movement

The study goes on to say some icon shapes, like a star or shopping cart, have no significantly measurable difference in recognition. In these cases the style you use should be based on other factors.  It all depends on the size and shape of the icon, and how quickly you want the user to move through the workflow. 

Studies like this are a little frustrating for some because they don’t provide explicit answers for what’s best in every situation. So like everything else in design, “it depends”.