How to Find All Available SF Symbols in SwiftUI

Why this happens

When working with Image(systemName:) in SwiftUI or UIImage(systemName:) in UIKit, developers often guess symbol names based on tutorials (like "star.fill" or "chevron.right"). Apple does not expose SF Symbols as a built-in static enumeration in the Swift standard library or the SwiftUI framework. Because the initializer takes a raw String, Xcode cannot automatically provide complete autocompletion for thousands of glyph variants.

In addition, Apple introduces new SF Symbols with each major iOS release. A symbol introduced in iOS 17 or iOS 18 will fail to render or silently return a blank placeholder when executed on an earlier iOS version if you do not check deployment targets or provide fallbacks.

To build clean interfaces without runtime display bugs, you need reliable ways to inspect the complete catalog, verify OS availability, and paste valid symbol identifiers directly into your views.

How to fix it

1. Browse the Official SF Symbols macOS App

The most comprehensive way to explore every system image is Apple’s dedicated SF Symbols app. It displays the entire catalog alongside metadata, category filters, and rendering configurations.

1. Download the latest version of SF Symbols from Apple Developer Downloads (developer.apple.com/sf-symbols).
2. Open the application. Use the left sidebar to filter by category (such as Communication, Weather, Commerce, or Arrows).
3. Use the search bar in the top-right corner to look up keywords like trash, gear, cloud.sun, or magnifyingglass.
4. Select any symbol to inspect its minimum OS requirements (iOS, iPadOS, macOS, watchOS, tvOS, and visionOS) in the inspector panel on the right.
5. Right-click the icon and choose Copy Name (or press Command + C) to copy the exact string identifier to your clipboard.

Paste the identifier directly into your SwiftUI view:

import SwiftUI

struct ProfileHeaderView: View {
    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: "person.crop.circle.fill")
                .font(.system(size: 40))
                .foregroundStyle(.blue)

            Text("Developer Account")
                .font(.headline)
        }
    }
}

2. Search Symbols Directly in the Xcode Library

If you prefer not to leave Xcode, you can access the built-in Symbols inspector inside the Xcode Library overlay.

1. In Xcode, open any SwiftUI view file in the editor.
2. Press Command + Shift + L (or select View > Show Library from the menu bar).
3. Click the Symbols tab (represented by a star icon or the fifth tab in the bar).
4. Type your keyword into the search bar at the top of the pop-up sheet.
5. Double-click the icon or drag it directly into your code editor. Xcode automatically inserts Image(systemName: "<symbol-name>").

struct SettingsRow: View {
    var body: some View {
        Label("Privacy & Security", systemImage: "hand.raised.fill")
            .foregroundStyle(.primary)
    }
}

3. Handle Backward Compatibility and Missing Icons

When your app supports older iOS versions, using a newer SF Symbol on an older runtime causes the symbol to fail silently. In SwiftUI, Image(systemName:) produces an empty view if the identifier is not found on the active OS version.

To avoid blank icons on older platforms, check version availability using #available:

import SwiftUI

struct ShareStatusView: View {
    var body: some View {
        if #available(iOS 17.0, *) {
            Image(systemName: "shared.with.you")
                .font(.title2)
        } else {
            Image(systemName: "person.2.fill")
                .font(.title2)
        }
    }
}

Alternatively, if you require a newer symbol to display consistently on older operating systems:
1. Open the SF Symbols macOS app.
2. Select the symbol and choose File > Export Custom Symbol Template…
3. Save the .svg template file.
4. Open your Xcode project’s Assets.xcassets catalog.
5. Drag the exported SVG file into the asset catalog.
6. Reference it as a standard asset image instead of a system image:

Image("custom.shared.symbol")
    .renderingMode(.template)

4. Apply Multi-Color and Hierarchical Styling

SF Symbols support multiple rendering layers. Knowing how each symbol renders ensures you select the correct glyph for your UI:

import SwiftUI

struct SymbolStylingExample: View {
    var body: some View {
        VStack(spacing: 20) {
            // Hierarchical rendering with opacity levels
            Image(systemName: "cloud.sun.rain.fill")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
                .font(.system(size: 36))

            // Palette rendering with custom layer colors
            Image(systemName: "person.3.sequence.fill")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .green, .orange)
                .font(.system(size: 36))

            // Multicolor rendering using Apple's default asset palette
            Image(systemName: "paintpalette.fill")
                .symbolRenderingMode(.multicolor)
                .font(.system(size: 36))
        }
    }
}

How to prevent it

• Check OS Availability in the SF Symbols App: Always verify the “Availability” metadata in the inspector sidebar before committing a symbol string to a project with a lower deployment target.
• Use Type-Safe Constants or Enums: Wrap frequently used system names in a static struct or enum to prevent silent spelling typos across multiple source files.
• Verify Fallback Assets: If targeting older devices, run your application in an older simulator (e.g., iOS 15 or 16) to verify that icons do not render as invisible empty spaces.
• Keep the SF Symbols App Updated: Update the app alongside major Xcode releases to access new icons and symbols added in modern SDKs.

FAQ

What happens if I misspell a name in Image(systemName:)?

SwiftUI does not throw a compile-time error when an invalid name is passed because the initializer accepts a standard String. At runtime, SwiftUI renders an empty view without crashing, which can lead to unexpected UI gaps.

Can I use SF Symbols in commercial App Store applications?

Yes. Apple permits using SF Symbols within apps distributed on Apple platforms. However, specific proprietary symbols (such as Apple device hardware icons like airpods or applewatch) may only be used to reference Apple technologies and services.

How can I make SF Symbols scale automatically with Dynamic Type?

Use the .font() modifier instead of .resizable() and .frame(). For example, Image(systemName: "gear").font(.body) scales automatically whenever the user adjusts their system text size in iOS Settings.