1

As far as I know mixing solid and hollow icons is a bad practice. Why Apple does it then in iTunes desktop software? Are there any iconography principles that allow mixing of these two icon styles? On the screenshot below icons such as "Music", "Books", "90's Music" have solid fill, others are line type icons.

enter image description here

  • Are they really? Even those are solid filled with a soft color. – Harshal Nov 4 '16 at 12:02
  • @Stacked , I think they are line type because if you design these icons only with dark grey you would see that they are hollow inside. Where "books" icon has only one color - dark grey and filled with it. If icons with light grey are considered filled than they are filled differently from "books" icon, for example. In any case icons style is not consistent, isn't it? – Peter Nov 4 '16 at 12:58
  • It is not consistent. I agree. – Harshal Nov 4 '16 at 12:59
  • It's more of a visual question. In this case the icons work well together. – Mayo Nov 4 '16 at 13:23
3

In general, I think that from an aesthetics standpoint it's reasonable to combine them. What Apple does in the list is a question of readability. Note how the "Books" and "Audiobooks" share the same shape, but are filled/outlined. They are next to each other, and using a filled icon for Audiobooks with a play symbol would be more consistent, but it would be less readable.

The Nielsen Norman Group research on Icon Usability suggests four criteria to evaluate icon usability:

  1. Findability: Can people find the icon on the page?
  2. Recognition: Do people understand what the icon represents?
  3. Information scent: Can users correctly guess what will happen once they interact with the icon?
  4. Attractiveness: Is the icon aesthetically pleasing?

(source: https://www.nngroup.com/articles/icon-testing/)

Considering that list, Apple's list focuses on findability and recognition, rather than focusing on Attractiveness and consistency and thereby ignoring the ever so important first two aspects of that list.

In my personal practice, I quite often use hollowed out icons for non-imperative/important calls to action, e.g. buttons which are not filled in, but have a border, while I keep filled in icons for larger, more important calls to action which have better visibility in terms of color, weight and presence.

2

They look good to me. They all have fills --just different percentages of grey, which is legitimate.

What's grotty and unprofessional-looking is to use visually dissimilar styles, i.e. different line weights, different sizes, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.