Does Material Design 3 recommend an incorrect icon style?

Question

I was looking at the Material Design 3 Icon design principles and they have an example that seems like bad UX to me. I'm sure I'm wrong but I'd like to know if (and how) the "Do" is better designed than the "Don't", in terms of UX.

I understand the design principle they are showcasing about organic shapes but the "Do" example seems a little too stylized and I struggle more to recognize it at a zoomed out distance, as compared to the "Don't" example.

If the "Don't" had a thicker stroke, I would say it's better UX since it has better iconographic readability. Can someone with more experience weigh in?

Answer 1

Material Design has generated a lot of controversy in its history, and each version has some "controversial" decisions (to say the least), although it gets better with each version. But you've to keep in mind that these are just guidelines, not something you've to follow to the letter.

Now, as for your specific example, you're absolutely right that the Material Design icon needs some work and is quite hard to spot. In fact, I'm a bit shocked that they did that.

But the "Don't" example, while more recognizable, looks a bit disjointed, and I'm pretty sure it'll look bad at small sizes and probably have accessibility issues. Please note, I say "probably" because I haven't really tested it. I just did a zoom out in my computer and I can barely make out what the icon is, while the "Do" version has retained its visibility and recognizability.

Answer 2

Thin icons can be less perceivable

The guideline likely conforms to an accessibility requirement on Minimum Informational Graphic Contrast:

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.... Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The guidelines suggest balancing the darkness of the icon with its line thickness for best readability.

Answer 3

I think it is very difficult to come up with a consistent visual language for icons because many applications have some specific use cases, features or user requirements that force designers to create something that isn't just one of the common system or standard icons.

What Material Design has done generally is to provide the guidelines that will help with overall consistency and coherence of your visual language. This has the benefit of:

• ease of maintenance so you can quickly scan through your library and identify what is covered and what is missing when you need an icon
• extensibility so you can create new or variations to extend you library
• strong alignment or reinforcement of your brand due to ease of use and consistency of the icons

Perhaps instead of saying "Do" and "Don't", maybe the language should be "Preferred" and "Try to avoid". But I think if you look at the whole visual style of the entire icon library rather than individual examples, you'll find that the three key principles make sense and can be applied to those examples.