During WWDC 2019, Apple introduced a free set of over 1,500 symbols to be used by developers in their applications. Here I will explain how to use the new Apple SF Symbols in your applications. In any case, even if they are free, you must take into account the license agreements indicated by Apple:

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.

What are SF Symbols

As we have said, the SF Symbols are a set of more than 1500 icons, integrated in the San Francisco text font and that are configurable for all types of size and weight.

SF Symbols iOS 13
Examples of an SF Symbol in different sizes and weights.

In order to know what icons are available, we can download an Apple application. This app is available for macOS 10.14 and later.

SF Symbols iOS 13
Apple application that contains all SF Symbols.

With this application we can show icons both by weight (in the previous image the icons with ultralight weight were shown), or by theme. Thus, if we select Weather in the left column, we will see all the icons related to this theme.

SF Symbols iOS 13
Symbols corresponding to the Weather theme.

Support

SF Symbols can be used on the following platforms:

  • iOS 13 and later
  • watchOS 6 and later
  • tvOS 13 and later

Export, modify and validate SF Symbols

SF Symbols can also be exported from the application, simply select the symbol you want to export and from the top menu, select File > Export Custom Symbol Template… or type ⌘E. With this we will obtain the icon in SVG format.

SF Symbols iOS 13
We select the Export Custom Symbol Template option from the top menu.
SF Symbols iOS 13
We indicate the export location of the symbol in SVG format.

Once we have exported the icon we can modify it through another program, in this case we will change the color of the icon from black to yellow.

SF Symbols iOS 13
Original icon.
SF Symbols iOS 13
Icon with modified color.

Next, we have to check if the modifications made are valid. To do this, from the SF Symbols application we go to File > Validate Custom Symbols…, select the .svg file of the modified icon and validate it.

SF Symbols iOS 13
Validation of the modified symbol.

Once this is done, we can go to an Xcode project, select the Assets folder and drag the .svg file inside. Now we can use it.

SF Symbols iOs 13
Symbol added to a Xcode project.

How to use SF Symbols in our projects

Using SF Symbols in iOS 12

SF Symbols can only be used natively in iOS 13. So how can we use them in previous versions like iOS 12?

If we want to use any of these symbols in versions prior to iOS 13, what we must do is export that symbol (as we have seen before) and, using some graphic tool, transform it into png format (for example) and import it into the Assets.xcassets catalog of the project.

Using SF Symbols in iOS 13 and SwiftUI

Using SF Symbols with SwiftUI is very simple, we simply have to add an Image component with the name of the symbol that we want to show:

Once we have the symbol, we can modify its size and color in different ways, for example:

Using SF Symbols in iOS 13 and UIKit

If we want to use an SF Symbol in a project with iOS 13, but working with UIKit instead of SwiftUI, we have two options: create it with code or in a storyboard.

Code

To use these symbols in Swift, call them in a UIImage component using the systemName parameter instead of named:

Now, if we want to configure its appearance as we have done in the case of SwiftUI, we must use the SymbolConfiguration class of UIImage:

If we look, as we enter the code to generate the configuration, we see that there are numerous initializers for said configuration.

SF Symbols iOS 13
Initializers for UIImage.SymbolConfiguration.

In this way we can configure different parameters of the appearance of the symbol, such as:

Storyboards o .xib files

In the case of using Storyboards or .xib files, the use of SF Symbols is simple:

  • We drag a UIImageView component onto the view:
SF Symbols iOS 13
We add a UIImageView element to the view.
  • Next, in the Attributes Inspector, we select the symbol that we want to show (a menu appears with the available symbols):
SF Symbols iOS 13
In the Attributes Inspector we select the symbol that we want to show.
  • Finally, we modify the attributes of the symbol (size, weight, scale, color …):
SF Symbols iOS 13
Modification of the attributes of the symbol.

Specific cases in iOS 12: UIImageView and UIButton

In addition to adding a symbol setting when creating a UIImage element, there are two new cases where this setting can be applied: UIImageView and UIButton.

This can be done from a new property that these elements present: preferredSymbolConfiguration in the case of UIImageView and setPreferredSymbolConfiguration(_: forImageIn:) in the case of UIButton.

These properties allow us to configure an image, for example, to resemble the text around it.

Conclusion

Thanks to the more than 1500 symbols that Apple presented during WWDC 2019, and that we can use for free, we can develop applications faster with a professional finish.

Categories: Swift

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow on Feedly
shares