How to Create a Custom SF Symbol using Colors

Using SF Symbols is a fast and easy way to add icons to your app without the extra weight of adding your own custom icons. With over 4,000 icons currently in SF Symbols, you’re bound to find something that will work for your situation.

Apple says

For more information on SF Symbols from Apple, please check out the Human Interface Guidelines at the following link: https://developer.apple.com/design/human-interface-guidelines/sf-symbols/

Don’t Forget to checkout the SF Symbols app at this link: https://developer.apple.com/sf-symbols/

Finding a SF Symbol to use

There are a few ways to find a SF Symbol, one way is to use the SF Symbols app that was mentioned above in the Apple says section.

The other is to use the symbol library in Xcode. If you aren’t sure how to find this, you can learn more about the Xcode interface from this article in the Adding Built In Images section: https://medium.com/@jpmtech/basics-of-swiftui-c8eab0edf13b

In our example, we will use the symbol with the name of “person.3.sequence.fill”. We will also make the symbol resizable, set an aspectRatio mode, and add a frame to make it easier to see in our preview window (but this is not required to make these examples work).

Common ways to change the color of a symbol

There are a few common ways that you may already know about to change the color of an SF Symbol. The most common way would be to add the “.foregroundColor” modifier. This will make the entire symbol a single color. This may be what you want, but doesn’t give us much control over how the icon looks.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "person.3.sequence.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100, height: 100)
            .foregroundColor(.red)
    }
}

There are also different rendering modes that can be use to give the icons a slightly different color such as hierarchical (which gives you varying shades of a color) and multicolor (which gives you a default multicolored scheme for a symbol if it is available). However, both of these options still don’t give us the level of control we are looking for, which leads us our next option.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "person.3.sequence.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100, height: 100)
            .symbolRenderingMode(.hierarchical)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

You can also mix the foregroundStyle modifier with rendering modes (like the hierarchical mode). You can see what this would look like below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "person.3.sequence.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100, height: 100)
            .foregroundColor(.red)
            .symbolRenderingMode(.hierarchical)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Customizing the color of SF Symbols

When we want to customize the colors of a symbol, we can use the “.foregroundStyle” modifier. This modifier allows us to add up to 3 custom colors that apply to the various layers of the symbol. This also means that if you are using a symbol that doesn’t have more than one layer (meaning it doesn’t support the hierarchical rendering mode), then this option could give you the same output that you would see when using the “.foregroundColor” modifier.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "person.3.sequence.fill")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100, height: 100)
            .foregroundStyle(.red, .green, .blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

It is also possible to duplicate a symbol to create your own custom version of an existing symbol. This would allow you to move various parts of the symbol to their own layers. However, we won’t cover that option in this tutorial.

If you got value from this article, please consider following me to get more great Swift content in the future.

If you have any questions on the topic, or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it.

If you want to learn more about Swift and SwiftUI, you can check out the other articles I have written here: https://medium.com/@jpmtech

If you want to see apps that have been built with Swift and SwiftUI, you can check out my apps here: https://jpmtech.io/apps

Thank you for taking the time to make it this far. Have a great day!