Is It Ever OK to Use Icons Without Labels in Mobile App Design?

Have we reached a point in app design where it’s safe to use standalone icons without any supporting text? Five years ago, no. Today? Let’s talk about it.

Have you ever gone out to eat at a restaurant and found that you didn’t know which restroom to use? Sure, the funky ambience and theme seemed cool when you were sitting at the table, but you really needed to go to the bathroom and felt annoyed that you had to interpret the hieroglyphic-looking symbols on the doors before choosing one.

Without labels or other crystal-clear signifiers, how can you know for sure which door to try? While the stakes aren’t as high when it comes to opening a tab or a feature in a mobile app, your users might still feel confused or frustrated by the lack of labeling.

Icons are an important part of an app’s visual language. With people spending hours every day inside of apps and websites, is it safe to assume that they’ve mastered this lingo and are no longer in need of labels anymore?

In this post, we’re going to examine five common scenarios where icons are presented without labels in mobile apps and best practices for their implementation.

When It Might be OK to Use Icons Without Labels

There aren’t that many universally recognizable app icons. The search magnifying glass is one. The home icon is another. But take something like the concept of “share.” You’ve likely seen it presented in different ways across the apps you use.

So rather than make assumptions about which icons are universal, instead think about the context in which they appear and the purpose they serve. That’ll help you determine if it might be OK to present them without labels.

1. When the Average User Uses the App Every Day

The most popular apps don’t always label their header or navigation bar icons. This is especially so for the top entertainment and socialization apps.

You’ll see this type of label-less design on dating and socialization apps like Hinge:

As you can see here, the navigation isn’t super clear. The user’s profile/settings icon on the far-right is perhaps the most recognizable. And the chat bubble icon directly to the left of it might be easy to recognize. But what about the others?

Well, the first icon—the branded “H”—is where users find other user profiles to like or pass on. The star icon next to it is where they’ll find “Standout” profiles of users that are likely to be their type. And the heart icon in the middle is where they find the users who liked their profile.

Instagram is another app that’s gone label-free in both its header and navigation bar:

Some of these icons are easy to recognize—like the home icon for the main feed, the magnifying glass for search, and the person icon for the user profile and settings.

Users new to Instagram might struggle with the others. The heart in the top-right, for instance, could be a place to find all their liked content. But that’s not what that feature does. Instead, it shows them all the interactions they’ve received on their content—likes, comments and follows.

While there might be some friction at first, the millions or billions of users of these apps aren’t about to jump ship because the navigation is annoying or confusing. They know that eventually, through their daily use of the app, their muscle memory will take over and do the work for them. And so too do the designers of these apps, which is probably why they’ve opted for the label-free look.

Here’s what I’ll say about this:

If you’re confident that the app you’re building will be an indispensable part of your users’ lives or work, then removing the labels from icons might be OK. But only if you plan to keep those icons where they are.

Over the years, Instagram has changed its icon list and placement numerous times. Every time they do it, users freak out because it makes the app difficult to use all over again.

So if you have plans to redesign your app, add new features, or do regular testing and optimization, don’t skip the icon labels. They’re at least one part of the UI that users can rely on to not drive them crazy as things shift around.

2. When There is a Primary Action Button

Typically, we see icons in two areas of mobile apps. The first is the navigation bar along the bottom that moves users in and out of the main features of the app. The second are the top corners of the app where icons for settings and search are often found.

While not as common, some apps may also include an action button. In the case of Roadtrippers, this is a green button that sticks to the lower-right corner of the map. The icon is a car with a plus-sign over it:

The icon appears in the Map tab only. It’s a shortcut that allows users to create a new trip. When clicked, they enter their “From” and “To” destinations and then the popup closes and the trip is mapped out for them.

While the icon might not be immediately recognizable, its permanent placement within the context of the map will reinforce its purpose over time.

Another app that includes a primary action button is Trello:

Unlike Roadtrippers’ sticky button, the plus-sign icon sits in the top-right corner of the mobile app. When clicked, users can:

• Create a board
• Create a card
• Browse templates

There’s no need to add a label to this icon as the plus-sign is pretty obvious in terms of functionality. It either means “to add” or “to create.” In addition, users aren’t forced to leave the tab they’re in. The options appear in a small dropdown so there’s no risk of them losing their place or work when engaging with this feature.

If you’re building an app where you have an action or set of actions that users commonly interact with, then it would be OK to make the icon for it be label-free. Just make sure the icon is easy to find and that the subsequent action isn’t too disruptive to the users’ experience.

3. When the App’s Functionality is Greatly Simplified

If you’re building an app with fewer than five main features or tabs, then you might not want to include labels with your icons. I have a couple examples of how that works.

This is the MyBanfield mobile app:

There are just four tabs in this app. Although the icons aren’t necessarily standard, users can guess what most of them do:

• The paw print icon goes to the home screen.
• The calendar icon is for scheduling and managing appointments at the pet hospital.
• The chat bubble icon is for live chat with the vet or staff.
• The person icon is where all the profile and settings tabs are.

They probably could’ve added labels and it wouldn’t have taken up much space. However, the functionality is so simple in this app that it might not be that big of a deal for users.

The same could be said for the Substack mobile app:

The tabs in this navigation bar perhaps aren’t as clear:

• The first is an inbox. Users find the latest posts from the newsletters they’re subscribed to.
• The second icon is a chat bubble where users can post communications to subscribers.
• The third is a notification bell that stores notifications related to the user’s activity—e.g., likes, comments, restacks, replies, etc.
• The last icon is a library where users access their Substack publications, subscriptions and other saved content in a more organized fashion.

While it would be beneficial for users to see labels for each of these icons, it probably doesn’t matter much. My guess is that users stick mostly to the inbox/home and notifications tabs. Either way, there are so few options to choose from that the lack of labeling can’t present too much confusion for users.

If you’re building an app with just as simplified of a structure, you can probably get away with label-free navigation tabs too. I would suggest doing this only if your users log in regularly, so that they’re not constantly having to recall how to move through the app and their frustration levels remain low.

4. When You Put Icons in the Header

There are certain icons that appear from header to header in mobile apps. Search, Share and Settings are perhaps the most common. So long as you’re including common and expected features like these in the top corners of your app, then you probably don’t need any labels.

Let’s look at the example of RecipeBox:

There are three icons that appear in the top-right corner of individual recipe pages:

• The heart icon allows users to “favorite” certain recipes for easier sorting from the main My Recipes tab.
• The share icon enables users to share the recipe to other platforms as well as to copy it, print it or airdrop it.
• The “more options” icon gives users the ability to edit the recipe, change its categories, print the recipe or delete it altogether.

The “more options” icon is the only one that isn’t totally clear what its function is. However, these actions might not be as common as others. So for the sake of being efficient with the header space, it makes sense to put these secondary actions under a single icon.

Another app that makes use of the top icon area is FitOn:

Note that the header icons change from tab to tab:

• The For You tab has profile and notification icons.
• The Workouts tab doesn’t have any.
• The Advice tab has a heart “like” icon so users can find saved posts.
• The Meals tab has heart and search icons.
• The Friends tab has profile, add-a-friend and chat icons.

There are no labels paired with any of these icons. Perhaps the only one that needs clarification is the second from the right on the Friends tab. Add-a-friend isn’t typical functionality in mobile apps. However, FitOn users can probably figure out which feature that icon represents by process of elimination.

If you’re building an app that’s chock full of features, you might want to consider tailoring the header icon options to each tab as FitOn does. This way, users only see the functionality relevant to that tab when they’re looking at it. It’ll also help you create a more clutter-free design as you’re not including unnecessary or irrelevant functionality in every tab.

5. When the Label Appears Upon Interaction

The other way that you can safely get away with not including a label with your icons is when the label appears after interaction. So, technically, this is a hide-a-label solution to icon design.

Here’s how it’s done in the BringFido app:

This is the search feature that appears on the homepage of the mobile app. Users must enter a destination and also choose what type of place they’re looking to bring their furry companion.

At first glance, it appears as though the icon options are nothing more than that. However, when a user clicks on them, labeled icons appear for:

• Lodging
• Restaurants
• Activities
• Events
• Services
• Blog

Users are eventually going to have to interact with the options dropdown, so the space-saving icon-only design is just fine here. The same goes for the Royal Match mobile game:

At first glance, it appears that only the Home tab has a label. However, as users click on each tab, a label appears for each.

• The book with the star on it represents Areas.
• The trophy represents the Leaderboard.
• The castle is Home.
• The coat of arms-looking symbol is the Teams area.
• The card stack is for Collection.

Each tab has the name printed clearly at the top. That said, the highlighting of the tab in the navigation bar, the raised icon and the addition of the label are useful for users keeping track of where they are and what they’re doing in the app. These visual changes should also encourage them to make use of these other areas of the app since it’s clear what purpose each serves. You can’t always say that for gaming apps.

Wrap-up

If you’re wondering if you can ditch icon labeling once and for all, the answer to that is “Nope.” Icon labels aren’t just there to make mobile apps easier to navigate. They’re also there for accessibility and inclusivity. You want everyone—regardless of impairment, limitation, demographic, geographic location and so on—to be able to use your app with ease.

That said, if you find that any of the contexts mentioned above apply to any of the mobile apps you’re developing, then you might be able to get away with a label-free icon design.

The only way to know if you can do this, though, is through user testing. While we can make assumptions about why the designers and developers above didn’t include labels, and what little impact it has on users, you’ll never really know until you get feedback and confirmation from your actual users. So make sure that’s part of your design process if it’s not already.