System Icons
The system provides built-in icons that represent common tasks and types of content in a variety of use cases.
- Control Icons
- Freestanding Button Icons
- Menu Icons
- Multi-Item Drag Image Icons
- Permissions Icons
- Preferences Icons
- Status Icons
- System Entity Icons
It’s a good idea to use these built-in icons as much as possible because they're familiar to people.
Use system icons as intended. Every system-provided image has a specific, well-known meaning. To avoid confusing users, it’s essential that each image be used in accordance with its meaning and recommended usage.
Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.
Design a custom icon if you can’t find a system-provided one that meets your needs. It’s better to design your own than to misuse a system-provided image. See Custom Icons.
Control Icons
Use the following icons in bordered controls—primarily in toolbar controls.
| Image | Name | Meaning | API |
|---|---|---|---|
| Action | Displays a menu containing app-wide or contextual commands. | NSImageNameActionTemplate | |
| Add | Creates a new item. | NSImageNameAddTemplate | |
| Bluetooth | Initiates a Bluetooth connection. | NSImageNameBluetoothTemplate | |
| Bookmarks | Shows app-specific bookmarks. | NSImageNameBookmarksTemplate | |
| Column View | Displays content in a column-based layout. | NSImageNameColumnViewTemplate | |
| Enter Full-Screen Mode | Enters full-screen mode. | NSImageNameEnterFullScreenTemplate | |
| Exit Full-Screen Mode | Exits full-screen mode. | NSImageNameExitFullScreenTemplate | |
| Cover Flow View | Displays content in a Cover Flow layout. Note that the system doesn’t provide a standard Cover Flow view. | NSImageNameFlowViewTemplate | |
| Go Back | Navigates back. | NSImageNameGoBackTemplate | |
| Go Forward | Navigates forward. | NSImageNameGoForwardTemplate | |
| Go Left | Navigates left. | NSImageNameGoLeftTemplate | |
| Go Right | Navigates right. | NSImageNameGoRightTemplate | |
| Icon View | Displays content in an icon-based layout. | NSImageNameIconViewTemplate | |
| Left-Facing Triangle | Navigates to the left. | NSImageNameLeftFacingTriangleTemplate | |
| List View | Displays content in a list-based layout. | NSImageNameListViewTemplate | |
| Locked | Denotes that an object is locked. When activated, unlocks the object. | NSImageNameLockLockedTemplate | |
| Unlocked | Denotes that an object is unlocked. When activated, locks the object. | NSImageNameLockUnlockedTemplate | |
| Path | Shows the path of the object. | NSImageNamePathTemplate | |
| Quick Look | Previews an item using Quick Look. | NSImageNameQuickLookTemplate | |
| Refresh | Refreshes content. Use this icon sparingly, as your app should refresh content automatically whenever possible. | NSImageNameRefreshTemplate | |
| Remove | Remove an item (from a list, for example). | NSImageNameRemoveTemplate | |
| Right-Facing Triangle | Navigates to the right. | NSImageNameRightFacingTriangleTemplate | |
| Share | 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. | NSImageNameShareTemplate | |
| Slideshow | Displays content in a slideshow mode. | NSImageNameSlideshowTemplate | |
| Smart Badge | Denotes the ability to create a smart item, such as a smart folder. | NSImageNameSmartBadgeTemplate | |
| Stop Progress | Stops media playback or slides. | NSImageNameStopProgressTemplate |
Use control icons in bordered controls only. These icons aren’t intended for use as freestanding buttons or toolbar icons. If you need a standalone button, use one meant for that purpose. See Freestanding Button Icons.
In general, use system APIs to support full-screen mode instead of the Enter Full-Screen Mode and Exit Full-Screen Mode icons. When a window uses the system APIs, the title bar of the window automatically gets a button that toggles between entering and exiting full-screen mode. This experience is familiar to most users.
Freestanding Button Icons
The following icons are intended for use as freestanding borderless buttons like the ones in the Safari downloads popover. For developer guidance, see the isBordered property of NSButton.
| Image | Name | Meaning | API |
|---|---|---|---|
| Follow Link | Opens a URL. | NSImageNameFollowLinkFreestandingTemplate | |
| Invalid Data | Indicates that a field contains invalid data (for example, the user entered a zip code in a phone number field). | NSImageNameInvalidDataFreestandingTemplate | |
| Refresh | Refreshes a view or restarts a process. | NSImageNameRefreshFreestandingTemplate | |
| Reveal | Navigates to the parent container of an item and selects the item. | NSImageNameRevealFreestandingTemplate | |
| Stop Progress | Stops the progression of the current process. | NSImageNameStopProgressFreestandingTemplate |
Menu Icons
You can use the following symbol icons in menus. For related guidance, see Using Symbols in Menus.
| Image | Name | Meaning | API |
|---|---|---|---|
| Mixed | Denotes an attribute that applies to only part of the selection. | NSImageNameMenuMixedStateTemplate | |
| On | In the Window menu, indicates the active document; in other menus, an attribute that applies to the entire selection. | NSImageNameMenuOnStateTemplate |
Multi-Item Drag Image Icons
A multi-item drag image is displayed when the user drags multiple documents or items from one location to another. The system offers a default multi-item drag image.
| Image | Name | API |
|---|---|---|
| Multiple Documents | NSImageNameMultipleDocuments |
Prefer a custom multi-item drag image to the default one the system provides. Ideally, the image should show a stacked representation of the actual content being dragged. For related guidance, see Drag and Drop.
Permissions Icons
The following icons represent categories of user permissions. When applicable in your app, use these icons to clarify which users have access permission.
| Image | Name | API |
|---|---|---|
| Everyone | NSImageNameEveryone | |
| User | NSImageNameUser | |
| Group | NSImageNameUserGroup | |
| Guest | NSImageNameUserGuest |
Preferences Icons
Use the following icons as standalone items in Preferences window toolbars to represent familiar categories of settings. For related guidance, see Preferences and Toolbars.
| Image | Name | API |
|---|---|---|
| Advanced | NSImageNameAdvanced | |
| General | NSImageNamePreferencesGeneral | |
| User Accounts | NSImageNameUserAccounts |
Status Icons
Use the following icons to denote the availability status of a network or service. The Network system preference pane displays status icons.
| Image | Name | API |
|---|---|---|
| Available | NSImageNameStatusAvailable | |
| None | NSImageNameStatusNone | |
| Partially Available | NSImageNameStatusPartiallyAvailable | |
| Unavailable | NSImageNameStatusUnavailable |
System Entity Icons
The following icons represent system entitles, such as the network and the user’s computer. For the most part, these entities don't have related actions. However, if you needed to represent an action, such as creating a Smart folder, you could add a plus sign badge to the smart folder icon.
| Image | Name | API |
|---|---|---|
| App Icon (your app’s icon) | NSImageNameApplicationIcon | |
| Bonjour | NSImageNameBonjour | |
| Burnable Folder | NSImageNameFolderBurnable | |
| Caution | NSImageNameCaution | |
| Computer (represents the current computer) | NSImageNameComputer | |
| Folder | NSImageNameFolder | |
| Home | NSImageNameHomeTemplate | |
| Network | NSImageNameNetwork | |
| Smart Folder | NSImageNameFolderSmart | |
| !An empty trash can.](/design/human-interface-guidelines/macos/images/icons/SystemIcons/SystemEntity/SystemEntity_TrashEmpty.png){width=30 height=30} | Trash (Empty) | NSImageNameTrashEmpty |
| Trash (Full) | NSImageNameTrashFull |
Toolbar Icons
Use the following icons as standalone items in the toolbars of windows other than Preferences windows.
| Image | Name | Meaning | API |
|---|---|---|---|
| Color Panel | Shows or hides the Color panel. | NSImageNameColorPanel | |
| Fonts Panel | Shows or hides the Fonts panel. | NSImageNameFontPanel | |
| Info | Shows or hides an information window or view. | NSImageNameInfo |