iOS 7
UIBarButton
back button
arrow color
iOS customization

iOS 7 UIBarButton back button arrow color

Master System Design with Codemia

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

Introduction

In iOS 7, the navigation back arrow is usually tinted by the navigation bar's tintColor. That is why changing the navigation bar tint changes both the back arrow and the bar button items. If you want only a different arrow color without affecting the rest of the navigation items, the default system back indicator is more limited and you typically need a custom back indicator image or a custom back button setup.

The Simple iOS 7 Answer: Set tintColor

For the standard iOS 7 navigation appearance, the back arrow inherits the navigation bar tint.

swift
if let navigationBar = navigationController?.navigationBar {
    navigationBar.tintColor = UIColor.red
}

This changes the back arrow color as well as other bar button item tinting on that navigation bar.

For a global appearance setting:

swift
UINavigationBar.appearance().tintColor = UIColor.red

That is the normal historical answer for iOS 7 styling.

What tintColor Affects

tintColor does not target only the arrow. It affects interactive bar items generally.

That means if you set:

swift
navigationController?.navigationBar.tintColor = .green

then the back arrow, back button text, and other bar button items often pick up that same tint.

This is convenient when you want a unified app theme, but it is limiting when you want only the arrow itself to differ.

If You Need More Control

If the design requires a custom-colored arrow that should not simply follow the general navigation tint, the usual workaround is to supply a custom back indicator image.

In more modern iOS APIs this is done with back indicator images on the navigation bar appearance, but the underlying idea is the same: replace the default indicator rather than trying to tint the stock arrow independently.

A custom back button image gives you control over:

  • arrow shape
  • arrow color
  • spacing and branding choices

The tradeoff is that you then own the image asset and its alignment.

Per-Screen Customization

If you only want one navigation stack or one screen to use a different back-arrow tint, set the tintColor on that navigation controller's bar instead of using the global appearance proxy.

swift
1override func viewDidLoad() {
2    super.viewDidLoad()
3    navigationController?.navigationBar.tintColor = .systemBlue
4}

That keeps the change scoped to the current navigation context rather than affecting the whole app.

Historical Context and Modern Codebases

Because the title is specifically about iOS 7, tintColor is the main answer. In modern iOS code, navigation bar appearance APIs are more structured, but the historical principle is still useful: the default back arrow is part of the navigation bar appearance, not a standalone UIBarButtonItem that you can color independently with a separate simple property.

So if your design requirement is "change the whole navigation action tint," use tintColor. If it is "change only the arrow art," move to a custom back indicator image.

Common Pitfalls

The most common mistake is expecting a dedicated "back arrow color" property separate from navigation bar tint. On iOS 7, the default arrow normally follows the bar's tinting behavior.

Another issue is changing the global appearance proxy when only one screen needed a different style.

Developers also sometimes forget that the back button text color is tied into the same tinting behavior, so a tint change can affect more than just the arrow.

Finally, if you use a custom image, check alignment and consistency carefully. Replacing the system indicator gives more control, but it also means you are responsible for the final look.

Summary

  • In iOS 7, the standard back arrow color is usually controlled by the navigation bar's tintColor.
  • Changing tintColor also affects other bar button items, not just the arrow.
  • Use per-navigation-bar tinting for local changes and appearance proxies for app-wide changes.
  • If you need only the arrow art to differ, use a custom back indicator image.
  • Treat the back arrow as part of navigation bar appearance, not as an isolated standalone control.

Course illustration
Course illustration

All Rights Reserved.