Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

WWDC21 · 11 min · SwiftUI & UI Frameworks / Design

SF Symbols in SwiftUI

Discover how you can incorporate SF Symbols into your SwiftUI app. We’ll explore basic techniques for presenting symbols, customizing their size, and showing different variants. We’ll also take you through the latest updates to symbol colorization and help you pick the right tool for your app’s needs.

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 12 snippets

Creating Symbols swift · at 0:45 ↗ 
// System symbol image
Image(systemName: "heart")

// System symbol label
Label("Heart", systemImage: "heart")

// Custom symbol image
Image("queen.heart")

// Custom symbol label
Label("Queen of Hearts", image: "queen.heart")
Accessibility Label swift · at 2:33 ↗ 
Image(systemName: "heart")
    .accessibilityLabel("Ace of Hearts")

Image(systemName: "person.circle")
    .accessibilityLabel("Profile")

Image("queen.heart")

// Localizeable.strings
"queen.heart" = "Queen of Hearts";
Symbol in Text swift · at 2:59 ↗ 
Text("""
    Thalia, Paul, and
    3 others \(Image(systemName: "chevron.forward"))
""")
Customizing Color swift · at 3:14 ↗ 
Label("Heart", systemImage: "heart")

Label("Heart", systemImage: "heart")
    .foregroundStyle(.red)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.tint)

Label("Heart", systemImage: "heart")
    .foregroundStyle(.secondary)
Customizing Font swift · at 3:51 ↗ 
Label("Heart", systemImage: "heart")
    .font(.body)

Label("Heart", systemImage: "heart")
    .font(.caption)

Label("Heart", systemImage: "heart")
    .font(.system(size: 10))
Customizing Scale swift · at 4:08 ↗ 
Label("Heart", systemImage: "heart")
    .imageScale(.large)

Label("Heart", systemImage: "heart")
    .imageScale(.medium)

Label("Heart", systemImage: "heart")
    .imageScale(.small)
Customizing Variants swift · at 4:23 ↗ 
TabView {
    Text("Cards").tabItem {
        Label("Cards", systemImage: "rectangle.portrait.on.rectangle.portrait")
    }
    Text("Rules").tabItem {
        Label("Rules", systemImage: "character.book.closed")
    }
    Text("Profile").tabItem {
        Label("Profile", systemImage: "person.circle")
    }
    Text("Magic").tabItem {
        Label("Magic", systemImage: "sparkles")
    }
}
Monochrome swift · at 5:12 ↗ 
List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)
Multicolor swift · at 6:41 ↗ 
List {
    Label("Ace of Hearts", systemImage: "suit.heart")
    Label("Ace of Spades", systemImage: "suit.spade")
    Label("Ace of Diamonds", systemImage: "suit.diamond")
    Label("Ace of Clubs", systemImage: "suit.club")
    Label("Queen of Hearts", image: "queen.heart")
}
.symbolVariant(.fill)
.symbolRenderingMode(.multicolor)
Hierarchical Rendering Mode swift · at 7:10 ↗ 
HStack {
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.top.fill")
    }
    Button(action: {}) {
        Image(systemName: "square.3.stack.3d.bottom.fill")
    }
}
.symbolRenderingMode(.hierarchical)
Palette Rendering Mode swift · at 7:50 ↗ 
Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .yellow, .red)
Advanced Foreground Styles swift · at 9:00 ↗ 
Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .red)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.white, .secondary)

Button(action: {}) {
    Image(systemName: "arrow.uturn.backward")
}
.symbolVariant(.circle.fill)
.foregroundStyle(.red, .regularMaterial)

Resources