Swift
UIImage
iOS Development
Image Processing
Code Tutorial

How can I color a UIImage in Swift?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Coloring a UIImage can mean two different things on iOS: applying a tint to a template-style image, or actually redrawing the pixels into a new colored image. The best choice depends on whether you are working with icons and symbols or with full-color artwork that needs custom compositing.

Use template rendering for icons

If the image is a monochrome icon, the simplest solution is to mark it as a template image and let UIKit apply the tint color.

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

This is the usual answer for tab bar icons, toolbar items, and simple glyphs. Template rendering preserves the alpha channel and replaces the visible color with the tint color.

The same approach works on buttons:

swift
1let button = UIButton(type: .system)
2button.setImage(
3    UIImage(named: "star")?.withRenderingMode(.alwaysTemplate),
4    for: .normal
5)
6button.tintColor = .systemRed

If nothing changes visually, the most likely cause is that the image is still rendering as .alwaysOriginal or .automatic instead of .alwaysTemplate.

Use withTintColor when you need a new image

If you want a recolored UIImage value rather than relying on a view's tint at draw time, modern iOS provides withTintColor.

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

This is useful when:

  • you need to cache the recolored result
  • multiple views should display the exact same transformed image
  • you do not want later tint-color changes in the view hierarchy to affect the image

It is also convenient when working with generated image assets outside the immediate UI component that will render them.

Redraw the image when tinting is not enough

Template tinting is ideal for simple icons, but it is not the right tool for every image. If you need more control, such as preserving image shading or compositing with a blend mode, redraw the image into a new graphics context.

swift
1import UIKit
2
3func tintedImage(_ image: UIImage, color: UIColor) -> UIImage {
4    let renderer = UIGraphicsImageRenderer(size: image.size)
5    return renderer.image { _ in
6        color.setFill()
7        let rect = CGRect(origin: .zero, size: image.size)
8        UIRectFill(rect)
9        image.draw(in: rect, blendMode: .destinationIn, alpha: 1.0)
10    }
11}
12
13if let original = UIImage(named: "star") {
14    let greenStar = tintedImage(original, color: .systemGreen)
15    let imageView = UIImageView(image: greenStar)
16}

This approach gives you an actual recolored bitmap. It is more flexible than template rendering, but it costs more work and more memory if you generate many variants.

Choose the method based on image type

A good rule is:

  • use template rendering for monochrome UI icons
  • use withTintColor when you want a new recolored UIImage
  • use custom drawing for advanced compositing or pixel-level control

If the source image is already multicolored or photorealistic, simply tinting it may not look good. In those cases, either redesign the asset or use a more deliberate image-processing pipeline.

This distinction is important because many developers try to force a full-color asset through template rendering and then wonder why the result looks flat or incorrect.

Common Pitfalls

  • Setting tintColor on the view but leaving the image in .alwaysOriginal mode.
  • Using template rendering on complex full-color artwork and expecting a high-quality recolor.
  • Recreating tinted images repeatedly in scrolling views instead of caching or using view tinting.
  • Forgetting that a tinted UIImageView can inherit tint behavior from its parent view hierarchy.
  • Choosing a recoloring method without first deciding whether you need runtime tinting or a new bitmap image.

Summary

  • For simple icons, the easiest solution is template rendering plus a view tintColor.
  • 'withTintColor is useful when you want a new recolored UIImage value.'
  • Custom drawing is the right tool when you need more control than template tinting allows.
  • The rendering mode of the image matters just as much as the tint color you choose.
  • Pick the technique based on whether the asset is a monochrome icon or a full bitmap image.

Course illustration
Course illustration

All Rights Reserved.