What Google missed in their guidelines for Material Design iconography
Details that go beyond the official guidelines to create proper Material Design iconography.
First off, a small disclaimer: I’m not good with guides or articles, but I decided to create this one because I have seen many “Material Design” (in quotes) icons made wrong, i.e., wrong because they don’t follow the guidelines, not because they are bad in terms of design or anything.
This blog post will be completely based off, or done with, the use of Adobe Illustrator and a 192×192 px workspace. I’m not that well-versed with Photoshop, and I don’t think it’s the best tool for Material Design iconography.
This blog post is really long, but that’s because of all the details and explanations included for you to be able to understand it easily.
During the progress of this blog post you may find some affirmations I make, but I will ask you not to jump into conclusions yet. Read until the end, and see what happens. Anyways, you’re always free to take your own decisions.
Let’s start.
Material Design Icons by Kevin Aguilar
Google’s guidelines are not completely right.
Why?
Let’s do a simple comparison between icons made by Google, icons made using the guidelines in its site, and icons made after understanding how Google really create the icons.
Now take your own decision. Which one looks more accurate to Google apps iconography?
Note: Google apps icons don’t have that shadow in Play Store listings, but they do after installed in your device.
Then, what’s wrong in the guidelines?
1. Metrics written in terms of dp instead of px
Dp means density independent pixels, a metric used to create graphics for devices of all screen densities.
To convert dp into pixels, use this simple conversion scale:
ldpi = dp * 0.75
mdpi = dp * 1
hdpi = dp * 1.5
xhdpi = dp * 2
xxhdpi = dp * 3
xxxhdpi = dp * 4
App iconography is always made in a 48dp workspace, which means
ldpi = 36px
mdpi = 48 px
hdpi = 72 px
xhdpi = 96 px
xxhdpi = 144 px
xxxhdpi = 192 px
This means that everything in the Guidelines should be scaled to 400% because the workspace should be a 192x192 px one. But that’s wrong. They actually referred to pixels, and not dp, and that’s what I’ll explain in more detail next.
2. Edges
Tinted and shaded edges metrics are supposed to be 1 dp in a 48×48 px workspace, i.e., 4 px in a 192×192 px workspace (according to the guidelines on the Google Design site).
Well, that’s incorrect, because, as you see, the result isn’t the same as Google’s app icons. And Check all those icons, and you’ll notice that they’re just 1 px in a 192×192 px workspace.
Similarly, they’re just 1px in the 192×192 px workspace Product Icons sticker sheets, which few people notice.
Check it here.
3. Drop Shadows
According to Google, drop shadows for raised elements should have these metrics:
Mode: Normal
Opacity: 20%
X offset: 0 dp
Y offset: 4 dp
Blur: 4 dp
Color: Refer to tint, shade and shadow values.
Once again, they used dp instead of px.
Note that I mentioned raised elements because these drop shadows metrics don’t apply to the background shape.
And the other thing Google missed there is that they said the light source comes basically from the top left corner, which means it will generate a 4px (px, not dp) X offset too.
Which change the metrics to…
Mode: Normal
Opacity: 20%
X offset: 4 px
Y offset: 4 px
Blur: 4 px
Color: Refer to tint, shade and shadow values.
If you check the raised element in the icon, it has a tinted edge, and a shadow below, but not really a shaded edge.
It’s just a drop shadow, different from the original drop shadow, and its metrics are:
Mode: Normal
Opacity: 20%
X offset: 0 px
Y offset: 1 px
Blur: 0 px
Color: Refer to tint, shade and shadow values.
Note: If your raised shape color is darker than the background shape color, then create a shaded edge for your raised shape, along with the 1px 0blur drop shadow. Also do this if your raised shape goes outside of the background shape.
How do you create 2 drop shadows in the same element in Illustrator? Create 2 fills for the element and apply every drop shadow to every fill. But, the 1px shadow should go in front of the other one.
4. Finish layer metrics
Finish layer metrics are mostly right, but when you create a radial gradient, it starts from the center. Not mentioned was that you have to manually make it start from the top left corner, in a 45° angle, similar as the long shadow for the raised element.
Additionally, guidelines say, finish layer metrics are:
Type: Radial
Angle: 45º
Color: White (#FFFFFF)
Midpoint Location: 33%
Slider 1
Opacity: 10%
Location: 0%
Slider 2
Opacity: 0%
Location: 100%
Well, there is not a single icon, made by Google, that uses the midpoint location at 33%, they all use 50% instead. (I recommend to do it too).
5. Background shape silhouette drop shadow
You can’t make this the same way as in a raised element. It’ll look not only different from what Google made, but just bad in general. Here’s how you do it:
After a long process of trial and failure (not by me, though), it appears that you need 2 drop shadows. How do you create them in Illustrator? Create double fills for the background shape, in the same way the 2 fills for the raised elements are made.
What are their colors and metrics?
The metrics for the one in the front are:
Mode: Multiply
Opacity: 12%
X offset: 0 px
Y offset: 0 px
Blur: 2 px
Color: Black #000000 always. Regardless of background shape color.
There’s no X or Y offset; the shadow will still be visible because of its blur.
And the metrics for the one behind are:
Mode: Multiply
Opacity: 24%
X offset: 0 px
Y offset: 4 px
Blur: 2 px
Color: Black #000000 always. Regardless of background shape color.
Some things Google forgot to mention
1. Always add long shadows for raised elements.
Why? It’s simple, since the layer is raised, then the artificial light source makes it cast a shadow.
What are its metrics?
It is a 45° linear gradient.
Mode: Normal
Opacity: 100%
Midpoint location: 50%
Slider 1
Opacity: 20%
Location: 0%
Color: Refer to tint, shade and shadow values.
Slider 2
Opacity: 0%
Location: 100%
Color: Refer to tint, shade and shadow values.
DON’T USE BLACK FOR MATERIAL LONG SHADOWS.
Note: when using Grey 100 — Grey 300 as color of the background shape, use Opacity 10% in Slider 1
If you don’t want the element to appear raised, simply just don’t use any shadows- pretend that it’s like ink on the paper below it.
2. A background shape drop shadow is different from a raised element’s drop shadow (which I explained earlier).
3. Squares and rectangles, when used as background shapes, should always have 12px radius corners.
4. Some other tips from Google you should keep in mind:
- Don’t use multiple scores, and don’t position a score off-center.
- Don’t raise elements over folds.
- Folds must always go on the left or top side.
- Don’t put complex elements behind folded shapes because then the element will be folded too, and that may alter or misrepresent the element.
There’s nothing else Google missed.
But if you think about it, these little details improve the icons’ look a lot, and Google forgot to explain them.
Some additional personal tips for your icons:
- If you don’t want to use a background shape, don’t let your icons exceed a 176×176 px imaginary square. Anyway, background shapes will always make your icons more consistent.
- Don’t use #ffffff or #fafafa, neither #f5f5f5. Use Grey 200+ always, because those three colors are too light and tinted edge won’t be visible.
- Don’t use #000000 or #212121. Use Grey 800- always, because those two colors are too dark and shaded edge won’t be visible. (Except for the background shape drop shadow).
- Using a grid behind your icons won’t magically make them Material.
Follow the guidelines plus these little fixes and then they’ll be Material. - NEVER use Photoshop for Material Design iconography. Photoshop isn’t the best tool for Material Design iconography, because it doesn’t work well with vectors (quality lossless scaling).
Workspace area: 192x192 px. Shape height: 176 px.
Raised elements colors are Grey 200.
Made using Adobe Illustrator.
That’s all about Material Design iconography made right. At the end is up to you to keep using Guidelines in Google Design site, or these one.
This has been Material Design iconography, corrected. In the end, though, it’s up to you to use the guidelines to the letter or to apply my fixes as well.
And yeah, they may be just a guide, or just suggestions to some of you. But after all, what makes icons Material Design if they don’t follow the guidelines or if they don’t look like Google app icons?
I would like to read your comments, and see what you think about this. I don’t want to discuss whether you should follow the guidelines or not- I just wanted to explain them so you can make Material Design iconography just like Google does, and make your icons look more true-to-style.
If you liked this, and want others to know about it or to help them improve their projects, share this on all your social networks and with all your friends.
Thanks for reading. Good luck.
Special Thanks
- Eduardo Pratti: For teaching and explaining all these details to me, and his patience in the process. Without him, this article would not even exist. I basically put all his discoveries here in a way that could be easy to understand.
- Kevin Aguilar: For the two big pictures showcasing nice looking and properly made material design icons.
- Matthieu Aussaguel: For adding this article as part of UpLabs stories and recommending it to MaterialUp users particularly.
Support my work
If you liked this post, you like/use my projects or want to show your appreciation, you can…
