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.

Application Icons - Basics - User Interface Guidelines - Layout (1)Application Icons - Basics - User Interface Guidelines - Layout (2)

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.

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

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.

(Video) UI Design Livestream - Designing your first iOS app

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.


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.

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

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.

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

(Video) Basics of UI Design for Mobile Apps - Artboard Size, Screen Density and Resolution for Beginners

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.

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

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.

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


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.

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

(Video) 4 Foundational UI Design Principles | C.R.A.P.

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.


A watchOS app icon is circular with no accompanying text.

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

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

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

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.

(Video) How To Use Apple Watch SE 2! (Complete Beginners Guide)


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:

platform To her transparency asset form
iOS, iPad OS Einzel NO square
MacOS Einzel Yes, as applicable Square with rounded corners
tvOS Several NO rectangle
watches Einzel NO square

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.

@2x (píxel) @3x (píxel) Sin iPhone to use
120x120 180x180 Home screen on iPhone
167x167 Home screen on iPad Pro
152x152 Home screen on iPad, iPad mini
80x80 120x120 Featured on iPhone, iPad Pro, iPad, iPad mini
58x58 87x87 Fits in iPhone, iPad Pro, iPad, iPad mini
76x76 114x114 Notifications on iPhone, iPad Pro, iPad, iPad mini

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.

@1x (píxel) @2x (píxel)
512x512 1024x1024
256x256 512x512
128x128 256x256
32x32 64x64
16x16 32x32

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.

@1x (píxel) @2x (píxel) to use
400x240 800x480 starting screen

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.

38 mm 40 mm 41 mm 42 mm 44 mm 45 mm 49 mm to use
80x80 88x88 92x92 80x80 100x100 102x102 108x108 starting screen
48x48 55x55 58x58 55x55 58x58 66x66 66x66 message center
172x172 196x196 196x196 196x196 216x216 234x234 258x258 Glance; look; quick look

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

@2x (píxel) @3x (píxel)
58x58 87x87



  • Apple Design Features


  • App-Icon-DesignWWDC 2017

Change Log

September 14, 2022Added specifications for the Apple Watch Ultra.
(Video) Introducing Figma: A Beginners Tutorial (2023 UI UX Design)


What is the use of application icon? ›

An application icon—or an app logo—is a unique image used to represent an app on a user's device. It also appears in a smartphone's settings and search bar in addition to users' introductory glance within the App Store and Google Play Store.

How do I change app icons on iPhone without shortcuts? ›

The Launch Center Pro app lets you change iOS app icons without having to use Shortcuts. Apple's latest iOS 14 has given users a chance to customise their home screens with widgets and custom icons.

What is Apple Human Interface Guidelines? ›

Apple's Human Interface Guidelines (HIG) is a comprehensive resource for designers and developers looking to create great experiences across Apple platforms. Now, it's been fully redesigned and refreshed to meet your needs — from your first sketch to the final pixel.

Can I change app icons on iPhone? ›

Tap on the icon under Home Screen Name and Icon. You'll have the choice of either taking a photo, choosing a photo, or choosing a file. Assuming you've already saved an image in Photo, tap on Choose Photo and select the photo you want to use.

Where is the application icon? ›

The application icon is always displayed in the menu bar. When you open the application window, the application icon also appears in the Dock. To open the application icon menu, Click the application icon in the menu bar.

What are application icons in computer? ›

Windows uses icons to graphically represent items, such as programs and folders. This is part of Windows GUI, or graphical user interface. Icons appear everywhere throughout Windows, and are really just pictures that depict the type of items they represent. The Windows desktop contains a range of desktop icons.

How do I change the icon of an app? ›

Long-press the app icon you want to change. Tap the pencil button to edit the shortcut. Tap the app icon. Select the icon pack from which you want to apply the icon.

How to hide apps on iPhone? ›

To hide apps on your iPhone using the App Library, go to the Home Screen and tap and hold the app that you want to hide. Then select Remove App from the pop-up menu. Finally, tap Remove from Home Screen to hide the app in your App Library. Note: These steps will only work if you are running iOS 14 or later.

How do you change what your apps look like on iPhone using shortcut? ›

Modify shortcut colours and icons on iPhone or iPad
  1. In the Shortcuts app on your iOS or iPadOS device, tap on the shortcut you want to modify.
  2. Tap the Icon next to the shortcut name, then do any of the following: Change the shortcut's colour: Tap a colour swatch. ...
  3. To save your changes, tap Done.

What is iOS guidelines? ›

These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.

What is interface design guidelines? ›

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.

What are the main iPhone user interface elements? ›

All components
  • Content.
  • Layout and organization.
  • Menus and actions.
  • Navigation and search.
  • Presentation.
  • Selection and input.
  • Status.
  • System experiences.

How do I change the layout of my iPhone apps? ›

Move apps and widgets around on your iPhone
  1. Touch and hold any app or widget on the Home Screen, then tap Edit Home Screen. The apps begin to jiggle.
  2. Drag an app to one of the following locations: ...
  3. When you're finished, press the Home button (on an iPhone with a Home button) or tap Done (on other iPhone models).

How do I edit widgets on my iPhone? ›

How to edit your widgets
  1. Swipe right from the Home Screen or Lock Screen.
  2. Touch and hold a widget to open the quick actions menu.
  3. Tap Edit Widget. .
  4. Make your changes, then tap outside of the widget to exit.
Feb 23, 2023

Which is the application screen icon? ›

The app drawer is different from the home screen because it contains every installed app and cannot be customized. With most versions of Android, the app drawer is opened by selecting the app drawer icon or by swiping up from the bottom of the home screen. Examples of the app drawer icon are shown below.

How do I choose an icon? ›

7 tips on choosing icons in UI design
  1. Choose icon packs with different icon variants.
  2. Choose icon packs that support different weights.
  3. Make icons accessible.
  4. Use easily recognizable icons.
  5. Use icons with a consistent style.
  6. Use well-made icons to align them evenly.

What are the 3 types of icon? ›

There are three types of icons: “universal,” “conflicting” and unique icons. Let's focus on each type and its impact on the user experience.

What are examples of icons? ›

Example of some system icons are My Computer, Recycle Bin, My Documents, Internet Explorer etc. Shortcut Icons: These are the icons with small arrows in the lower left corner. A shortcut icons provides easy access to some objects on our systems, such as a program, a document or a printer.

What are icons and its types? ›

Icons are classified into 5 different categories

System Icons. Shortcut Icons. Program/Folder/Docs Icon. Start Button & Search icon. Taskbar Icon.

How do I change an icon picture? ›

To change the icon picture:
  1. Right-click the icon and click Properties.
  2. Click the Shortcut tab (if one is available), and then click Change Icon.
  3. Click the icon that you want to use from the list, click OK, and then click OK.

How do I change icon icons to custom? ›

Go to the folder or file you want a new icon for, go to Properties, go to Customize (or if it is already on the first selection then it should say "Change icon") and change the icon. Save the *. ico version of the file on your desktop. It makes for easier finding later.

Can you hide Messages on iPhone? ›

Step 1: Head to Settings. Step 2: Go to Notifications. Step 3: Tap Show Previews. Step 4: Select Never.

Where is the hidden folder on iPhone? ›

Find the Hidden album

Open the Photos app. Tap the Albums tab. Scroll down and look for the Hidden album under Utilities.

How do I customize my iPhone Home Screen with Shortcuts and widgets? ›

Add the Shortcuts widget to the Home Screen
  1. On your iOS or iPadOS device, touch and hold the background of the Home Screen until the apps begin to jiggle.
  2. Tap at the top of the screen to open the widget gallery.
  3. Scroll down, then tap Shortcuts.
  4. Swipe to choose a widget size.
  5. Tap Add Widget, then tap Done.

How do I remove app Shortcuts from iPhone Home Screen? ›

Delete a shortcut
  1. In the Shortcuts app on your iOS or iPadOS device, tap Edit.
  2. Tap one or more shortcuts (a checkmark appears in the upper-right corner to indicate selection), then tap Delete.
  3. Tap Delete Shortcut.

What is iOS example? ›

Apple iOS is a proprietary mobile operating system that runs on mobile devices such as the iPhone, iPad and iPod Touch. Apple iOS is based on the Mac OS X operating system for desktop and laptop computers.

What is design guidelines? ›

Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.

What is iOS structure? ›

There are four layers in the IOS operating system and they are the OS layer, services layer, media layer, and cocoa touch layer. OS layer has been used to communicate with the external hardware and provides frameworks to emphasize security.

What are the 7 layout design guidelines? ›

The principles of design are the rules a designer must follow to create an effective and attractive composition. The fundamental principles of design are: Emphasis, Balance and Alignment, Contrast, Repetition, Proportion, Movement and White Space.

What are the 4 types of user interfaces? ›

There are four prevalent types of user interface and each has a range of advantages and disadvantages:
  • Command Line Interface.
  • Menu-driven Interface.
  • Graphical User Interface.
  • Touchscreen Graphical User Interface.
Sep 22, 2014

What are the eight main guidelines for user interface design? ›

The Eight Golden Rules of Interface Design
  • Strive for consistency. ...
  • Seek universal usability. ...
  • Offer informative feedback. ...
  • Design dialogs to yield closure. ...
  • Prevent errors. ...
  • Permit easy reversal of actions. ...
  • Keep users in control. ...
  • Reduce short-term memory load.

What does application mean on Iphone? ›

“App is short for application, which is the same thing as a software program. While an app may refer to a program for any hardware platform, it is most often used to describe programs for mobile devices, such as smartphones and tablets.”

What are application icons give example? ›

Answer: An icon on your computer screen represent an object or a program on your hard drive. example - folders that you see in screen. recycle bin , my computer, typing test, and many more.


1. How To Use Google Pixel 6A! (Complete Beginners Guide)
(Simple Alpaca)
2. Become a UI/UX designer in 2023 - A step by step guide
(Rachel How)
3. How To Use iPhone 14 Pro/iPhone 14 Pro Max! (Complete Beginners Guide)
(Simple Alpaca)
4. Touch of Magic Complete Tutorial: The Ultimate Beginner's Guide | Dreamlight Valley Tips & Tricks
5. Design Icons the Right Way - Adobe Illustrator
6. How to Make an App for Beginners (2020) - Lesson 1
Top Articles
Latest Posts
Article information

Author: Corie Satterfield

Last Updated: 03/07/2023

Views: 5859

Rating: 4.1 / 5 (42 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Corie Satterfield

Birthday: 1992-08-19

Address: 850 Benjamin Bridge, Dickinsonchester, CO 68572-0542

Phone: +26813599986666

Job: Sales Manager

Hobby: Table tennis, Soapmaking, Flower arranging, amateur radio, Rock climbing, scrapbook, Horseback riding

Introduction: My name is Corie Satterfield, I am a fancy, perfect, spotless, quaint, fantastic, funny, lucky person who loves writing and wants to share my knowledge and understanding with you.