SF Symbols

SF Symbols provides a set of over 3,100 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically align with text in all weights and sizes.

A diagram showing four rows of the same five symbols in various visual configurations. From the left, each row shows folder badged in the top-right corner with a plus sign within a solid disk, a heart within a solid disk, an alarm clock, the face ID symbol, and a battery charging. The top row shows the symbols using the default system blue color for all outlines and filled areas. The second row shows each symbol using two opacities of the default system blue color. In the third row, each symbol uses a combination of the default system blue color and a medium gray color. The fourth row shows each symbol with a different combination of two or more colors, including green, red, orange, and black, in addition to the system blue.

You can use SF symbols to represent tasks and types of content in a variety of UI elements, such as navigation bars, toolbars, tab bars, context menus, and widgets. Throughout the rest of your app, you can use a symbol everywhere you can use an image. SF Symbols are available in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

SF Symbols 3 introduces the following enhancements:

  • Over 600 new symbols in several categories, such as objects and tools, gaming, communication, and devices
  • New color-rendering modes that add depth and emphasis to a symbol through layer annotation
  • The 3.0 export template that streamlines the production of a custom symbol’s weight-scale variants
  • New designs for Thai, Chinese, Japanese, and Korean, in addition to expanded coverage for Arabic, Hebrew, and Devanagari

Availability of individual symbols and features varies based on the version of the system you’re targeting. For example, when you export a new symbol from SF Symbols 3 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6, but without the benefit of SF Symbol 3 features like Hierarchical or Palette color rendering. Visit SF Symbols to download the app and browse the full set of symbols.

IMPORTANT All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.

Colors

SF Symbols 3 provides four rendering modes that enable multiple options when applying color to symbols. For example, you might want to use multiple opacities of your app’s accent color to produce symbols with depth and emphasis or specify a palette of contrasting colors to produce symbols that coordinate with various color schemes.

To support the rendering modes, SF Symbols 3 organizes a symbol’s paths into distinct layers. Using a process called annotating, you can assign a specific color — or a specific hierarchical level, such as primary, secondary, or tertiary — to each layer in a symbol.

For example, the cloud.sun.rain.fill symbol consists of three layers: the primary layer contains the cloud paths, the secondary layer contains the paths that define the sun and its rays, and the tertiary layer contains the raindrop paths.

An image of the cloud sun rain fill symbol. The cloud is black and the raindrops and sun are gray to indicate that the cloud is in the primary layer.

Primary

An image of the cloud sun rain fill symbol. The sun is black and the raindrops and cloud are gray to indicate that the sun is in the secondary layer.

Secondary

An image of the cloud sun rain fill symbol. The raindrops are black and the sun and cloud are gray to indicate that the raindrops are in the primary layer.

Tertiary

Depending on the rendering mode you choose, an annotated symbol can produce various appearances. For example, Hierarchical rendering mode assigns a different opacity of a single color to each layer, creating a visual hierarchy that gives depth to the symbol.

An image of the cloud sun rain fill symbol that uses three different opacities of the system blue color in the symbol’s three different layers: the cloud is fully opaque, the sun is about 50% opaque, and the raindrops are about 25% opaque.

SF Symbols 3 supports the following rendering modes.

Monochrome — Applies one color to all symbols. Within a symbol, paths render in the color you specify or as a transparent shape within a color-filled path.

A diagram showing a row of eight symbols, all of which use a single opacity of the system blue color.

Hierarchical — Applies one color to all symbols, varying the color’s opacity according to each layer’s hierarchical level.

A diagram showing a row of eight symbols, each of which uses different opacities of the system blue color. From the left, the square and arrow up symbol uses full opacity for the arrow and low opacity in the square. Next, folder badge plus uses full opacity for the badge and low opacity for the folder. Trash slash uses full opacity for the slash and low opacity for the can. Calendar day timeline right uses full opacity for the horizontal indicator and low opacity for the square and dots. List number uses full opacity for the column of numbers and low opacity for the horizontal lines. Text format A B C dotted underline uses full opacity for the dots under the low-opacity letters. iPhone radio waves left and right uses full opacity for the device outline, mid opacity in the screen area, and low opacity for the radio wave lines. Lastly, the PC symbol uses full opacity for the device outline and the onscreen sad face and horizontal lines and mid opacity in the screen background.

Palette — Applies two or more contrasting colors to each symbol, using one color per layer. Specifying only two colors for a symbol that defines three levels of hierarchy means the secondary and tertiary layers use the same color.

A diagram showing a row of eight symbols, each of which uses a combination of gray and the system blue color. From the left, the square and arrow up symbol uses blue for the arrow and light gray for the square. Next, folder badge plus uses blue for the badge and light gray for the folder. Trash slash uses blue for the slash and light gray for the can. Calendar day timeline right uses blue for the horizontal indicator and light gray for the square and dots. List number uses blue for the column of numbers and light gray for the horizontal lines. Text format A B C dotted underline uses blue for the dots under the light gray letters. iPhone radio waves left and right uses blue for the device outline, medium gray in the screen area, and light gray for the radio wave lines. Lastly, the PC symbol uses blue for the device outline and the onscreen sad face and horizontal lines and medium gray in the screen background.

Multicolor — Applies system-defined intrinsic colors to some symbols to enhance meaning. For example, the leaf symbol uses green to reflect the appearance of leaves in the physical world, whereas the trash can symbol uses red to signal data loss. Some multicolor symbols include layers that can receive other colors.

A diagram showing a row of eight symbols, using combinations of various colors. From the left, the square and arrow up symbol uses blue for all lines. Next, folder badge plus uses green for the badge and blue for the folder. Trash slash uses red for both the slash and the can. Calendar day timeline right uses red for the horizontal indicator, dark gray for the square, and light gray for the dots. List number uses black for the column of numbers and medium gray for the horizontal lines. Text format A B C dotted underline uses red for the dots under the black letters. iPhone radio waves left and right uses blue for all lines. Lastly, the PC symbol uses yellow for the device outline, white for the onscreen sad face and horizontal lines, and blue in the screen background.

Regardless of rendering mode, using system-provided colors ensures that symbols automatically adapt to accessibility accommodations and appearance modes like vibrancy and Dark Mode. For developer guidance, see renderingMode(_:).

Weights and Scales

SF symbols are available in a wide range of weights and scales to help you create adaptable designs.

A diagram showing the square and arrow up symbol in all 27 weights and scales.

Each of the nine symbol weights — from ultralight to black — corresponds to a weight of the San Francisco system font, helping you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts.

Each symbol is also available in three scales: small, medium (the default), and large. The scales are defined relative to the cap height of the San Francisco system font.

A diagram showing three images of the plus circle symbol followed by the capitalized word add. In each image, the word uses the same size, but the symbol uses a different size. From the left, the symbol sizes are small, medium, and large. Two parallel horizontal lines appear across all three images. The top line shows the height of the capital letter A and the bottom line is the baseline under the word add. In the small symbol, the circle touches both lines, in the medium symbol the circle extends slightly above and below the lines, and in the large symbol the vertical line of the plus sign almost touches both lines.

Specifying a scale lets you adjust a symbol’s emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size. For developer guidance, see imageScale (SwiftUI), SymbolScale (UIKit), and SymbolConfiguration (AppKit).

Variants

SF Symbols defines several design variants — such as fill, slash, and enclosed — that can help you communicate precise states and actions while maintaining visual consistency and simplicity in your UI. For example, you could use the slash variant of a symbol to show that an item or action is unavailable, or use the fill variant to indicate selection.

Outline is the most common variant in SF Symbols. An outlined symbol has no solid areas, resembling the appearance of text. Most SF symbols are also available in a fill variant, in which the areas within some shapes are solid.

In addition to outline and fill, SF Symbols also defines variants that include a slash or enclose a symbol within a shape like a circle, square, or rectangle. In many cases, enclosed and slash variants can combine with outline or fill variants.

A diagram showing two rows of the same five symbols. In the top row, every symbol uses the outline variant; the bottom row shows the fill variant of each symbol. From the left, the symbols are heart, heart slash, heart circle, heart square, and a heart in a rectangle.

SF Symbols 3 provides many variants for specific languages and writing systems, including Latin, Arabic, Hebrew, Hindi, Thai, Chinese, Japanese, and Korean. Language- and script-specific variants adapt automatically when the device language changes. For guidance, see Images and Glyphs.

A diagram with eight rows of the same twelve symbols, where each row shows a localized version of the symbol. From the left the symbols are doc rich text, doc rich text fill, character book closed, character book closed fill, character bubble, character bubble fill, character, text format superscript, text format subscript, text format size, character text box, and character cursor I beam.

Symbol variants support a range of design goals. For example, the outlined variant works well in toolbars, navigation bars, lists, and other places where you display a symbol alongside text. In contrast, the solid areas in a fill variant tend to give a symbol more visual emphasis, making it a good choice for iOS tab bars and swipe actions, and places where you use an accent color to communicate selection.

In many cases, the view that displays a symbol determines whether to use outline or fill, so you don’t have to specify a variant. For example, an iOS tab bar prefers the fill variant, whereas a navigation bar takes the outline variant.

Creating Custom Symbols

If you need a symbol that SF Symbols doesn’t provide, you can create your own. To create a custom symbol, first export a symbol that’s similar to the design you want, then use a vector-editing tool like Sketch or Illustrator to modify it. Use the result in your app as you would use the original symbol file.

IMPORTANT SF Symbols includes copyrighted symbols that depict Apple products and features. You can display these symbols in your app, but you can’t customize them. To help you identify a noncustomizable symbol, SF Symbols badges it with an Info glyph; to help you use the symbol correctly, the inspector pane describes its usage restrictions.

As you create or modify paths in your custom symbol, make sure to use closed paths. Only a closed path — that is, a path in which the beginning and ending vector points connect to produce an inner area — can receive a fill.

A diagram showing a path that looks like the outline of two slightly overlapping squares. No lines are visible within the outline. A point is visible in each corner and the inner area is gray.

Closed path

An image of a white checkmark in a green circle to indicate a correct example.

A diagram showing the same path outlining overlapping squares, but missing the lowest horizontal line segment. A point is visible in each corner and at the beginning and end of the outline.

Open path

An image of a white X in a gray circle to indicate an incorrect example.

To ensure that the paths themselves can receive a fill, use outlined paths. An outlined path uses vector points to precisely define the area of the path itself; in contrast, non-outlined paths and stroked paths have no area.

For example, a common design approach is to begin with a non-outlined path and add a stroke to give it thickness. However, because a stroke has no points that define its outer boundaries, you need to convert the stroke to outlines to ensure that the path works well in your custom symbol.

A diagram of a rounded square drawn in black with eight points along the path. A point appears where the straight path begins to curve at both sides of every corner.

Non-outlined path

An image of a white X in a gray circle to indicate an incorrect example.

A diagram of a rounded square drawn in black with eight points along the path. A thick gray stroke is centered on the line all the way around the square.

Stroked path

An image of a white X in a gray circle to indicate an incorrect example.

A diagram of a rounded square created by two concentric black paths, each of which contains eight points. The space between the paths is approximately the same as the thickness of the stroke in the previous diagram.

Outlined path

An image of a white checkmark in a green circle to indicate a correct example.

When you export a 3.0 template to create a custom symbol, you can choose between two options for the template’s initial setup:

  • The static setup contains a set of paths for each of the 27 weight-scale variants and includes explicit margins for the regular medium variant. Use a template with the static setup if you need to create only a small number of weight-scale variants.
  • The variable setup contains the paths and explicit margins for each of three weight-scale variants — ultralight small, regular small, and black small. Use a template with the variable setup when you need to create many or all of the 27 weight-scale variants.

The three weight-scale variants in the variable setup are called sources. Using only these three sources, SF Symbols 3 can interpolate among them to produce the full range of weights and scales. For interpolation to work:

  • Every path must be an outlined path
  • Every source must contain the same set of paths in the same order
  • The same path in each source must contain the same number of vector points

For example, each weight-scale variant of the square.and.arrow.up symbol shown below contains two paths; in each variant, the square path contains 20 points and the arrow path contains 20 points.

A diagram of the square and arrow up symbol, in which the two shapes are given by closed paths. The space inside each closed path is very narrow.

Ultralight

A diagram of the square and arrow up symbol, in which the two shapes are given by closed paths. The space inside each closed path is almost three times the width of the previous diagram.

Regular

A diagram of the square and arrow up symbol, in which the two shapes are given by closed paths. The space inside each closed path is almost three times the width of the previous diagram.

Black

For developer guidance, see Creating Custom Symbol Images for Your App.

Use the template as a guide. Create a custom symbol that’s consistent with the ones the system provides in level of detail, optical weight, alignment, position, and perspective. Strive to design a symbol that is:

  • Simple
  • Recognizable
  • Inclusive
  • Directly related to the action or content it represents

For guidance, see Glyphs.

In your vector-editing tool, use a standard flat fill to color your custom symbol. Importing a custom symbol that includes a nonstandard fill — or an effect like a gradient or drop shadow — can prevent it from retaining the annotations you specify in SF Symbols 3.

Ensure all weight-scale variants of your custom symbol contain the same number of paths in the same order. For example, consider a symbol that uses a filled circle for a badge. If the circle is the third path in one symbol variant, you need to make it the third path in all variants for annotation to work. When you do this, you can create layers that refer to the third path and be confident that each layer references the same circle in every variant.

A diagram of the folder badge plus symbol where the folder is blue, the badge is green, and the plus sign is white.

In this design variant, the badge is the third path. Assigning green to the layer that refers to the third path gives expected results.

An image of a white checkmark in a green circle to indicate a correct example.

A diagram of the folder badge plus symbol where the outer folder is green, the inner horizontal folder line is blue, the badge is blue, and the plus sign is white. All paths in this version of the symbol are a little over twice as thick as the lines in the previous version.

In this design variant, the outer folder path is the third path, so assigning green to the layer that refers to it gives unexpected results.

An image of a white X in a gray circle to indicate an incorrect example.

NOTE When rendering a symbol, the system adheres to the Z order of its layers, so paths in the top layer may occlude paths in the bottom layers where they overlap. If the layers in some of your custom symbol variants contain different paths or use a different order, you can get unexpected results when the system applies color.

Use the template to help you produce custom symbols in as many weights and scales as your app requires. For example, to enable the bold text setting and support Dynamic Type, you need symbols in regular, medium, semibold, and bold at all scales.

Assign negative side margins to your custom symbol if necessary. An SF symbol can include negative side margins to aid optical horizontal alignment if it contains a badge or other elements that increase its width. For example, negative side margins can help you horizontally align a stack of folder symbols, some of which include a badge. SF Symbols 3 adds the relevant variant to each margin’s name — such as “left-margin-Regular-M” — so be sure to use this naming pattern if you add margins to your custom symbols.

Provide alternative text labels for custom symbols. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what’s on screen, making navigation easier for people with visual disabilities. For guidance, see Accessibility > Copy and Images.

Don’t design replicas of Apple products. Apple products are copyrighted and you can’t reproduce them in your custom symbols. Also, you can’t customize an SF symbol that represents an Apple feature or product.