Legacy
Round
Full Bleed (Foreground)
Designing Adaptive Icons
With Android O, Google introduced adaptive icons that unify app icon shapes across devices, offering consistency and opening up new visual effects. This guide covers their functionality and tips for designing them effectively.
To understand the evolution of this feature, take a look at where it started.
Initially, each app determined its own icon shape, size, and drop-shadow, leading to inconsistencies. Here's an example from Google’s icons in 2012:
Though recent improvements and material guidelines have added consistency, developers still face challenges. Adaptive icons aim to balance developer freedom with a cohesive user experience by defining clear expectations for app icon display.
As a result, custom launchers and icon packs have emerged to standardize icon sizes and shapes. Devices also introduced background overlays for icons to maintain consistency across platforms.
Fundamentals
Size and Shape
Adaptive icons are designed to be 108dp by 108dp but are masked to 72dp by 72dp for consistent display. Different device shapes and masks can create variations, so a 66dp diameter circle in the center is considered a safe zone.
Keylines
Keylines ensure visual alignment with common shapes, such as circles, squares, and rectangles, forming the foundation of the icon grid. Reference these keyline shapes:
- Circles: 52dp & 36dp diameter
- Square: 44dp by 44dp with a 4dp corner radius
- Rectangles: 52dp by 36dp and 36dp by 52dp, with a 4dp corner radius
Layers
Adaptive icons consist of a 108dp by 108dp foreground and background layer, with the background being fully opaque. Foreground transparency enables animations and effects, creating a dynamic icon experience.
Design Considerations
Clipping
Since the mask shape varies, place critical elements within the safe zone and avoid placing important content near mask edges to prevent unwanted clipping.
Background Anchoring
Moving background elements independently can create depth. For example, the calculator app anchors the equals button in the background for subtle, layered motion.
Masked Masks
Using a solid foreground with cutouts allows backgrounds to shift, revealing different areas. This creates dynamic effects, such as a colorful background peeking through cut-out shapes.
Light & Shadows
Separate shadow layers and lighting effects can create playful depth, though careful planning is necessary to avoid unrealistic interactions. Follow material guidelines for cohesive lighting across icons.
Leave Behind Effects
Elements entirely obscured by the foreground can be revealed during motion, providing a unique visual effect.
