Introduction

Tinting an image on iOS usually means applying a single color to an icon or template-style asset while preserving its transparent shape. The best approach depends on whether the image is being shown in a UIKit view or whether you need to generate a new tinted UIImage in code.

For UI icons, the simplest answer is usually to use template rendering and set tintColor. If you need a standalone tinted image object, use withTintColor or draw into a graphics renderer.

Use Template Rendering for UI Elements

For images displayed in UIImageView, UIButton, or bar button items, template rendering is the most natural option:

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

With .alwaysTemplate, the system treats the non-transparent parts of the image as a mask and fills them with the view's tintColor. This is ideal for monochrome icons.

The same idea works for buttons:

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

This is usually the cleanest solution because the asset stays reusable and the tint can be changed later without regenerating the image.

Generate a Tinted UIImage

If you need an actual tinted image object, use withTintColor:

1import UIKit
2
3if let original = UIImage(named: "star") {
4    let tinted = original.withTintColor(.systemGreen, renderingMode: .alwaysOriginal)
5    let imageView = UIImageView(image: tinted)
6}

This returns a new UIImage that already has the tint applied. It is useful when you need to pass the tinted result around as data rather than relying on a view's tintColor.

Use a Graphics Renderer for More Control

For older APIs or when you need custom drawing behavior, create the tinted image yourself:

1import UIKit
2
3func tintedImage(_ image: UIImage, color: UIColor) -> UIImage {
4    let format = UIGraphicsImageRendererFormat.default()
5    format.scale = image.scale
6
7    let renderer = UIGraphicsImageRenderer(size: image.size, format: format)
8    return renderer.image { _ in
9        color.setFill()
10        let rect = CGRect(origin: .zero, size: image.size)
11        image.withRenderingMode(.alwaysTemplate).draw(in: rect)
12        UIRectFillUsingBlendMode(rect, .sourceAtop)
13    }
14}

A manual renderer becomes useful when the simple template or withTintColor path is not enough. For example, you may want to composite the image into a larger drawing pass.

Know What Kind of Image You Have

Template tinting works best for glyph-like assets with transparency and a single foreground shape. It is not the right tool for full-color photos. If you tint a photo as a template image, you generally lose the original color detail because the image is treated as a mask.

So ask first:

• is this a monochrome icon or symbol
• or is this a full-color bitmap

For full-color images, a tint overlay or blending effect may be more appropriate than template rendering.

SF Symbols Make This Even Easier

If you are using SF Symbols, tinting is straightforward because they are designed for this workflow:

1let config = UIImage.SymbolConfiguration(pointSize: 24, weight: .regular)
2let image = UIImage(systemName: "paperplane.fill", withConfiguration: config)
3let imageView = UIImageView(image: image)
4imageView.tintColor = .systemIndigo

SF Symbols integrate naturally with UIKit tinting and usually require less asset management than custom raster icons.

Common Pitfalls

• Forgetting to use .alwaysTemplate when relying on a view's tintColor.
• Expecting tinting to preserve the full-color content of a photo.
• Generating a new tinted image when setting tintColor on the view would be simpler.
• Using assets with unexpected alpha or background pixels, which makes tint results look wrong.

Summary

• Use template rendering plus tintColor for most UI icons.
• Use withTintColor when you need a standalone tinted UIImage.
• Use a graphics renderer when you need custom compositing behavior.
• Tinting works best for monochrome or mask-like assets, not for ordinary photos.
• For modern iOS iconography, SF Symbols are often the easiest assets to tint programmatically.