Change the stroke/fill color of SF Symbol icon in SwiftUI?

Question

I am looking for a way to change the stroke / fill color of an SF Symbol icon in SwiftUI.

I have tried .background(Color.red) but that just changes the background of the whole icon (no change is applied to the actual icon itself) as implied. I also tried .foregroundColor(Color.red)which does nothing to the icon.

contents of content view are as follows:

var body: some View {
    Image(systemName: "person.circle").foregroundColor(.red)    
}

Answer 1

You can change the stroke and fill color of a sf symbol icon using foregroundColor(_ color: Color?)

The following code:

Image(systemName: "flame.fill").foregroundColor(.red)

Image(systemName: "flame").foregroundColor(.red)

Should produce this:

Here is the complete SwiftUI View Code

struct Icon : View {
    var body: some View {
        HStack{
            Image(systemName: "flame.fill")
            .foregroundColor(.red)
            Image(systemName: "flame")
            .foregroundColor(.red)
        }
        .padding()
    }
}

Answer 2

iOS 15

from iOS 15 and with the SFSymbols 3, you can apply different layers of colors to a single symbol with the foreground style modifier:

Image(systemName: "person.circle")
    .resizable()
    .foregroundStyle(.red, .blue)
    .frame(width: 200, height: 200, alignment: .center)

---

iOS 13 and 14

You can use a ZStack with different parts of the icon and apply different modifiers to each layer like:

///  I've used `GeometryReader ` for setting the size of elements dependent on each other

GeometryReader { proxy in 
    ZStack {
        Image(systemName: "circle")
            .resizable()
            .foregroundColor(.blue)

        Image(systemName: "person.fill")
            .resizable()
            .foregroundColor(.red)
            .frame(
                   width: proxy.size.width * 0.55,
                   height: proxy.size.width * 0.55,
                   alignment: .center
            )
    }
}.frame(width: 200, height: 200, alignment: .center)

_{Note that the old and new methods look slightly different but feel the same. (take a closer look at the roundness of the head)}

Answer 3

iOS 15+

In iOS 15 we can use foregroundStyle to customise SF Symbols even more:

Image(systemName: "cloud.sun.bolt")
    .foregroundStyle(.gray, .blue)

---

See more at this WWDC session:

Answer 4

One trick I figured out that works nicely for iOS 14 is to use the fill and non fill versions together to get two colors regardless of whether 14 or 15:

ZStack {
    Image(systemName: "person.circle")
        .foregroundColor(.white)
    Image(systemName: "person.circle.fill")
        .foregroundColor(.yellow)
}

Answer 5

Yes there is:

var body: some View {
    Image(systemName: "person.circle").accentColor(.red)    
}

Answer 6

This will draw the background of the icon in red and the lines in blue:

Image(systemName: "person.circle")
    .foregroundColor(Color.red)
    .background(Color.blue)
    .frame(width: size, height: self, alignment: .center)
    .clipShape(Circle())

Without clipShape there will be blue corners in the rectangle behind the circle.

Answer 7

SwiftUI now allows you to color parts (layers) of many of the SF Symbols. Some symbols have many layers.

This will color the symbol foreground blue:

Image(systemName: "person.circle").foregroundStyle(.blue)

If you want to color the circle differently from the person this will color the person blue and the circle gray

Image(systemName: "person.circle").foregroundStyle(.blue, .gray)

Answer 8

Just change the tint color. That did it for me.