Introduction

The right way to color a UIImage depends on what kind of image you have. If it is an icon meant to behave like a template, use withRenderingMode(.alwaysTemplate) and tintColor; if you need to permanently recolor pixels in a new image, render a tinted copy with UIGraphicsImageRenderer.

Use Template Rendering for Icons

Template rendering is the simplest solution when the image is basically a shape plus transparency. UIKit ignores the original non-alpha colors and applies the view's tint color instead.

1import UIKit
2
3let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
4imageView.tintColor = .systemRed
5imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)

This is ideal for toolbar icons, tab bar icons, and SF Symbols. It is also the easiest option because the color can change later without recreating the image.

Buttons work the same way:

let button = UIButton(type: .system)
button.setImage(UIImage(named: "heart")?.withRenderingMode(.alwaysTemplate), for: .normal)
button.tintColor = .systemPink

If your asset should follow light and dark mode automatically, template rendering is usually the cleanest path.

Create a Recolored Image When You Need Real Pixel Output

Sometimes the image is not just a template icon. You may need a new UIImage that is permanently tinted so it can be reused, saved, or passed elsewhere. In that case, draw the original image into a renderer and fill it using its alpha mask.

1import UIKit
2
3extension UIImage {
4    func tinted(with color: UIColor) -> UIImage {
5        let renderer = UIGraphicsImageRenderer(size: size)
6        return renderer.image { _ in
7            color.setFill()
8            let rect = CGRect(origin: .zero, size: size)
9            draw(in: rect)
10            UIRectFillUsingBlendMode(rect, .sourceAtop)
11        }
12    }
13}
14
15let original = UIImage(systemName: "paperplane.fill")!
16let greenImage = original.tinted(with: .systemGreen)

This produces a new image object. That is useful when the tint should be independent of a view's tintColor, or when you need different colored copies from the same source asset.

Know When Template Rendering Is Not Enough

Template rendering works best when you want a single flat color and the original image is designed for it. It is not the right tool for photographs, gradients, or assets where the original colors matter.

For multicolor images, recoloring can flatten detail. In that case, consider:

• using separate assets for each color state
• drawing custom overlays
• editing the source asset to fit your intended UI behavior

A common mistake is trying to force a full-color illustration through template rendering and then wondering why all shading disappears. That is expected behavior.

Keep Alpha and Scaling in Mind

When you tint or redraw an image, the alpha channel matters. Good tinting preserves transparency, which is why drawing through the existing image mask is important. Scaling also matters. If you create a new image at the wrong size or renderer scale, the result can look blurry.

UIGraphicsImageRenderer usually handles scale correctly for UIKit work, which is one reason it is better than older context APIs for most modern code.

Common Pitfalls

• Using template rendering on a full-color image and expecting the original shading to remain. Template mode is for single-color icon-style assets.
• Setting tintColor without switching the image to .alwaysTemplate. In that case, the tint may have no visible effect.
• Recoloring the image permanently when the only goal is dynamic UI tinting. A template image is usually simpler for that case.
• Ignoring renderer scale or size when creating a new image. Poor rendering settings can make the result look soft.
• Assuming UIImage itself stores a display tint. In many cases, the visible color is controlled by the view that renders the image.

Summary

• Use .alwaysTemplate plus tintColor for icons and symbols.
• Use UIGraphicsImageRenderer when you need a new recolored UIImage.
• Template rendering is great for flat-color assets, not full-color illustrations.
• Preserve alpha and correct scale when generating tinted copies.
• Choose between view-level tinting and pixel-level recoloring based on how the image will be reused.