SF Symbols

SF Symbols provides a set of over 2,400 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 ensure optical vertical alignment with text in all weights and sizes.

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.

Availability of individual symbols and features varies based on the version of the system you’re targeting. When you export a symbol introduced in SF Symbols 2 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 2 features like multicolor support and automatic localization. Visit SF Symbols to download the app and browse the full set of symbols.

SF Symbols 2 introduces over 750 new symbols and includes:

Over 150 preconfigured, multicolor symbols that automatically adapt to vibrancy, accessibility settings, and appearance modes

Negative side margins in both standard and custom symbols, giving you greater control over horizontal alignment

Localized symbol variants for right-to-left writing systems, as well as script-specific symbols for Arabic, Devanagari, and Hebrew

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.

A Closer Look at SF Symbols

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

Each of the nine symbol weights — from ultralight to black — corresponds to a weight of the San Francisco system font. This correspondence lets 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. By specifying a scale, you can 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).

By default, a symbol can use an app's accent color. In SF Symbols 2 and later, you can use multicolor symbols to display images that contain more than one color. For example, the cloud.sun.rain.fill symbol uses white for the cloud, yellow for the sun, and blue for the rain. In some cases, you can use different colors in different areas of a symbol. For example, you might want to specify a color like your app's accent color for the folder area of folder.badge.plus, while the system provides a green color for the badge. For developer guidance, see renderingMode(_:).

By default, multicolor symbols automatically adapt to different appearance modes, like Dark Mode. If you specify a color in a custom symbol that you create, the custom symbol doesn't automatically adapt to different appearance modes.

Creating Custom Symbols

If you need a symbol that isn't provided by SF Symbols, you can create your own. The SF Symbols app lets you export a symbol as a template in a reusable, vector-based file format. To create a custom symbol, export an SF symbol that's similar to the design you want and modify the template using a vector-editing tool like Sketch or Illustrator. Use the result in your app as you would use the original template file. (Custom symbols don't support adaptive color.) For developer guidance, see Creating Custom Symbol Images for Your App. See Symbols for Use As-Is for a list of symbols that can't be customized.

Be guided by the template. Create a custom symbol that's consistent with the system-provided ones in terms of level of detail, optical weight, alignment, position, and perspective. Strive to design a symbol that is:

Simple

Recognizable

Not offensive

Directly related to the action or content it represents

To support a wide range of text settings, create custom symbols in as many weights and scales as your app requires. To enable the bold text setting and support Dynamic Type, create symbols in regular, medium, semibold, and bold at all scales. If your app uses additional font weights and scales, create symbols in these weights and scales, too.

Use negative side margins to aid with optical horizontal alignment if necessary. SF Symbols 2 provides negative margins for symbols that include badges or other elements that increase the symbol's width. For example, you might need to use negative margins when horizontally aligning a stack of folder symbols, some of which include a badge. In rare cases where multiple symbols that have negative margins are side by side, you may need to add space or other content between them to avoid collisions.

Don’t use replicas of Apple products. Apple products are copyrighted and can’t be reproduced in 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 onscreen, making navigation easier for people with visual impairments.

Symbols for Use As-Is

Some symbols can’t be exported as templates for customization and can be used only to reference Apple technologies as documented below.