Ora

How do I remove an app icon from Flutter?

Published in Flutter App Customization 5 mins read

Replacing your app icon in Flutter, rather than "removing" it (as every app requires an icon), involves changing the image assets within your native Android and iOS project folders. This process allows you to update your app's visual identity on users' devices.

Understanding App Icons in Flutter

Flutter is a UI toolkit, but app icons are managed natively by the respective operating systems (Android and iOS). This means you won't change the icon directly through Flutter code but by modifying specific files within your Flutter project's native directories.

Manual Method: Replacing Icons Natively

To change the app icon, you need to navigate to the root folder structure of your Flutter project. This is where you will find the necessary files to replace the default app icon. In the root folder structure, locate the android and ios directories.

For Android Applications

Android app icons are stored in various mipmap folders to support different screen densities.

  1. Navigate to the Icon Directory:
    Open your Flutter project and go to android/app/src/main/res/.
  2. Locate Mipmap Folders:
    Inside the res folder, you'll find directories like mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi. Each of these contains ic_launcher.png and ic_launcher_round.png files, which are your app's standard and round icons, respectively.
  3. Replace Icons:
    For each mipmap folder, replace the existing ic_launcher.png and ic_launcher_round.png files with your new icon images, ensuring they adhere to the correct dimensions for that density.
  4. Adaptive Icons (Android 8.0+):
    If your app targets Android 8.0 (API level 26) or higher, it might also use adaptive icons. These are defined in mipmap-anydpi-v26/ic_launcher.xml and mipmap-anydpi-v26/ic_launcher_round.xml. You'll need to update the drawable resources referenced in these XML files for your icon's foreground and background layers.

Recommended Android Icon Sizes:

Density Size (Standard & Round)
mdpi 48x48 dp (px)
hdpi 72x72 dp (px)
xhdpi 96x96 dp (px)
xxhdpi 144x144 dp (px)
xxxhdpi 192x192 dp (px)
Play Store 512x512 dp (px)

For iOS Applications

iOS manages app icons through an Asset Catalog in Xcode.

  1. Navigate to the Asset Catalog:
    Open your Flutter project and go to ios/Runner/Assets.xcassets/AppIcon.appiconset/.
  2. View Icon Assets:
    This directory contains a Contents.json file and numerous .png files representing your app icon at various resolutions and contexts (e.g., iPhone, iPad, Spotlight, Settings).
  3. Replace Icons:
    • Option 1 (Manual File Replacement): Replace each .png file in this directory with your new icon, ensuring the new images have the exact same file names and dimensions as the originals.
    • Option 2 (Using Xcode): The more common and recommended method is to open your Runner.xcworkspace file in Xcode.
      • In Xcode, navigate to Runner in the Project Navigator.
      • Select Assets.xcassets.
      • Click on AppIcon.
      • Drag and drop your new icon images into the corresponding slots. Xcode will guide you on the required sizes. If you have a single high-resolution image, you might be able to drag it to the largest slot, and Xcode may scale it, or you'll need to provide all specific sizes.

Recommended iOS Icon Sizes:

Usage Size (px) @1x Size (px) @2x Size (px) @3x
iPhone Notification 20 40 60
iPhone Settings 29 58 87
iPhone Spotlight 40 80 120
iPhone App 60 120 180
iPad Settings 29 58 -
iPad Spotlight 40 80 -
iPad App 76 152 -
iPad Pro App 83.5 167 -
App Store 1024 - -

Automated Method: Using flutter_launcher_icons Package

For a more streamlined approach, especially when dealing with many icon sizes, the flutter_launcher_icons package is highly recommended. It automates the generation of all necessary icon sizes for both Android and iOS from a single source image.

Steps to Use flutter_launcher_icons

  1. Add Dependency:
    Open your pubspec.yaml file and add flutter_launcher_icons under dev_dependencies:

    dev_dependencies:
      flutter_test:
        sdk: flutter
      flutter_launcher_icons: "^0.13.1" # Use the latest version
  2. Configure in pubspec.yaml:
    Add the flutter_launcher_icons configuration to your pubspec.yaml file, specifying the path to your icon image and which platforms to generate icons for:

    flutter_launcher_icons:
      android: "true"
      ios: "true"
      image_path: "assets/app_icon.png" # Path to your 1024x1024px icon image
      min_sdk_android: 21 # Set to your min_sdk_version in build.gradle
      # If you want to use a specific icon for Android, not the one specified in image_path
      # android_n_sdk_android: "mipmap-anydpi-v26/ic_launcher_adaptive_foreground.png"
      # adaptive_icon_background: "#ffffff" # Hex color or path to an image for adaptive icon background
      # adaptive_icon_foreground: "assets/app_icon_foreground.png" # Path to adaptive icon foreground
  3. Run flutter pub get:
    After modifying pubspec.yaml, run flutter pub get in your terminal to fetch the package.

  4. Generate Icons:
    Execute the following command in your terminal:

    flutter pub run flutter_launcher_icons:main

    This command will generate and place all the necessary icon files in the correct directories for both Android and iOS.

For more details on configuration and advanced options, refer to the official flutter_launcher_icons package documentation on pub.dev.

Important Considerations

  • Clear Cache/Rebuild: After replacing icons, it's often necessary to clear your project's cache and rebuild the app to see the changes reflected. You can do this by running flutter clean followed by flutter run or flutter build.
  • Design Best Practices: Ensure your app icon is simple, recognizable, and adheres to the design guidelines for both Android (Material Design) and iOS (Human Interface Guidelines).
  • High-Resolution Source Image: Always start with a high-resolution source image (e.g., 1024x1024px) to ensure quality across all generated sizes.