Creating App Icons in Flutter

Before publishing your app to the stores, there's one essential thing you must do: Add a beautiful icon! Publishing with the default Flutter icon... doesn't look very professional, honestly.

At first, I thought "How hard can it be?" Then I saw that Android needs 5 different sizes and iOS needs 10 different sizes, and I got a bit scared. But turns out it's super easy!

Platform-Specific Icon Sizes

Each platform comes with its own rules, of course. Android and iOS require different sizes.

Android Icon Sizes

Android uses different sizes for various screen densities:

mdpi: 48x48 px
hdpi: 72x72 px
xhdpi: 96x96 px
xxhdpi: 144x144 px
xxxhdpi: 192x192 px

For the Play Store, a minimum of 512x512 px is required.

iOS Icon Sizes

iOS is even more detailed:

20x20 (2x, 3x)
29x29 (2x, 3x)
40x40 (2x, 3x)
60x60 (2x, 3x)
76x76 (2x)
83.5x83.5 (2x)
1024x1024 (for App Store)

For the App Store, 1024x1024 px is mandatory.

The Easy Way: flutter_launcher_icons Package

Creating all these sizes manually is very tedious. Thank goodness we have the flutter_launcher_icons package!

1. Add the Package

Open your pubspec.yaml file and add it to dev_dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

2. Icon Configuration

Add the icon settings to the same file:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

This uses the same icon for both Android and iOS.

3. Prepare Your Icon Image

Create an assets/icon/ folder in your project and place your icon image there.

Important:

Minimum size: 1024x1024 px (ideal for both platforms)
Format: PNG (can have transparent background)
Must be square: Aspect ratio 1:1

Why so big? Because the package will automatically create all sizes by scaling down this image. Creating large sizes from a small image causes quality loss, but going from large to small is fine.

4. Generate the Icons

Run this command in the terminal:

flutter pub get
flutter pub run flutter_launcher_icons:main

Or simply:

flutter pub run flutter_launcher_icons

When the command runs, you'll see output like:

Creating default icons Android
Creating default icons iOS
Overwriting default iOS launcher icon with new icon

Congratulations! Your icon is now set up on both platforms.

Different Icons for Each Platform

Sometimes you want different icons for Android and iOS. For example, iOS prefers rounded corners, while Android looks better with square.

flutter_launcher_icons:
  android: true
  ios: true
  image_path_android: "assets/icon/android_icon.png"
  image_path_ios: "assets/icon/ios_icon.png"

Adaptive Icon (Android)

For Android 8.0 (API 26) and above, you can use adaptive icons:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # For adaptive icon
  adaptive_icon_background: "assets/icon/background.png"
  adaptive_icon_foreground: "assets/icon/foreground.png"

Adaptive icons can appear in different shapes on different launchers (Nova, OneUI, Pixel).

Tip: Use transparent PNG for foreground, solid color or pattern for background.

Manual Setup (If Needed)

If you don't want to use the package, you can do it manually (but I don't recommend it).

Android Manual Setup

Place icons in this folder structure:

android/app/src/main/res/
  ├── mipmap-mdpi/ic_launcher.png (48x48)
  ├── mipmap-hdpi/ic_launcher.png (72x72)
  ├── mipmap-xhdpi/ic_launcher.png (96x96)
  ├── mipmap-xxhdpi/ic_launcher.png (144x144)
  └── mipmap-xxxhdpi/ic_launcher.png (192x192)

In AndroidManifest.xml:

<application
    android:icon="@mipmap/ic_launcher"
    ...>

iOS Manual Setup

In Xcode, add icons to ios/Runner/Assets.xcassets/AppIcon.appiconset/ folder.

You also need to update the Contents.json file. It's complicated, not worth it!

Practical Tips

1. Icon Design Rules

Keep it simple: Complex details disappear at small sizes
Bold colors: Eye-catching, high-contrast colors
No text: Unreadable at very small sizes
Center your design: Edges may be cropped on some launchers

2. Test It

Always test after adding icons:

# Android
flutter run

# iOS
flutter run -d ios

Completely uninstall and reinstall the app. Sometimes the old icon shows due to cache.

3. Transparent PNG or Solid?

Android: You can use transparent background (with adaptive icon)
iOS: You can use transparent but Apple recommends solid

4. Icon Generator Tools

For manual resizing:

Upload a 1024x1024 image to these sites and download all sizes ready to use.

Full pubspec.yaml Example

name: my_awesome_app
description: An amazing Flutter app

flutter:
  uses-material-design: true
  
  assets:
    - assets/icon/

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # Custom settings (optional)
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/foreground.png"
  
  # Platform-specific
  # image_path_android: "assets/icon/android.png"
  # image_path_ios: "assets/icon/ios.png"
  
  # For specific platforms only
  # android: "launcher_icon"
  # ios: true

Common Issues

"Icon didn't change"

Solution:

flutter clean
flutter pub get
flutter pub run flutter_launcher_icons
flutter run

"Icon looks square on iOS"

iOS automatically rounds the corners. Don't worry about it.

"Adaptive icon not working"

Adaptive icons don't work on Android versions below 8.0. The normal icon will show.

Summary

Adding an icon in Flutter:

Add the flutter_launcher_icons package
Prepare a 1024x1024 px PNG image
Configure in pubspec.yaml
Run flutter pub run flutter_launcher_icons

Key Points:

Android minimum: 512x512 px (recommended 1024x1024)
iOS minimum: 1024x1024 px
You can use the same image for both platforms
Use large size image (scaling down is quality-preserving, scaling up is not)
Adaptive icon provides modern appearance for Android 8.0+

Seeing your own icon in your first app is a really nice feeling. Now it truly feels like "my" app!

Need help with your app development?

See you in the next article! 🚀

Creating and Setting Up App Icons in Flutter