Swift: How to use SF Symbols

By

Learn how to use SF Symbols in SwiftUI, browse the current symbol library, and pass a symbol name to Label using the systemImage parameter.

~~~

When designing a TabView you have the option to add an icon for each tab using a system image, using the systemImage parameter to Label:

TabView {
    Text("First")
        .tabItem {
            Label("First", systemImage: "tray")
        }
}

In this case we use tray.

How do you find out which other icons you can use?

Apple created a free macOS app called SF Symbols. Download it from the SF Symbols page, install it, and use it to browse or search the thousands of available symbols.

Click a symbol to copy its name, then pass that name to systemImage.

Keep your deployment target in mind. Apple adds symbols and rendering features with new system releases, so a symbol shown by the latest app might not exist on an older version of iOS or macOS.

SF Symbols app interface showing categories sidebar and grid of symbols with names like square.and.arrow.up

Tagged: Swift ยท All topics
~~~

Related posts about swift: