Tutorial

Automatically Generate Flutter App Icons with flutter_launcher_icons

Published on November 1, 2019
Automatically Generate Flutter App Icons with flutter_launcher_icons

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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

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:

App icon

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!

Tada

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Great tutorial, really helpfull, thx! Little tip, just run “flutter pub add flutter _ launcher _ icons” in the terminal instead of adding dependencies to the pubspec.yaml file manually. This way the latest version will be added in the pubspec.yaml file automatically. Altough it might end up in the “dependencies” instead of the “dev_dependencies”, so I’d maybe check that. But at least for all flutter-plugins which require adjustments in the “depencies” sector “flutter pub add XY” is a really usefull command :)

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel