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.