Icon + label combinations: layout patterns that convert best

You have decided to use icons with text labels in your navigation. Good call—the data supports it. But the next question is less obvious and just as important: how do you arrange the icon and label relative to each other? Vertically stacked? Side by side? Label only on hover? Each pattern produces measurably different results depending on the context, and picking the wrong layout can undo the benefits of adding labels in the first place.

The layout of an icon-label pair affects three things simultaneously: scannability (how fast users can find what they want), tap accuracy (how often they hit the right target), and visual density (how much navigation you can fit in a given space). Getting the right balance for your store’s specific navigation requires understanding what each pattern does well and where it breaks down.

Pattern 1: vertical stack (icon above, label below)

The vertical stack is the most common icon-label pattern in mobile interfaces. The icon sits on top, the text label sits directly below it, and the two form a single visual unit. This is the pattern used in every iOS tab bar, every Android bottom navigation bar, and virtually every major mobile app.

Apple’s Human Interface Guidelines specify this layout explicitly for tab bars: icons at 25x25 points with a text label directly below in the system font. Google’s Material Design guidelines mirror this, specifying icons at 24x24 dp with a 12 sp label beneath. Both platforms arrived at the same layout independently because the vertical stack solves the fundamental mobile problem: limited horizontal space.

Why it works on mobile:

A phone screen in portrait mode is typically 375–430 points wide. A mobile tab bar needs to fit 4–5 navigation items across that width. Stacking the icon above the label lets you fit more items because each item occupies roughly 70–80 points of width rather than the 120–150 points needed for a horizontal arrangement.

The vertical stack also creates a natural tap target that is larger than either the icon or the label alone. When users aim for the general area of an icon-label pair, they have a target that is roughly 48–56 points wide and 44–52 points tall—comfortably above Apple’s 44x44 minimum and Google’s 48x48 minimum. This is roughly 30–40% more forgiving than an icon-only button at 24–28 points.

A/B testing on ecommerce mobile sites supports this. Blend Commerce’s test on Shopify stores used the vertical stack layout (matching the iOS convention) and measured a 10.37% conversion lift compared to icon-only navigation. The vertical stack is not just the most common pattern—it is the best-tested one.

When to use it:

• Mobile tab bars or bottom navigation bars (3–5 items)
• App-style navigation where you want to match iOS and Android conventions
• Any persistent mobile navigation that stays on screen across page views

When it breaks down:

The vertical stack is less ideal for slide-out menus or navigation drawers, where items are listed vertically. In that context, stacking an icon above its label for each menu item wastes vertical space and creates an unusual visual rhythm. Slide-out menus use the horizontal pattern instead.

Pattern 2: horizontal pair (icon left, label right)

The horizontal pair places the icon to the left of the text label on the same line. This is the standard pattern for slide-out menus, sidebar navigation, desktop navigation bars, and navigation lists.

Why it works for menus and lists:

When navigation items are listed vertically—as in a hamburger menu, sidebar, or dropdown—the icon serves as a visual anchor that helps users scan the list faster. Research from the MIT AgeLab on visual scanning patterns found that left-aligned icons create natural scanning “landmarks” that reduce the time needed to locate a specific item by 18–25% compared to text-only lists.

The horizontal pair also maps to natural reading patterns. In left-to-right languages, users scan the icon first (instant recognition), then the label (confirmation). The eye movement is smooth and linear. In a vertical stack, the eye has to move down from icon to label, which is slower when scanning a list of many items.

Size and spacing that work:

Material Design provides specific guidance for horizontal icon-label pairs in navigation drawers: icon at 24x24 dp, 16 dp of space between the icon and the label, label in 14 sp medium-weight font. The total height of each row is 56 dp, which provides a comfortable tap target.

Apple’s guidelines for list-style navigation are similar: icons at 22–29 points (depending on the icon’s complexity), with the label to the right in the system font. Row height is 44 points minimum.

When to use it:

• Slide-out or hamburger menus
• Sidebar navigation on desktop
• Dropdown menus
• Settings screens
• Any vertically-listed navigation where items are stacked top to bottom

When it breaks down:

The horizontal pair does not work well in constrained horizontal spaces like mobile tab bars. Five items, each with an icon and a label side by side, simply do not fit in 375 points of width without either truncating labels or making the text unreadably small.

Pattern 3: label on hover (icon only, text appears on hover)

Label-on-hover is an increasingly common pattern on desktop, especially in sidebar navigation like the one used in Gmail, Slack, and various dashboard applications. The navigation shows icon-only in a narrow column, and hovering over an icon reveals a tooltip with the text label.

Why it is tempting:

The appeal is obvious. You get a compact navigation that takes minimal screen space, plus the ability for users to discover labels when they need them. It feels like the best of both worlds.

Why the data tells a different story:

Label-on-hover has a fundamental problem: it requires users to interact before they can identify navigation items. This is a step backward from always-visible labels, where identification happens at a glance.

Nielsen Norman Group testing on hover-based tooltips found that only 15% of users intentionally hover over navigation items to reveal labels. The rest either already know where things are (power users) or give up and look elsewhere. This creates a steep learning curve for new visitors, which is exactly the opposite of what you want for an ecommerce store where most visitors are first-timers.

Research from the Baymard Institute on ecommerce navigation patterns found that tooltip-dependent navigation produced 22% fewer successful navigation completions compared to always-visible labels. Users were slower, more likely to make navigation errors, and more likely to use the browser’s back button (a signal that they ended up in the wrong place).

And then there is the obvious problem: hover does not exist on mobile. Touch screens have no hover state. A tap on an icon-only navigation either triggers the action immediately or opens a tooltip that requires a second tap—adding an extra step that mobile users do not expect and will not tolerate.

When it might be acceptable:

• Internal dashboard or admin tools where users are trained and use the interface daily
• Desktop-only applications where screen real estate is extremely constrained
• Secondary toolbars (like formatting toolbars) where icons are highly standardized

When to avoid it:

• Any customer-facing ecommerce navigation
• Mobile navigation of any kind
• Primary navigation where first-time visitors need to find their way

Pattern 4: label below on active state

A variation that has gained traction is showing labels only on the currently active navigation item. This is common in Material Design implementations where the bottom bar shows icons for all items but only displays the text label on the selected tab.

The tradeoff:

This pattern saves horizontal space while still providing context for the current location. Google’s Material Design guidelines offered this as an option for bottom navigation with more than three items.

However, testing has shown that this approach is inferior to showing labels on all items. A study conducted by the UX team at Booking.com (shared at a 2019 NNG conference) found that always-showing labels reduced navigation errors by 15% compared to the active-only label pattern. Users needed to see what all the options were, not just which one they had already chosen.

Material Design has since updated their guidance to recommend labeled navigation for all destinations, not just the active one.

Choosing the right pattern for your store

The decision comes down to two factors: the navigation context and the device.

Context	Best pattern	Why
Mobile tab bar (3–5 items)	Vertical stack	Matches platform conventions, large tap targets, fits width
Mobile tab bar (5+ items)	Vertical stack with scrollable bar	Still vertical stack, but allow horizontal scrolling
Slide-out menu	Horizontal pair	Natural scanning in vertical lists
Desktop header	Horizontal pair or text-only	Ample horizontal space
Desktop sidebar	Horizontal pair (always visible labels)	Users need to scan options quickly
Footer navigation	Text-only	Icons add no value here
Floating action button	Icon only (with tooltip)	Single action, icon is sufficient

Quick testOpen your store on a phone and try to identify every navigation item without reading a label. If you pause on even one item, that is where a label should go. If your mobile tab bar uses horizontal pairs and items feel cramped, switch to vertical stacks. Navi+ lets you toggle between layout patterns in the menu builder, so testing different combinations takes seconds rather than hours of theme editing.

The safest default for most Shopify stores is the vertical stack for mobile tab bars and the horizontal pair for slide-out menus. These patterns match what users already expect from the apps they use every day, and they have the strongest testing data behind them. Start there and iterate based on your own store’s analytics.

This article is part of the larger guide on Icons vs text in navigation: when to use which (and when to use both).