Touch Bar Glyphs and Images

macOS provides many glyphs and images you can use to represent common tasks and types of content in your app’s Touch Bar controls.

When you use AppKit API to display a system-provided glyph, you automatically get an 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, you get an SF symbol; if your app runs in Catalina or earlier, AppKit continues to provide the existing template image. For developer guidance, see NSTouchBarItem.

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.

Prefer system images because people are familiar with them. Also, system-provided glyphs automatically receive appropriate coloring, respond to system white-point changes based on factors such as ambient light and keyboard backlight level, and respond to user interactions.

Use each system-defined glyph 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.

Use only system images that are designed for the Touch Bar. Don’t use other types of images in the Touch Bar, such as toolbar glyphs.

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 Custom Touch Bar Glyphs; for general design guidance, see Glyphs.

NOTE Some system glyphs, like Go Back and Go Forward, automatically reverse direction in right-to-left locales.

Image (Catalina and earlier) SF symbol (macOS 11 and later) Meaning
A white plus sign within a black disk.
touchBarAddDetailTemplate
A plus sign within a circle.
plus.circle
Displays additional detail for an item.
A plus sign.
touchBarAddTemplate
A plus sign.
plus
Creates a new item.
An alarm clock with its hands at 9:00.
touchBarAlarmTemplate
An alarm clock with its hands at 9:00.
alarm
Sets or displays an alarm.
A freestanding microphone with a slash through it.
touchBarAudioInputMuteTemplate
A freestanding microphone with a slash through it.
mic.slash
Mutes audio input or denotes that audio input is muted.
A freestanding microphone.
touchBarAudioInputTemplate
A freestanding microphone.
mic
Denotes audio input.
A right-facing speaker with 3 concentric curved lines representing sound waves. On top of the image is a slash from top left to bottom right.
touchBarAudioOutputMuteTemplate
A right-facing speaker with a slash through it.
speaker.slash.fill
Mutes audio output or denotes that audio output is muted.
A right-facing speaker with 3 concentric curved lines representing sound waves.
touchBarAudioOutputVolumeHighTemplate
A right-facing speaker with 3 concentric curved lines representing sound waves.
speaker.wave.3.fill
Sets the audio output volume to high or denotes that the audio output volume is set to high.
A right-facing speaker with 3 concentric curved lines representing sound waves. The outermost 2 waves are gray; the inner wave is black.
touchBarAudioOutputVolumeLowTemplate
A right-facing speaker with one curved line that represents a sound wave.
speaker.wave.1.fill
Sets the audio output volume to low or denotes that the audio output volume is set to low.
A right-facing speaker with 3 concentric curved lines representing sound waves. The outermost wave is gray; the inner 2 waves are black.
touchBarAudioOutputVolumeMediumTemplate
A right-facing speaker with 2 curved lines that represents sound waves.
speaker.wave.2.fill
Sets the audio output volume to medium or denotes that the audio output volume is set to medium.
A right-facing speaker with 3 gray concentric curved lines representing sound waves.
touchBarAudioOutputVolumeOffTemplate
A right-facing speaker.
speaker.fill
Turns off audio output or denotes that audio output is turned off.
An open book.
touchBarBookmarksTemplate
An open book.
book
Shows app-specific bookmarks.
A disk filled with wedges of rainbow colors.
touchBarColorPickerFill
Shows a color picker so the user can select a fill color.
The letter A filled with rainbow colors.
touchBarColorPickerFont
Shows a color picker so the user can select a text color.
A circle drawn with a stroke filled with rainbow colors.
touchBarColorPickerStroke
Shows a color picker so the user can select a stroke color.
A solid black phone receiver.
touchBarCommunicationAudioTemplate
An outlined phone receiver.
phone
Initiates or denotes audio communication.
A solid black video camera.
touchBarCommunicationVideoTemplate
An outlined video camera.
video
Initiates or denotes video communication.
An outlined square with a black pencil on top that goes from above the top-right corner to near the middle of the square.
touchBarComposeTemplate
An outlined square with a black pencil on top that goes from above the top-right corner to near the middle of the square.
square.and.pencil
Opens a new document or view in edit mode.
An outlined trash can.
touchBarDeleteTemplate
An outlined trash can.
trash
Deletes the current or selected item.
A white downward-pointing arrow within a black disk.
touchBarDownloadTemplate
A black arrow within a black outlined circle.
arrow.down.circle
Downloads an item.
Two black arrows pointing away from each other. One arrow points to the bottom left and the other points to the top right.
touchBarEnterFullScreenTemplate
Two black arrows pointing away from each other. One arrow points to the top left and the other points to the bottom right.
arrow.up.left.and.arrow.down.right
Enters full screen mode.
Two black arrows pointing toward each other. One arrow points from the top right and the other points from the bottom left.
touchBarExitFullScreenTemplate
Two black arrows pointing toward each other. One arrow points from the top left and the other points from the bottom right.
arrow.down.right.and.arrow.up.left
Exits full screen mode.
Two black triangles both pointing right.
touchBarFastForwardTemplate
Two black triangles both pointing right.
forward.fill
Fast-forwards through media playback or slides.
A black folder with a white square containing a black plus sign in the bottom-left corner.
touchBarFolderCopyToTemplateName
A folder outlined in black with a small square containing a black plus sign in the top-right corner.
plus.rectangle.on.folder
Copies an item to a destination.
A black folder with a downward-pointing arrow on top of it.
touchBarFolderMoveToTemplate
A folder outlined in black.
folder
Moves an item to a new destination.
A black folder.
touchBarFolderTemplate
A folder outlined in black.
folder
Opens or represents a folder.
A black, lowercase letter I within a black circle.
touchBarGetInfoTemplate
A black, lowercase letter I within a black circle.
info.circle
Displays additional information about an item.
A left-pointing chevron.
touchBarGoBackTemplate
A left-pointing chevron.
chevron.backward
Returns to the previous screen or location.
A downward-pointing chevron.
touchBarGoDownTemplate
A downward-pointing chevron.
chevron.down
Moves to the next vertical item.
A right-pointing chevron.
touchBarGoForwardTemplate
A right-pointing chevron.
chevron.forward
Moves to the next screen or location.
An upward-pointing chevron.
touchBarGoUpTemplate
An upward-pointing chevron.
chevron.up
Moves to the previous vertical item.
A clock that displays the time 9:00.
touchBarHistoryTemplate
A clock that displays the time 9:00.
clock
Displays historical information, such as recent downloads.
Two rows of three empty squares, each outlined in black.
touchBarIconViewTemplate
Two rows of two empty squares, each outlined in black.
square.grid.2x2
Displays items in an icon view.
A stack of four horizontal black lines.
touchBarListViewTemplate
A stack of three horizontal lines of the same length, each with a black bullet on the left.
list.bullet
Displays items in a list view.
A closed black envelope with the flap outlined in white.
touchBarMailTemplate
A closed envelope outlined in black.
envelope
Creates an email message.
A black folder with a plus sign in the top-right corner.
touchBarNewFolderTemplate
A folder outlined in black with a white plus sign within a black disk in the top-right corner.
folder.badge.plus
Creates a new folder.
A black message bubble.
touchBarNewMessageTemplate
A message bubble outlined in black.
message
Creates a new message or denotes the use of messaging.
A black compass needle pointing to north-east within a circle outlined in black.
touchBarOpenInBrowserTemplate
A black compass needle pointing to north-east within a circle outlined in black.
safari
Opens an item in the user’s browser.
Two vertical, parallel black bars.
touchBarPauseTemplate
Two vertical, parallel black bars.
pause.fill
Pauses media playback or slides. Always store the current location when pausing, so playback can resume later.
A black, right-pointing triangle with two vertical parallel black bars on the right.
touchBarPlayPauseTemplate
A black, right-pointing triangle with two vertical parallel black bars on the right.
playpause.fill
Toggles between playing and pausing media or slides.
A black right-pointing triangle.
touchBarPlayTemplate
A black right-pointing triangle.
play.fill
Begins or resumes media playback or slides.
A black eye shape with a white circle within it.
touchBarQuickLookTemplate
An eye shape outlined in black with a black circle within it.
eye
Opens an item in Quick Look.
A black disk.
touchBarRecordStartTemplate
A plus sign within a circle.
circle.fill
Begins recording.
A black square.
touchBarRecordStopTemplate
A black square.
stop.fill
Stops recording or stops media playback or slides.
A curved arrow indicating the clockwise direction.
touchBarRefreshTemplate
A curved arrow indicating the clockwise direction.
arrow.clockwise
Moves backwards through media playback or slides.
Two black triangles both pointing left.
touchBarRewindTemplate
Two black triangles both pointing left.
backward.fill
Moves backwards through media playback or slides.
A rectangle outlined in black with a curved, left-pointing arrow over the top-right corner.
touchBarRotateLeftTemplate
A square outlined in black with a curved, left-pointing arrow over the top-right corner.
rotate.left
Moves to the next vertical item.
A rectangle outlined in black with a curved, right-pointing arrow over the top-left corner.
touchBarRotateRightTemplate
A square outlined in black with a curved, right-pointing arrow over the top-left corner.
rotate.right
Rotates an item to the right.
A magnifying glass outlined in black, slanting to the left.
touchBarSearchTemplate
A magnifying glass outlined in black, slanting to the left.
magnifyingglass
Displays a search field or initiates a search.
A square outlined in black with a black arrow pointing up from near the top edge.
touchBarShareTemplate
A square outlined in black with a black arrow pointing up from near the top edge.
square.and.arrow.up
Shares content with others or to social media.
A black-outlined rectangle divided by a vertical line about 40 percent from the left. Within the left side are a stack of three short, horizontal lines.
touchBarSidebarTemplate
A black-outlined rectangle divided by a vertical line about 40 percent from the left. Within the left side are a stack of three short, horizontal lines.
sidebar.leading
Displays a sidebar in the current view.
The number 15 circled by a black double-headed arrow pointing right in a clockwise direction.
touchBarSkipAhead15SecondsTemplate
The number 15 circled by a black arrow pointing right in a clockwise direction.
goforward.15
Skips 15 seconds ahead during media playback.
The number 30 circled by a black double-headed arrow pointing right in a clockwise direction.
touchBarSkipAhead30SecondsTemplate
The number 30 circled by a black arrow pointing right in a clockwise direction.
goforward.30
Skips 30 seconds ahead during media playback.
Two black right-pointing triangles with a black vertical line at the point of the rightmost triangle.
touchBarSkipAheadTemplate
Two black right-pointing triangles with a black vertical line at the point of the rightmost triangle.
forward.end.alt.fill
Skips to the next chapter or location during media playback.
The number 15 circled by a black double-headed arrow pointing left in a counter clockwise direction.
touchBarSkipBack15SecondsTemplate
The number 15 circled by a black arrow pointing left in a counter clockwise direction.
gobackward.15
Skips 15 seconds back during media playback.
The number 30 circled by a double-headed black arrow pointing left in a counter clockwise direction.
touchBarSkipBack30SecondsTemplate
The number 30 circled by a black arrow pointing left in a counter clockwise direction.
gobackward.30
Skips 30 seconds back during media playback.
Two black left-pointing triangles with a black vertical line at the point of the leftmost triangle.
touchBarSkipBackTemplate
Two black left-pointing triangles with a black vertical line at the point of the leftmost triangle.
backward.end.alt.fill
Skips to the previous chapter or location during media playback.
A black right-pointing triangle with a vertical black line at the point.
touchBarSkipToEndTemplate
A black right-pointing triangle with a vertical black line at the point.
forward.end.fill
Skips to the end during media playback.
A black left-pointing triangle with a vertical black line at the point.
touchBarSkipToStartTemplate
A black left-pointing triangle with a vertical black line at the point.
backward.end.fill
Moves to the next vertical item.
A black right-pointing triangle within a black-outlined rectangle.
touchBarSlideshowTemplate
A black right-pointing triangle within a black-outlined rectangle.
play.rectangle
Starts a slideshow.
A tag outlined in black, pointing left.
touchBarTagIconTemplate
A tag outlined in black, slanted to the right by about 45 degrees.
tag
Applies a tag to an item.
The capital letter B drawn in a thick black stroke.
touchBarTextBoldTemplate
The capital letter B drawn in a thick black stroke.
bold
Makes text bold.
A capital letter T within a square outlined in black. A black dot is at the center of both vertical sides of the square.
touchBarTextBoxTemplate
A capital letter T within a rectangle outlined in black. A black dot is at the center of both vertical sides of the rectangle.
textbox
Inserts a text box.
A stack of four horizontal black lines. From the top, the first and third are one length and the second and fourth are a shorter length. The midpoint of each line is at the same horizontal position.
touchBarTextCenterAlignTemplate
A stack of four horizontal black lines. From the top, the first and third are one length and the second and fourth are a shorter length. The midpoint of each line is at the same horizontal position.
text.aligncenter
Center aligns text.
A black capital letter I slanted slightly to the right.
touchBarTextItalicTemplate
A black capital letter I slanted slightly to the right.
italic
Italicizes text.
A stack of four horizontal black lines all the same length.
touchBarTextJustifiedAlignTemplate
A stack of four horizontal black lines all the same length.
text.justify
Justifies text, aligning it to both the left and right.
A stack of four horizontal black lines. From the top, the first and third are one length, the second and fourth are a shorter length. All four lines start from the same horizontal position on the left.
touchBarTextLeftAlignTemplate
A stack of four horizontal black lines. From the top, the first and third are one length, the second and fourth are a shorter length. All four lines start from the same horizontal position on the left.
text.alignleft
Left-aligns text.
A stack of four horizontal lines of the same length, each with a black bullet on the left.
touchBarTextListTemplate
A stack of three horizontal lines of the same length, each with a black bullet on the left.
list.bullet
Inserts a list or converts text to list form.
A stack of four horizontal black lines. From the top, the first and third are one length, the second and fourth are a shorter length. All four lines start from the same horizontal position on the right.
touchBarTextRightAlignTemplate
A stack of four horizontal black lines. From the top, the first and third are one length, the second and fourth are a shorter length. All four lines start from the same horizontal position on the right.
text.alignright
Right-aligns text.
A capital letter S with a short horizontal line through the middle.
touchBarTextStrikethroughTemplate
A capital letter S with a short horizontal line through the middle.
strikethrough
Applies a strikethrough to text.
A capital letter U sitting on a short horizontal line.
touchBarTextUnderlineTemplate
A capital letter U sitting on a short horizontal line.
underline
Underlines text.
The silhouette of a person’s head and shoulders within a circle. A small plus sign is on the right side of the silhouette.
touchBarUserAddTemplate
The silhouette of a person’s head and shoulders within a circle. A small white plus sign within a black disk is in the bottom-left quadrant of the circle.
person.crop.circle.badge.plus
Creates a new user.
The silhouettes of two people, heads and shoulders only. The person on the right is slightly in front of the person on the left.
touchBarUserGroupTemplate
The silhouettes of two people, heads and shoulders only. The person on the right is slightly in front of the person on the left.
person.2.fill
Shows or represents information about a group of users.
The silhouette of a person’s head and shoulders.
touchBarUserTemplate
The silhouette of a person’s head and shoulders.
person.fill
Shows or represents information about a user.
A right-pointing speaker with one curved line on the right side, representing a sound wave.
touchBarVolumeDownTemplate
A right-pointing speaker with one curved line on the right side, representing a sound wave.
speaker.wave.1.fill
Decreases the volume.
A right-pointing speaker with two curved lines on the right side, representing sound waves.
touchBarVolumeUpTemplate
A right-pointing speaker with two curved lines on the right side, representing sound waves.
speaker.wave.3.fill
Increases the volume.

Custom Touch Bar Glyphs

If your app includes tasks or modes that can’t be represented by a system-provided Touch Bar image, you can create your own. Apple Design Resources provides downloadable Photoshop and Sketch templates you can use to design properly scaled glyphs for the Touch Bar. For guidance, see Glyphs.

Design recognizable glyphs that clearly relate to your app on the main screen. If necessary, you can vary the images to match the style of the Touch Bar.

Avoid glyphs that extend to the full height of the Touch Bar. In general, glyphs shouldn’t exceed 44px in height (36px for circular icons).

Ideal glyph size 18x18 pt (36x36 px @2x)
Maximum glyph size 22x22 pt (44x44 px @2x)

A row of six example icons, each of which has three squares drawn around it, showing how it fits within areas that measure 36 pixels square, 44 pixels square, and 60 pixels square.

Keep glyphs optically centered. Crop artwork to match the glyph’s width, then add padding as needed to keep the glyph optically centered when it’s displayed in a control.

Prefer a 45-degree angle for diagonal elements. Using the same angle as in system glyphs like Audio Input Mute and Compose helps your custom glyphs look at home in the Touch Bar.

Color and Fill

Create glyphs that look similar to the glyphs on the physical keyboard keys.

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 glyphs a 100% opacity fill. To optimize readability, you might want to use a 70% opacity fill in combination with a 100% opacity fill. Use midtones only for improving readability and balance.

For guidance, see Touch Bar Visual Design > Color.

Stroke

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

Corners

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

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.

Diagram of a circle rendered in standard resolution at scale factor 1 that has 10 x 10 pixels.

@1x (10x10 px)

Diagram of a circle in high resolution at scale factor 2 that has 20 x 20 pixels.

@2x (20x20 px)

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, a 2x graphic that’s 36x36 px translates to 18x18 pt. Append a suffix of @2x to your image names, and insert them into @2x fields in the asset catalog of your Xcode project.