Touch Bar Icons and Images

Image Size and Resolution

macOS uses a coordinate system to place content on the Touch Bar display. This coordinate system is based on measurements in points, which map to pixels in the display. On a standard-resolution screen, one point (1/72 of an inch) is equal to one pixel. High-resolution screens, like the Touch Bar, have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

@1x (10px × 10px)

@2x (20px × 20px)

Supply high-resolution images with a scale factor of @2x for all artwork that appears in the Touch Bar. In a @2x graphic, one point equals two pixels. For example, an icon that’s 36px × 36px translates to 18pt × 18pt. Append a suffix of @2x to your image names, and insert them into @2x fields in the asset catalog of your Xcode project.

Custom Icons

If your app includes tasks or modes that can’t be represented by a system icon, you can create your own icons.

Design recognizable icons. Your icons should clearly relate to your app on the main screen, but may require variations in order to match the style of the Touch Bar.

Keep icons simple. Too many details can make an icon appear sloppy or unreadable. If you have high-fidelity imagery, distill it down to its essence. The best icons convey meaning through outline and contour, and include very little internal detail. Use antialiasing to keep your icon’s outline crisp. Don’t use drop shadows or attempt to make icons appear dimensional through shading or highlighting.

Keep icons consistent. Whether you use only custom icons or mix custom and system icons, give all of your icons the same visual weight in terms of size, level of detail, perspective, and stroke.

Use the system icons for reference. Refer to the system icons when designing custom icons, and strive for a similar appearance.

Prepare icons as template images. A template image is a black image with a transparent background and an alpha channel. The system inverts template images when displaying them in the Touch Bar, and automatically applies the appropriate color. Template images also respond to system white-point changes based on factors such as ambient light and keyboard backlight level, and automatically react to user interactions.

Test your icons. Always preview your icons together and in context to properly gauge their appearance. Make sure template images appear as expected when they are inverted by the system.

Size

Although it’s possible to produce icons that extend to the full height of the Touch Bar, icons generally should not exceed 44px in height (36px for circular icons).

Ideal icon size 36px × 36px (18pt × 18pt @2x)
Maximum icon size 44px × 44px (22pt × 22pt @2x)

Keep icons optically centered. Crop artwork to match the icon’s width, then add padding as needed to keep icons optically centered when displayed on a control.

Prefer a 45 degree angle for diagonal elements. In the system icons, diagonal elements are often placed at a 45 degree angle, for example, the arrows on the Enter Full Screen and Exit Full Screen icons; the chevrons on the Go Back, Go Down, Go Forward, and Go Up icons; the slash on the Audio Input Mute icon; the pencil on the Compose icon; and the compass point on the Open In Browser icon. See System-provided Icons for reference.

Color and Fill

Icons in the Touch Bar should appear similar to the glyphs on the physical keyboard keys. If you’re using template images and system colors, your icons should achieve this effect automatically.

Don’t use color to communicate on and off states. The system already changes the background appearance of standard controls that are in an off state.

Give most icons a 100% opacity fill. If variations are needed for readability, use 70% opacity fills in combination with 100% opacity fills. Use midtones only for improving readability and balance.

For related guidance, see Touch Bar Visual Design > Color.

Stroke

To match the style of the physical keyboard, give most icons a 2px stroke. If your design requires more visual weight, try a 3px stroke.

Corners

To match the style of the system icons, use square corners for icons with a 2px stroke, rounded corners with a 1px radius for icons with a 3px stroke, and rounded corners with a 4px radius for solid shapes.

Templates

Download Photoshop and Sketch templates to design properly scaled icons for the Touch Bar.

System-Provided Icons

The system provides many icons, representing common tasks and types of content, for use in your app controls.

Prefer system icons because they're familiar. Because system icons are template images, they automatically receive appropriate coloring, respond to system white-point changes based on factors such as ambient light and keyboard backlight level, and they automatically respond to user interactions.

Don’t redefine the intended functions of system icons. To ensure a consistent experience, use system icons as intended. Don’t, for example, display the Folder Move To icon on a Download button. Instead, display the Download icon.

Use only system icons that are designed for the Touch Bar. Other types of icons, such as toolbar icons, aren’t intended for use in the Touch Bar.

Note Some system icons, such as Go Back and Go Forward, automatically reverse direction in right-to-left locales.

Icon Icon name Function AppKit symbol
Add Detail Displays additional detail for an item. touchBarAddDetailTemplate
Add Creates a new item. touchBarAddTemplate
Alarm Sets or displays an alarm. touchBarAlarmTemplate
Audio Input Mute Mutes audio input or denotes that audio input is muted. touchBarAudioInputMuteTemplate
Audio Input Denotes audio input. touchBarAudioInputTemplate
Audio Output Mute Mutes audio output or denotes that audio output is muted. touchBarAudioOutputMuteTemplate
Audio Output Volume High Sets the audio output volume to high or denotes that the audio output volume is set to high. touchBarAudioOutputVolumeHighTemplate
Audio Output Volume Low Sets the audio output volume to low or denotes that the audio output volume is set to low. touchBarAudioOutputVolumeLowTemplate
Audio Output Volume Medium Sets the audio output volume to medium or denotes that the audio output volume is set to medium. touchBarAudioOutputVolumeMediumTemplate
Audio Output Volume Off Turns off audio output or denotes that audio output is turned off. touchBarAudioOutputVolumeOffTemplate
Bookmarks Shows app-specific bookmarks. touchBarBookmarksTemplate
Color Picker Fill Shows a color picker so the user can select a fill color. touchBarColorPickerFill
Color Picker Font Shows a color picker so the user can select a text color. touchBarColorPickerFont
Color Picker Stroke Shows a color picker so the user can select a stroke color. touchBarColorPickerStroke
Communication Audio Initiates or denotes audio communication. touchBarCommunicationAudioTemplate
Communication Video Initiates or denotes video communication. touchBarCommunicationVideoTemplate
Compose Opens a new document or view in edit mode. touchBarComposeTemplate
Delete Deletes the current or selected item. touchBarDeleteTemplate
Download Downloads an item. touchBarDownloadTemplate
Enter Full Screen Enters full screen mode. touchBarEnterFullScreenTemplate
Exit Full Screen Exits full screen mode. touchBarExitFullScreenTemplate
Fast Forward Fast-forwards through media playback or slides. touchBarFastForwardTemplate
Folder Copy To Copies an item to a destination. touchBarFolderCopyToTemplate
Folder Move To Moves an item to a new destination. touchBarFolderMoveToTemplate
Folder Opens or represents a folder. touchBarFolderTemplate
Get Info Displays additional information about an item. touchBarGetInfoTemplate
Go Back Returns to the previous screen or location. touchBarGoBackTemplate
Go Down Moves to the next vertical item. touchBarGoDownTemplate
Go Forward Moves to the next screen or location. touchBarGoForwardTemplate
Go Up Moves to the previous vertical item. touchBarGoUpTemplate
History Displays historical information, such as recent downloads. touchBarHistoryTemplate
Icon View Displays items in an icon view. touchBarIconViewTemplate
List View Displays items in a list view. touchBarListViewTemplate
Mail Creates an email message. touchBarMailTemplate
New Folder Creates a new folder. touchBarNewFolderTemplate
New Message Creates a new message or denotes the use of messaging. touchBarNewMessageTemplate
Open In Browser Opens an item in the user’s browser. touchBarOpenInBrowserTemplate
Pause Pauses media playback or slides. Always store the current location when pausing, so playback can resume later. touchBarPauseTemplate
Play Pause Toggles between playing and pausing media or slides. touchBarPlayPauseTemplate
Play Begins or resumes media playback or slides. touchBarPlayTemplate
Quick Look Opens an item in Quick Look. touchBarQuickLookTemplate
Record Start Begins recording. touchBarRecordStartTemplate
Record Stop Stops recording or stops media playback or slides. touchBarRecordStopTemplate
Refresh Refreshes data onscreen. touchBarRefreshTemplate
Rewind Moves backwards through media playback or slides. touchBarRewindTemplate
Rotate Left Rotates an item to the left. touchBarRotateLeftTemplate
Rotate Right Rotates an item to the right. touchBarRotateRightTemplate
Search Displays a search field or initiates a search. touchBarSearchTemplate
Share Shares content with others or to social media. touchBarShareTemplate
Sidebar Displays a sidebar in the current view. touchBarSidebarTemplate
Skip Ahead 15 Seconds Skips 15 seconds ahead during media playback. touchBarSkipAhead15SecondsTemplate
Skip Ahead 30 Seconds Skips 30 seconds ahead during media playback. touchBarSkipAhead30SecondsTemplate
Skip Ahead Skips to the next chapter or location during media playback. touchBarSkipAheadTemplate
Skip Back 15 Seconds Skips 15 seconds back during media playback. touchBarSkipBack15SecondsTemplate
Skip Back 30 Seconds Skips 30 seconds back during media playback. touchBarSkipBack30SecondsTemplate
Skip Back Skips to the previous chapter or location during media playback. touchBarSkipBackTemplate
Skip To End Skips to the end during media playback. touchBarSkipToEndTemplate
Skip To Start Skips to the beginning during media playback. touchBarSkipToStartTemplate
Slideshow Starts a slideshow. touchBarSlideshowTemplate
Tag Applies a tag to an item. touchBarTagIconTemplate
Text Bold Makes text bold. touchBarTextBoldTemplate
Text Box Inserts a text box. touchBarTextBoxTemplate
Text Center Align Center aligns text. touchBarTextCenterAlignTemplate
Text Italic Italicizes text. touchBarTextItalicTemplate
Text Justified Align Justifies text, aligning it to both the left and right. touchBarTextJustifiedAlignTemplate
Text Left Align Left-aligns text. touchBarTextLeftAlignTemplate
Text List Inserts a list or converts text to list form. touchBarTextListTemplate
Text Right Align Right-aligns text. touchBarTextRightAlignTemplate
Text Strikethrough Applies a strikethrough to text. touchBarTextStrikethroughTemplate
Text Underline Underlines text. touchBarTextUnderlineTemplate
User Add Creates a new user. touchBarUserAddTemplate
User Group Shows or represents a group of users. touchBarUserGroupTemplate
User Shows or represents user information. touchBarUserTemplate
Volume Down Reduces the volume. touchBarVolumeDownTemplate
Volume Up Increases the volume. touchBarVolumeUpTemplate