How to Set Flutter App Icons (iOS & Android)

Flutter

Setting a Flutter app icon correctly saves time on every release. This guide shows a clean, reliable setup for both iOS and Android—including adaptive icons, sizing, and common pitfalls.

Audience: IntermediateTested on: Flutter 3.x, Dart 3.x, macOS 14, Android 14 / iOS 17

Quick start: flutter_launcher_icons

The fastest and most reproducible way to set the Flutter app icon is the community tool flutter_launcher_icons. Place a single square source image (preferably 1024×1024 PNG) and let the tool generate all sizes.

# pubspec.yaml (excerpt)
dev_dependencies:
  flutter_launcher_icons: ^0.13.1  # or latest

flutter_launcher_icons:
  image_path: assets/icon/app_icon.png     # 1024x1024, no rounded corners
  android: true
  ios: true
  remove_alpha_ios: true                   # App Store icon must not have transparency
  min_sdk_android: 21
  adaptive_icon_background: "#FFFFFF"      # or an image: assets/icon/bg.png
  adaptive_icon_foreground: assets/icon/fg.png

Run the generator:

# Newer toolchain
dart run flutter_launcher_icons

# Older toolchain (still works)
flutter pub run flutter_launcher_icons

Then rebuild the app:

flutter clean && flutter pub get
flutter run --release

Understanding Flutter app icon outputs

Android: assets go to mipmap-* and (when configured) adaptive icons use ic_launcher.xml with background/foreground layers.
iOS: assets populate Runner/Assets.xcassets/AppIcon.appiconset, including the 1024×1024 marketing icon.

Design rules that prevent rejections

  • Square source, no rounded corners. Platforms mask the icon.
  • No transparency on the iOS marketing icon. Use remove_alpha_ios: true.
  • Safe area. Keep key shapes within the inner 80% to avoid clipping by masks.
  • High contrast at small sizes. Avoid thin lines and tiny text.

Adaptive icons on Android (foreground/background)

Adaptive icons ensure consistent visuals across shapes (circle, squircle, etc.). Provide a foreground layer with the main glyph and a solid or image background layer.

# Example minimal adaptive setup in pubspec.yaml
flutter_launcher_icons:
  android: true
  adaptive_icon_foreground: assets/icon/fg.png   # center glyph, padding ~20%
  adaptive_icon_background: "#121212"            # brand color or image

Manual setup (when you can’t use the plugin)

Android

  1. Create mipmap-* folders and place scaled PNGs (48–192 px+) as ic_launcher.png.
  2. For adaptive icons, add ic_launcher.xml in mipmap-anydpi-v26 referencing foreground/background drawables.
  3. Update AndroidManifest.xml: android:icon="@mipmap/ic_launcher".

iOS

  1. Open Xcode → Runner → Assets.xcassets → AppIcon and drop required sizes, including 1024×1024.
  2. Ensure no transparency for the marketing icon. Keep the icon square; the mask is applied at runtime.

Security & pitfalls

  • Transparency on iOS: will cause App Store warnings. Use remove_alpha_ios or flatten layers.
  • Wrong source aspect ratio: non-square images get stretched or clipped.
  • Caching: icons can appear stale; run flutter clean and rebuild.
  • Multiple definitions: ensure only one active ic_launcher to avoid Gradle merge conflicts.

Troubleshooting

Icon didn’t change? Uninstall the app from the device/emulator, then rebuild. On Android, verify app/src/main/res/mipmap-* were updated; on iOS, check the asset catalog in Xcode.

Edges look clipped? Reduce foreground glyph size (leave 10–20% padding on all sides).

Colors look dull? Avoid semi-transparent overlays; prefer solid fills and higher contrast.

FAQ

Q. Can I use an SVG as the source?
A. Convert to a PNG at 1024×1024. Keep it square with no rounded corners.

Q. Do I need separate icons for dark mode?
A. No. Use adaptive backgrounds for Android and a neutral palette for iOS.

Q. Will the icon auto-round?
A. Yes, platforms apply masks. Provide a square base; don’t pre-round.

Conclusion

Use flutter_launcher_icons with a high-quality 1024×1024 PNG, enable adaptive icons, and enforce no-transparency for iOS. With a single source and reproducible config, your Flutter app icon will be consistent across platforms and releases.

https://pub.dev/packages/flutter_launcher_icons
https://developer.android.com/develop/ui/views/launch/icon_design_adaptive
https://developer.apple.com/design/human-interface-guidelines/app-icons

Updated: 2025-10-07

Comment

Copied title and URL