How can I set an image tint in SwiftUI?

Question

I am trying to set an image tint in SwiftUI Image class

For UIKit, I can set image tint using

let image = UIImage(systemName: "cart")!.withTintColor(.blue)

but I cant find such settings in swiftui docs

aturan23 · Accepted Answer · 2021-03-20T01:12:35.130

104

On new swiftUI for set tint use:

Image("ImageName")
  .foregroundColor(.red)

Depending on the source image you may also need an additional rendering mode modifier:

Image("ImageName")
  .renderingMode(.template)
  .colorMultiply(.red)
// or
Image("ImageName")
  .colorMultiply(.blue)

And you can read this topic.

edited Mar 20 '21 at 01:12

answered Apr 11 '20 at 05:30

aturan23

4,798
4
28
52

3

Depending on the source image you may also need an additional rendering mode modifier: `Image("ImageName").renderingMode(.template).colorMultiply(.red)` – dead_can_dance Aug 17 '20 at 14:41
2

The problem with this solution is that depending on if you are in light or dark mode, template images may start as black and .colorMultiply will have no. color multiply gives different results based on the original color of the image. – bitwit Jan 25 '21 at 21:50
1

For some reason, if I use `renderingMode` + `colorMultiply` some colors where behaving weird (e.g. white was becoming blue). So I just replaced `colorMultiply` with `foregroundColor`. Final result: `Image("ImageName").renderingMode(.template). foregroundColor(.red)` – Caio Ambrosio Aug 21 '23 at 12:08

score 67 · Answer 2 · answered Oct 28 '20 at 23:16

67

This worked for me,

Image("ImageName")
   .renderingMode(.template)
   .foregroundColor(.white)

answered Oct 28 '20 at 23:16

Mona

5,939
3
28
33

1

This should be the accepted answer because it works in both light and dark mode. – bitwit Jan 25 '21 at 21:48
1

This is the only answer that worked for me – rmp251 Mar 02 '21 at 05:59
the only worked for me also – Daniel Wijono Sep 06 '22 at 08:12

Andy Jazz · Answer 3 · 2022-08-09T06:27:28.997

Blending modes

For tinting, you can use the .blendMode modifier to composite your image with another image or with color. There are 20+ Photoshop-like blending modes in Xcode 14.0+. The most appropriate SwiftUI's blending modes for tinting are:

.softLight
.overlay
.luminosity
.screen

You'll get different results than you see here if you change the brightness and saturation of the blending color.

Here's the code:

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Gradient(colors: [.red, .yellow]))
                .ignoresSafeArea()
            Image("XcodeIcon")
                .resizable()
                .scaledToFit()
                .blendMode(.softLight)
        }
    }
}

score 8 · Answer 4 · answered Oct 26 '22 at 07:10

8

SwiftUI 4.x:

Approach 1:

Image("your_image_name")
    .resizable()
    .renderingMode(.template)
    .foregroundColor(.white)

Approach 2:

Image("your_image_name")
  .resizable()
  .renderingMode(.template)
  .colorMultiply(.red)

answered Oct 26 '22 at 07:10

Rabel Ahmed

1,131
13
12

score 3 · Answer 5 · answered Aug 04 '20 at 17:18

3

The above answer is probably the best one although this would work too:

let uiImage = UIImage(systemName: "cart")!.withTintColor(.blue)
let image = Image(uiImage: uiImage)

Then you can use the constant named image with SwiftUI.

answered Aug 04 '20 at 17:18

Todd

500
4
10

You might need to declare `uiImage` globally. I did it like that and it worked for me. – Todd Aug 12 '20 at 03:22

How can I set an image tint in SwiftUI?

5 Answers5

Blending modes

Linked