What are Apple’s UI guidelines for app icons
An app icon is highly important, as it's the first thing a user sees when they encounter it in the App Store and on their home screens.
A well-designed app icon not only captures the important features of your app, but is also user-friendly, simple, and compatible across various Apple platforms.
Apple has its own strict guidelines specific to app icon design. Knowing them will ensure you remain compliant with Apple’s requirements and get App Store approval the first time, and fast.
What is an app icon?
Displayed on the home screen and in the app stores, an app icon is a small visual symbol that identifies your app, making it easy for users to launch a mobile app or a webview app that they want to engage with.
According to Apple, a unique but memorable app icon serves one purpose: communicate the personality of your app or game within the Apple App Store. That means that the app icon functions as a branded identifier, and should represent your brand cohesively in the app stores.
Just like with any type of branding exercise, making an app icon unique and easily recognizable should be every developer’s goal.
Apple’s multiple platforms each have a unique set of style guidelines for app icons. Importantly, for an app to be accepted for Apple App Store publishing, your app icon must adhere to each platform’s unique requirements.
App icons should be adaptable to Apple device’s different shapes and sizes, and maintain strong visual consistency.
Let’s dive deeper into what Apple’s UI do’s and don'ts are, as they pertain to app icons.
What are Apple’s Human Interface Guidelines for app icons?
Apple has its own set of rules when it comes to designing an app icon for its various devices and platforms.
Adhering to the below Apple’s guidelines will ensure your app gets published to the App Store with minimal hiccups along the way:
Embrace simplicity
Simplicity in design will make your app icon easy to understand and recognize.
Some strategies to follow in practicing simplicity include:
- Expressing the core idea of your app icon in a simple and unique way. Find a theme for the icon that captures the essence of your app or game — and stick to it.
- Avoiding clutter. Too many details on the app icon can make it hard to understand, especially when designing for smaller device screen sizes.
- Using a simple background, and focus on the primary image. According to Apple, you don’t need to fill the entire icon with content.
Design for cross-platform compatibility
Apple has a wide range of platforms and your app icon must adhere to the sizes of each platform it's offered on.
Use similar images and color palettes in all icons while rendering them in the style and size laid out for the platforms your app is offered on.
Let’s look at the Music app’s icon variations for iOS, macOS, tvOS, visionOS and watchOS (see image below).
The Music app icon is designed as a simple white musical note on a red background — as you can see from the image above, the design is consistent throughout the platforms.
In iOS, tvOS, and watchOS, the Music app icon uses a streamlined, graphical style; while the macOS version changes it up a little by adding a shadow that makes the notes look more pronounced.
In visionOS, the icon is designed with the same color and content, but there is now a 3D element to it, visible to users while wearing the device.
The main theme in the Music app example is that the app icon is designed in a consistent manner but yet contains uniquely subtle elements to cater to each platform’s unique design requirements — ensuring cross-platform compatibility.
Exercise caution when using text in your app icon design
When deciding whether you should include text in app icons, know that, in icons, text is usually too small to read. Plus, it can make your app’s icon appear cluttered or even unrecognizable.
However, in some contexts, the app name may appear near the icon, making it difficult to design the icon without it. When considering text in app icons, avoid nonessential words that tell people what to do with your app — text like “Watch” or “Play.”
So, what should you do? Use mnemonic forms if text needs to be added — this can be a shorter version of your brand name or just its first initial letter. A good example of this practice is the Calm app (see image below).
Choose graphic images over photos in icons
Design a graphic visual for your app icon that represents all the features you want people to notice.
Avoid photos — according to Apple, due to photos being heavy in detail, they don’t work well when viewed in small sizes,
Avoid screenshots in your app icon. They have a tendency to make the icon look cluttered.
Optimize your icon for specific platform sizes
Ensure your app icon is compatible for all device screen sizes. There are two ways to do this:
- Tell Xcode to generate your iOS, iPadOS, and watchOS icon in all sizes from your 1024x1024 px App Store icon.
- Provide the app icons yourself to Apple in all individual icon sizes.
Similarly, for macOS and tvOS, you have to provide Apple the icon in all sizes; whereas, for visionOS, you just need to create the icon in 1024x1024 px.
When designing your own version of the app icon, ensure the image is distinct at all sizes. Simplify the image by removing unnecessary or fine detail; a generic app icon silhouette without details can go a long way.
In the above image, the Safari app icon is designed in two different sizes for macOS — you can see that the icon on the left (512x512 px) has more details compared to the one on the right (16x16 px).
Design your icon with full edge-to-edge opacity
iOS and iPadOS dark icons need to be designed without a solid background because Apple provides a dark background by default.
Layered app icons in visionOS and tvOS require fully opaque content in its bottom layer for maximum visibility.
Consider an alternate app icon
To enhance user experience, Apple allows users to choose alternate versions of an icon in iOS, iPadOS, and tvOS. Similarly, for iPadOS and iOS apps in visionOS, users can choose alternate icons for their apps or games.
When designing the alternate version, make sure to stay consistent with your brand. Avoid designing an alternate app icon that is completely different from your original version — this creates confusion among users and reduces brand visibility.
For each alternate icon in iOS and iPadOS, design dark and tinted versions. Just like the original version, the alternate and variant version must also adhere to the App Review Guidelines.
iOS and iPadOS platform considerations
You can customize how your app icon appears — light, dark, or tinted. Apple allows the freedom to create your own variations of the app icon, looking exactly the way you want.
When considering dark and tinted versions of your app icon, ensure consistency. When it comes to your color palette, remember that dark icons appear to be more softened while tinted icons are even more softer.
Your app icon should be visible, recognizable and easy to understand, even with different or tinted backgrounds.
Design a simpler version of your icon that can capture your app’s recognizable feature. Since dark and tinted icons appear against a dark background (dark mode), fine details that may appear fine on normal modes will stand out more in dark mode, making your app look cluttered.
Your light icon should determine how your dark version will look. Avoid bright images and shift your focus on using complementary color palettes that reflect the default icon (light app icon).
Apple provides a dark background to go with your dark icon. When designing the dark icon, remove the background so that the system-provided background shows up.
When considered a tinted icon, design your tinted icon in grayscale mode.
Apple provides a gradient background to reflect the tinted icon. Designing it in grayscale will allow the system-provided gradient background to tint your icon.
App icon attributes
Your app icon must be in PNG format and support sRGB color spaces for light icons, and Gray Gamma 2.2 for grayscale mode (tinted icons).
Apple app icons must support Display P3 (wide-gamut color) for iOS, iPadOS, macOS, tvOS, and watchOS. Display P3 represents a 25% larger spectrum of colors compared to sRGB — featuring a more saturated red and green colors to really enhance the overall look of the app icon.
Since Apple’s platforms are each so unique, the app icon’s design for each platform must adhere to their different layers, transparency and corner radius requirement (see table below).
App icon size requirements for iOS and iPadOS
The app icon for the App Store must be 1024x1024 px.
Apple automatically scales down your 1024x1024 px app icon to adhere to all other sizes, considering each platform requirements.
However, you can manually design your app icon in different sizes if you choose to.
Some of the size variation include:
- Home Screen on iPhone: 120x120 @2x and 180x180 for @3x (3x is for iphones only)
- Home Screen on iPad Pro: 167x67 @2x
- Home Screen on iPad, iPad mini: 152x152 @2x
- Spotlight on iPhone, iPad Pro, iPad, iPad mini: 80x80 @2x and 120x120 for @3x (3x is for iphones only)
- Settings on iPhone, iPad Pro, iPad, iPad mini: 58x58 @2x and 87x87 for @3x (3x is for iphones only)
- Notifications on iPhone, iPad Pro, iPad, iPad mini: 76x76 @2x and 114x114 for @3x (3x is for iphones only)
Want to know how it all works?
Get hands-on with Median’s comprehensive documentation, and build your app with ease.
Summary
Your app icon is the visual representation that launches the app and must reflect your app’s brand and personality.
Apple requires an app icon to be simple, compatible across different platforms, with minimal text, without imagery and with minimal clutter.
When designing your app icon, keep in mind Apple’s different screen sizes and adhere to each platform’s size requirement — including for iOS, iPadOS, macOS, tvOS, visionOS, and watchOS.
Having a consistent design across each platform is key. Ensuring your icon adapts to light, dark and tinted modes with ease enhances the overall user experience.
Apple’s icons must be in PNG format, support wide-gamut colors like the Display P3 and square shaped — although, Apple’s platform adjusts the shape if need be.
Frequently asked questions
What are the basic requirements for app icons according to Apple's Human Interface Guidelines?
Apple's Human Interface Guidelines specify that app icons should be simple, memorable, and recognizable. They must be in PNG format, have a square shape with no rounded corners, and come in multiple sizes to support various devices. The icon should be 1024x1024 px for the App Store and scaled down for other uses.
How can I ensure my app icon stands out on the App Store?
To make your app icon stand out, focus on creating a unique and visually appealing design that reflects the app's purpose. Use a limited color palette, avoid text (unless necessary), and ensure the icon is easily recognizable at smaller sizes. Consistency with your app's overall design and branding is key.
What are the common mistakes to avoid when designing an app icon?
Common mistakes include using overly complex designs, incorporating text when it's not needed, and failing to test the icon at smaller sizes. Avoid using too many colors, sticking to trends that may quickly become outdated, and neglecting to follow Apple's guidelines for safe areas and icon sizes.
How should I handle the different icon sizes required by Apple?
Apple requires app icons in various sizes to accommodate different devices and contexts. Start with the largest size (1024x1024 px) and scale down to the required sizes, ensuring the design remains clear and recognizable. Use tools like Xcode to automatically generate different sizes from a single high-resolution image.
Can I use transparency in my app icon design?
No, transparency is not allowed in app icon designs according to Apple's Human Interface Guidelines. Icons must be opaque and have a solid background. Ensure your icon fills the entire square canvas without any transparent areas to avoid rejection during the app review process.
to top
Related articles
