1

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

enter image description here

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

enter image description here

user784637
  • 15,392
  • 32
  • 93
  • 156
  • Look at the accepted answer here https://stackoverflow.com/questions/19274789/how-can-i-change-image-tintcolor-in-ios-and-watchkit – Surjeet Singh Apr 25 '21 at 11:24
  • @Surjeet - that sets the color of the black portion of person.circle.fill, not the actual person inside the circle – user784637 Apr 25 '21 at 11:44

1 Answers1

1

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

SF Symbols app, inspecting person.circle.fill, but only option is Monochrome

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

Custom Symbol Template showing every possible variant of person.circle.fill

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
Setting font size inside Sketch Set Appearances to Single Scale

Usage:

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

Result:

Red person on black circle image, running on device

aheze
  • 24,434
  • 8
  • 68
  • 125