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.
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).
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:
and in a playlist icon:
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. On 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. Then, remove the rounded rectangular outline of the iOS app icon and focus on the main images within it. For example, if your iOS app icon shows a tree inside the rectangle, use 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. Do not 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 cannot 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.
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.
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.
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.”)
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.
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.
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.
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.
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
firstname.lastname@example.org. 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.
Size of canvas (in pixels)
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, make sure to redraw each image. For example, do not use the 32x32 standard-resolution icon as the 16x16@2x icon, even though they both have a canvas size of 32x32 pixels. App icons should 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 instance, 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.
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 was not created with vector shapes and does not 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, 2x2 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 this, 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 is only half a pixel wide, which results in a better sense of dimensionality.
Create High-Resolution Artwork from Scratch
If you do not 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 is 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 1024x1024 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, like 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 8x8 pixels and represents 1 pixel in the 128x128 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 32x32 pixel and 16x16 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 32x32 pixel size, and a 64-pixel grid works well for creating the 16x16 pixel size.
Redesign Your iOS Artwork for OS X
If you are creating an OS X version of an iOS app, design an icon that users recognize. Do not simply reuse your iOS app icon. In particular, your icon should not appear in a rounded rectangle. App Store, Calendar, and Contacts use icons for OS X and iOS that are recognizable, yet distinct from one another.
Packaging Your Icon Resources
After you’ve created the necessary app icon assets, place them in folder a named
icon.iconset. You can preview your
.iconset folder to ensure the proper alignment and resolution handling of all your app icon resources. Select the folder in Finder and press Space bar to open Quick Look. You should see a slider at the bottom of the window. By adjusting the slider, you can view the various assets as though they are one icon.
Use the system-provided tools to convert your
.iconset folder into a single
.icns file. First, use an image-editing program to output your 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. Do not 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.
Freestanding icons are occasionally used in the toolbar of a main or document window, such as the Keynote toolbar shown here.
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.
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.
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:
When the Send icon is in a toolbar button and the system applies the active, enabled appearance to it, it looks like this:
As you design an icon to put inside a toolbar control, such as a button or segmented control, follow these guidelines:
Create icons that measure no more than 19x19 pixels.
Make the outline sharp and clear.
Use a straight-on perspective.
Use black (add transparency only as necessary to suggest dimensionality).
Use the PDF format.
Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered).
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 do not 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,). 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 do not 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:
Use a straight-on perspective.
Make the outline sharp and clear.
Use color judiciously to add meaning.
Create icons for standard- and high-resolution displays. You need to supply two resources: 32x32 and 32x32@2x. See Table 5-1 for the corresponding canvas sizes.
Use the PNG format.
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.
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:
After the system applies the inactive appearance to the Home icon, it looks like this:
Follow these guidelines as you design your sidebar icons:
Use black combined with transparency (that is, alpha values) to suggest details.
Make the outline sharp and clear.
Use a straight-on perspective.
PDF format is recommended.
Create your icons in three sizes: 16x16, 18x18, and 32x32 pixels (if using PDF).
If you create your sidebar icons in PDF format, OS X will automatically scale your icon for high-resolution display. You do not 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:
But when it is selected, the Trash icon is inverted:
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:
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:
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.
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.
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.
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:
144 point text for the 512x512@2x pixel document icon
72 point text for the 512x512 pixel document icon
36 point text for the 256x256 pixel document icon
18 point text for the 128x128 pixel document icon
9 point text for the 64x64 pixel document icon
6.5 point text for the 32x32 pixel 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:
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.
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.
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.
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.
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:
© 1992, 2001-2003, 2012 Apple Inc. All Rights Reserved. (Last updated: 2012-07-23)