SF Symbols List: How to find all available SwiftUI System Images

In SwiftUI development, SF Symbols are a library of scalable and customizable system icons provided by Apple. These symbols serve as a convenient and consistent way to incorporate icons into your SwiftUI and UIKit apps for example with SwiftUI Label. In this blog post, I will show you how to easily find a full list of all SF Symbols and how to use them with SwiftUI Image.

SF Symbols are designed to be easily customizable, allowing you to change their color, size, and weight to fit your app’s specific needs.

Using the SF Symbols App to Get a Full List of All System Images

To help developers easily access and utilize all available SF Symbols in SwiftUI, Apple has provided the SF Symbol app. 

Download SF Symbols 5 app directly from the Apple Developer Website.

The SF Symbol app organizes symbols into different categories and subcategories, making it simple to find the specific icon you need for your SwiftUI project.  You can see the categories listed in the left sidebar. 

The app has a search feature in the top left corner:

Some icons you might want to access quite frequently. You can create a library and collect them, so that you can find them faster next time:

If you tap on an icon and open the detail sidebar, you can find informtion about the availablity. Apple has added more and more icons over the years:

 Additionally, the app includes symbols with color variants, which you can see if you press the brush in tab in the detail sidebar:

You will need to get the exact string of the symbol. A quick way is to right-click on the icon and select “Copy Name”. You can then past the name into your Xcode file:

Searching for Icons in the Xcode Library

You can easily add an icon in Xcode by using the Xcode Library. Press the plus button in the top left corner of Xcode. In the pop-up window select the icon tab:

Double-tapping on your chosen icon will close the library and add the icon name to your Swift file.

Xcode will also show you the availability of these icons. In the above example, you can see that the icon was added for iOS 14, etc.

Get Hands-on with SwiftUI Layout.

Master SwiftUI layouts with real-world examples and step-by-step guide. Building Complex and Responsive Interfaces.

Get the FREE Mini Book

How to Add System Images in SwiftUI

Once, you have the icon name, you can easily add it to your SwiftUI code by using the Image with systemName initializer:

let heartImage = Image(systemName: "heart.fill")

Similarly, you can also use these icons in UIKit with UIImage:

let heartImage = UIImage(systemName: "heart.fill")

You can customize system images by changing their foreground color. If you want to use variants, you need to set the symbol rendering mode to hierarchical or pallet: 

import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "square.and.arrow.down.on.square")
            Image(systemName: "square.and.arrow.down.on.square")
               // .symbolRenderingMode(.monochrome)
                  .foregroundColor(.blue)
            Image(systemName: "square.and.arrow.down.on.square")
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(.blue)
            Image(systemName: "square.and.arrow.down.on.square")
                //.symbolRenderingMode(.palette)
                .foregroundStyle(Color.pink, Color.green)
        }
        .font(.system(size: 70))
    }
}

System images can be sized by adding the font size modifier. They behave like Text. This is also useful when you want to use icons together with text for example for SwiftUI Label. The will also adjust for dynamic type variants:

Label("Swifty", systemImage: "swift")

Conclusion

In this blog post, we explored the world of SF Symbols in SwiftUI development.  SF Symbols are a powerful library of scalable and customizable system icons provided by Apple. By using the SF Symbols app, developers can easily access a full list of all available system images and organize them into custom libraries for faster access. We also discovered how to search for icons in the Xcode library and add them to our SwiftUI code using the Image(systemName:) initializer. Additionally, you saw how to change color, size, and rendering mode for SF Symbols.

Now that you have a clear understanding of SF Symbols and how to use them in SwiftUI, you can confidently incorporate these versatile icons into your app designs. Happy coding!

Further Reading:

• Master SwftUI Images
• See examples for image collections views with ScrollView: How to use SwiftUI ScrollView
• Loading Images from a server with AsyncImage