SF Symbols: The benefits and how to use them guide

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!

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.

An SF Symbol example with all its scales and weights

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;

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 SF Symbols Mac app with an overview of all the symbols

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:

An overview of the SF Symbols with the ultra light weight — An overview of the SF Symbols with the ultra-lightweight

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.

An overview of the symbols in a list view

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.

An exported SF Symbol opened as SVG in Sketch

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:

sfsymbols.com showing the restrictions per symbol

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:

The circle symbol is a great base for custom symbols

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.

A custom symbol added to an 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 ⇧⌘C to 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.

The available initializers for 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:

An SF Symbol can be set to a different scale using the Symbol Configuration

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.

Examples of weight configurations for an SF Symbol

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 = updatedConfiguration

This 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.

A configured UIImageView with an SF Symbol

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)

Setting a fixed tint color on an SF Symbol

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:

By combining two Symbol Configurations you can be flexible

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!

SwiftLee

A weekly blog about Swift, iOS and Xcode Tips and Tricks