Supporting Themed App Icons in Flutter Apps for Android 13 and Beyond | okaryo.log

Supporting Themed App Icons in Flutter Apps for Android 13 and Beyond


What are Themed App Icons?

From Android 13 onward, there’s a feature that changes the color tone of an app’s icon based on the user’s chosen wallpaper, light mode, dark mode, or other themes.

Here’s the official documentation:

I tried supporting themed app icons in my personal Flutter app, subskun.

Here are the traditional icons:

normal icons

And these are the icons supporting themed variations, for both light and dark modes:

light icons

dark icons

If you set the wallpaper to have green or red tones, the icons will look like this:

green icons

red icons

In this post, I’ll outline how to set up themed app icons for Flutter apps.


It’s assumed that you’re already supporting Android’s adaptive icons with the flutter_launcher_icons package.

Also, the adaptive icon’s foreground image should be monochromatic (we’ll cover non-monochromatic images later).

By the way, while flutter_launcher_icons doesn’t yet support themed app icons, there’s an existing issue for it and it’s included in their roadmap. Looking forward to its support!


Once you’ve prepared the images, the rest is easy. Just add the <monochrome> element in android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <!-- Add this -->
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />

Here’s the official documentation:

If your regular app icon’s foreground image isn’t monochromatic, prepare a separate monochromatic image, place it in the drawable directory for each size, and replace the reference in the <monochrome> element with the one for the monochromatic image (for example, @drawable/ic_launcher_monochrome).

With this setup, when you build the app, it will support themed app icons as introduced earlier.

A Note to Myself

This might sound trivial, but when testing on an emulator, make sure the device has Android 13 installed.

I wasted a lot of time struggling with an emulator running Android 12, and browsing various sample apps on GitHub…


Not many apps support themed app icons yet, but those that do stand out, at least to a developer like me.

In the future, it’s not impossible that Google might make themed app icon support mandatory for app publication on the Store.

Considering this support when you have some free time might be a good idea.

Related Posts
Related Posts

This site uses Google Analytics.