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.

fining system images in the sf symbol app

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:

sf symbol list with custom library

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:

sf symbol availability

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

sf symbol color variants

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.

Free SwiftUI Layout Book

Get Hands-on with SwiftUI Layout.

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

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))
    }
}
Example of a system symbol image using the Image(systemName:) initializer in SwiftUI with different symbols rendering modes.

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")
swiftui label adapts to dynamic type size

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:

4 thoughts on “SF Symbols List: How to find all available SwiftUI System Images”

  1. I was looking everywhere for the full list, thanks for this information. I have the list available now in the app. I would have preferred it in a web page rather than taking up space in my laptop, but anyhow, however its available!

    Reply

Leave a Comment

Subscribe to My Newsletter

Want the latest iOS development trends and insights delivered to your inbox? Subscribe to our newsletter now!

Newsletter Form
15585

99 PROVEN SwiftUI TIPS FOR iOS Developers

Get latest tips and strategies to boost your apps

15856

SUBSCRIBE TO OUR

NEWSLETTER

JOIN THE ELITE CLUB

WELCOME,

Enjoy luxury, exclusivity and discretion

NOW TREAT YOURSELF!

Get 25% Off & Free Shipping On Your First Order. Enter Code WELL25SPE