Modify UIImage renderingMode from a storyboard/xib file
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
If you want a UIImageView in a storyboard or XIB to respect tint color, the real control point is usually not a runtime tweak to UIImage.renderingMode in Interface Builder. The practical solutions are to configure the image asset as a template in the asset catalog or to apply withRenderingMode in code when the view loads.
What Rendering Mode Controls
UIImage rendering mode determines whether UIKit draws the image with its original pixels or treats it like a template mask that can be tinted.
The most common modes are:
- '
alwaysOriginal: draw the image exactly as provided' - '
alwaysTemplate: draw the image using the view'stintColor' - '
automatic: let UIKit decide based on context and asset settings'
This matters most for icons, tab items, bar button items, and monochrome glyph-style images.
What Storyboards and XIBs Can and Cannot Do Directly
Interface Builder lets you assign an image to a UIImageView, but it does not provide a clean first-class control for changing UIImage.renderingMode on that image instance the way code does.
In practice, the reliable choices are:
- set the asset's render behavior in the asset catalog
- set the rendering mode in code after loading the image
Trying to force image.renderingMode through runtime attributes is not a good default answer. renderingMode is a property of the image object, not a normal inspectable knob on UIImageView.
The Best Storyboard-Friendly Option: Asset Catalog
If the image should always behave as a template, configure it in the asset catalog. Set the asset's render behavior to template rendering, then assign it normally in the storyboard or XIB.
Once that is done, the image view can use tint color as expected:
This works well when the same asset should always be tintable across the app.
The Code-Based Option
If only one usage of the image should change rendering mode, update it in code:
This is the most explicit and flexible approach. It is especially useful when one screen wants template rendering but another screen should keep the original artwork.
Why This Matters for Storyboards
A lot of confusion comes from mixing up three different things:
- the image file itself
- the asset-catalog rendering behavior
- the image view's tint color
A storyboard can assign the image and tint color, but if the image is still being rendered as original, the tint color may appear to do nothing. That is why developers sometimes think the storyboard is broken when the actual issue is the image's rendering mode.
When Template Rendering Is the Wrong Choice
Template rendering is best for icons and masks. It is usually the wrong choice for full-color artwork, gradients, or photos, because those images lose their original visual detail when drawn as a single tint color.
That is why some assets should remain alwaysOriginal even if other images in the same interface use template rendering.
Common Pitfalls
The most common mistake is setting a tintColor on the image view and expecting it to affect an image still rendered as original.
Another issue is trying to drive UIImage.renderingMode directly from storyboard runtime attributes instead of using the asset catalog or code.
Developers also apply template rendering to full-color artwork and then wonder why the image loses all of its visual nuance.
Summary
- Storyboards and XIBs do not provide a robust direct knob for changing
UIImage.renderingModeon the image instance itself. - The best no-code option is to set template rendering in the asset catalog.
- The best per-screen option is to call
withRenderingModein code. - Tint color only affects the image when the rendering mode allows template rendering.
- Use template rendering for glyph-style assets, not for every image in the app.

