Icon Design Guidelines

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

Every app must include several size variations of the app icon for display in the Finder, Dock, Launchpad, and elsewhere. Many apps need to supply additional icons, such as toolbar and document icons. To look at home on OS X, all of these icons should be meticulously designed, informative, and aesthetically pleasing.

Unlike other custom artwork in your app, these icons must meet specific criteria so that OS X can display them properly. In addition, icon files have sizing and naming requirements. To support resolution independence, you should provide standard- and high-resolution versions of your icons. For guidelines on how to create icons, see “Creating Great Icons for Any Resolution.”

About App Icon Genres and Families

Apps are classified by role—user app, software utility, and so on—and each role is associated with a recognizable icon style, or icon genre. An icon genre helps convey what users can do with an app before they open it. You can see a couple of different icon genres represented in the Dock.

Application icons of different genres—user applications and utilities—shown as they might appear in the DockApplication icons of different genres—user applications and utilities—shown as they might appear in the Dock

Two icon genres that are easy to distinguish are user apps and utilities. In general, the icons for user apps are colorful and inviting, whereas the icons for utilities have a more serious appearance. For example, compare the bright colors used in the user app icons (shown in the top row of the figure below) to the grayer coloration of the utility icons (shown in the bottom row).

Two icon genres: User application icons in top row; utility icons in bottom row

An icon family is a set of icons that reuse certain graphic elements. An app might create an icon family to help users identify files and other entities that are associated with the app. For example, iTunes reuses visual cues from its app icon in a plug-in icon:

../art/iconplugininfamily_2x.png

and in a playlist icon:

../art/iconmovieinfamily_2x.png

Tips for Designing 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 all the icons and images in it.

The tips in this section help you design a great app icon, but many of them also apply to the design of other icons, such as toolbar icons.

Give your app icon a realistic, unique shape. In OS X, app icons should 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. In particular, you should avoid using the “rounded tile” shape that users associate with iOS app icons.

Don’t reuse your iOS app icon, if you have one. If you’re developing an OS X 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 OS X environment. Start by reexamining the way you use images and metaphors in your iOS app icon. For example, if your iOS app icon shows a tree inside the rectangle, consider using the tree itself for your OS X app icon.

Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, users are less likely to recognize a rural mailbox than a postage stamp.

Strive for simplicity. In particular, avoid cramming lots of images into your 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. (Note that sidebar icons and icons inside toolbar buttons should not use color; for more information, see “Designing Toolbar Icons” and “Designing Sidebar Icons.”)

Shadows give objects dimensionality and realism. They also help tie the elements of an icon together so that it doesn’t look like a collage.

Choose the right perspective for your icon. You want the perspective of your icon to match the perspective of other icons in the same genre. For example, a user app icon should look like it’s resting on a desk in front of you, whereas most utility app icons use a straight-on perspective. Regardless of the perspective that’s appropriate for your icon genre, always use a single light source with the light coming from above the icon. To learn more about light, shadows, and different icon perspectives, see “Using Perspective and Texture to Reflect Reality.”

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 Retina display.

For example, it’s hard to read the text in the TextEdit app icon unless you increase its size. Although the text in this icon has meaning, users don’t need to read it to see that TextEdit is a text-editing app.

If your app is available in multiple languages, you may want to use “greek” text or wavy lines to suggest generic text instead of using words in a specific language. Don’t mix fake text with real text.

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 software 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 Aqua interface elements in your icons. You don’t want users to confuse your icons with the OS X UI.

Don’t use replicas of Apple hardware 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 devices in your icons. These designs change frequently, and icons that are based on them can look dated.

Don’t reuse OS X system icons in your interface. It can confuse users to see the same icon used to mean slightly different things in multiple locations.

Using Perspective and Texture to Reflect Reality

The angles and shadows used in various kinds of icons are intended to reflect how the objects would appear in the real world. It’s important to learn which perspective is associated with each icon genre so that your icons look at home on the platform.

Different perspectives are achieved by changing the position of an imaginary camera that captures the icon. The perceived light source that is causing the shadows is always directly above the object.

An app icon depicts an object that looks like it is sitting on a desk in front of you.

Perspective for application icons: Sitting on a desk in front of you

Utility icons are depicted as if they were on a shelf in front of you. Flat objects appear as if there were a wall behind them, with an appropriate shadow behind the object.

Perspective for flat utility icons

A three-dimensional object, such as a rocket, is more realistically viewed as resting on the ground. To depict the rocket, an icon shows it sitting on a shelf with its shadow below it.

Perspective for three-dimensional object

For toolbar icons, the perspective is also straight-on, as if the object is on a shelf in front of you, with the shadow below it. (For more information on designing toolbar icons, see “Designing Toolbar Icons.”)

Perspective for toolbar icons

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, 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 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 and Pages app icons incorporate transparency effectively.

Materials: Transparency used to convey meaning

Creating Great Icons for Any Resolution

Take Advantage of High-Resolution Display

Retina display allows you to show high-resolution versions of your art and icons. If you merely scale up your existing artwork, you miss out on the opportunity to provide the beautiful, captivating images users expect. Instead, you should rework your existing image resources to create large, higher-quality versions that are:

  • Richer in texture. For example, in the high-resolution versions of the System Preferences and Contacts icons, the metal and paper textures are clearly visible.

    ../art/icon_richTexture.png
  • More detailed. For example, in the high-resolution versions of the Safari and Preview icons, you can see details such as the accurate contours of the continents behind the compass and the etching on the magnifying glass.

    ../art/icon_moreDetail.png
  • More realistic. For example, the high-resolution versions of the Keynote and Pages icons combine rich textures and fine details to create realistic portrayals of a podium and an inkwell.

    ../art/icon_moreReal.png

Provide the Correct Resources and Let OS X Do the Work

Your app icon is displayed in the Finder, Dock, Launchpad, and elsewhere. For OS X to display your icon appropriately, create your app icon in different sizes and resolutions, and follow specific naming conventions. In particular, use the format:

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

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

For example, you should supply icon_512x512.png and icon_512x512@2x.png. For more details about naming conventions, see “Adopt the @2x Naming Convention” in High Resolution Guidelines for OS X.

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 5-1.

Table 5-1  App icon resource sizes

Filename

Size of canvas (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

As you create your artwork for high-resolution display, 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 icon_16x16@2x even though they both have a canvas size of 32 x 32 pixels. It’s important for an app’s icon to look the same on standard- and high-resolution displays, because a user can set up multiple displays with different resolutions and drag the app 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. For example, the smaller size Calendar app icon is not as detailed as the larger size, where you can see numbers for the days of the month, highlights in the metal rings, and lines at the bottom of the pile to indicate more pages. Each image is appropriately drawn for the canvas size.

../art/icon_redraw_ical.png

Create High-Resolution Artwork from Existing Assets

If you have an existing set of app icon resources, the following techniques can help you get great results as you create high-resolution versions of your artwork.

Scale up your original artwork and then redraw. Using the nearest-neighbor scaling algorithm, scale your original artwork to 200%. This works well if the original artwork wasn’t created with vector shapes and doesn’t include layer effects. The result is a large, pixelated image on top of which you can draw matching high-resolution art. This is a good way to begin because it allows you to preserve the original layout of your design.

If the original artwork was created with vector shapes or includes layer effects, you can use the default scaling algorithm instead of the nearest-neighbor algorithm.

Add detail and depth. Don’t hesitate to draw very small elements, because the high-resolution version of your artwork allows much more room for fine details. For example, a 1-pixel dot in your original image becomes a 4-pixel dot (that is, 2 x 2 pixels) in the larger version.

Consider softening scaled-up elements. If, for example, you have a sharp, 1-pixel dividing line in your original artwork, it might have the boldness you want when it is scaled to a 2-pixel line. But for some lines and elements, you might want to soften the scaled results by feathering or even leaving the element at the smaller size.

Consider adding blur for better results in effects such as engravings and drop shadows. For example, text engraving is typically done by shifting a duplicate image of the text by 1 pixel. Scaled up, this shift would result in an engraving width of 2 pixels, which is likely to look very sharp and unrealistic at a higher resolution. To improve the appearance, you can leave the shift as-is (that is, at 1 pixel), but add a 1-pixel blur to soften the engraving. This still results in a 2-pixel-wide engraving effect, but the outer pixel now looks more like it’s only half a pixel wide, which results in a better sense of dimensionality.

Create High-Resolution Artwork from Scratch

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 5-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 OS X

If you’re creating an OS X 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 OS X app icon shouldn’t use the same rounded rectangle shape that the iOS app icon uses. App Store, Calendar, and Contacts provide icons for OS X and iOS that are recognizable, yet distinct from one another. (iOS 6 app icons shown here.)

../art/icons_iOStoOSX 2.png

Packaging Your Icon Resources

After you’ve created the necessary app icon assets, place them in folder a 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” in High Resolution Guidelines for OS X.

There are also several third-party tools available for completing this step. Note that an .icns file is appropriate for app icons and document icons only; it is not an acceptable format to use for other types of icons in your app. (To learn more about creating document icons for your app, see “Designing Document Icons.”)

Designing Toolbar Icons

Toolbar items give users easy access to frequently used commands (to learn more about the concepts behind toolbar design, see “Designing a Toolbar”). To represent these commands in a toolbar, you need small, unambiguous icons that users can easily distinguish and remember.

To accommodate different app styles and usages, OS X provides two styles of toolbar items: toolbar controls and freestanding icons that behave as buttons. Don’t mix styles of toolbar items—use one or the other in your app. To learn more about the toolbar controls that can contain icons, see “Window-Frame Controls.” To learn more about freestanding icons, see “Icon Button.”

In general, main and document windows achieve a subtle appearance by using streamlined icons within toolbar buttons controls. For example, the Mail toolbar uses several small icons in toolbar buttons and segmented controls.

../art/icontoolbarbuttons.jpg

Freestanding icons are occasionally used in the toolbar of a main or document window, such as the Keynote toolbar shown here.

../art/iconbuttonsintoolbar.jpg

Freestanding icons tend to be more common in the toolbars of preferences windows, where they are often used as pane switchers. For example, the Safari preferences window displays several icons that give users access to different preferences categories.

../art/iconbuttonsinprefs.jpg

The best toolbar icons use familiar visual metaphors that are directly related to the app commands they represent. When a toolbar icon depicts an identifiable, real-world object or recognizable UI element, it gives first-time users a clue to its function and helps experienced users remember it.

Identify parts of the user’s mental model that lend themselves to visual representation. Users often form a mental model of your app’s task based on real-world actions. (To learn more about the mental model concept, see “Mental Model.”) For example, the iTunes toolbar shown below displays rewind, play, and fast-forward controls that use symbols similar to those users see and touch on physical devices.

../art/icon_itunes_toolbar_2x.png

Make toolbar icons distinct, yet harmonious. When each icon is easily distinguishable from the others, users learn to associate it with its purpose and locate it quickly. Variations in shape and image help to differentiate one toolbar icon from another. At the same time, an app’s toolbar icons should harmonize as much as possible in their perspective, size, and visual weight. This holds true whether the icon is freestanding or in a toolbar control.

For icons to put inside toolbar controls, create streamlined template images. These images should convey meaning through outline and contour, and they should include very little internal detail.

It’s best to make your icon as solid as possible (that is, with very little transparency or alpha values) so that it will look good when the system applies effects, such as the inactive appearance. An icon that uses too much transparency can look disabled when the system applies either the active or inactive appearance to it. To help you create a solid icon, start by imagining the shadow your object would cast. If the contours of the shadow clearly show what the object is, you don’t need to add any transparency.

To help you understand how the system-applied effects can change the appearance of an icon, consider the Send icon in Mail, shown here in its unprocessed state:

../art/icon_sendunprocessed.jpg

When the Send icon is in a toolbar button and the system applies the active, enabled appearance to it, it looks like this:

../art/icon_sendactive.jpg

As you design an icon to put inside a toolbar control, such as a button or segmented control, follow these guidelines:

When you create an icon to put inside a toolbar control in PDF format, OS X will automatically scale your icon for high-resolution display. You don't need to provide a high-resolution version.

You might be able to use a system-provided icon or image to represent a common task or a standard interface element in your toolbar controls, such as the connect via Bluetooth icon (that is,../art/NSBluetoothTemplate.jpg). OS X provides many icons that can be used inside toolbar controls and a few icons that can be used as icon buttons in a toolbar. For more information about the images that are available and what they mean, see “System-Provided Icons.”

For freestanding icons in a toolbar, create inviting images that are easy to identify. Because freestanding toolbar icons don't need to fit within a toolbar control, you have a little more room to express them. As you design a freestanding icon for your toolbar, follow these guidelines:

Although you use the straight-on perspective for the freestanding toolbar icons you design, if you use a recognizable icon from elsewhere in the interface in your toolbar, you should not change its appearance or perspective. That is, don’t redesign a toolbar version of a well-known interface element.

Designing Sidebar Icons

If your app includes a sidebar (or source list), you need to design icons to display in it. For example, the Mail app contains several icons that represent the user’s mailboxes, RSS feeds, and reminders.

../art/iconsidebariconsinmail_2x.png

Sidebar icons are small and streamlined, but they provide more internal detail and a more realistic outline than the icons that go inside of toolbar controls. To achieve this look, try imagining an X-ray of the object you have in mind, then use transparency to capture the details.

As with the icons that can be used inside toolbar controls, the system applies various effects to sidebar icons. To help you understand how these effects can change the appearance of a sidebar icon, consider the Finder Home icon, shown here in its unprocessed state:

../art/icon_homeunprocessed.jpg

After the system applies the inactive appearance to the Home icon, it looks like this:

../art/icon_homeactiveappearance.jpg

Follow these guidelines as you design your sidebar icons:

If you create your sidebar icons in PDF format, OS X will automatically scale your icon for high-resolution display. You don't need to provide high-resolution versions. However, if you use PNG format for your icons, you will need to supply the following resources: 16x16, 16x16@2x, 18x18, 18x18@2x, 32x32, and 32x32@2x. PNG format is only recommended for designs that are very intricate and require effects like shading, textures, and highlights.

Be sure to invert your sidebar icon to make sure it looks good and still makes sense when the values are flipped. You need to check this because a sidebar icon’s selected appearance is the inverse of its unselected appearance. For example, the Trash icon in the Mail sidebar has the following appearance when it is unselected:

../art/iconsidebariconregular.jpg

But when it is selected, the Trash icon is inverted:

../art/iconsidebariconinverted.jpg

If necessary, provide an alternate design for the selected appearance of your sidebar icon. For example, the Desktop icon in the Finder sidebar is represented by two separate images to ensure that the icon conveys the same message in both selection states. Specifically, the unselected version of the Desktop icon shows a row of white Dock icons along the bottom edge:

../art/icondesktopregular.jpg

If this icon were inverted, the Dock icons would become hollow black squares with white outlines, and they would no longer convey the same meaning. So the Desktop icon also includes a version that’s designed to preserve the appearance of the Dock icons when the colors are inverted:

../art/icondesktopinverted.jpg

Designing Document Icons

Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. This distinctive appearance makes it easy for users to distinguish their documents from their apps and other content, even when the icon sizes are small.

Follow these guidelines as you design document icons for your app.

Make it obvious that your app and the documents it produces are related. In addition to using the familiar folded-corner outline, you can add an image that reminds users of your app. In general, use your app icon for this purpose. For example, it’s easy for users to tell which documents they created in Pages.

../art/icondocicon.jpg

Present a document icon as if it were hovering on the desktop. This perspective helps you reproduce the appropriate shadow behind the document.

Provide a set of document icons in the same set of sizes you provide for your app icon. For the recommended standard- and high-resolution sizes, see Table 5-1.

As you do with your app icons, create an .icns file for your document icons. To learn more about how to create this type of file, see “Tips for Designing Icons.”

Integrate a badge into the document shape (if one is necessary). If you want to put an identifying badge over a document icon, treat the badge as an integrated element within the icon. Don’t spoil the document icon shape by adding a badge that extends beyond the outline and appears to be above the document.

Incorrect and correct badging of a document icon

Move the image appropriately to accommodate the badge. You need to allow enough space at the bottom edge of the document icon to display the badge. As a result, the upper-right corner of your image might be obscured by the folded-corner appearance of the background.

../art/icondociconsafearea.jpg

Use the appropriate font and font sizes for the badge. For all sizes, use Lucida Grande Bold, in color sRGB 0,0,0, and with 66% opacity. If you are using iconutil to generate your .icns files, you don’t have to worry about font sizes.

However, if you create your own .icns files, use the following font sizes to add a badge to all sizes of your document icon:

Note that you should “Greek” the badge text in the 16x16 pixel version of your document icon.

If a document badge has a lot of characters, show as many of them as possible in the larger icon sizes, without shrinking the font too much. In the smaller sizes, simply truncate the badge text (don’t add an ellipsis). For example, the badge text “Archive” does not fit completely in the 32x32 pixel version of this document icon:

../art/icondociconlargebadge.jpg

Icon Gallery

A great app icon is not only gorgeous and inviting, it also conveys the main purpose of the app and hints at the user experience. As you decide how to best represent your app through its icon, it’s helpful to examine some successful icon designs.

User app icons are vibrant and inviting, and should immediately convey the app’s purpose. For example, the Photo Booth icon clearly indicates that this app helps users take pictures of themselves.

The TextEdit application icon makes it obvious what this application is for

In an app that primarily helps users create or view media, it makes sense for the icon to include the media. If appropriate, the icon might also depict a tool to communicate the type of task that the app helps the user accomplish. The Preview icon (shown below) uses a magnification tool to help convey that the app can be used to view pictures. The proximity of the magnifier to the pictures makes it clear that the tool’s function is directly related to the content the app handles.

The Preview application icon: An example of a tool element

In the Stickies app icon, the yellow rectangles are easily identifiable as sticky notes. In a sense, the sticky note itself functions as a tool, so the icon doesn’t include a pen or other writing utensil because it isn’t necessary to tell the icon’s story.

The Stickies application icon: Effective without the addition of a tool

Some apps that represent objects or well-known products, such as QuickTime Player, Dashboard, and FaceTime, are most easily recognized by enhanced versions of the symbols or objects themselves. Note that these app icons (shown below) use the straight-on perspective because users never see these objects from the three-dimensional, “on a desktop” perspective.

The icons for QuickTime Player, DVD Player, and Calculator

Icons for utility apps tend to convey a more serious tone than those for user apps. Color in utility app icons is desaturated, predominantly gray, and added only when necessary to clearly communicate what the apps do. For example, notice the prevalence of gray and the discriminating use of color in the System Information, Activity Monitor, and Keychain icons shown below:

Discriminating use of color in the Activity Monitor and Printer Setup Utility icons