How to set the tint inside of a UIButton using a system icon image?

Question

I'm setting the image of my UIButton to a system icon

Is there a way to set the color inside of the button like this?

Answer 1

Unfortunately there is no built-in way to do this, because the person.circle.fill symbol does not support multicolor:

You could create a custom symbol and add color there, but this is a lot of work... you'd need to modify each variant.

Instead, I would just

1. Command + C to copy the symbol, in the SF Symbols app
2. Paste it into a vector design app like Sketch
3. Modify the font size there
4. Right-click -> Convert to outlines
5. Add your color
6. Export as SVG, and drag it into Xcode
7. Set "Appearances" in the Attributes Inspector for the image to Single Scale

Steps 1-6	Step 7

Usage:

struct ContentView: View {
    var body: some View {
        Image("person.circle.fill")
            .resizable()
            .frame(width: 50, height: 50)
    }
}

Result: