Automatically Generate Flutter App Icons with flutter_launcher_icons

I’ve been working on a Flutter application for the better half of this year, and as we get closer to release, I realized I hadn’t set an app icon yet. I initially went ahead and set my icons with Xcode and Android Studio, but after finding the flutter_launcher_icons plugin - I’ll never need to do this manually again!

To see how this works yourself, boot up your current Flutter project or follow along with the demonstration below.

Creating a new Flutter project

As always, we’ll start off by setting up a new project and adding the plugin:

# New Flutter project
$ flutter create f_icons

# Open this up inside of VS Code
$ cd f_icons && code .

Adding the Flutter Launcher Icons Plugin

Head over to your pubspec.yaml and add the following plugin to our dev_dependencies:

dev_dependencies:
  flutter_launcher_icons: ^0.7.4

We can then ensure we have the latest packages in our project by running:

$ flutter pub get

App Logo

Now that we’ve got a Flutter project, we’ll need a logo to set as an icon. Here’s one that we can use, imagine it’s a camera application:

Place your icon inside of your assets/images/icon.png folder, or a similar folder of your choosing. Then, inside of pubspec.yaml, we’ll need to provide the flutter_icons configuration option:

flutter_icons:
  image_path: 'assets/images/icon.png'
  android: true
  ios: true

This will generate application icons for Android and iOS using the one specified. We can also configure this deeper by providing an image_path per platform if we wanted to have a separate icon. Here’s how:

flutter_icons:
  image_path_ios: 'assets/images/heal.png'
  image_path_android: 'assets/images/heal.png'
  android: true
  ios: true

With this in mind, let’s go ahead and generate the icons!

Run the Build Script

Inside of your terminal, run the following build script:

$ flutter pub run flutter_launcher_icons:main

If everything worked correctly, we should see the following result:

Android minSdkVersion = 16
Creating default icons Android
Overwriting the default Android launcher icon with a new icon
Overwriting default iOS launcher icon with new icon

Results

Let’s run our application on a device or emulator. We should be able to see our awesome new icon!