If you’ve been doing any sort of app development with iconography since iOS 13 came out, there’s a good chance you leveraged the original SF Symbols app. With around 1,600 scalable, vector-based symbols integrating with the system San Francisco font, along with guidance for creating your own symbols, it was ground-breaking in terms of providing consistent, scalable UI on Apple platforms (similar but even more full-featured than the Android-oriented Material Design icons).
For example to define a simple image of a lasso without needing any assets in iOS 13+, you could just open the SF Symbols app, find the lasso image,
and then use it in code like this.
<br>let image = UIImage(systemName: "lasso")
You can also use the UIImage.Configuration and UIImage.SymbolConfiguration classes to tweak the images for light or dark mode, etc. by applying different font weights, point sizes, text styles, etc. Here we assign the lasso image the Headline font style at the pre-defined large scale.
let configuration = UIImage.SymbolConfiguration(textStyle: .headline, scale: .large)
let image = UIImage(systemName: "lasso")?.applyingSymbolConfiguration(configuration)
Doing all this to an actual icon so it blends more completely with the text and UI around it is very cool!
Enter SF Symbols 2 and Even More Symbols
With iOS 14, Apple released another 750+ new symbols along with a number of multi-color symbols as well that adapt to Apple system colors. With all the new symbols it’s easy to get confused about which symbols are iOS 14+ and which are not. If you still need to support iOS 13 (like most of us through at least next fall), it’s critical not to use an iOS 14-only symbol without realizing it.
Identifying Symbol Compatibility
There are a couple ways inside the SF Symbols app that you can do this. The easiest way is just to select the image in question and tap the Info icon on the top tool bar, which will show a compatibility panel like below. Here we can see that ‘lasso’ is supported in iOS 13.0+ and should be safe.
But the newer, fancier ‘lasso.sparkles’ is only available in iOS 14.0+. Alas!
If you need to scan the list of all symbols to isolate just iOS 13.0+ compatibility, for example, you can also switch from default Gallery mode to List Mode by tapping the appropriate button in the middle of the toolbar.
Get Even More Out of SF Symbols with Custom Collections
Make sure that you squeeze everything you can out of the SF Symbols app and make a custom collection for the symbols that your app uses. Just tap the + button in the bottom left of the view to create a new collection and drag/drop any icons that you use into your collection. Here I set up a collection for a fictional weather app with some thematically consistent symbols. Having custom collections can keep you from getting overwhelmed by the sheer volume of symbols available as well.
Have fun exploring and using symbols in your app!
eMpTy Theory 