Cyril Mottier

“It’s the little details that are vital. Little things make big things happen.” – John Wooden

Adaptive Icon Template

The recent release of Android O introduced a new concept for launcher icons called “adaptive icons”1. The main idea behind adaptive icons is to display a variety of shapes across different device models. In practice, each OEM provides a mask which the system uses to render all icons with the same shape. You can obviously read more about adaptive icons on the dedicated webpage.

As an icon designer, creating an adaptive icon can be quite cumbersome. You have to deal with several constraints but it’s difficult to have a clear view on the actual look of your icons. In a recent tweet of mine, I mentioned a pretty handy web tool that you can use to get a quick preview of your launcher icons:

Although this tool is really nice to preview the possible animations of your icons, it also requires you to upload the images on a server and copy-paste their URLs in the appropriate fields making the design process quite lengthy and boring. In order to quickly look at some possible renderings, I recently created an Affinity Designer template:

The template makes use of a new feature in Affinity Designer 1.5: Symbols. The left-most icon – labeled “Master” – is based on a symbol which is then duplicated to get different shapes. Any changes made to the master symbol will be directly replicated to the other copies. Symbols are marked with a solid orange border on the left.

As I always do when releasing graphic assets, I ensured the .afdesign respects a certain hygiene: made only of vector-based elements, sensibly layered, named and grouped, etc. The file has been created with Affinity Designer 1.5.5. Also note the following resources are licensed under the CC BY 3.0:

I really hope you’ll find this .afdesign useful in the process of adapting your icon to the new Android O adaptive icons.

  • 1: I have seen several feedbacks regarding the introduction of the new concept of adaptive icons. I personnally consider the initiative as an interesting approach to improve consistency across icons. However, I’m also disappointed by the loss of freedom, creativity and possibilities. In particular, I’ve always been a huge fan of having an outer shape that is unique to an application and expresses the metaphor of your app purpose. It looks like adaptive icons will slowly fade that unique particularity.