A few days ago, iOS 18 was released, and for app publishers and agencies, the annual update chaos begins. In this blog post, we want to focus on one of the new features: the new design possibilities for app icons.
What Changes Does iOS 18 Bring for App Icons?
With iOS 18, users have more generous options to customize their iPhone's home screen. This includes, among other things, the color customization of app icons. While Apple introduced Dark Mode with iOS 13 five years ago, app icons have not adjusted to it until now. With the new customization options, it is now possible to display app icons in a dark or tinted color scheme.
With around two million apps in the App Store, it's not easy to get every app publisher to design new app icons. To prevent this problem, the necessary icon variants are automatically generated by the system. This is only possible if the app icon is simple enough in design and there is a clear contrast between the foreground and background. If this is the case, the system automatically generates dark and tinted icon variants to the best of its ability.
However, with automatic generation of icon variants, you potentially run the risk of losing control over your app's branding – or the generation does not work at all due to a complex icon design. Therefore, developers can also customize the icon variants. Developers can provide a dark variant of their icon, as well as a template for tinted icons, which will then be used by the user's device.
In the following section, we will show you how, as a developer, you can make the most of this new feature for your app.
Step-by-Step Guide to Making Your App Icons Ready for iOS 18
Before we can start enhancing our app icons for iOS 18, we need to ensure that we have the technical prerequisites. Specifically, we need to update Xcode to version 16. New Xcode versions can be downloaded from the macOS App Store or via the Apple Developer website. Once Xcode is updated, we can open our project in it.
Once Xcode is open, we can select our app icon in the asset catalog. Upon arrival, navigate to View > Inspectors > Attributes (or use the hotkey CMD + Option + 4) and set the setting in the "Appearances" field to "Any, Dark, Tinted".
Then you can add the dark and tinted app icons.
How to Adapt a React Native App to iOS 18
While in the previous section we mainly dealt with natively developed iOS apps, hybrid apps, especially with React Native, are becoming increasingly popular among publishers and developers. As a specialized React Native agency, we are now using this framework almost exclusively for client apps. Therefore, we would like to give you some tips on how you, as a developer, can adapt a React Native app to the new icon variants in iOS 18.
For a "pure" React Native project (also called "Bare React Native" or "React Native CLI"), the steps are generally the same as for a native iOS app. You simply open the Xcode workspace in the ios folder of your React Native project and make the changes as described in the previous section.
However, a large part of React Native projects is now implemented with the excellent Expo framework. Expo abstracts away most of the native code and automatically generates the native project files through the so-called prebuild process. As a result, you do not have an Xcode project that you could customize.
The team at Expo is currently working on natively supporting the new icon variants via the app.json configuration file. The feature is expected to land in the next major SDK release, Expo SDK 52.
Until then, you can help yourself with a "Config Plugin". With such a plugin, you can instruct the prebuild process to make the necessary changes to the native iOS files.
Unfortunately, such a Config Plugin is currently not available in the open-source community. Considering that the release of Expo SDK 52 should be imminent, there will likely not be any major efforts in this area. Fortunately, Config Plugins can be implemented quickly by specialized React Native or Expo developers.
Perfecting Your Icons: Key Guidelines for Dark and Tinted Designs
Before you submit your changes to Apple for review, it is helpful to study the guidelines published by Apple on designing dark and tinted app icons.
To give you a rough overview of the otherwise quite in-depth guidelines, we have summarized one of the most important points here:
As a starting point, you need a simplified version of your icon, reduced to its main features. You need to create a clear contrast between the foreground and background.
The light standard icon should have a light or colored background, while the dark icon variant should use a dark background and place any color accents in the foreground instead. For the tinted variant, if possible, a grayscale image should be used, again with a clearly defined foreground and background. The system then creates tinted icons based on this grayscale template.
Some of the icons for iOS standard apps are a good example of how you can correctly implement color accents in all three icon variants:
The last example shows the tinted icon variant with white set as the color tint.
The Purpose and Usefulness of App Icon Variants in iOS 18
Following the introduction of the new customization options, there was a lot of online discussion about whether this change is truly necessary. Some users have commented that Steve Jobs and former chief designer Jony Ive would not have given users such extensive design freedoms:
Besides a loss of control over your app's branding, you risk in the worst case that users might prefer to remove your app from their home screen rather than forego the new customization options. Imagine your app being the only one on the user's home screen that does not adapt to the new icon variants. Your app would stand out massively and be literally an eyesore.
Therefore, it is essential to prepare your app for the new design freedoms and ensure it looks good in any case. If you haven't adapted your app yet, it is high time for an end-of-year update.