Ask a room of designers to name the icons they would feel comfortable using without text labels, and you will get twenty different lists. Ask users what those same icons mean, and you will get two hundred different answers. The gap between what designers assume is universal and what users actually understand is one of the most expensive mistakes in ecommerce navigation.
The truth, backed by years of research from the Nielsen Norman Group, Apple, Google, and large-scale A/B testing firms, is much narrower than most people think. Only a small handful of icons can be used alone without creating confusion. Everything else needs a label.
- Only five icons have near-universal recognition: home, search, cart, menu (hamburger), and close.
- Nielsen Norman Group research shows 60% of users misinterpret icons that designers assume are obvious.
- Platform inconsistency is the main culprit—the same icon means different things on different apps.
- Even "universal" icons benefit from labels when space allows, increasing engagement by 10–20%.
The universal five
The icons that actually work without text are the ones that have been standardized across platforms for decades and have near-identical implementations in virtually every major application users encounter. The list is short.
1. Home (house icon)
The house icon has meant “go to the homepage” for so long that its meaning is baked into user expectations. Every browser, every mobile OS, and virtually every app uses the same visual metaphor. Recognition rates for the home icon exceed 95% in most user testing.
That said, the home icon is somewhat redundant in ecommerce. Most Shopify themes already use the store logo as a homepage link, which serves the same function and reinforces brand identity. If you have both a logo and a home icon, you are dedicating two pieces of navigation real estate to the same action.
2. Search (magnifying glass)
The magnifying glass is one of the most tested icons on the web. Its recognition rate is consistently above 90%, and users tap it without hesitation. This icon has the advantage of being visually descriptive—a magnifying glass looks like a tool for finding things—and it has been used in desktop operating systems since the 1980s.
In ecommerce, search is critical. The magnifying glass icon can safely be used alone in a mobile header or tab bar, though adding the word “Search” beneath it still produces a small but measurable increase in engagement. Even universal icons get more clicks when labeled.
3. Shopping cart or bag
Decades of online shopping have made the cart icon unmistakable. Whether it is a shopping cart from a grocery store or a shopping bag from a retail store, users know it means “view items I intend to purchase.” The icon typically includes a badge showing the number of items, which adds functional clarity.
Testing from Baymard Institute shows that cart icon recognition in ecommerce contexts is above 95%. Unlike some other icons, the cart icon is not overloaded with alternate meanings—it means one thing, and that meaning is stable across platforms.
4. Menu (hamburger icon)
The three-line hamburger icon has become the default symbol for “open the menu” on mobile devices. Its recognition has grown substantially over the past decade as mobile-first design became standard. Early criticism of the hamburger icon—particularly a famous 2014 test showing that the word “MENU” outperformed the icon—has largely been resolved as users have adapted to the pattern.
That said, combining the hamburger icon with the word “Menu” still outperforms the icon alone. Nielsen Norman Group testing across hundreds of thousands of sessions found a 20% increase in menu engagement when the icon was paired with text. The icon is understood, but the label removes the last bit of hesitation.
5. Close (X icon)
The X icon for closing windows, dialogs, and overlays is universally understood. It has been a standard part of graphical user interfaces since the earliest desktop operating systems. Recognition is near 100%, and users do not hesitate when they see it.
The X icon is one of the few cases where a label would actually hurt usability. Adding the word “Close” next to an X creates redundancy without adding clarity, and it takes up space that is often very limited in a modal header.
Why everything else fails without a label
Once you step outside these five icons, recognition rates drop sharply. The reason is platform inconsistency. The same visual symbol means different things in different contexts, and users have no way to know which meaning applies to your store unless you tell them.
The heart icon is a perfect example. On Instagram, it means “like.” On Pinterest, it means “save.” On many ecommerce sites, it means “add to wishlist.” On health apps, it represents health data or favorites. When a user encounters a heart icon on your store for the first time, they are guessing. Research from the Nielsen Norman Group found that unlabeled heart icons were misinterpreted by more than 40% of users in ecommerce contexts.
The star icon has the same problem. It can mean ratings, favorites, premium features, or featured items, depending on the app. Without a label, users have to decode it from context, which introduces friction.
The person or user icon might seem obvious—it represents “account” or “profile,” right? Except on some sites it means “login,” on others it means “customer service,” and on still others it opens a dropdown with multiple account-related actions. Recognition studies show that only about 60% of users correctly identify the person icon as “account” on first encounter.
Grid, tag, filter, and bookmark icons all suffer from severe ambiguity. A grid might mean “view as grid,” “categories,” “collections,” or “all products.” A tag might mean “sale items,” “labels,” or “organize.” A filter icon is somewhat better, but still only recognized by about 70% of users without a label.
The pattern is clear: icons that have one stable meaning across all major platforms can work alone. Icons that mean different things in different apps cannot.
The recognition data
The Nielsen Norman Group has run multiple rounds of icon usability testing over the past decade. Their findings are consistent. In one widely cited study, they tested 75 different icons used across ecommerce and content sites. Only six icons had recognition rates above 80%. The rest fell into a range where 40% to 70% of users either misidentified the icon or skipped it entirely because they were unsure.
Apple’s internal research, which informs their Human Interface Guidelines, led them to explicitly recommend text labels on all tab bar items. Their guideline states: “If you remove the labels from your tab bar, make sure the icons are clear and easy to understand.” But then it goes further: “It’s generally best to include labels because they help users understand the purpose of each tab at a glance.”
Google’s Material Design guidelines are even more direct. The guideline for bottom navigation specifies: “Text labels should be used for all destinations. Destinations without text labels do not communicate clearly enough on their own.” They tested icon-only bottom bars and found that adding text labels improved navigation success rates by 18%.
This is not theoretical. When major platforms with billions of users and near-infinite resources for testing tell you that text labels are mandatory, it is because their data showed that unlabeled icons hurt usability.
When universal icons still benefit from labels
Even the five universal icons perform better with labels in many contexts. The difference is smaller than with ambiguous icons, but it is measurable.
Testing by Blend Commerce on Shopify stores found that a mobile tab bar with icons and text labels produced 10% higher conversion rates than the same tab bar with icons alone—even though the icons used were from the universal set (home, search, collections represented by a grid, cart, account).
Why would adding a label to a magnifying glass icon increase engagement? Two reasons. First, the label provides confirmation. A user sees the icon, recognizes it, and the label confirms they are correct before they tap. That instant of confidence removes micro-friction. Second, the label creates a larger, more forgiving tap target, which improves usability on small screens.
The practical takeaway: universal icons can be used alone when space is genuinely constrained, but adding short labels is the better default.
Where this leaves your navigation
If you are building or auditing navigation for a Shopify store, here is the decision framework:
Icons safe to use alone:
- Search (magnifying glass)
- Cart or bag
- Close (X)
- Home (if not redundant with logo)
- Menu (hamburger)
Icons that need labels:
- Everything else. Collections, account, wishlist, favorites, filter, sort, share, settings, notifications, chat, and any category-specific icon you are considering.
Best practice: Even the universal icons should have labels in persistent navigation like a mobile tab bar. The space cost is minimal—one or two words beneath each icon—and the usability gain is real.
If your navigation currently uses icon-only buttons for anything other than search, cart, or close, run a simple test. Add text labels and measure engagement. Tools like Navi+ make it easy to toggle labels on and off, so you can test both versions without rebuilding your theme. The data will almost always favor the labeled version.
This article is part of the larger guide on Icons vs text in navigation: when to use which (and when to use both).