Hollow Icons

Why hollow icons are more work for your users and ultimately create cognitive fatigue.



Update (2 years later): This article was published has been viewed by an INSANE number designers across the industry. It was featured by Medium and many other design blogs throughout the industry. Lots of people have taken the observation almost personally?, writing really nasty and rude emails and follow up posts (some of the rude ones couldn’t even discern from UI Icons and illustrations, but they’re ‘great designers’) ¯\_(ツ)_/¯. Not the greatest, but it is nice to know who those people are and the design industry is a relatively small world.

More importantly, other great folks have written well-researched studies about this topic and presented data (that in lots of cases literally shows thin-line icons take more time, then they debated it wasn't statistically significant). I hear that, but it did also sound a little convenient. Some studies introduced bias or extraneous information that wasn't initially even discussed here. One even did a test that blocked mobile usage and forced desktop browsing for the test. That ain’t mobile research bruh. So,… those were kind of strange. Overall and anyway, it’s been awesome to see people care about this piece of user interfaces and are doing studies instead of just swallow the pills Apple gave us. So despite biased or irrelevant information in some studies, you are badasses in my mind and take your craft seriously. Thank you.

Thanks to everyone (even the assholes) who read this and replied/wrote posts about it. We’re all trying to make rad stuff and knowing how and why is the best way to do it. Best wishes whether you fill your icons in or not :)


The original article from 2013:

Recently, someone asked me to critique some new mobile work they’d done. The app looked pretty great overall, but some of the design was following the lead that iOS7 created precedent with. They were designing to “fit in” on the platform.

It motivated me to share why the practice of creating or using hollow/thin line icons in a user interface is, generally, not a great idea. Even to fit in on a platform.


Red indicates work.

Take a look at the example above. The red lines indicate areas where cognitive load is occurring. Your brain traces the shapes on the first row an average of twice as much. Your eye scans the outside shape and then scans the inner line to determine if there is value in the “hollow” section.

Icons without this empty core are processed as definite and only the outer lines are processed. Depending on the outline of the shape, this happens pretty fast. No matter the shape, though, the hollow icons take more time to process.

This phenomenon has been documented (and debated) tirelessly with how the brain processes reading of words (;tldr is that you read ‘shapes’ not individual letters).

The icon situation is a more complex issue than words sadly. There are only 26 letters in the latin alphabet. Icons are potentially, innumerable meaning you’d have to learn more “letters” over time to understand more icons.

Most people won’t do this, they’ll just tire of the design and decide they don’t like it. It’s probably part of a larger reason why a lot of people have been complaining about iOS7 (I know, I know, lots of people like it too), but that’s not the topic of this idea, it’s just an example of a system-wide hollow icon use.

Choosing to use hollow icons for the sake of lightness / very-modern aesthetic is not the issue, it’s that to sacrifice the usefulness of what an icon does (aide in reading speed) for aesthetic feeling is really bad. Don’t follow bad design decisions to appease a platform.

Design above it.