Platform guidelines8 min read

Flutter App Icon: Set It with flutter_launcher_icons

How to change a Flutter app icon with flutter_launcher_icons: settings, sizes, Android adaptive layers, iOS dark and tinted icons, and the manual route.

A flutter_launcher_icons YAML config with an arrow to a pink kite app icon, and the same icon in circle and squircle masks
Back to blog

To change the app icon in a Flutter app, add the flutter_launcher_icons package, describe your icon in a flutter_launcher_icons block in pubspec.yaml, and run dart run flutter_launcher_icons. Flutter's own documentation points to this package for customising the launcher icon and lists a manual route as the alternative. The package generates the Android and iOS icons from one image, plus web, Windows and macOS icons if you ask for them. As of 30 September 2026, its latest version is 0.14.4, published on 10 June 2025.

We didn't run the tool for this guide, because Flutter isn't installed on the machine we used. The settings and file lists below come from the package's README and source code and from Flutter's documentation, and the one simulation we did is labelled as ours.

How do you change the app icon in Flutter?

To change the app icon in Flutter, make a 1024 × 1024 px PNG, configure flutter_launcher_icons in pubspec.yaml, and run the tool. The package's README describes it as a command-line tool that simplifies updating your Flutter app's launcher icon, for the platforms you choose.

Five steps to change a Flutter app icon: make the icon, add the package and settings, set the Android layers, run the tool, check the launcher
Five steps from a 1024 px PNG to a new Flutter app icon
  1. Make the icon. A 1024 × 1024 px PNG. The README notes that iOS icons should fill the entire image and not contain transparent borders.

  2. Add the package and the settings to pubspec.yaml:

    dev_dependencies:
      flutter_launcher_icons: '^0.14.4'
    
    flutter_launcher_icons:
      android: 'launcher_icon'
      ios: true
      image_path: 'assets/icon/icon.png'
      min_sdk_android: 21
      adaptive_icon_background: '#E51E6E'
      adaptive_icon_foreground: 'assets/icon/foreground.png'
    

    You can also keep the settings in a separate flutter_launcher_icons.yaml, which dart run flutter_launcher_icons:generate creates for you.

  3. Get the package: flutter pub get.

  4. Run the tool: dart run flutter_launcher_icons.

  5. Run your app and look at the launcher.

Which settings does flutter_launcher_icons have?

The main settings are image_path for the icon and one block per platform. These are the ones that matter for most apps, from the package's README:

SettingWhat it does
image_pathThe icon image for every platform
androidtrue overrides the default icon; false skips Android; a name such as "launcher_icon" creates a new icon without removing the default one
iosThe same three choices for iOS
min_sdk_androidThe Android minimum SDK, default 21
adaptive_icon_backgroundA colour such as "#ffffff", or an image, for the adaptive icon background
adaptive_icon_foregroundThe image for the adaptive icon foreground
adaptive_icon_foreground_insetPadding in per cent added around the foreground; the default is 16
adaptive_icon_monochromeThe image for the Android 13 and later themed icon
remove_alpha_ios and background_color_iosRemove the alpha channel from iOS icons, and the colour used instead
image_path_ios_dark_transparentThe iOS 18 and later dark icon, which Apple recommends to be transparent
image_path_ios_tinted_grayscaleThe iOS 18 and later tinted icon, in greyscale
web, windows, macosOptional blocks that generate icons for those platforms

Adaptive icons are only generated when both adaptive_icon_background and adaptive_icon_foreground are set, and the image_path isn't used as the foreground automatically. Our guide to Android adaptive icons explains the layers, and our app icon sizes guide lists the sizes each platform needs.

What does the tool write for Android?

For Android, the tool writes launcher icons, adaptive layers and an adaptive icon XML file. From its source code for version 0.14.4:

What flutter_launcher_icons writes for Android: 5 launcher icons from 48 to 192 px, up to 10 adaptive layers from 108 to 432 px and an adaptive icon XML file
Read from the source of flutter_launcher_icons 0.14.4; we didn't run it
  • Launcher icons: ic_launcher.png in mipmap-mdpi to mipmap-xxxhdpi, at 48, 72, 96, 144 and 192 px.
  • Adaptive layers: ic_launcher_foreground.png and, if you set one, ic_launcher_monochrome.png in drawable-mdpi to drawable-xxxhdpi, at 108, 162, 216, 324 and 432 px, which is the 108 dp layer at each density.
  • Adaptive XML: a file in mipmap-anydpi-v26 that places the foreground and monochrome layers with an inset, 16% by default. The background colour is written to colors.xml.

How much padding should the foreground have?

The foreground should have no padding of its own, because flutter_launcher_icons adds a 16% inset when it places it. Other tools do it differently. In AI Icon Creator's runs, @capacitor/assets wrote an inset of 16.7% into its adaptive icon XML, while expo prebuild wrote none, so Expo expects the padding to be drawn into your foreground. The right foreground for one tool is wrong for another.

Four kite icons under a circle mask: a full-bleed foreground with a 16 percent inset and a padded foreground with no inset both fit, while padded twice is too small and a full-bleed foreground with no inset is cut off
Our simulation of the Android inset rule: match the foreground to the tool

We simulated the four combinations with a kite icon made in AI Icon Creator, using a 108 dp layer and a circle mask over the central 72 dp. A full-bleed foreground with a 16% inset, the Flutter way, leaves the kite 75% of the visible height. A foreground already padded to 61% and then inset by 16% is padded twice and shrinks to 46%. A padded foreground with no inset, the Expo way, gives 67%. A full-bleed foreground with no inset makes the kite 111% of the visible height, so the tail is cut off. If your Flutter icon looks small on Android, you've probably padded it yourself. Our Expo app icon guide and Ionic app icon guide show the other two tools.

Try a flat subject that works as a full-bleed foreground:

How do you set the icon by hand in Flutter?

You can also set the icons yourself, as Flutter's deployment guides for Android and iOS describe. It's useful for one-off changes or when you don't want another package.

  • Android: review the Android adaptive icon guidelines, put your icon files in folders named with configuration qualifiers under [project]/android/app/src/main/res/, and set the android:icon attribute of the application tag in AndroidManifest.xml to your icon, for example @mipmap/ic_launcher. Then run the app and check the launcher.
  • iOS: review Apple's app icon guidelines, including the advice on light, dark and tinted icons. In the Xcode project navigator, select Assets.xcassets in the Runner folder and replace the placeholder icons with your own (our Xcode app icon guide walks through the asset catalogue). Then run flutter run to verify.

If you want a layered Liquid Glass icon on iOS, our Icon Composer guide explains Apple's tool.

Common Flutter icon problems

  • The colours look different. The README says this comes from a change in the image dependency, and that you should use #AARRGGBB instead of #AABBGGRR for colours.
  • A version conflict. flutter_launcher_icons may conflict with other packages such as flutter_native_splash over the args dependency. The README suggests a temporary dependency override.
  • A black border on iOS. The icon must fill the whole image with no transparent edges.
  • No adaptive icon. You need both an adaptive background and an adaptive foreground.
  • The icon is too small on Android. The foreground was probably padded twice, as in the simulation above.

How do you make the icon file?

To make the Flutter app icon file, generate one simple subject, choose a flat style so the foreground separates cleanly, and export it at 1024 px. Our step-by-step guide on how to make an app icon covers it. In AI Icon Creator you can compare a few styles of the same subject:

Frequently asked questions

How do I change the app icon in Flutter?

To change the app icon in Flutter, add flutter_launcher_icons to dev_dependencies, set image_path and the platform settings in a flutter_launcher_icons block in pubspec.yaml, then run flutter pub get and dart run flutter_launcher_icons. You can also replace the icon files by hand in the Android res folders and in Xcode.

What size should a Flutter app icon be?

A Flutter app icon source should be a 1024 × 1024 px PNG, which is the master size for iOS, and the tool generates the other sizes. For Android, the package writes launcher icons from 48 to 192 px and adaptive layers from 108 to 432 px. For iOS, the icon should fill the whole image with no transparent borders.

How do I make an adaptive icon in Flutter?

To make an adaptive icon in Flutter, set both adaptive_icon_background, a colour or an image, and adaptive_icon_foreground, a transparent PNG, in the flutter_launcher_icons block. The tool adds a 16% inset by default, so draw the foreground full-bleed. Add adaptive_icon_monochrome for Android 13 and later themed icons.

Can Flutter have dark and tinted iOS icons?

Flutter can have dark and tinted iOS icons through flutter_launcher_icons, which has the settings image_path_ios_dark_transparent and image_path_ios_tinted_grayscale for iOS 18 and later. Apple recommends the dark icon to be transparent, and the tinted icon should be greyscale. You can also add them by hand in Xcode's Assets.xcassets.

How do I make a Flutter app icon with AI?

To make a Flutter app icon with AI, describe one simple subject for your app, generate it in a few styles, choose the one that stays clearest at 32 px and export it at 1024 px. In AI Icon Creator you can compare styles side by side and use the square icon as image_path.

Ready to make the icon for your Flutter app?