Adaptive Icons are intended to make all icons on a device look coherent and still allowing customization by applying different masks. I built a template for Sketch and a web tool to support designers in creating and debugging their icons.

Sketch Template

The app icon is one of the most important assets of an app and therefore it is key to make it look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra touch to your app. These icons consist out of a background layer, a foreground layer and a mask. Stacking these three layers produces the final icon. While I was designing my first Adaptive Icon I found it quite difficult to design the layers and imagining the actual result. Because of that, I created a template for Sketch, which lets you design the layers separately and produces a live preview of the final icon. The template has been downloaded by over 10,000 designers from Sketch App Sources so far.

Adapticon

Once the layers of an Adaptive Icon are done, the designer has to debug the icon to see if all the metrics and proportions are correct. The icon has to look good under all kinds of masks and also when it's being animated. With Adapticon I came up with a design tool making the debugging process very easy. Additionally, it gives designers new to the topic a starting point with examples and resources. The tool is already available for two years and was used by over 50,000 people.