UIImageView
TintColor
iOSDevelopment
Swift
UIKit

Using Tint color on UIImageView

Master System Design with Codemia

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

Introduction

Applying a tint color to a UIImageView is straightforward once the image is rendered as a template. If the image keeps showing its original colors, the usual reason is that the asset is still using original rendering mode, so the tint color has nothing to replace.

How Tinting Works in UIKit

A tint color does not repaint a full-color photo in a smart way. It works best with monochrome or icon-style assets where the image acts like a mask. UIKit uses the alpha shape of the image and draws it with the view's tint color.

That is why tinting is ideal for tab icons, toolbars, and status indicators, but not for every kind of artwork.

Make the Image Use Template Rendering

The key step is to switch the image to template rendering mode:

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

If the image asset is set up in code like this, the non-transparent pixels are drawn using .systemBlue.

You can do the same thing when the image view already exists in a view controller:

swift
1import UIKit
2
3final class ProfileViewController: UIViewController {
4    @IBOutlet private weak var statusImageView: UIImageView!
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        statusImageView.image = UIImage(named: "status-dot")?.withRenderingMode(.alwaysTemplate)
10        statusImageView.tintColor = .systemGreen
11    }
12}

Asset Catalog Settings Also Matter

You do not always have to set the rendering mode in code. In the asset catalog, the image can be configured to render as a template by default. That is useful when the same asset should always be tintable throughout the app.

When the asset is configured as a template in the catalog, you can often set only tintColor in code or Interface Builder and skip the explicit withRenderingMode call.

SF Symbols are even easier because they are designed for template-style rendering by default in many common cases.

Dynamic Tint Changes

Tint color is a normal view property, so you can update it later in response to state changes:

swift
func updateFavoriteState(isFavorite: Bool) {
    favoriteImageView.tintColor = isFavorite ? .systemYellow : .systemGray
}

This is a clean way to reflect selection, active status, warnings, or theme changes without creating multiple duplicate image assets.

When Tint Color Does Not Work

If the image still appears unchanged, check these conditions:

  • the image must use template rendering, not original rendering
  • the asset should have a shape that makes sense for tinting
  • the image view must actually have a visible tintColor
  • parent view hierarchy settings should not be applying an unexpected tint adjustment mode

A full-color photo or illustration usually will not produce the effect people expect from tinting. Template tinting is a mask-based technique, not a full recoloring engine.

Common Pitfalls

The most common mistake is setting tintColor without changing the image rendering mode. In that case, UIKit keeps drawing the original asset colors.

Another issue is trying to tint a detailed multicolor image and expecting a polished result. Tinting works best with simple glyph-style assets.

Developers also forget that an image assigned in Interface Builder may still be configured to render as original. If the code looks correct but the UI does not change, inspect the asset settings.

Summary

  • A UIImageView only responds to tinting when its image uses template rendering.
  • Use withRenderingMode(.alwaysTemplate) or configure the asset catalog accordingly.
  • Tinting is best for icons and symbol-style assets, not complex photographs.
  • Updating tintColor is an easy way to reflect view state without extra image files.
  • If tinting appears broken, check the rendering mode before anything else.

Course illustration
Course illustration

All Rights Reserved.