SF Symbols guide for SwiftUI and UIKit

Available in iOS 13 and later, SF Symbols is an icons library provided by Apple that we can use in our iOS applications. Apple provides a lot of configuration options so we can adapt the icons to our apps needs.

SF Symbols 3 application to browse available symbols.

The image above shows the SF Symbols app that allows us to browse all available symbols and play around with different configurations. You can download SF Symbols 3 from Apple's developer portal.

Let's look at how we can then use these symbols in our app.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free

Showing a symbol image

To show a symbol, all we need to do is to copy the name of the symbol from the SF Symbols app and then initialize an image with it.

SwiftUI

Image(systemName: "cloud.moon.rain")

UIKit

UIImage(systemName: "cloud.moon.rain")

We can then apply different configurations to the image. In SwiftUI, there are several modifiers available to configure a symbol image.

SwiftUI

Image(systemName: "cloud.moon.rain")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.yellow, .mint)
    .font(Font.system(size: 60, weight: .bold))

In UIKit, we can use the UIImage.SymbolConfiguration type. The applying method can be used to combine different configurations into one.

UIKit

var config = UIImage.SymbolConfiguration(paletteColors: [.systemYellow, .systemMint])
config = config.applying(UIImage.SymbolConfiguration(font: .systemFont(ofSize: 42.0))
config = config.applying(UIImage.SymbolConfiguration(weight: .bold))

let image = UIImage(systemName: "cloud.moon.rain", withConfiguration: config)

Let's look at the different configuration possibilities and what they exactly do with the symbol.

Layers

Behind the scenes, each symbol consists of one, two, or three layers.

For example, the cloud.moon.rain symbol consists of three layers: the clouds, the moon and the rain are each represented by one layer.

Layers of the cloud.moon.rain symbol.

Depending on the rendering mode we chose, we can configure different colors for each layer.

Rendering modes

We can select between the following rendering modes to apply for the symbol:

Monochrome applies one color to the symbol.

SwiftUI

Image(systemName: "cloud.moon.rain")
      .foregroundColor(.teal)

UIKit

UIImage(systemName: "cloud.moon.rain")?.withTintColor(.systemTeal)

Hierarchical applies one color to the symbol, but using different opacity for each layer.

SwiftUI

Image(systemName: "cloud.moon.rain")
    .foregroundColor(.teal)
    .symbolRenderingMode(.hierarchical)

UIKit

UIImage.SymbolConfiguration(hierarchicalColor: .systemTeal)

Palette applies two or more colors to the symbol, using one color per layer. Specifying two colors for a symbol with three levels will use the same color for the secondary and tertiary layer.

SwiftUI

Image(systemName: "cloud.moon.rain")
      .foregroundStyle(.teal, .purple, yellow)

UIKit

UIImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemPurple, .systemYellow])

By assigning the palette colors, the .palette rendering mode is set automatically.

Multicolor applies system-defined intrinsic colors to some symbols to enhance meaning. It will not have an effect on every symbol.

SwiftUI

Image(systemName: "calendar.badge.plus")
      .foregroundColor(.teal)
      .symbolRenderingMode(.multicolor)

UIKit

UIImage.SymbolConfiguration.preferringMulticolor()

Fonts and weights

SF Symbols are designed not to be only used as standalone icons, but also together with text.

SwiftUI

Label("Welcome", systemImage: "tortoise")

UIKit

let attachment = NSTextAttachment()
attachment.image = UIImage(systemName: "tortoise")

let attributedString = NSMutableAttributedString(attachment: attachment)
attributedString.append(NSAttributedString(string: "Welcome"))

For this reason, sizes and weights of the symbols are configured by setting a font. So when used together with text, they match sizes and weights.

SwiftUI

Image(systemName: "tortoise")
    .font(Font.system(size: 60, weight: .bold))

UIKit

UIImage.SymbolConfiguration(font: .systemFont(ofSize: 32, weight: .bold))

Scales

Additionally to sizing symbols with fonts, we can configure their scale that sets the symbols size compared to its neighboring text. Available scales are: .small, .medium and .large.

SwiftUI

.imageScale(.large)

UIKit

UIImage.SymbolConfiguration(scale: .large)

Availability

Beware, some symbols are only available starting with iOS 14 or iOS 15. Also, some features explained above like hierarchical or palette color rendering are only available starting with iOS 15. We can check each symbols availability in the info tab of the SF Symbols app.

SF Symbols availability.

If some symbol is not available for our iOS version, we can export it from the SF Symbols app as an SVG template and bundle it with our iOS app. Beware, this procedure makes the symbol available (starting from iOS 13), but not the additional rendering modes.

Custom symbols

We also have the possibility to create our own custom symbols. If you are interested in doing that check out Apple's guide on creating custom symbol images.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free