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

UX Movement
Feb 20 · 6 min read

When building a mobile app, there comes a time when you have to decide whether to use solid or outline icons. Which style is better for user experience?

Some think the difference between them is just a matter of preference, but research shows there’s more to it than that–one style has a faster recognition rate than the other.

Knowing when to use solid or outline icons will make it easy for your users to navigate your mobile app. They’ll be able to recognize your icons faster and select the right options.

A research study, “Filled-in vs. Outline Icons: The Impact of Icon Style on Usability,” discovered that icon style affects task performance. Task performance was measured by the speed and accuracy of recognizing and selecting icons.

Solid icons were generally faster to recognize than outline icons, but with a few exceptions. And some icons showed no difference in task time. This has to do with characteristic cues.

Characteristic Cues

For example, the tail of a comment bubble icon is its characteristic cue. Without it, it’s simply a circle. The keyhole on a lock icon is its characteristic cue. Without it, it’s easy to mistake the icon for a bag. The teeth on a cog icon is its characteristic cue. Without it, it looks like a doughnut.

The lock icon used in the study had no keyhole and was the most misidentified icon with over a quarter of all failures. The keyhole is a necessary characteristic cue because without it the icon looks like a bag, purse, or even a pot.

These characteristic cues are what users rely on for icon recognition. When using icons, make sure it includes all the characteristic cues users need to identify them. If an icon could look like a different object, consider adding extra characteristic cues to it.

When Outline Icons Are Faster

The study found three icons that were faster to recognize in outline style–comment bubble, trash can, and key. These icons have subtle characteristic cues that appear on the outer edges of the shape. Because of this, an outline style makes those cues easier to notice.

The comment bubble tail is easy to miss as a solid, but more apparent as outlines. The trash can lid is hard to notice in solid style, but more visible in an outline one. The key teeth are subtle, but the jagged edges are more distinct in an outline style.

When an icon’s characteristics cues are subtle and appear on the edges of a shape, use an outline style. This makes the cues more salient which results in faster recognition.

When choosing icons, it’s best to stick to a consistent style. Instead of mixing solid and outline styles, try to choose a set of icons that have salient characteristic cues with sharper angles that point outward.

For example, if you compare the comment, trash can, and key icon to ones with more salient cues you can see the difference. The more salient cues jut out and are easier to notice.

When Solid Icons Are Faster

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.

It’s best to use solid icons for objects that have a narrow inner spacing. The silhouette form offers a simpler shape, making the icons more identifiable.

When Style Makes No Difference

This means the outline style for these icons didn’t slow users down. The reason is due to the wide inner spacing they have that reduces visual noise. The more narrow the inner spacing is, the more noise it creates, which interferes with recognition.

Icon Style for Button Selection

Users need more recognition speed on options they haven’t discovered yet, not on the one they have already selected it. A solid icon for the active button isn’t necessary. It’s more important for the inactive buttons to get solid icons.

Use an outline icon to highlight the active button, not a solid icon. It offers a clearer change in style and color that reinforces the selected button.

Iconoclastic Guidelines

In summary, here’s what you should keep in mind when using icon styles:

  • Icons consist of characteristic cues that need to be identifiable and salient
  • Solid icons are faster to recognize unless their cues are subtle and not salient enough
  • Outline icons are more recognizable when they have wide inner spacing
  • Use outline icons if the solid version has subtle characteristic cues on the edges
  • Use solid icons if the outline version creates narrow inner spacing

Originally published at uxmovement.com on February 20, 2019.

UX Movement

Written by

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com