System Images

macOS uses a large set of images to represent common items, actions, and modes throughout the system. Consistently using these images according to their documented meanings can help people quickly understand your app.

When you use AppKit APIs to display an image that represents a specific item, action, or mode, you automatically get a system-defined image in the format that’s appropriate for the version of macOS in which your app is running. For example, if your app runs in macOS 11 and later, the system provides an SF symbol the app can use in a control or freestanding button. If your app runs in Catalina or earlier, AppKit continues to provide the existing image. For developer guidance, see NSImage.Name.

IMPORTANT By default, the system APIs return SF symbols configured as 13 pt, large scale, and medium weight.
In some cases, a symbol might not have the same size or alignment as the image it replaces, so it’s important to check your layout.

Use each system-defined image according to its meaning — not its appearance. When you choose an image for its meaning, your app can remain visually consistent with the system even if the appearance of the image changes. For example, in a control that lets people navigate to the left, it makes sense to use the “go left” image. Although the “left-facing triangle” image looks the same as the “go left” image, using it in a navigation control might be confusing if the appearance of the triangle changes in the future.

Supply alternative text labels for all meaningful images. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what’s onscreen, making navigation easier for people with visual disabilities. For guidance, see Accessibility > Copy and Images.

Design a custom symbol or image if you can’t find a system-defined one that meets your needs. Designing a custom symbol or image lets you communicate unique details that help people use your app; repurposing a system-defined image can cause confusion. For guidance, see Glyphs.

Control Glyphs

Control glyphs are especially well suited for use in toolbars and sidebars.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A gear.
actionTemplateName
A circle with an ellipsis in it.
ellipsis.circle
Displays a menu that contains app-wide or contextual commands.
A plus symbol.
addTemplateName
A plus symbol.
plus
Creates a new item.
A silhouette of an open book, displaying the left and right pages.
bookmarksTemplateName
A silhouette of an open book, displaying the left and right pages.
book
Shows app-specific bookmarks.
A rectangle with two vertical partitions.
columnViewTemplateName
A rectangle with two vertical partitions.
rectangle.split.3x1
Displays content in a column-based layout.
Two diagonal arrows pointing away from each other.
enterFullScreenTemplateName
Two diagonal arrows pointing away from each other.
arrow.up.left.and.arrow.down.right
Enters full-screen mode.
Two diagonal arrows pointing in toward each other.
exitFullScreenTemplateName
Two diagonal arrows pointing in toward each other.
arrow.down.right.and.arrow.up.left
Exits full-screen mode.
A rounded rectangle with two wave lines on the left and right sides.
flowViewTemplateName
A rectangle with five small black squares in a row beneath it.
squares.below.rectangle
Displays content in a Cover Flow layout. Note that the system doesn’t provide a standard Cover Flow view.
A chevron that points to the left.
goBackTemplateName
A chevron that points to the left.
chevron.backward
Navigates back.
A chevron that points to the right.
goForwardTemplateName
A chevron that points to the right.
chevron.forward
Navigates forward.
A chevron that points to the left.
goLeftTemplateName
A chevron that points to the left.
chevron.left
Navigates left.
A chevron that points to the right.
goRightTemplateName
A chevron that points to the right.
chevron.right
Navigates right.
Four squares arranged side by side with two on the top and two on the bottom.
iconViewTemplateName
Four squares arranged side by side with two on the top and two on the bottom.
square.grid.2x2
Displays content in an icon-based layout.
A chevron that points to the left.
leftFacingTriangleTemplateName
A chevron that points to the left.
chevron.left
Navigates to the left.
Four horizontal lines, stacked evenly on top of each other.
listViewTemplateName
Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on left.
list.bullet
Displays content in a list-based layout.
A padlock with a closed shackle.
lockLockedTemplateName
A padlock with a closed shackle.
lock
Denotes that an object is locked. When activated, unlocks the object.
A padlock with an open shackle.
lockUnlockedTemplateName
A padlock with an open shackle.
lock.open
Denotes that an object is unlocked. When activated, locks the object.
A stack of four horizontal lines, each starting with a round bullet, offset and cascading downward to the right.
pathTemplateName
A stack of four horizontal lines, each starting with a round bullet, offset and cascading downward to the right.
list.bullet.indent
Shows the path of the object.
A glyph in the shape of an eyeball.
quickLookTemplateName
A glyph in the shape of an eyeball.
eye
Previews an item using Quick Look.
An open curved line, representing about three quarters of a circle, with an arrowhead at the top pointing in a clockwise direction.
refreshTemplateName
An open curved line, representing about three quarters of a circle, with an arrowhead at the top pointing in a clockwise direction.
arrow.clockwise
Refreshes content. Use this icon sparingly, as your app needs to refresh content automatically whenever possible.
A minus symbol, or an elongated hyphen.
removeTemplateName
A minus symbol, or an elongated hyphen.
minus
Removes an item (from a list, for example).
A chevron that points to the right.
rightFacingTriangleTemplateName
A chevron that points to the right.
chevron.right
Navigates to the right.
A square, that contains an arrow that points upward.
shareTemplateName
A square, containing an arrow that points upward.
square.and.arrow.up
Shows a menu or view containing share extensions, action extensions, and tasks, such as Copy, Favorite, or Find, that are useful in the current context.
A rounded rectangle containing a Play button.
slideshowTemplateName
A rounded rectangle containing a Play button.
play.rectangle
Displays content in a slideshow mode.
A gear.
smartBadgeTemplateName
A gear.
gearshape
Denotes the ability to create a smart item, such as a smart folder.
An Ex, or multiplication symbol.
stopProgressTemplateName
An Ex, or multiplication symbol.
xmark
Stops media playback or slides.

In an app that runs in Catalina and earlier, use control glyphs only in bordered controls. Control glyphs aren’t intended for use as freestanding buttons or toolbar images. If you need a standalone button, use one meant for that purpose; for guidance, see Freestanding Button Glyphs.

In general, use system APIs to support full-screen mode instead of the Enter Full-Screen Mode and Exit Full-Screen Mode glyphs. When a window uses the system APIs, the title bar of the window automatically gets a familiar button that lets people toggle between entering and exiting full-screen mode.

Freestanding Button Glyphs

Use the following glyphs as freestanding borderless buttons like the ones in the Safari downloads popover. For developer guidance, see the isBordered property of NSButton.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A round icon containing a right-pointing arrow.
followLinkFreestandingTemplateName
A round icon containing a right-pointing arrow.
arrow.right.circle.fill
Opens a URL.
A round icon containing a left-pointing arrow.
invalidDataFreestandingTemplateName
A round icon containing a left-pointing arrow.
arrow.left.circle.fill
Indicates that a field contains invalid data (for example, a zip code in a phone-number field).
A round icon containing a curved line with an arrow near the top.
refreshFreestandingTemplateName
A round icon containing a curved line with an arrow near the top.
arrow.clockwise.circle.fill
Refreshes a view or restarts a process.
A round icon containing a magnifying glass.
revealFreestandingTemplateName
A round icon containing a magnifying glass.
magnifyingglass.circle.fill
Navigates to the parent container of an item and selects the item.
A round icon containing an Ex.
stopProgressFreestandingTemplateName
A round icon containing an Ex.
xmark.circle.fill
Stops the progression of the current process.

Use the following glyphs in menus. For guidance, see Using Symbols in Menus.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A dash, or elongated hyphen.
menuMixedStateTemplateName
A minus symbol, or an elongated hyphen.
minus
Denotes an attribute that applies to only part of the selection.
A checkmark.
menuOnStateTemplateName
A checkmark.
checkmark
In the Window menu, indicates the active document; in other menus, an attribute that applies to the entire selection.

Multi-Item Drag Images

People see a multi-item drag image when they drag multiple documents or items from one location to another. The system offers a prerendered multi-item drag image you can use if you don’t want to create a custom one.

Image Name API
A cascading stack of document icons. Multiple Documents multipleDocumentsName

Consider creating a custom multi-item drag image to provide context to the drag action. Ideally, a custom image represents a stack of documents, photographs, or other items that look like the actual content being dragged. For guidance, see Drag and Drop.

Permissions Images

Use the following images to represent categories of user permissions.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A black silhouette of three people, with one in the foreground and two in the background, from the shoulders up.
everyoneName
A black silhouette of three people, with one in the foreground and two in the background, from the shoulders up.
person.3.fill
Permissions for everyone.
A black silhouette of a person, from the shoulders up.
userName
A black silhouette of a person from the shoulders up, within a circle.
person.crop.circle
Permissions for a person.
A black silhouette of two people next to each other, from the shoulders up.
userGroupName
A black silhouette of two people next to each other, from the shoulders up.
person.2.fill
Permissions for a group of people.
A light gray silhouette of a person, from the shoulders up.
userGuestName
A black silhouette of a person from the shoulders up, within a circle.
person.crop.circle
Permissions for a guest.

Preferences Images

Use the following images as standalone items in Preferences window toolbars to represent familiar categories of settings. For guidance, see Preferences and Toolbars.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A button in the shape of a large gray gear.
advancedName
Two gear shapes outlined in black. One gear is slightly larger than the other and is positioned above and to the left of it.
gearshape.2
Advanced settings or preferences.
A button in the shape of a white rocker switch.
preferencesGeneralName
A gear shape outlined in black.
gearshape
General settings or preferences.
A round blue button with a white At symbol inside.
userAccountsName
An At symbol outlined in black.
at
User accounts.

Status Images

Use the following prerendered images to denote the availability status of a network or service. For example, the Network system preference pane displays a status image for each service.

Image Name API
A green dot. Available NSImageNameStatusAvailable
A gray dot. None NSImageNameStatusNone
A yellow dot. Partially Available NSImageNameStatusPartiallyAvailable
A red dot. Unavailable NSImageNameStatusUnavailable

System Entity Images

System entity images represent items like the network and the user’s computer. Typically, these entities don't have related actions, but if you need to represent one, you can add a badge. For example, to represent the action of creating a Smart folder add a plus sign badge to the smart folder image.

Image (Catalina and earlier) Image or SF symbol (macOS 11 and later) Meaning
A generic app icon.
applicationIconName
A generic app icon.
applicationIconName
Your app’s icon.
An object with three loops.
bonjourName
No equivalent. Apple’s Bonjour networking feature.
A folder with a radioactive symbol on its face.
folderBurnableName
A folder with a radioactive symbol on its face.
folderBurnableName
A burnable folder.
A yellow triangle with rounded corners, containing a white exclamation mark.
cautionName
A yellow triangle with rounded corners, containing a white exclamation mark.
cautionName
Caution.
An iMac.
computerName
An iMac.
computerName
The current computer.
A folder.
folderName
A folder.
folderName
A generic folder.
A black silhouette of a house.
homeTemplateName
A black silhouette of a house.
house
The home location.
A gray sphere containing criss-crossing white lines to indicate a network.
networkName
A blue and green sphere containing criss-crossing white lines to indicate a network.
networkName
The network.
A light purple folder with a gear on its face.
folderSmartName
A light purple folder with a gear on its face.
folderSmartName
A smart folder.
An empty trash can.
trashEmptyName
An empty trash can.
trashEmptyName
The trash can (empty).
A full trash can.
trashFullName
A full trash can.
trashFullName
The trash can (full).

Toolbar Images

Use the following images as standalone items in the toolbars of windows other than Preferences windows.

Image (Catalina and earlier) Image or SF symbol (macOS 11 and later) Meaning
A circle, showing a rainbow of colors.
colorPanelName
A circle, showing a rainbow of colors.
colorPanelName
Shows or hides the Color panel.
An italicized uppercase A character.
fontPanelName
The capital letter A to the left of the lowercase letter A.
textformat
Shows or hides the Fonts panel.
A circle containing an italicized lowercase i character.
infoName
The lowercase letter I within a black circle.
info.circle
Shows or hides an information window or view.