Adaptive and Monochrome App Icons on Android

By Michael Samuel Naeem · September 29, 2024 · 5 min read

Android app icons stopped being "a PNG at five densities" years ago, and every so often I still see an app ship a logo that gets its edges chopped off on a Pixel or shows up as a flat gray blob when the user turns on themed icons. Adaptive icons — and now the monochrome layer that powers themed icons — are the reason. They're not complicated, but they have a specific geometry and a specific set of layers, and getting them right is the difference between an icon that looks intentional on every device and one that looks broken on half of them.

The layer model: foreground, background, monochrome

An adaptive icon isn't one image. It's a set of layers the system composites and masks:

• Background — a full-bleed layer, often a solid color or subtle gradient. The launcher masks it into the device's icon shape (circle, squircle, rounded square).
• Foreground — your logo, drawn on top, also 108dp but with the logo confined to a safe zone (more on that below).
• Monochrome — a single-color silhouette of your icon that the system tints for themed icons.

You declare them in res/mipmap-anydpi-v26/ic_launcher.xml:

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>

Splitting the icon into layers is what lets the launcher do the things that make modern home screens feel alive: apply device-specific masks, animate parallax as you scroll, and — with the monochrome layer — recolor your icon to match the system theme.

The safe zone is not optional

The single most common mistake: designing to the full 108dp canvas. Only the central 66dp is guaranteed visible. The outer ring exists for two reasons — device shape masks eat into it differently (a round mask clips more corner than a squircle), and the launcher uses that margin for parallax and pull-to-refresh motion. Anything important outside the central circle will get clipped somewhere.

Practically:

• Center the logo and keep it within the inner ~66dp.
• Treat the outer area as bleed — background color extends there, but no content you care about.
• Test against multiple mask shapes, not just your device's. A logo that looks fine on a squircle can lose a corner on a circle.

I've watched a brand's wordmark get its last letter shaved off on round-mask devices because it filled the canvas. The fix was thirty seconds of scaling down into the safe zone — but only after a user complained.

The monochrome layer and themed icons

Themed icons let users tint every icon on the home screen to match their wallpaper and system color scheme. The system produces this by taking your monochrome layer, discarding its color, and applying the theme's tint. If you don't provide a monochrome layer, your icon opts out — it stays full-color while everything around it is themed, which looks like an oversight to users who enabled the feature.

Designing the monochrome layer is its own small craft:

1. It's a silhouette, not a grayscale copy. Provide flat, solid shapes; the system supplies the color. Gradients and multi-tone details flatten badly.
2. Respect the safe zone again — same 66dp constraint.
3. Keep it legible as a single color. Fine detail and thin strokes vanish when tinted; simplify to the recognizable core of your mark.
4. Test it tinted, both light and dark. What reads at full color can turn into an ambiguous blob in monochrome.

A good monochrome layer is usually a simplified version of your foreground — the essential shape, no color, generous strokes.

Shipping checklist

Prefer vector drawables for the foreground and monochrome layers. Android generates density variants from the vectors, so you maintain one source of truth instead of exporting a matrix of PNGs — the same "decide once, let the system adapt" instinct behind adaptive layouts in Compose.

A workflow that avoids surprises

The way I set icons up now, to catch problems before users do:

• Design foreground and monochrome as vectors on a 108dp artboard with the 66dp safe circle marked.
• Use Android Studio's Image Asset tooling to scaffold the adaptive icon and preview it against multiple masks.
• Explicitly toggle the themed-icon preview and check the monochrome layer tinted in both light and dark.
• Test on a real device with a colorful wallpaper and themed icons on — the emulator is fine but nothing beats seeing it tinted on a home screen.

The whole thing takes an afternoon once and then rarely changes. What it buys is an icon that looks deliberate on every launcher shape and participates cleanly when users theme their home screen — instead of the flat gray silhouette that quietly signals "this app didn't bother."

What I'd take away

Modern Android icons are layered: a masked background, a foreground logo confined to the central 66dp safe zone, and a monochrome silhouette that powers themed icons. Design to the safe zone or lose your edges to device masks; ship a monochrome layer or opt out of theming and look inconsistent. Use vectors so Android generates the density variants for you, keep a legacy fallback for old contexts, and always preview against multiple mask shapes and the tinted themed-icon mode. Do that and your icon reads correctly everywhere — which is the entire point of the adaptive system.

Resources

• Android — Create app icons (adaptive icons)
• Adaptive icons reference
• Material Design — Product icons
• Vector drawables overview