Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Toolbar Items

Toolbar items give users easy access to frequently used commands (to learn more about the concepts behind toolbar design, see Toolbars). 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, macOS supports two styles of toolbar items: toolbar controls and freestanding icons that behave as buttons. Don’t mix these styles of toolbar items—use one or the other in a toolbar.

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

image: ../Art/standard_images_in_toolbar_2x.png

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

image: ../Art/fullcolor_icons_in_toolbar_2x.png

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

image: ../Art/freestanding_icons_in_toolbar_2x.png

In all cases, 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 app task, it gives first-time users a clue to its function and helps experienced users remember it.

Make toolbar items distinct, yet harmonious. When each item 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 item from another. At the same time, an app’s toolbar items should harmonize as much as possible in their perspective, size, and visual weight. This holds true whether the item is represented by a freestanding icon button or in an image in a toolbar control.

Create Template Images to Put Inside Toolbar Controls

A template image is a streamlined, monochromatic image that can acquire different visual effects, such as selection highlighting and vibrancy. The best template images convey meaning through outline and contour, and include very little internal detail.

You want to make your template image 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 image that uses too much transparency can look disabled when the system applies either the active or inactive appearance to it.

To create a solid image, you might 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.

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

  • Create images that measure no more than 19 x 19 pixels.

  • Make the outline sharp and clear.

  • Use a straight-on perspective.

  • Use black (add transparency only as necessary to suggest dimensionality).

  • Use anti-aliasing.

  • 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 a template image to put inside a toolbar control in PDF format, macOS automatically scales the icon for high-resolution display, so you don't need to provide a high-resolution version.

You might be able to use a system-provided image to represent a common task or a standard interface element in your toolbar controls, such as the connect via Bluetooth icon. To learn about the images that are available and what they mean, see System-Provided Images.

Create Full Color Images to Use as Freestanding Toolbar Icons

Because a freestanding toolbar icon doesn't need to fit within a toolbar control, you have a little more room to express a concept. In general, you want to create an inviting image that clearly communicates its purpose to users.

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, don’t change its appearance or perspective. That is, don’t redesign a toolbar version of a well-known interface element.

If you need to design a freestanding icon for your toolbar, follow these guidelines:

  • Use a straight-on perspective.

  • Make the outline sharp and clear.

  • Use anti-aliasing.

  • Use color judiciously to add meaning.

  • Create icons for standard and high-resolution displays. You need to supply two resources: 32x32 (32 x 32 pixel canvas size) and 32x32@2x (64 x 64 pixel canvas size).

  • Use the PNG format.