What Accordion Icon Should You Actually Use
New usability research on accordion icons settles a question most sites get wrong. Use a caret, underline true links, and stop mixing the two.
If your site uses an accordion for an FAQ, a product spec sheet, or a mobile nav menu, there is a good chance the icon next to it is quietly confusing visitors. New usability research summarized by Smashing Magazine points to one clear fix, and it takes less time to apply than it did to read this sentence.
The problem is mixed signals, not bad design
The research, from NN/g, tested how people interpret different accordion icons: carets, chevrons, plus/minus signs, arrows, and no icon at all. The findings are specific. Without any icon, people expect that tapping the menu item will take them to a new page. Custom icons often fail to signal that an accordion will open at all. And across most icon types, people tap the text label and the icon at roughly equal rates, except with the caret, where they favor tapping the icon itself.
That last point matters more than it looks. It means the icon you choose does not just change what people expect, it changes where they actually touch the screen. Pick the wrong icon and you are misdirecting taps, not just intentions.
Where sites get it wrong
The most common mistake the research calls out is the split button: a menu item where the text label links straight to a page while the icon next to it opens an accordion. That pattern produces exactly the kind of tap confusion described above, since users do not reliably know which part of the row does which job.
A second common mistake is overloading the icon itself. Plus and minus signs are generally understood for expand and collapse, but a plus sign carries other meanings too, from "save for later" to "add to cart," and in a multi-level nested menu that ambiguity compounds. Arrows pointing right or down carry similar baggage, since the same symbol is used elsewhere for scrolling, sliding, or jumping to a page section.
The fix
The guidance is simple enough to action this week:
- If it is a link, underline it. No icon required.
- If it opens an accordion, use a caret or triangle pointing down by default, and flip it on interaction.
- Never split the label and the icon into two separate actions on the same row.
- If you need an alternative to the caret, plus/minus works, but avoid it in deeply nested menus where the symbol gets overloaded.
An example cited in the research, DHL's accordion navigation, follows this pattern directly: no unnecessary arrows, no split buttons, and an explicit "Overview" link placed inside the opened menu for anyone who wants the category page itself.
What to check on your own site
Open your site's FAQ page, your mobile nav, and any filterable product list on a phone. For each expandable section, ask two questions: does the icon look like anything other than a caret or a plus/minus, and does tapping the text label do something different than tapping the icon next to it. If the answer to either is yes, that section is a candidate for this fix before anything else on the backlog.
Sources
- Accordion Icons: Which Work Best?. Smashing Magazine, read 2026-10-27
Run a free Instant Scan on your own site · More from the Newsroom