CustomSymbols

How to Use Your Custom SF Symbol in UIKit, AppKit and SwiftUI

After creating your custom SF Symbol, drop it into your project's asset catalog in Xcode. This file is usually named Assets.xcassets. You can then start using your custom symbol in the language of your choice. Examples for UIKit and SwiftUI can be found below.

UIKit

Using custom SF Symbols in UIKit is pretty straightforward. Just create a UIImage instance and configure it using UIImage.SymbolConfiguration.

// Create custom symbol image with font size 17, bold weight, and large scale.
let customSymbol:UIImage? = UIImage(named: "MyCustomSymbolName")?
    .applyingSymbolConfiguration(
        UIImage.SymbolConfiguration(
            pointSize: 17,
            weight: .semibold,
            scale: .large
        )
    )

AppKit

let customSymbol:NSImage? = NSImage(named: "MyCustomSymbolName")?
    .withSymbolConfiguration(
        NSImage.SymbolConfiguration(
            pointSize: 24,
            weight: .bold,
            scale: .large
        )
    )

        

SwiftUI

You can also use your custom symbols in SwiftUI fairly easily.

struct ContentView: View {
    var body:some View {
        VStack {
            // Your custom symbol at Medium scale, Regular weight
            Image("myCustomSymbolName")

            // Your custom symbol at large scale, 24pt font and Heavy weight
            Image("myCustomSymbolName")
                .imageScale(.large)
                .font(Font.system(size: 24, weight: .heavy))
        }
    }
}

When your custom symbol is placed adjacent to some text in an HStack, pass .firstTextBaseline in the alignment parameter. This ensures that your custom symbol renders with its proper cap & base lines.

struct ContentView: View {
    var body:some View {
        VStack {
            HStack(alignment: .firstTextBaseline) {
                Text("Some Text")
                Image("myCustomSymbolName")
            }
        }
    }
}

You can also display your custom symbol inline with some text as described here.

struct ContentView: View {
    var body:some View {
        VStack {
            (Text("Some Text ")
                + Text(Image("myCustomSymbolName"))
                + Text(" more text")).imageScale(.large)
        }
    }
}

More Information: