Reading time: 1 min

This recipe shows how to tint SwiftUI images in two ways - by setting the template tint or color multiply.

The end result looks like this:

Let's start by saying that foregroundColor has no effect here. With that out of the way, the recipe depends on what you want to do with the image, since I've seen tint being used in more than once context:

For photos and logos with multi-color images, use colorMultiply

Half of the time, "tinting an image" means the following:

This is achieved by using the colorMultiply modifier on the Image:

Image("logo_small")
  .colorMultiply(.green)

For monochrome images, use renderingMode

If you have a monochrome image or one where all that matters is the outline, use renderingMode with template, then apply foregroundColor. This will basically set the color to all non-transparent pixels in the image:

Image("swift")
  .renderingMode(.template)
  .foregroundColor(.blue)

With the following effect:

Next Post Previous Post