How to alternate your app icon dynamically

AsyncLearn
3 min readMay 13, 2024

--

Applying different icons dynamically to an app provides a more personalized experience for the user based on their preferences or specific events. A practical example can be found in apps like Duolingo or Reddit, where users can choose a different icon based on their actions:

Duolingo and Reddit alternate icons

To achieve this, you first need to add various app icons to your asset catalog. For example:

In this GIF, I have added three icons for my app with the names AppIcon, AppIcon-2, AppIcon-3.

Once done, you need to specify which icons will be your alternate icons. Follow these steps:

  • Select your project in the project navigator.
  • Choose the target for your app.
  • Go to the Build Settings tab.
  • Search for Alternate App Icon Sets in the search bar. You’ll find this option within the Asset Catalog Compiler — Options group.
  • Add the names of your alternate icons in this option.

In this image, I’ve defined that my alternate icons are AppIcon-2 and AppIcon-3. It’s not necessary to add AppIcon because it’s already defined as the default icon in the General tab of the app target configuration.

With this configuration, you’re ready to change your app’s icon using the setAlternateIconName function of the UIApplication class:

func setAlternateIconName(_ alternateIconName: String?) async throws

Or its synchronous version:

func setAlternateIconName(
_ alternateIconName: String?,
completionHandler: ((Error?) -> Void)? = nil
)

Where alternateIconName is the name of the icon you want to set, and completionHandler returns the result of that action. Here's an example of how to switch to an alternate icon:

Task { @MainActor in
try await UIApplication.shared.setAlternateIconName("AppIcon-2")
}

To revert to the default icon, use nil in the alternateIconName parameter:

Task { @MainActor in
try await UIApplication.shared.setAlternateIconName(nil)
}

If you want to know the name of the alternate icon the app is using, use the alternateIconName property:

UIApplication.shared.alternateIconName

Additionally, to check if the app allows changing the main icon to an alternate one, use the supportsAlternateIcons property:

UIApplication.shared.supportsAlternateIcons

If you want to read the Spanish version of this article, you can find it here: https://asynclearn.com/blog/alternate-app-icons/

--

--

AsyncLearn

Stay up-to-date in the world of mobile applications with our specialised blog.