Add an Icon from SF Symbols in SwiftUI

Written by Team Kodeco

SF Symbols is a set of thousands of configurable symbols designed to integrate seamlessly with Apple’s system fonts. To add an SF Symbol icon in SwiftUI, you pass the systemName argument to an Image view, providing the name of the symbol you want to use.

For example, to add a pawprint icon, you can use the following code:

struct ContentView: View {
  var body: some View {
    Image(systemName: "pawprint.circle.fill")
      .font(.largeTitle)
      .foregroundColor(.blue)
  }
}

The preview should look as follows:

Here’s what this code does:

• Image(systemName: "pawprint.circle.fill") creates an Image view with a system-provided image. The systemName argument indicates that the image is one of Apple’s SF Symbols, which are a set of thousands of consistent, highly configurable symbols you can use in your app. In this case, it is using the pawprint.circle.fill symbol.

• .font(.largeTitle) sets the size of the symbol to match the large title size.

• .foregroundColor(.blue) sets the foreground color of the image to blue.

Adjusting SF Symbol Variants

Some SF Symbols come with a variety of variants that you can easily adjust in SwiftUI using the symbolVariant modifier. For example, you might want to render a bell icon with a slash through it, or even surround the bell with a square.

Here’s how you can do it:

struct ContentView: View {
  var body: some View {
    VStack(spacing: 16) {
      // This renders a bell icon with a slash through it
      Image(systemName: "bell")
          .symbolVariant(.slash)

      // This surrounds the bell with a square
      Image(systemName: "bell")
          .symbolVariant(.square)

      // This renders a bell icon with a slash through it and fills it
      Image(systemName: "bell")
          .symbolVariant(.fill.slash)
    }
  }
}

Your preview should look like:

Here, ContentView contains a VStack of images, each with a different variant of the “bell” SF Symbol.

• The first image renders the “bell” symbol with a slash through it. This is done using the .symbolVariant(.slash) modifier.

• The second image surrounds the “bell” symbol with a square. This is achieved using the .symbolVariant(.square) modifier.

• The third image renders the “bell” symbol with a slash through it and fills the bell. This is accomplished by combining two variants using .symbolVariant(.fill.slash).

Adjusting SF Symbol Variants allows for greater flexibility when using SF Symbols and enables you to adjust the icon’s appearance to suit your app’s design and functionality.

Making SF Symbols Adapt to Their Context

One key feature that SwiftUI offers is the ability to render SF Symbols according to their context. This is especially 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 a rounded-rectangle shape.

SwiftUI handles this cleverly: 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.

Consider the following example:

struct ContentView: View {
  var body: some View {
    TabView {
      Text("Your View Here")
        .tabItem {
          Label("Home", systemImage: "person")
            .symbolVariant(.none)

        }
      
      Text("Your Activity View Here")
        .tabItem {
          Label("Activity", systemImage: "bell")
            .symbolVariant(.none)
        }
    }
  }
}

Run it on your iOS Simulator and you should see the following:

Now change the development to macOS and your view looks like:

And no code changes necessary! 🤯

In this example, a tab item using the “person” symbol will appear filled on iOS, but rounded on macOS, allowing for a native look and feel on both platform.

Browsing and searching SF Symbols

To see all the SF Symbol choices within Xcode and search for the perfect one, you use with Command-Shift-L to display the SwiftUI Library. Use the search bar at the top to filter what’s displayed. Double-click a symbol or drag it into your file to try it out in a view.

As you learn more about SF Symbols, you’ll also want to download Apple’s SF Symbols app. This lets you explore color variations, rendering modes and layers, providing many interesting design opportunities.