Swift: How to use SF Symbols

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

TabView {
    Tab("First", systemImage: "tray") {
        Text("First")
    }
}

In this case we use tray.

You can also pass the same name to a Label with systemImage, which is what older .tabItem examples still do.

Outside tabs, the usual path is Image(systemName:):

Image(systemName: "tray")

A symbol behaves a lot like text: .font sets its size and .foregroundStyle its color. Many symbols are drawn in layers, and .symbolRenderingMode(.hierarchical) uses those layers to add some depth:

Image(systemName: "tray")
    .font(.largeTitle)
    .foregroundStyle(.blue)
    .symbolRenderingMode(.hierarchical)

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 available symbols. Apple ships a new version every year with the new OS releases. When I took the screenshot below the library had about 3,300 symbols, today it’s over 7,000.

Click a symbol to copy its name, then pass that name to systemImage or Image(systemName:).

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. On a device that doesn’t have that symbol, Image(systemName:) renders nothing and Xcode logs a warning. The app shows the minimum OS version for each symbol in its inspector.

Want me to talk about your product? You can sponsor this site.