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

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:

Filled and Stroked Flame SF Symbol Icons

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()
    }
}

Leave a Comment