SF Symbols were introduced during WWDC 2019 and are a big present for us developers. Apple basically gave us free symbols to use in our app and it’s even really easy to use them as well! With SF Symbols 2.0 being introduced in WWDC 2020 we’ve got even more possibilities to show beautiful icons in our apps.
It’s time to dive into the details on what they are and how you can use them to make your app look both nice and natively aligned with the system apps.
You can find Swift code examples at the bottom of this post
What are SF Symbols?
SF Symbols is a set of over 1,500 symbols that you can use in your app. They’re aligned and configurable in a wide range of weights and scales to adapt to your designs. As they are integrated into the San Francisco system font they automatically ensure optical vertical alignment with text for all weights and sizes.
Which platforms support SF Symbols?
The supported platforms for SF Symbols are:
- iOS 13 and later
- watchOS 6 and later
- tvOS 13 and later
As the symbols are included in the San Francisco system font you can also use them in a Mac app but license agreements apply;
SF Symbols 2.0 – What is new?
WWDC 2020 introduced SF Symbols 2.0 with a few very welcome changes. They’re not all visible yet as the SF Symbols 2.0 app is becoming available later. Let’s go over the changes that are available in Xcode 12 as of today.
Over 750 new symbols on latest beta versions
SF Symbols 2.0 includes over 750 new symbols, including devices, health, transportation symbols, and more. The new symbols are only available on the beta versions of iOS 14, iPadOS 14, and macOS Big Sur.
Improved optical alignment
One of the challenges of using SF Symbols is optical alignment. Vertical alignment is automatically ensured if used with the San Fransisco system font but up until version 1.1 it wasn’t possible to horizontally align symbols to make them look good in all cases.
With the 2.0 update, you can now give symbols negative side margins that are supported by both standard and custom symbols. This should give you enough control to visually align symbols horizontally. For example, you might have a symbol that includes a badge in which case you want to visually move the symbol a bit horizontally.
A small caveat is the fact that two of those symbols could be placed next to each other having negative margins that overlap both symbols. Although it’s a rare case, you might need to add extra space or other content in between to avoid collisions.
Multicolor Symbols
If unfamiliar it might seem at first that you can now colorize SF Symbols. However, this was already possible by applying a simple tint color. The newly introduced multicolor symbols are unique compared to tinted symbols as they automatically adapt to appearance modes, accessibility settings, and vibrancy. This can be a great way to quickly support many different scenarios.
Localized symbols variants
Another great new feature is the localized symbols variants to support right-to-left writing systems as well as script-specific symbols for Hebrew, Arabic, and Devanagari. These variants are optimized to look great in those systems.
Can I use the symbols everywhere?
No, definitely not! Keep an eye sharp on the license agreements that apply. As quoted from Apple:
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.
Restricted symbols
Apart from the license agreements, there’s also a list of symbols that can only be used to reference specific Apple technologies. It’s good to visit this list often if you’re using symbols to prevent your app from being rejected in the store.
A full list of those symbols can be found under the Symbols for Use As-Is paragraph.
How can I browse the available symbols?
Apple provides an SF Symbols app that allows you to browse, copy, and export any available symbols. The app can be downloaded here and is available for macOS 10.14 and later.
The app allows you to browse the symbols and display them in the selected weight. The above image shows the icon in the medium weight while the next image shows how the same icons look in the UltraLight weight:
This is great for finding the right icon in the right weight.
If you like you could also use the list view to browse the available symbols.
Exporting a symbol
The Mac app allows you to support all symbols as an SVG using File -> Export Symbol... or ⌘E. This is a great way to include the symbol in places where you can not use the font itself. However, do keep in mind the license agreements.
Browsing the symbols on the web
It’s worth mentioning that you can also browse the symbols at sfsymbols.com.
One benefit you have by searching on this website is that you can see the applying restrictions for each icon if they exist:
However, due to the earlier described license restrictions, they can only display the names of the symbols and you are still better off by using the Mac app.
Creating a custom symbol
A custom symbol can be created whenever there’s no symbol available matching your requirements. The exported SVG version of a symbol is well structured and can be used as a base for your custom symbol.
The Introducing SF Symbols session from WWDC 2019 gives an in-depth explanation on how to use custom symbols
Choosing the right symbol as a base reference
It’s best to start with a symbol which is close to the one you’d like to have. Do know that they’re copyrighted and you can’t use replicas of Apple products or reproduce them in your custom symbols. Also, check out the earlier mentioned Symbols for Use As-Is list as those can’t be customized.
Most of the shapes are also available without an icon in them. For example the circle or circle.fill:
This is a great starting point for your custom symbol!
Do I need to support all weights and scales?
Well, the more weights and scales you implement, the wider the range of text settings you’ll support. The minimum should be regular, medium, semibold, and bold at all scales so you can support Dynamic Type and the bold text setting.
How can I validate my custom SF Symbol?
The app allows you to validate the custom SF Symbol through the menu: File ➞ Validate Custom Symbols.... Navigate and select your custom symbol to start the validation.
Exporting and using the custom symbol
Once you exported your symbol to an SVG you can simply drag the symbol into your Asset Catalog in Xcode.
It shows a preview of your symbol and it allows you to configure its name, appearance, direction, and localization.
Using the custom symbol on iOS 12 and below
Symbols are only supported on iOS 13 and up. Apple did a great job to make it easy for us to fall back on an image in the case of an older system version. Simply give your image the same name as your custom symbol and the following line of code will fallback to the image if needed:
let customSymbol = UIImage(named: "my_custom_symbol")How to use SF Symbols in Swift
To use an SF Symbol in Swift you can make use of the new UIImage(systemName:) initializer:
let image = UIImage(systemName: "square.and.pencil")As you can see, Apple made it really easy to use the SF symbols:
- Browse and find your icon in the SF Symbols Mac app
- Use
⇧⌘Cto copy the name of the symbol - Use the name inside the
UIImage(systemName:)initializer - Use the image inside a UIImageView, UIButton, or any other UI element
How to change the scale of an SF Symbol in Swift?
To change the scale of an SF Symbol you can make use of a UIImage Symbol Configuration.
It allows you to set the font, scale, point size, weight, and text style.
let smallConfiguration = UIImage.SymbolConfiguration(scale: .small)
let smallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: smallConfiguration)The scale is set to medium by default, as you can see in the following Swift Playground:
How to change the weight of an SF Symbol in Swift?
The weight can be changed with a UIImage Symbol Configuration as well.
let ultraLightConfiguration = UIImage.SymbolConfiguration(weight: .ultraLight)
let ultraLightSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: ultraLightConfiguration)It’s a great way to make your symbol align better with your design.
Changing the Symbol Configuration in an UIImageView and UIButton
The UIImageView and UIButton class comes with a new property preferredSymbolConfiguration which allows you to apply a specific configuration to any symbols set in the image view.
let imageView = UIImageView(image: defaultSymbolImage)
let updatedConfiguration = UIImage.SymbolConfiguration(weight: .bold)
imageView.preferredSymbolConfiguration = updatedConfigurationThis will change the symbol whenever it’s set in the image view. As you can see in the following Swift Playground image the symbol is also changed into blue color.
This is inherited from the tint color set on the image view. If you want to make sure a symbol always appears in a specific color, you can make use of the withTintColor method:
let heartImage = UIImage(systemName: "heart.fill")!
let redHeartImage = heartImage.withTintColor(.red, renderingMode: .alwaysOriginal)
For buttons, it works more or less the same by making use of the UIButton.setPreferredSymbolConfiguration(_:forImageIn:) method. Default styles applied to system buttons are .body and .large.
Combining configurations
In the case you’re saving multiple configurations to use throughout your app, it could be that you want to apply a small adjustment on top of a shared configuration.
You can do this easily using the applying method.
let boldLargeConfig = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .bold, scale: .large)
let smallConfig = UIImage.SymbolConfiguration(scale: .small)
let boldSmallConfig = boldLargeConfig.applying(smallConfig)
let boldSmallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: boldSmallConfig)As you can see in the following Playground, the image is smaller but bold:
Aligning symbols
The new UIImage.withBaselineOffset(fromBottom:) method allows you to apply a new offset to an image from the bottom of the image. This method can also be useful in the general use of images.
How to use SF Symbols in iOS 12 and below?
Unfortunately, you can’t use SF Symbols directly on iOS 12 and below as you can on iOS 13 and up. If you’d like to use any of the symbols on iOS 12 and below you need to export them from the SF Symbols Mac app and import them as regular assets in your Asset Catalog.
Conclusion
Apple gave us a great present during WWDC 2019 with over 1,500 symbols to use. Especially if you don’t have a designer or you want to move fast you can make use of the symbols to build a beautiful native app.
If you like to improve your Swift knowledge, even more, check out the Swift category page. Feel free to contact me or tweet to me on Twitter if you have any additional tips or feedback.
Thanks!