Combining SF Symbols

I recently ran into a problem. My Homebrew GUI, Cork, needed icons for the various states a background service can be: inactive, running, crashed, etc. I have already decided that I would use the icon square.stack to represent a service, but I needed more than just one icon to represent the various states.

This is where SF Symbols v. 5 came in really handy. You can take a base symbol, and combine it with various little “accessory“ symbols to create a new symbol. Let’s learn how to do that.

Step 1: Choose Base Symbol

First, you need to choose which symbol will be used as the base. This can be any symbol at all, but for this example, I will be using person.

Right-click the desired symbol and choose “Duplicate as Custom Symbol“.

This will put it in a special “Custom Symbols“ library, which you can find at the very bottom of the sidebar.

Step 2: Choose an Accessory Symbol

Now, in your “Custom Symbols“ library, you can right-click the desired symbol again and choose “Combine Symbol with Component…“. This will bring up a sheet where you can choose the accessory symbol to combine the main one with.

There are tons of options, like various enclosures, badged, and a slash. In this example, I’ll choose the triangle enclosure. If you’re feeling hard, you can choose “Select All“ in the sheet, which will create symbols with every single accessory.

---

Tip: If you want to create a symbol containing multiple accessory symbols, for example a person inside a triangle with a plus badge, you first have combine person with triangle, and then combine the combined person + triangle symbol once again with plus badge

---

Step 3: Export the Symbol

If you want to use this symbol in your apps, you have to somehow get it out of SF Symbols and into Xcode. To do that:

1. Click the symbol in SF Symbols

2. In the Menu Bar, choose “File” → “Export Symbol”

   

3. In the bottom left, choose which Xcode version to export the symbol for. Xcode 14 and 15 and fully supported.

4. Click “Export“
   

Step 4: Import the Symbol into Xcode

Now we need to switch over to Xcode.

1. Open the “Assets“ catalog in the sidebar of your project

2. In the bottom left, click the plus icon and select “Symbol Image Set“

   

   
   

3. Name the symbol whatever you’d like. You’ll need to use this name when referring to this symbol, so I prefer to call it the same as the custom symbol; in this case, custom.person.triangle

4. Drag the symbol onto the “Symbol SVG” box

Step 5: Use the Custom Symbol

Now we finally get to use the symbol in our app. Unlike built-in symbols, we can’t use Image(systemName: String), since our symbol is not “built into the system“. Instead, we have to use Image(String), where String is the name of the symbol.

So, in my case, I had to use Image(“custom.person.triangle“).

Full code of my demo:

struct ContentView: View
{
    var body: some View
    {
        VStack
        {
            Image("custom.person.triangle")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 300)
        }
    }
}

And that’s it! You just created your own custom SF Symbol.

---

Final Tip: If you don’t want to keep writing custom.person.triangle everywhere you use the symbol, you can write and extension on String, which will let you use the enum dot notation instead:

extension String
{
    static let personTriangleIcon = "custom.person.triangle"
}

struct ContentView: View
{
    var body: some View
    {
        VStack
        {
            Image(.personTriangleIcon)
        }
    }
}

Failed to render LaTeX expression — no expression found