Application Icons - Basics - User Interface Guidelines - Layout (2023)

A unique and memorable icon communicates the purpose and personality of your experience and can help others quickly recognize your app or game on the App Store and on their devices.

Beautiful app icons are an important part of the user experience across all Apple platforms, and every app and game should have one. Each platform defines a slightly different style for app icons, so you should design a theme that works well for different shapes and levels of detail, while maintaining strong visual consistency and messaging. To download templates to help you create icons for each platform, seeApple Design Features. For instructions on how to create other types of symbols, seeSymbol.

recommended course of action

embrace simplicity.Simple symbols tend to be easier for humans to understand and recognize. Find a concept or element that captures the essence of your app or game, makes it the focal point of the icon, and expresses it in a simple and unique way. Avoid adding too much detail, as it can be hard to see and make an icon look blurry, especially at smaller sizes. Choose a simple background that emphasizes the main image; you don't need to fill the entire icon with content.

Create a theme that works well across all platforms so everyone feels at home.If your app or game runs on more than one platform, use a similar image and color palette for all icons while rendering them in the appropriate style for each platform. For example, the Mail app icon on iOS and watchOS uses a simplified graphic style to represent the white envelope on a blue background; macOS uses a similar blue background, which adds depth and detail to the envelope, giving it a realistic weight and texture.

Choose to only include text when it is an integral part of your experience or brand.Icon text is often too small to read easily, can make an icon look cluttered, and doesn't support accessibility or localization. In some contexts, the application name is displayed next to the icon, eliminating the need to display the name inside the icon. While using a mnemonic as the first letter of your app's name can help others recognize your app or game, avoid including unnecessary words that tell people what to do with it, such as "watch" or "play." . ', or context-specific terms like 'New' or 'For iOS'.

Give preference to graphic images over photos and avoid replicating UI components in your icon.Photos are full of details that don't work well when viewed at small sizes. Instead of using a photo, create a graphical representation of your content that highlights the features you want people to notice. If your app has a human-recognizable UI, don't just replicate standard UI components or use screenshots of the app in your icon.

If necessary, optimize your icon for the specific sizes the system displays in places like search results, settings, and Spotlight notifications.For iOS, iPadOS, and watchOS, you can instruct Xcode to generate all 1024 × 1024 px app store icon sizes, or provide assets for some or all of your custom icon sizes. For macOS and tvOS, you must specify all sizes. If you want to ditch the system-generated versions of your app icon and instead create your own, make sure the image stays clear as the icon size decreases. For example, you can remove fine details and unnecessary features, simplify the image, and emphasize key features. If you must make these changes, keep them subtle so that the app icon remains visually consistent in any context.

The 512 x 512 px Safari app icon (left) uses a circle of tick marks to indicate degrees; the 16x16 pixel version of the icon (on the right) does not include this detail.

Design your icon as a square image with no borders.On most platforms, the system applies a skin that automatically adjusts the corners of the icons to match the aesthetics of the platform. For example, watchOS automatically applies a circular mask. The exception is macOS: Although the system applies the rounded rectangle to an app icon created with Mac Catalyst, it must create the macOS app icon in the correct format. For downloadable production templates that you can use to create app icons for any platform, seeApple Design Features.

Consider offering an alternate app icon.On iOS, iPadOS, and tvOS, users can choose an alternate version of an icon, which can strengthen their connection to the app or game and enhance their experience. For example, a sports app might offer different icons for different teams. Make sure the alternate app icons you create stay fully connected to your content and experience; Avoid creating a version that users might mistake for another app's icon. If people want to switch to an alternate icon, they can go to your app's settings.

OBSERVATIONAs with the main app icon, alternate app icons are subject to app review and must comply with theQualification Guidelines for the App Store.

Do not use copies of Apple hardware products.Apple products are copyrighted and may not be reproduced in their app icons.

Platform Considerations

iOS, iPad OS

Do not add an overlay or border to your settings icon.iOS automatically adds a 1-pixel stroke to all icons so they look good against the white background in settings.

MacOS

On macOS, app icons share a common set of visual attributes, including a rounded rectangle shape, front perspective, horizontal position, and solid shadow. Rooted in the macOS design language, these attributes showcase the realistic rendering style people have come to expect from macOS, while providing a fluid user experience.

Consider introducing a familiar tool to communicate what users are using your app for.To provide context for the purpose of your application, you can use the background of the icon to represent the environment of the tool or the elements that it affects. For example, the TextEdit icon combines a mechanical pencil with a lined sheet of paper to provide a useful writing experience. Once you've created a detailed, realistic image of a tool, it often works well to let it float just above the background and extend just beyond the icon's boundaries. When doing this, make sure that the tool remains visually consistent with the background and doesn't overwhelm the rounded rectangle shape.

When you represent real objects on the app icon, make them appear to be made of physical materials and have a real mass.Consider recreating the properties of materials such as fabric, glass, paper, and metal to convey the weight and feel of an object. For example, the Xcode app icon shows a hammer that appears to have a steel head and a polymer handle.

Use drop shadow in icon design template.the application iconPresentationincludes the system-defined drop shadow that helps the app icon align with other macOS icons.

Consider using internal shadows and reflections to add definition and realism.For example, the Mail app icon uses shadows and highlights to add authenticity to the envelope and suggest that the flap is slightly open. In icons that contain a tool floating on a background, like TextEdit or Xcode, inner shadows can enhance depth perception and make the tool look real. Shadows and reflections should indicate a light source in front of the icon, positioned just above the center and angled slightly downward.

Avoid defining outlines that suggest a shape other than a rounded rectangle.In rare cases, you may want to modify the basic shape of the app icon, but you risk creating an icon that doesn't look like it belongs in macOS. When you need to change your shape, prefer subtle adjustments that continue to express a rounded rectangular silhouette.

Keep the main content within the bounding box of the icon grid; Keep all content inside the outer bounding box.When the main content of an icon extends beyond the bounding box of the icon grid, it tends to look out of place. When overlaying your icon with a tool, it's a good idea to align the top of the tool with the outer bounding box and the bottom of the tool with the inner bounding box, as shown below. You can use the grid to position elements within a symbol and ensure that centered inner elements, such as circles, use a size consistent with other symbols in the system.

tvOS

tvOS app icons use between two and five layers to create a sense of depth and vitality when people focus on them. For instructions, seeoverlay images.

Use proper layer spacing.If your icon includes a logo, separate the logo from the background. If your icon has text, bring it to the front so it won't be covered by other layers when the parallax effect occurs.

Use gradients and shadows carefully.Gradients and background vignettes can clash with the parallax effect. For gradients, prefer top to bottom and light to dark styles. Shadows are generally best as sharp, jagged tones etched into the background layer and not visible when the app icon is stationary.

Use different levels of opacity to increase the feeling of depth and vitality.Creative use of opacity can make your symbol stand out. For example, the Photos icon splits its core into several layers that include translucent parts, adding vibrancy to the design.

Make sure the home screen icon meets the safe zone specifications.During focus and parallax, the system may clip content around the edges of the app icon when the icon is resized and moved. To make sure your icon content isn't too cropped, leave some extra space, as shown inSpecifications > tvOS.

watches

A watchOS app icon is circular with no accompanying text.

Avoid using black for the background of your icon.Lighten a black background or add a border to keep the icon from blending into the screen background.

Specifications

App Icon Attribute

App icons on all platforms use the PNG format and support the following color spaces:

• P3 display (wideband color)
• sRGB (color)
• Gray Gamma 2.2 (grayscale)

The layers, transparency, and corner radius of an app icon may vary by platform. Special:

App Icon Sizes

iOS and iPadOS app icon sizes

You must provide a large version of your app icon, measuring 1024x1024 pixels, in order for it to appear on the App Store. You can have the system automatically resize the large app icon to produce all other sizes, or if you want to customize how the icon looks at certain sizes, you can provide multiple versions.

Icon sizes for macOS apps

Create a 1024 x 1024 pixel version of the macOS app icon for the App Store. In addition, you must also provide the icon in the following sizes.

tvOS app icon sizes

Create a 1280 x 768 pixel version of the tvOS app icon for the App Store. In addition, you must also provide the icon in the following sizes.

Consider enabling a safe zone on the home screen icon.During focus and parallax, content around the edges of the app icon may be clipped when the icon is resized and moved. To make sure your icon content doesn't get cut off too much, you might want to allow a little extra breathing room.

WatchOS app icon sizes

Create a 1024 x 1024 pixel version of your watchOS app icon for the App Store. You can have the system automatically scale this version down to all other sizes, or if you want to customize the appearance of the app icon to specific sizes, provide the sizes listed in the table below. All icon dimensions are displayed in @2x pixels.

If you have a companion app for iPhone, you must also provide the watchOS app icon in the following sizes.