Throughout OS X, you can see quantities of small, black images in toolbar controls, gradient buttons, and scope buttons. Some of the most familiar of these images, such as go back, set object view to icons, list, columns, or Cover Flow, view Action menu, view in Quick Look, and show path, and are shown here in the Finder toolbar.
In addition to these images, many OS X apps display full-color standard images in preferences window toolbars. For example, the toolbar in the Calendar preferences window contains the general, accounts, and advanced images.
The standard images of the first type (including, for example, the view in Quick Look symbol ) are known as template images. A template image is a black and clear image that can be used inside a control (such as a toolbar button). Template images are expected to receive additional processing, such as displaying an inverted variation. For a list of these images, see “System-Provided Images for Use in Controls”; to learn more about toolbar buttons, see “Window-Frame Controls.”
Standard images of the second type (including, for example, the general preferences symbol ) can be used as standalone icon buttons in a preferences window’s toolbar. Because these images are not template images, they can't be used inside an app window’s toolbar controls (or any other controls). For a list of these images, see “System-Provided Images for Use as Toolbar Items.”
OS X also provides a handful of standard images that can appear in the window body, such as the invalid data image . For a list of these images, see “System-Provided Images for Use as Standalone Buttons.”
Every system-provided image has a specific meaning that users know. To avoid confusing users, it is essential that you use each image in accordance with its documented meaning and recommended usage.
When you use standard images correctly in your app, you also benefit from:
Shorter development time and less effort spent on creating custom images.
Automatic updating of images if appearance changes occur in future operating system updates.
To understand why it’s important to use these images correctly, consider the following hypothetical example. Imagine that the “go forward” image (that is, ) is changed to look like a capital letter “F.” If you correctly use this image in a control that performs a “go forward” action, the control still makes sense when it uses the new appearance. But if you incorrectly use the image to mean “play,” your play control is suddenly nonsensical and confusing when it displays the “F.”
If you can’t find a system-provided image that has the appropriate meaning for a specific purpose in your app, it’s better to design your own than to misuse a system-provided image. To learn how to design icons, see “Designing Toolbar Icons.”
System-Provided Images for Use in Controls
OS X provides many small, black images intended for use primarily in toolbar controls. These images are known as template images in AppKit, because they are expected to receive additional processing by an
NSButtonCell object before being displayed. The additional processing can, for example, make such an image look different when its control is pressed. Because these images require the presence of a bounding box (which is supplied by the control), they are not as useful for standalone buttons or free-standing toolbar icons. Instead, see “System-Provided Images for Use as Standalone Buttons” for images you can use as standalone buttons, and see “System-Provided Images for Use as Toolbar Items” for images you can use as free-standing toolbar icons.
As with all system-provided images, you should avoid using the template images to represent actions other than those they are designed for. Table B-1 shows the standard template images available in OS X, along with the actions they represent and their names.
View in Quick Look
Connect via Bluetooth
Open iChat Theater
View in a slide show
Action pop-up menu
Create smart item
View objects as icons
View objects in a list
View objects in columns
View objects in a Cover Flow mode *
View the path of the object
Unlock the object (this image indicates the object is currently locked)
Lock the object (this image indicates the object is currently unlocked)
Go to the right or go forward
Go to the left or go back
Add an item (to a list, for example)
Remove an item (from a list, for example)
Enter full-screen mode (deprecated)
Exit full-screen mode (deprecated)
Stop progress on the current process
Refresh the current view or restart the process
*OS X does not provide programming interfaces that support adding a custom cover flow experience to your app.
System-Provided Images for Use as Standalone Buttons
OS X provides a handful of free-standing images that can be used as borderless buttons. These images don't require further processing by an
Two of the free-standing images are standalone versions of similar template images. To see why you might need both versions of such an image, consider how Safari offers stop-progress functionality to users. In the downloads popover, Safari uses the free-standing
NSImageNameStopProgressFreestandingTemplate image inline with a progress indicator to allow users to stop an in-progress download.
Because the Safari downloads popover can display several separate download processes at the same time, it’s important to display a stop-progress control for each individual process.
As with all system-provided images, each free-standing image must be used according to its documented meaning and recommended usage. Table B-2 lists each image, along with its meaning and name.
The data on the left is invalid (for example, the user entered a zip code in a phone number field)
Reveal contents or details about the object
Open the link in a new window or page
Stop progress on the current process
Refresh the current view or restart the process
System-Provided Images for Use as Toolbar Items
OS X provides several images you can use as standalone icons in toolbars. These images represent three types of items:
System entities or elements
Common toolbar items
Use the first set of images (shown in Table B-3) to give users access to system entities, such as the network. For the most part, the images in Table B-3 identify system entities, they don't represent actions. However, if you needed to represent an action, such as “create a new smart folder,” you could add a plus sign badge to the smart folder icon.
Network or Internet
The Macintosh computer currently running
A burnable folder
A smart folder
The second set of images is intended for use as standalone icons in preferences window toolbars. Use these images to give users access to familiar preferences categories, such as user-account settings and advanced settings. Table B-4 shows the images you can use in a preferences window toolbar.
The third set of images is suitable for toolbar items in windows other than preferences windows. You can use these images as standalone icons in a window or panel toolbar to give users access to the system-provided Colors and Fonts windows or to an Info or inspector window you supply. Table B-5 shows the images you can use in a non-preferences window toolbar.
Show/hide Fonts window
Show/hide Colors window
System-Provided Images that Indicate Privileges
OS X provides images that represent the standard “user,” “group,” and "all” categories of permissions or privileges, including access control lists (or ACLs). Each of these images is shown in Table B-6, along with its meaning and name. It is recommended that you use these images to clarify which users have permissions to read, write, or execute an item. These images allow you to avoid displaying Unix-style permissions indicators, such as
rwxr-xrw-, which are suitable only for very sophisticated users.
Note that the “user group” permissions image shown in Table B-6 looks similar to the image for the “user accounts” preferences category, shown in Table B-4. As with all system-provided images, however, similar appearance does not imply similar meaning or usage. Be sure to avoid using system-provided images incorrectly.
A user group
A System-Provided Drag Image
OS X provides an image you can display when a user drags multiple documents or items. However, it’s best if you can provide more meaningful drag images (to learn more about this, see “Drag and Drop”).
As with all system-provided images, you should use the multiple-documents image in accordance with its intended meaning. (The constant name of the drag image is