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

WWDC20 · 19 min · SwiftUI & UI Frameworks / Design

SF Symbols 2

SF Symbols make it easy to adopt high-quality, Apple-designed symbols created to look great with San Francisco, the system font for all Apple platforms. Discover how you can use SF Symbols in AppKit, UIKit, and SwiftUI. Learn how to work with SF Symbols in common design tools and how to use them in code. And we’ll walk you through the latest updates, including additions to the repertoire, alignment improvements, changes with right-to-left localization, and multicolor symbols. This session focuses on the latest features in SF Symbols 2. While not required, we recommend watching "Introducing SF Symbols" from WWDC19. If you’re planning to incorporate symbol assets into SwiftUI, you may also benefit from watching “Building Custom Views with SwiftUI."

Watch at developer.apple.com ↗

Transcript all transcripts

Code shown on screen · 12 snippets

Symbol usage demo, part 1 swift · at 5:29 ↗ 
// SF Symbols: simple usage and symbol configuration

import UIKit

class MainPlayerViewController: UIViewController {

    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var shuffleButton: UIButton!
    @IBOutlet weak var playImageView: UIImageView!
    @IBOutlet weak var shuffleImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButtons()
    }

    func setupButtons() {
        playImageView.image = UIImage(systemName: "")
        shuffleImageView.image = UIImage(systemName: "")
    }

    @IBAction func playAction(_ sender: Any) {
    }
    
    @IBAction func shuffleAction(_ sender: Any) {
    }
    
}
Symbol usage demo, wrong string to initializer swift · at 6:07 ↗ 
// do NOT use symbol characters in code

let shuffleImage = UIImage(systemName: "􀊝")






// always use symbol names in code

let shuffleImage = UIImage(systemName: "shuffle")
Symbol usage demo, scales swift · at 7:01 ↗ 
// SF Symbols: simple usage and symbol configuration

import UIKit

class MainPlayerViewController: UIViewController {

    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var shuffleButton: UIButton!
    @IBOutlet weak var playImageView: UIImageView!
    @IBOutlet weak var shuffleImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButtons()
    }

    func setupButtons() {
        let buttonConfig = UIImage.SymbolConfiguration(scale: .small)
        playImageView.preferredSymbolConfiguration = buttonConfig
        playImageView.image = UIImage(systemName: "play.fill")
        shuffleImageView.preferredSymbolConfiguration = buttonConfig
        shuffleImageView.image = UIImage(systemName: "shuffle")
    }

    @IBAction func playAction(_ sender: Any) {
    }
    
    @IBAction func shuffleAction(_ sender: Any) {
    }
    
}
Symbol usage demo, textStyles swift · at 7:13 ↗ 
// SF Symbols: simple usage and symbol configuration

import UIKit

class MainPlayerViewController: UIViewController {

    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var shuffleButton: UIButton!
    @IBOutlet weak var playImageView: UIImageView!
    @IBOutlet weak var shuffleImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButtons()
    }

    func setupButtons() {
        let buttonConfig = UIImage.SymbolConfiguration(textStyle: .headline, scale: .small)
        playImageView.preferredSymbolConfiguration = buttonConfig
        playImageView.image = UIImage(systemName: "play.fill")
        shuffleImageView.preferredSymbolConfiguration = buttonConfig
        shuffleImageView.image = UIImage(systemName: "shuffle")
    }

    @IBAction func playAction(_ sender: Any) {
    }
    
    @IBAction func shuffleAction(_ sender: Any) {
    }
    
}
SwiftUI symbol usage swift · at 7:44 ↗ 
// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "shuffle")
            .font(.headline)
            .imageScale(.small)
    }
}
SF Symbols in SwiftUI (Label) swift · at 8:10 ↗ 
// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Sharing location", 
              systemImage: "location.fill")
    }
}
SF Symbols in SwiftUI (Text + Image) swift · at 8:12 ↗ 
// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        let glyph = Image(systemName: "location.fill")
        return Text("\(glyph) Sharing location")
    }
}
Using SF Symbols in AppKit swift · at 8:52 ↗ 
// Using SF Symbols in AppKit

if let shuffleImage = NSImage(
    systemSymbolName: "shuffle", accessibilityDescription: "shuffle") {
    shuffleImageView.image = shuffleImage
  
    // Configure symbols
    let config = NSImage.SymbolConfiguration(textStyle: .body, scale: .small)
    let shuffleButtonImage = shuffleImage.withSymbolConfiguration(config)
}
Symbol initializer for old and new templates swift · at 11:45 ↗ 
// loading symbols from Template V1 and V2

let shuffleImage = UIImage(systemName: "shuffle")
Tinting symbols in AppKit swift · at 15:44 ↗ 
// Tinting symbols

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = true
}

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = false
}
Using symbols in AppKit, recap swift · at 18:10 ↗ 
// Using SF Symbols in AppKit

if let shuffleImage = NSImage(
    systemSymbolName: "shuffle", accessibilityDescription: "shuffle") {
    shuffleImageView.image = shuffleImage
  
    // Configure symbols
    let config = NSImage.SymbolConfiguration(textStyle: .body, scale: .small)
    let shuffleButtonImage = shuffleImage.withSymbolConfiguration(config)
}
Using color symbols recap swift · at 18:24 ↗ 
// Tinting symbols

folder.isTemplate = true

folder.isTemplate = false