Glyphs

A glyph is a simple, graphic image that represents an idea. On all platforms, the system defines a large number of glyphs to represent common items, actions, and modes in interface elements like buttons, segmented controls, sidebars, navigation bars, tab bars, and toolbars.

Six glyphs in a row. From the left, the glyphs are a plus sign within a circle, a filled-in heart, an outlined star, a filled-in tag shape, an outlined magnifying glass, and a filled-in bell.

An icon is also a graphic image that represents an idea, but an icon typically includes visual details a glyph doesn’t have, such as shading, texturing, and highlighting. A common icon design technique is to start with a glyph and add subtle visual enhancements.

Image of the black and white glyph used in the Wallet app icon.

Wallet glyph

Full-color image of the Wallet app icon within a black rounded rectangle shape.

Wallet app icon

Beginning in iOS 13, macOS 11, watchOS 6, and tvOS 13, the system uses SF symbols to supply the glyphs it defines; earlier versions of the system use template images that work as masks to define glyph shapes. SF symbols are scalable, vector-based images that come in weights that correspond to the weights of the system fonts. Using a symbol lets you control a glyphʼs emphasis and accent color while preserving its weight matching and alignment with adjacent text. Although you can color a template image and modify its scale and alignment relative to text, using SF symbols streamlines the process and supports Dynamic Type text-size changes.

Regardless of the system your app runs in, if you can’t find a system-defined glyph that meets your needs, consider using a different SF symbol, or design a custom glyph that communicates exactly what you want. Whether you create a custom symbol or template image, the following guidelines can help you design a glyph that works well in your app and looks at home in the system.

Create a recognizable, highly simplified design. Too many details can make a glyph confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly. In general, glyphs work best when they use familiar visual metaphors that are directly related to the actions they initiate or content they represent.

Maintain visual consistency across all glyphs in your app. Whether you use only custom glyphs or mix custom and system-provided glyphs, all glyphs in your app should use a consistent size, level of detail, stroke thickness, and perspective. Sometimes, using the same dimensions for each glyph isn’t enough to make a set of glyphs appear visually consistent. For example, a solid square and a solid triangle can both have the same width and height, but people typically perceive the square as being larger than the triangle. In this case, you could give both glyphs a consistent optical weight by slightly increasing the dimensions of the triangle.

Diagram of four glyphs in a row. From the left, the glyphs are a camera, a heart, an envelope, and an alarm clock. Two horizontal dashed lines show the bottom and top boundaries of the row and a horizontal red line shows the midpoint. All four glyphs are solid black; some include interior detail lines in white. Parts of the alarm clock extend above the top dashed line because its lighter visual weight requires greater height to achieve balance with the other glyphs.

To help achieve visual consistency, adjust individual glyph sizes as necessary...


Diagram of the same four glyphs shown above and the same horizontal dashed lines at top and bottom and horizontal red line through the middle. In this diagram, all four glyphs are solid gray; the interior detail lines are black to emphasize that all lines use the same weight.

...and use the same stroke thickness in every glyph.

In general, match the weights of glyphs and adjacent text. Unless you want to emphasize either the glyphs or the text, using the same weight for both gives your content a consistent appearance and level of emphasis. If you’re creating a custom symbol, you can adjust its weight to match nearby text; for guidance, see A Closer Look at SF Symbols.

If necessary, add padding to a custom glyph to achieve optical alignment. Some glyphs — especially asymmetric glyphs — can look unbalanced when you center them geometrically instead of optically. For example, the download glyph shown below has more visual weight on the bottom than on the top, which can make it look too low if it’s geometrically centered.

Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the right includes two horizontal pink bars — one between the top of the glyph and the top of the disk and the other between the bottom of the glyph and the bottom of the disk — that show the glyph is geometrically centered within the disk.

An asymmetric download glyph can look off center even though it’s not.

In such cases, you can slightly adjust the position of the glyph until it’s optically centered. When you create an asset that includes your adjustments as padding around the glyph (as shown below on the right), you can optically center the glyph by geometrically centering the asset.

Two images of a white arrow that points down to a white horizontal line segment within a black disk. The image on the left includes the two horizontal pink bars in the same locations as in the previous illustration, but the glyph has been moved up by a few pixels. The image on the right includes a pink rectangle overlaid on top of the glyph to represent a padding area, which includes the extra pixels below the glyph.

Moving the glyph a few pixels higher optically centers it; including the pixels in padding simplifies centering.

Adjustments for optical centering are typically very small, but they can have a big impact on your app’s appearance.

Two images of a white arrow that points down to a white horizontal line segment within a black disk. The glyph on the left is geometrically centered and the one on the right is optically centered.

Before optical centering (left) and after optical centering (right).

Provide a selected-state version of your glyph only if necessary. Avoid providing selected and unselected appearances for a glyph that’s used in controls and areas that automatically indicate selection. For example, sidebars, iOS tab bars, and macOS toolbars can convey selection state by applying your app’s accent color or adding a background appearance.

Two images of a white glyph within a solid rounded rectangle shape. The glyph shows a heart above two horizontal left-aligned lines. On the left, the rounded rectangle is blue; on the right, it’s gray.

In iOS, a selected tab bar glyph receives the app’s accent color.

Two images of an envelope glyph. On the left, the glyph uses an almost black stroke and appears within a gray rounded rectangle shape. On the right, the glyph uses a dark gray stroke.

In macOS, a selected toolbar glyph receives a darker stroke and a background appearance.

In contrast, iOS toolbars and navigation bars don’t provide a selection appearance, so you should create both filled and unfilled versions of each glyph you supply for these areas.

Two images of a clock face glyph that shows the clock hands at 9:00. The glyph on the left has white hands on a solid blue disk and the glyph on the right has blue hands within a circle outlined in blue.

Include text in your design only when it’s essential for conveying the glyph’s meaning. For example, using a character in a glyph that represents text formatting can be the most direct way to communicate the concept. If you need to display individual characters in your glyph, be sure to localize them. If you need to suggest a passage of text, design an abstract representation of it and include a flipped version of the glyph to use when the context is right-to-left.

Partial screenshot of the SF Symbols app showing the info panel for the character symbol, which looks like the capital letter A. Below the image, the following seven localized versions of the symbol are listed: Latin, Arabic, Hebrew, Hindi, Japanese, Korean, and Thai.

Create localized versions of a glyph that displays individual characters.

Partial screenshot of the SF Symbols app showing the info panel for the doc dot plaintext symbol, which looks like three left-aligned horizontal lines inside a rounded rectangle. Below the image, the left-to-right and right-to-left localized versions are shown.

Create a flipped version of a glyph that suggests reading direction.

Provide alternative text labels for glyphs. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what’s onscreen, simplifying navigation for people with visual impairments. For guidance, see Accessibility > Copy and Images.

Don’t create custom glyphs that depict Apple hardware products. Apple products are copyrighted and you can’t reproduce them in your custom glyphs or images. The SF Symbols app provides many device-specific symbols you can use instead. (You can’t customize symbols that represent Apple technologies.)

If you provide a template image, consider creating it in PDF format. The system automatically scales PDF-based template images for high-resolution displays, so you don’t need to provide high-resolution versions. In contrast, PNG format — used for app icons and other images that include effects like shading, textures, and highlighting — doesn’t support scaling, so you have to supply multiple versions for each template image. Alternatively, you can create a custom SF symbol and specify a scale that ensures the symbol’s emphasis matches adjacent text (for guidance, see A Closer Look at SF Symbols).