Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Designing App Icons

Beautiful, compelling icons are a fundamental part of the macOS user experience. Far from being merely decorative, icons play an essential role in communicating with users.

Every app must include several sizes of its app icon for display in the Finder, Dock, Launchpad, and elsewhere. To look at home in macOS, an app icon should be meticulously designed, informative, and aesthetically pleasing.

Some apps might need to supply additional icons, such as icons that appear in a toolbar or sidebar. Although some of the high-level guidance for designing app icons applies to designing toolbar and sidebar icons, these icons have different purposes (to learn how to design them, see Toolbar Items and Sidebar Icons).

Tips for Designing App Icons

For the best results, enlist a professional graphic designer to help you develop an overall visual style for your app, and apply that style to the app icon and all the other icons and images in the app.

Consider giving your app icon a realistic, unique shape. In macOS, app icons can have the shape of the objects they depict, including cutouts. A unique outline focuses attention on the depicted object and makes it easier for users to recognize the icon at a glance. If necessary, you can use a circular shape to encapsulate a set of images.

Don’t reuse your iOS app icon, if you have one. If you’re developing a macOS version of an iOS app, you should not reuse your iOS app icon. Although you want users to recognize your app, you don’t want to imply that your app isn’t tailored for the macOS environment. Start by reexamining the way you use images and metaphors in your iOS app icon. For example, if the iOS app icon shows a tree inside the rectangle, consider using the tree itself for your macOS app icon. For more information, see Redesign Your iOS Artwork for macOS.

Use universal imagery that people can easily recognize. Avoid focusing on a secondary or less familiar aspect of an element.

Strive for simplicity. In particular, avoid cramming lots of images into an icon. Try to use a single object that expresses the essence of your app. Start with a basic shape and add details strategically. If an icon’s content or shape is overly complex, the details can become confusing and may appear blurry at smaller sizes.

Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon brighter. Also, smooth gradients typically work better than sharp delineations of color. Subtle shadows can give objects dimensionality and realism, and can help tie the elements of an icon together so that the result doesn’t look like a collage.

Avoid mixing actual text with “greek” text or wavy lines to suggest text. If you want to show text in your icon but you don’t want to draw attention to the words, start with actual text and make it hard to read by shrinking it or doubling the layers. Shrinking text also makes the details in your icon sharper for high-resolution displays.

Create an idealized version of the subject rather than using a photo. Although it can be appropriate to use a photo (or a screenshot) in an app icon, it’s often better to augment reality in an artistic way. Creating an idealized version can help you emphasize the aspects of the subject that you want users to notice.

If your app has a very recognizable UI, consider creating a refined representation of it instead of using an actual screenshot of your product in the app icon. Creating an enhanced version of the UI is particularly important when users could confuse a large version of the icon with the actual interface of the app.

Avoid using macOS UI elements (including icons) in your icons. You don’t want users to confuse your icons with the macOS UI.

Don’t use replicas of Apple products in your icons. The symbols that represent Apple products are copyrighted and can't be reproduced in your icons. In general, it’s a good idea to avoid replicas of any specific products or devices in your icons. These designs change frequently, and icons that are based on them can look dated.

Use Perspective and Textures Appropriately

Different perspectives are achieved by changing the position of an imaginary camera that captures the icon. It’s important to position the camera and a light source so that you get the right amount of shadow and avoid distortion.

In general, an app icon depicts an object that looks like it’s sitting on a desk in front of you. The imaginary camera is always above the object, tilted slightly towards the lower edge of the object. You don’t want to position the camera too close to the desk, because when the camera is too close, it distorts the perspective of the icon. You want the icon to be nearly isometric.

image: ../Art/icon_angle_2x.png

Like the camera, the perceived light source should also be tilted slightly from the perpendicular, but in the opposite direction (that is, towards the top edge of the object) so that a subtle shadow appears at its bottom edge.

image: ../Art/icon_shadow_2x.png

When appropriate, you can add a slight tilt to your icon after you render it. A tilt of 9 degrees works well.

image: ../Art/icon_tilt_2x.png

Portray real objects accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

Make your drop shadow fully black. In the Finder Cover Flow view, app icons are displayed against a black background, set above a highly reflective surface. If your icon has a drop shadow that contains any gray tones, the gray will make the shadow look more like a glow.

Consider adding a slight glow just inside the edges of your icon. If your app icon includes a dark reflective surface, such as glass or metal, add an inner glow to make the icon stand out against the black background. If you don’t add a glow to make the edges of your icon prominent, it might appear to dissolve into the black background of the Finder Cover Flow view.

Use transparency when it makes sense. Transparency in an icon can help depict glass or plastic, but it can be tricky to use convincingly. You would never see a transparent tree, for example, so don’t use one in your icon. The Preview app icon incorporates transparency effectively.

image: ../Art/Preview_2x.png

Provide the Correct Resources and Let macOS Do the Work

An app icon is displayed in many places, such as the Finder, Dock, Launchpad, and App Store. To ensure that macOS can display your app icon appropriately in each context, you create the icon in different sizes and resolutions, and follow specific naming conventions.

As you create artwork for high-resolution displays, be sure to treat each image as its own resource. Even though the high-resolution version of one icon might use the same canvas size as the standard version of another, you should redraw each image. For example, don’t use the 32 x 32 standard-resolution icon for the icon_16x16@2x resource even though they both have a canvas size of 32 x 32 pixels. It’s best when an app’s icon looks the same on both standard- and high-resolution displays, because a user can set up multiple displays with different resolutions and drag windows from one display to the next.

As the canvas size decreases, you have fewer pixels to draw, which means that smaller sizes should be less detailed. In the Keynote app icon shown here, for example, the smaller size is not as detailed as the larger size, where you can read the list items, discern separate pages on the podium, and and see the texture of the metal stand. Each image is appropriately drawn for the canvas size.

image: ../Art/Keynote-1_2x.png
image: ../Art/Keynote-5_2x.png

To name an app icon, use this format:

  • icon_<file_size>.<filename_extension> for standard icons

  • icon_<file_size>@2x.<filename_extension> for high-resolution icons

For example, to supply the 512 x 512 version of an app icon, name the files icon_512x512.png and icon_512x512@2x.png. For more details about naming conventions, see Adopt the @2x Naming Convention.

To ensure that your app icon looks great in all the places that users see it, you need to provide resources in the sizes listed in Table 75-1.

Table 75-1App icon resource sizes

Filename

Canvas size (in pixels)

icon_512x512@2x

1024 x 1024

icon_512x512

512 x 512

icon_256x256@2x

512 x 512

icon_256x256

256 x 256

icon_128x128@2x

256 x 256

icon_128x128

128 x 128

icon_32x32@2x

64 x 64

icon_32x32

32 x 32

icon_16x16@2x

32 x 32

icon_16x16

16 x 16

Tips for Creating High-Resolution Artwork

If you don’t have an existing set of icon resources, the following tips can help you create standard- and high-resolution versions of your app icon.

Start with a large master art file and scale it down to the smaller sizes. It’s especially useful to create your master image in a dimension that’s a multiple of the icon sizes you need. For example, to create icons in the recommended sizes listed in Table 75-1, first create a 1024 x 1024 pixel version of your master file.

Use an appropriate grid size. As you create the master image, using a grid ensures that you get sharp lines on important pieces of the design, such as the outline. As you scale down, you’ll be able to keep each smaller icon version crisp, and reduce the amount of retouching and sharpening you need to do.

In your image-editing app, set up an 8-pixel grid, which means each block in the grid measures 8 x 8 pixels and represents 1 pixel in the 128 x 128 pixel icon. As you create your master file, “snap” the image to the grid and keep it within the boundaries to minimize the half pixels and blurry details that can result when you scale it down.

Redraw art as you scale down. If you’re not satisfied with the results when you scale down art to the 32 x 32 pixel and 16 x 16 pixel sizes, redraw the image at these sizes instead. If you decide to do this, setting up the proper grid can still help reduce extra work. For example, using a 32-pixel grid works well for creating the 32 x 32 pixel size, and a 64-pixel grid works well for creating the 16 x 16 pixel size.

Redesign Your iOS Artwork for macOS

If you’re creating a macOS version of an iOS app, you want an icon that users recognize, but you don’t want a carbon copy of the iOS app icon. In particular, the macOS app icon shouldn’t use the same rounded rectangle shape that the iOS app icon uses. App Store, Calendar, and Contacts provide icons for macOS and iOS that are recognizable, yet distinct from one another. (iOS 8 app icons shown here.)

image: ../Art/AppStore_2x.png
image: ../Art/AppStore8_2x.png
image: ../Art/Maps_2x.png
image: ../Art/Maps8_2x.png
image: ../Art/FaceTime_2x.png
image: ../Art/FaceTime8_2x.png

Package Your Icon Resources

After you’ve created the necessary app icon assets, place them in a folder named icon.iconset.

Use the system-provided tools to convert your .iconset folder into a single .icns file. First, use an image-editing program to output app icons in the PNG format, which preserves your design’s alpha values. Your source art files should use sRGB and retain their color profiles. You don’t need to compress image files because the tools used to package them take care of compression for you.

To create an .icns file, use iconutil in Terminal. Terminal is located in /Applications/Utilities/Terminal. Enter the command iconutil -c icns <iconset filename>, where <iconset filename> is the path to the .iconset folder. You must use iconutil, not Icon Composer, to create high-resolution .icns files. For more information, see Provide High-Resolution Versions of All App Graphics Resources.

There are also several third-party tools available for completing this step. Note that an .icns file is appropriate for app icons only; it is not an acceptable format to use for other types of icons in your app.