SF symbol usage

Why SF symbol

On Apple SF symbol website, many development-friendly advantages are addressed:

• With over 4,400 symbols in total, SF Symbols 4 features over 1000 new symbols, variable color, automatic rendering, and new unified layer annotation.
• Symbols come in nine weights and three scales, and automatically align with text labels.
• They can be exported and edited using vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features.
• Color can now be dynamically applied to system and custom symbols using a percentage value to convey strength or progress over time.
• Many symbols use hierarchical rendering automatically for added depth and detail without needing to specify a rendering mode.
• Custom symbols feature a shared layer structure across rendering modes making annotation faster and easier. Layer annotations can be viewed at a glance in the new preview area.

In a word, SF symbols are so easy to use. We don’t even need to install anything in Xcode, they just come with SwiftUI.

Before getting started, you should download SF symbol app. You don’t need it to render SF symbols in Xcode, but you would find it so convient for quick look-up and name-copy.

Basic usage

To add a SF symbol in your SwiftUI app , simply write down:

1

Image(systemName: "externaldrive.badge.plus")

To create the most commonly seen icon-text view everywhere in your iPhone, simply write down:

1

Label("Please try again", systemImage: "xmark.circle")

If you want to put SF symbol inside a line of text:

1

Text("Please press the \(Image(systemName: "calendar")) button")

Size, weight

You can adjust the size in either of the following ways:

1
2
3
4
5

Image(systemName: "airplane")
    .font(.largeTitle)

Image(systemName: "house")
    .font(.system(size: 72))

You can adjust the weight:

1
2

Image(systemName: "keyboard")
    .font(.largeTitle.weight(.black))

Color

You can render a hierarchical SF Symbol like this:

1
2
3

Image(systemName: "square.stack.3d.down.right.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.indigo)

You can enable multicolor SF Symbols like this:

1
2
3
4
5
6
7

// iOS15 or later
Image(systemName: "externaldrive.badge.plus")
    .symbolRenderingMode(.multicolor)

// iOS14
Image(systemName: "externaldrive.badge.plus")
    .renderingMode(.original)

Adjustment

1
2
3
4
5
6
7
8

Image(systemName: "bell")
    .symbolVariant(.slash)

Image(systemName: "bell")
    .symbolVariant(.square)

Image(systemName: "bell")
    .symbolVariant(.fill.slash)

There is also a .none option that renders the original image, which is helpful if you need to move between two states of the icon. For example, this flips a toggle between two states

1
2
3
4
5
6
7
8
9
10
11

struct ContentView: View {
    @State private var showingAlerts = true

    var body: some View {
        Toggle(isOn: $showingAlerts) {
            Label("Show Alerts", systemImage: "bell")
                .symbolVariant(showingAlerts ? .none : .slash)
        }
        .toggleStyle(.button)
    }
}

VoiceOver

Many SF Symbols have useful VoiceOver labels by default, such as “heart” being read out as “love” and “calendar.badge.plus” being read as “add to calendar.”

However, many other icons don’t have such built-in names, including complex icons such as “arrowshape.turn.up.backward.circle”. In these circumstances you should set a custom accessibility label describing the content for VoiceOver.

In SwiftUI, you attach a custom accessibility label to an SF Symbol like this:

1
2

Image(systemName: "arrowshape.turn.up.backward.circle")
    .accessibilityLabel("Go back")

If you’re using a label, VoiceOver will use your label’s text even if it isn’t currently being displayed.

Tip: You can also place your accessibility label into your Localizable.strings file using the same name as the SF Symbol, and SwiftUI will use that instead.

Adapt to context

In iOS 15 and later many SF Symbols automatically adapt to how they are used, including the way the “signature” symbol changes to match various localizations such as Japanese or Hebrew.

However, SwiftUI has one power feature that UIKit lacks, which is the ability to render SF Symbols according to their context. This is most important inside TabView, where the correct variant of a symbol is system-dependent: on iOS Apple’s human interface guidelines recommend filled icons, whereas on macOS they recommend using strokes instead.

SwiftUI does something clever here: if you use an SF Symbol for a tab item, you shouldn’t specify whether it’s filled or not – it will automatically adapt based on the system.

So, this will create a tab item using a filled person symbol on iOS, but a stroked person on macOS:

1
2
3
4
5
6
7

TabView {
    Text("Your View Here")
        .tabItem {
            Label("Home", systemImage: "person")
                .symbolVariant(.none)
        }
}

Reference

The Complete Guide to SF Symbols – Hacking with Swift