System-Provided Icons

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.

../art/ct_standardiconsintoolbar_2x.png

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.

../art/sys_standardimages_2x.png

The standard images of the first type (including, for example, the view in Quick Look symbol ../art/NSQuickLookTemplate.jpg) 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 ../art/NSPreferencesGeneral.jpg) 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 ../art/NSInvalidDataFreeTemplate.jpg. 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:

To understand why it’s important to use these images correctly, consider the following hypothetical example. Imagine that the “go forward” image (that is, ../art/NSGoRightTemplate.jpg) 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.

Table B-1  Template images that represent common tasks

Image

Meaning

Constant name

../art/NSQuickLookTemplate.jpg

View in Quick Look

NSImageNameQuickLookTemplate

../art/NSBluetoothTemplate.jpg

Connect via Bluetooth

NSImageNameBluetoothTemplate

../art/NSIchatTheaterTemplate.jpg

Open iChat Theater

NSImageNameIChatTheaterTemplate

../art/NSSlideshowTemplate.jpg

View in a slide show

NSImageNameSlideshowTemplate

../art/NSActionTemplate.jpg

Action pop-up menu

NSImageNameActionTemplate

../art/NSSmartBadgeTemplate.jpg

Create smart item

NSImageNameSmartBadgeTemplate

../art/NSImageNameShareTemplate.png

Share menu

NSImageNameShareTemplate

../art/NSIconViewTemplate.jpg

View objects as icons

NSImageNameIconViewTemplate

../art/NSListViewTemplate.jpg

View objects in a list

NSImageNameListViewTemplate

../art/NSColumnViewTemplate.jpg

View objects in columns

NSImageNameColumnViewTemplate

../art/NSFlowViewTemplate.jpg

View objects in a Cover Flow mode *

NSImageNameFlowViewTemplate

../art/NSPathTemplate.jpg

View the path of the object

NSImageNamePathTemplate

../art/NSLockLockedTemplate.jpg

Unlock the object (this image indicates the object is currently locked)

NSImageNameLockLockedTemplate

../art/NSLockUnlockedTemplate.jpg

Lock the object (this image indicates the object is currently unlocked)

NSImageNameLockUnlockedTemplate

../art/NSGoRightTemplate.jpg

Go to the right or go forward

NSImageNameGoRightTemplate

../art/NSGoLeftTemplate.jpg

Go to the left or go back

NSImageNameGoLeftTemplate

../art/NSAddTemplate.jpg

Add an item (to a list, for example)

NSImageNameAddTemplate

../art/NSRemoveTemplate.jpg

Remove an item (from a list, for example)

NSImageNameRemoveTemplate

../art/NSEnterFullScreenTemplate.jpg

Enter full-screen mode (deprecated)

NSImageNameEnterFullScreenTemplate

../art/NSExitFullScreenTemplate.jpg

Exit full-screen mode (deprecated)

NSImageNameExitFullScreenTemplate

../art/NSStopProgressTemplate.jpg

Stop progress on the current process

NSImageNameStopProgressTemplate

../art/NSRefreshTemplate.jpg

Refresh the current view or restart the process

NSImageNameRefreshTemplate

*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 NSButtonCell object.

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.

../art/sys_freestanding.jpg

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.

Table B-2  Free-standing images that represent common actions

Image

Meaning

Constant name

../art/NSInvalidDataFreeTemplate.jpg

The data on the left is invalid (for example, the user entered a zip code in a phone number field)

NSImageNameInvalidDataFreestandingTemplate

../art/NSRevealFreestandTemplate.jpg

Reveal contents or details about the object

NSImageNameRevealFreestandingTemplate

../art/NSFollowLinkFreeTemplate.jpg

Open the link in a new window or page

NSImageNameFollowLinkFreestandingTemplate

../art/NSStopProgressFreeTemplate.jpg

Stop progress on the current process

NSImageNameStopProgressFreestandingTemplate

../art/NSRefreshFreeTemplate.jpg

Refresh the current view or restart the process

NSImageNameRefreshFreestandingTemplate

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:

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.

Table B-3  Images that represent system entities

Image

System element

Constant name

../art/NSBonjour.jpg

Bonjour

NSImageNameBonjour

../art/NSNetwork.jpg

Network or Internet

NSImageNameNetwork

../art/NSDotMac.jpg

Dot Mac

NSImageNameDotMac

../art/NSComputer.jpg

The Macintosh computer currently running

NSImageNameComputer

../art/NSFolderBurnable.jpg

A burnable folder

NSImageNameFolderBurnable

../art/NSFolderSmart.jpg

A smart folder

NSImageNameFolderSmart

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.

Table B-4  Images that represent common preferences categories

Image

Preferences category

Constant name

../art/NSAdvanced.jpg

Advanced

NSImageNameAdvanced

../art/NSPreferencesGeneral.jpg

General

NSImageNamePreferencesGeneral

../art/NSUserAccounts.jpg

User accounts

NSImageNameUserAccounts

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.

Table B-5  Images that represent standard toolbar items

Image

Toolbar item

Constant name

../art/NSInfo.jpg

Show/hide information

NSImageNameInfo

../art/NSFontPanel.jpg

Show/hide Fonts window

NSImageNameFontPanel

../art/NSColorPanel.jpg

Show/hide Colors window

NSImageNameColorPanel

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.

Table B-6  Images that represent categories of user permissions

Image

Permissions category

Constant name

../art/NSUser.jpg

User

NSImageNameUser

../art/NSUserGroup.jpg

A user group

NSImageNameUserGroup

../art/NSEveryone.jpg

All users

NSImageNameEveryone

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”).

../art/NSMultipleDocuments.jpg

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 NSImageNameMultipleDocuments.)