BitDroid

Android Material Icon Generator

Philipp Eichhorn • • coding

Here are all the icons that we used for our apps at FauDroids:

FauDroids App icons

Notice something? About half of the apps have a small shadow starting in the middle of the icon and going to the bottom right. This is what I call the material shadow or that big looooong shadow making the icons look awesome (checkout the Google design guidelines for details).

Anyways, while I love designing icons, creating that shadow is a little tedious and starts getting annoying if the icon shape keeps changing. So far I have used Inkscape for all my icon / art needs and I am quite happy with it. In Inkscape there are two ways of creating a material shadow that I know of:

Long story short, I was done with exams and decided to build an Android Material Icon Generator which does just that for you: create material shadows! You can either upload your own SVG images or select one from the Google Material Icon collection.

Here are some examples I created:

Android icon Bug icon Heart icon Idea icon

How does it work? Thanks to the great guys from Paper.js working with SVG files within a canvas is pretty comfortable. My first version used the copy + translate icon approach to create the shadow. In addition I threw in some path traversal magic which managed to smooth out the edges of the shadow. The result was something like this (left without smoothing, right with):

Iterative shadow

That didn’t last very long though, since it is pretty darn slow (typically 5 to 10 seconds for 200 iterations / copies on my machine), and more importantly the shadows are just an approximation of the real thing, meaning removing artifacts will never be possible (take a close look at the mouth of the werewolf icon, see how the shadow edge is not straight?).

Next I tried calculating the shadow directly (no more iterative stuff, yay!) by finding tangents along the shadow path which have an angle of 45 degrees. Once you have those, it’s simple to subdivide the path along these points and “extend” those sub-paths down to the bottom right, essentially creating a bunch of sub-shadows which together form the real thing.

Generative shadow

And that’s pretty much it! You can check out the live thing here or take a look at the source on GitHub. Feedback is always welcome!

comments powered by Disqus