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.
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.
Wallet glyph
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.
To help achieve visual consistency, adjust individual glyph sizes as necessary...
...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.
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.
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.
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.
In iOS, a selected tab bar glyph receives the app’s accent color.
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.
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.
Create localized versions of a glyph that displays individual characters.
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).