How to use system icons in your app

Swift version: 5.1

Paul Hudson @twostraws June 4th 2019

iOS 13 lets us use icons from a range of over 1500 designed by Apple, all of which come in a variety of weights and sizes. These icons form part of new UIImage API, and they are vector-based so you can us them at a range of sizes without loss of quality.

Note: This is a stringly typed API, so you should download the new SF Symbols app that lists all variants – download it here.

To load a system icon you use the new UIImage(systemName:) initializer. In its most basic form it looks like this:

let paperPlane = UIImage(systemName: "paperplane.fill")
let action = UIImage(systemName: "square.and.arrow.down")

You can request specific weights of your icon by creating an instance of UIImage.SymbolConfiguration like this:

let boldConfig = UIImage.SymbolConfiguration(weight: .bold)
let boldBell = UIImage(systemName: "bell", withConfiguration: boldConfig)

More usefully, you can also tell UIKit what kind of text is being rendered nearby so it can ensure the icon is sized appropriately, like this:

let largeConfig = UIImage.SymbolConfiguration(textStyle: .largeTitle)
let largeBolt = UIImage(systemName: "bolt", withConfiguration: largeConfig)

This ensures your icons work correctly alongside your other Dynamic Type code.

Save 50% on all books and bundles

The biggest ever Hacking with Swift sale is now on, letting you save 50% on all books and bundles. Learn something new with Swift and enjoy great savings while the sale lasts!

Click here to save 50% in our Black Friday sale!

Available from iOS 13.0