Introduction

A clean navigation bar can make a big difference in how polished your app feels. Many designers prefer a back button that shows only the arrow icon without the preceding screen's title text. This is easy to achieve on iOS, Android, and the web, but the approach differs on each platform. This article walks through the specific implementation for each, with code examples you can drop directly into your project.

iOS: Removing Back Button Text in Swift

On iOS, the navigation bar's back button is controlled by the UINavigationItem of the view controller that pushes the next screen. This is a common source of confusion, because you configure the back button on the parent view controller, not the one currently displayed.

iOS 14 and Later

Starting with iOS 14, Apple introduced the backButtonDisplayMode property, which makes this straightforward:

1// In the PARENT view controller (the one that pushes)
2override func viewDidLoad() {
3    super.viewDidLoad()
4    navigationItem.backButtonDisplayMode = .minimal
5}

Setting .minimal removes the title text and leaves only the chevron icon. This is the cleanest approach and respects the system's Dynamic Type and accessibility settings.

iOS 11 to iOS 13

For older iOS versions, set the backButtonTitle to an empty string on the parent view controller:

1// In the PARENT view controller
2override func viewDidLoad() {
3    super.viewDidLoad()
4    navigationItem.backButtonTitle = ""
5}

Alternatively, you can set it using UIBarButtonItem:

1override func viewDidLoad() {
2    super.viewDidLoad()
3    let backItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
4    navigationItem.backBarButtonItem = backItem
5}

Applying Globally via UIAppearance

If you want every screen in your app to have a text-free back button, you can set this globally in your AppDelegate or SceneDelegate:

1func application(
2    _ application: UIApplication,
3    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
4) -> Bool {
5    let appearance = UINavigationBarAppearance()
6    appearance.configureWithDefaultBackground()
7    
8    let backButtonAppearance = UIBarButtonItemAppearance()
9    backButtonAppearance.normal.titleTextAttributes = [
10        .foregroundColor: UIColor.clear
11    ]
12    appearance.backButtonAppearance = backButtonAppearance
13    
14    UINavigationBar.appearance().standardAppearance = appearance
15    UINavigationBar.appearance().scrollEdgeAppearance = appearance
16    
17    return true
18}

This sets the back button title color to clear, effectively hiding it while preserving the tap target area.

SwiftUI

In SwiftUI, the navigation bar back button is managed by NavigationStack (or NavigationView in older versions). You can hide the default back button and provide a custom one:

1struct DetailView: View {
2    @Environment(\.dismiss) private var dismiss
3    
4    var body: some View {
5        Text("Detail Screen")
6            .navigationBarBackButtonHidden(true)
7            .toolbar {
8                ToolbarItem(placement: .navigationBarLeading) {
9                    Button(action: { dismiss() }) {
10                        Image(systemName: "chevron.left")
11                    }
12                }
13            }
14    }
15}

This gives you full control over the back button's appearance. The chevron.left SF Symbol matches the default iOS back arrow.

Android: Removing Back Button Text with Kotlin

On Android, the Toolbar (or ActionBar) typically shows only an icon by default, since Android's design language does not include text next to the navigation icon. However, if a title appears that you want to remove, you can configure it like this:

1override fun onCreate(savedInstanceState: Bundle?) {
2    super.onCreate(savedInstanceState)
3    setContentView(R.layout.activity_detail)
4
5    val toolbar = findViewById<Toolbar>(R.id.toolbar)
6    setSupportActionBar(toolbar)
7
8    supportActionBar?.apply {
9        setDisplayHomeAsUpEnabled(true)
10        setDisplayShowTitleEnabled(false)
11    }
12}

setDisplayShowTitleEnabled(false) removes the activity title from the toolbar. setDisplayHomeAsUpEnabled(true) adds the back arrow. If you want a custom icon instead of the default arrow, use setHomeAsUpIndicator:

supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_custom_back)

Jetpack Compose

In Jetpack Compose, the TopAppBar composable gives you full control:

1TopAppBar(
2    title = { },
3    navigationIcon = {
4        IconButton(onClick = { navController.popBackStack() }) {
5            Icon(
6                imageVector = Icons.AutoMirrored.Filled.ArrowBack,
7                contentDescription = "Back"
8            )
9        }
10    }
11)

Passing an empty composable as the title parameter ensures no text is rendered.

Web: CSS Approach

On the web, if you have a back button implemented with an icon and a text span, you can hide the text using CSS:

1<button class="back-button" onclick="history.back()">
2    <svg class="back-icon" viewBox="0 0 24 24" width="24" height="24">
3        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
4    </svg>
5    <span class="back-text">Back</span>
6</button>

1.back-button {
2    display: flex;
3    align-items: center;
4    background: none;
5    border: none;
6    cursor: pointer;
7    padding: 8px;
8}
9
10.back-text {
11    display: none;
12}
13
14.back-icon {
15    fill: currentColor;
16}

Setting display: none on the text span removes it visually and from the accessibility tree. If you want screen readers to still announce the text, use visibility: hidden with position: absolute instead, or add an aria-label to the button.

Common Pitfalls

Setting the back button on the wrong view controller (iOS). The back button text comes from the view controller that pushes, not the one being displayed. If you set backButtonTitle on the detail view controller, nothing will change.

Forgetting accessibility. Removing visible text is fine for sighted users, but screen readers rely on labels. On iOS, the system automatically provides an accessibility label for the back button. On the web, always add an aria-label="Go back" to icon-only buttons.

Using a custom back button that breaks swipe gestures (iOS). If you use navigationBarBackButtonHidden(true) and add a custom button, the interactive pop gesture (swipe from left edge) is disabled by default. You need to re-enable it by setting navigationController?.interactivePopGestureRecognizer?.delegate = self.

Hardcoding icon sizes. On Android and iOS, navigation bar icons should use the system's standard size. Hardcoding pixel values can cause the icon to look too large or too small on different screen densities.

Summary

Removing text from the back button while keeping the icon is a common UI refinement. On iOS 14+, use backButtonDisplayMode = .minimal. On older iOS, set backButtonTitle to an empty string on the parent view controller. On Android, call setDisplayShowTitleEnabled(false) on the ActionBar. On the web, hide the text span with CSS. Whichever platform you are on, always verify that the icon-only button remains accessible to users with assistive technologies.