Designing Adaptive Icons
Google Design — Medium | Nick Butcher
Android O introduces a new app icon format: adaptive icons. Adaptive icons can make devices more coherent by unifying the shape of all app icons and opening the door to interesting visual effects. This post explains how they work and explores some techniques for designing them.
For a look back at where this feature has come from, see:
Size and shape
Adaptive icons are 108dp*108dp in size but are masked to a maximum of 72dp*72dp. Different devices can supply different masks which must be convex in shape and may reach a minimum of 33dp from the center in places.
Examples of different shaped masks being applied
Because of the minimum reach of the mask, you can consider a centered 66dp diameter circle as a safe zone, guaranteed not to be clipped.
Safe zone within a rounded square mask
Keyline shapes are the foundation of the icon grid helping your icon’s visual proportions be consistent with other apps’ icons . The keyline shapes are:
- Circles: 52dp & 32dp diameter
- Square: 44dp*44dp, 4dp corner radius
- Rectangles: 52dp*36dp & 36dp*52dp, 4dp corner radius
See the templates included at the end of this article.
Adaptive icons are actually made up of two layers; a foreground and a background. Both layers are 108dp*108dp; the background must be fully opaque while the foreground may include transparency. These layers are stacked on top of each other.
Providing elements in two separate layers which are larger than the displayed (i.e. masked) size creates the opportunity for interesting visual treatments and animations. Exactly what effects may be applied and when is still something of an open question; it is up to device and launcher makers to decide. Here are some simple examples you could imagine: parallax or pulsing by independently translating or scaling each layer before applying the mask.
As the 108dp*108dp icons are masked up to 72dp*72dp, the outer 18dp on each side can be considered the “extra” content, only revealed during motion.
The material design guidelines for creating product icons still very much apply. Specifically the icon anatomy, shadows and finish remain, but you can now place elements in either the foreground or background layers yielding different effects.
Now I’m sure that many icons will be well served by placing their brand mark in the foreground on a solid colored background and calling it a day. This will ensure that your icon fits in well on the device. What excites me is how we as a community will explore these new constraints and find interesting, playful and innovative ways to make delightful icons. Here are a few things to keep in mind and a few ideas to potentially explore.
Due to the dynamic nature of adaptive icons, you cannot know the exact mask shape that will be applied. For that reason it’s best to place any critical elements like your brand mark inside the safe-zone and to stay away from the mask edges.
Placing some elements which might appear to be foreground, actually in the background means that they will move independently. For example the calculator app places most elements in the foreground, but the equals button on the accent color block in the background:
Elements on different layers emphasize the layering
This creates interesting opportunities for motion where you visually anchor on the bright color block, but it moves less than the foreground elements, creating a sensation of depth.
I think that there may be interesting opportunities for placing masking elements in the foreground — that is solid elements with areas cut out. Consider a possible icon for the Google Play Store, this might be constructed in an ‘obvious’ manner, that is placing the colored triangle in the foreground atop a white background.
A ‘standard’ foreground placed atop a white background
Instead of doing this, we might use a colorful background and a white foreground with the triangle subtracted to produce the same static output:
An alternative colorful background with masking foreground
This setup would allow the colors ‘peeking through’ to move independently of the mask revealing different parts of the background when translated or scaled.
Left is a regular composition; Right with a masking foreground
Light & shadows
The interaction of lighting effects and shadows placed in separate layers can have interesting results. For example using the long-shadow technique on the foreground element can have a playful interaction as it moves within the masked area. Similarly lighting effects can be placed in the foreground layer rather than being baked into the background. For example, a ‘finish’ layer can be placed in the foreground to emulate a light source. Placing this in the foreground means that it will play over the background layer when under motion, moving at a different rate to it.
Example of foreground shadow and (exaggerated) light source cast on the background
Be careful not to create an effect that doesn’t make sense e.g. a shadow detaching from a foreground element or moving behind a background element. Also remember that many icons are likely to be seen together so be conservative with bespoke lighting effects and stick close to the material guidelines.
You could place elements in the background layer which are completely obscured by the foreground layer and only revealed under motion.
Elements only revealed under motion
Resources and tools
Here is my sketch file which you can use as a template whilst creating adaptive icons. It includes the icon grid, keyline shapes and safe area. It’s implemented as a symbol so changing the master element will update the copies giving you a preview with different masks applied.
I’ve also uploaded an Adobe Illustrator template if that’s more your thing.
Additionally check out these other resources i’ve come across:
- Adaptive icon preview tool
- Affinity Designer template
- Bjango templates include adaptive icons
- Figma template (requires login)
Adaptive Icon Playground
In developing adaptive icons, I’ve come to appreciate that many of the subtleties come from the interaction of the foreground and background elements when motion effects are applied. This is still something of an open question as we are yet to see how device and launcher makers will implement this. To help investigate this space, I’ve created a small test app to help you evaluate it whilst creating your icon:
Experiment with masks and motion effects applied to your icons
The app displays all applications installed on your device with adaptive icons. Scrolling the grid applies parallax effects to the icons and touching an icon applies a scale effect. You can configure the strength of the effects and change the mask applied to all icons. Hopefully this tool helps you to envisage how your icon will appear and may move on different devices.
You can download an APK or checkout the source on github:
Go forth and adapt
Hopefully this post has given you both the information and some inspiration to design an awesome adaptive icon for your app. As a user, I cannot wait for my apps to become more coherent. What excites me even more though, is seeing what creative solutions we come up with as a community.
If you’re a developer looking to build an adaptive icon, then join me in part 3: Implementing adaptive icons.