How to change a back button image


By default UINavigationController back button looks like this:

Default back button indicator
Default back button indicator

You can easily change this arrow (back button indicator) by simply set a new one to backIndicatorImage and backIndicatorTransitionMaskImage.

Here is our new back button indicator.

custom-back.pdf
custom-back.pdf

You have many ways to do this.

Globally #

To apply a new back button indicator to every UINavigationBar, you use UINavigationBar.appearance().

UINavigationBar.appearance().backIndicatorImage = UIImage(named: "custom-back")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "custom-back")

Call the code in AppleDelegate or SceneDelegate, and you will get the following result.

Only Specific Places #

If you interest in changing only a UINavigationBar back button in some UINavigationController, you can do that by set backIndicatorImage and backIndicatorTransitionMaskImage on a navigation bar instance. In our example, we set it in viewDidLoad() of a navigation controller's root view controller.

override func viewDidLoad() {
super.viewDidLoad()

navigationController?.navigationBar.backIndicatorImage = UIImage(named: "custom-back")
navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named: "custom-back")
}

Storyboard #

You can also set this in the Storyboard. Select UINavigationBar and select the Attributes Inspector tab. Then you can change those two images under Back and Back Mask attributes.

Attributes Inspector of UINavigationBar
Attributes Inspector of UINavigationBar

iOS 13 #

In iOS 13, there are changes in navigation bar. Navigation bar can be categories into three types standardAppearance, compactAppearance, and scrollEdgeAppearance. You may continue to use the above two legacy methods to customize your navigation bar's appearance, which will be applied to all three appearances. But if you want to have a different back indicator for each appearance, you need to set it with the following methods.

Set setBackIndicatorImage(_:transitionMaskImage:) on UINavigationBarAppearance.

let lineImage = UIImage(named: "custom-back-line")
let fancyImage = UIImage(named: "custom-back-fancy")

let fancyAppearance = UINavigationBarAppearance()
fancyAppearance.configureWithDefaultBackground()
fancyAppearance.setBackIndicatorImage(fancyImage, transitionMaskImage: fancyImage)

let lineAppearance = UINavigationBarAppearance()
lineAppearance.configureWithDefaultBackground()
lineAppearance.setBackIndicatorImage(lineImage, transitionMaskImage: lineImage)

UINavigationBar.appearance().scrollEdgeAppearance = fancyAppearance
UINavigationBar.appearance().compactAppearance = lineAppearance

These will produce different back indicators for the large title and compact appearance.

compactAppearance
compactAppearance
scrollEdgeAppearance
scrollEdgeAppearance

If you want to set just specific navigation controller, you can do it like this:

let fancyImage = UIImage(named: "custom-back-fancy")

var fancyAppearance = UINavigationBarAppearance()
fancyAppearance.configureWithDefaultBackground()
fancyAppearance.setBackIndicatorImage(fancyImage, transitionMaskImage: fancyImage)

navigationController?.navigationBar.scrollEdgeAppearance = fancyAppearance

You can read more about UINavigationBar changes in iOS13 here.

Position #

The easiest way to position the back button indicator is by manually add transparent padding to your image. To do that, you need to know the default position and dimension of the back button indicator.

Default #

By default, our image will position 8 points from the left edge, 11 points from the bottom edge, 6 points from the back button title, and a minimum height of 18 points.

Leadding Bottom Trailing Minimum Height
8 11 6 18

Here are examples of the back button image in a variety of sizes and shapes. You can see that they have the same padding.

Back button with a size of 16x14. You can see the bounding box is larger than its true size.

Back button with a size of 16x14
Back button with a size of 16x14

Back button with a size of 32x28.

Back button with a size of 32x28
Back button with a size of 32x28

Back button with a size of 16x2. You can see the bounding box is larger than its true size.

Back button with a size of 16x2
Back button with a size of 16x2

Adjustment #

After you know the default position, you can make it match your design by adding transparent padding to your image.

Let's say your design has left padding of 20. Since the default left padding is 8, you need to add 12 points of transparent padding to your image. So, if our original image has a dimension of 16x14, it will become 28x14. Here is our image with padding; you can notice that it is not center-aligned anymore.

Image with left padding, you can notice that it does not center align
Image with left padding, you can notice that it does not center align

Use the new image, and you will get perfect padding that matches your designer spec.

Back button image with padding
Back button image with padding

Here is the same view that shows view frames. You can easily see transparent left-padding right there.

View frames of back button image with padding
View frames of back button image with padding

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Tweet Share

If you enjoy this article, you can subscribe to the weekly newsletter.

Every Friday, you’ll get a quick recap of all articles and tips posted on this site — entirely for free.

← Home