Why Accordion Icons Matter More Than You Think
Accordions are everywhere—from navigation menus to FAQ sections—but the tiny icon that signals expand/collapse can make or break usability. Should you use a caret, chevron, arrow, or plus/minus? Does it even matter?
Turns out, it does. User research reveals that icon choice affects expectation and interaction. More importantly, certain patterns—like split buttons where the label links elsewhere and the icon expands—are actively harmful. In this deep dive, we'll break down the evidence and give you a clear, no-nonsense recommendation.
Let's start with the most fundamental rule: if it's a link, underline it; if it's an accordion, use a caret. But there's nuance. Read on.
The Icon Hierarchy: What Works and What Confuses
No Icon = Expectation of Navigation
When an accordion item has no icon at all, users assume tapping it will navigate to a new page. This is a strong, nearly universal expectation. Adding a custom icon that doesn't clearly signal "expand" only adds friction. Users tap roughly equally on the icon and the label, so the entire row must communicate the action.
Best practice: If the item is a link, underline it. No arrow, no caret, no icon. Simple and flawless.
Arrows ▶ and Split Buttons: A Recipe for Errors
A right-facing arrow ▶ suggests navigation, not expansion. A down arrow ▼ might imply expansion, but it's ambiguous. Worse is the split button pattern: the text label links to a page while the icon opens an accordion. This dual-action design confuses users and increases mis-taps.
Better approach: Make the entire row expand the accordion, and place a direct link to the category page inside the expanded menu.
Plus/Minus and Up/Down Arrows: Understood but Overloaded
+/- and ↓/↑ are commonly used and generally understood, but they carry multiple meanings. Plus can mean "add to cart," "zoom in," or "save." Arrows can mean scroll, next match, or jump. In multi-level navigation with many open sections, these icons become ambiguous.
Verdict: They work, but only if your design context is unambiguous. For most cases, carets are safer.
The Caret ▼: The Safest Default
A downward-pointing caret (triangle) is the most reliable icon for accordions. It clearly signals "expand" and rotates to point up (or sideways) when open. It's widely recognized and rarely misinterpreted.
<!-- Example: Accessible accordion with caret icon -->
<button class="accordion-toggle" aria-expanded="false" aria-controls="panel-1">
<span>Section Title</span>
<svg class="caret" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 6l4 4 4-4" stroke="currentColor" fill="none" stroke-width="2"/>
</svg>
</button>
<div id="panel-1" class="accordion-panel" hidden>
<p>Panel content...</p>
<a href="/category-page">Go to category page</a>
</div>
<style>
.accordion-toggle[aria-expanded="true"] .caret {
transform: rotate(180deg);
}
.caret {
transition: transform 0.2s ease;
}
</style>
This code snippet shows a clean, accessible accordion with a rotating caret. Note the aria-expanded attribute for screen readers and the direct link inside the panel—no split button needed.
Critical Warnings and Limitations
- Split menus are harmful. Avoid them unless absolutely necessary. They cause more errors than they solve.
- Don't overload icons. If you use +/-, ensure it can't be confused with other actions in your UI.
- Consistency is key. Once you pick an icon (caret, chevron, etc.), use it everywhere. Mixing icons across the same interface breaks learned patterns.
- Accessibility first. Always include
aria-expandedand proper focus states. Icons alone are not accessible. - Test with real users. Even the "safest" icon can fail if your audience has specific expectations.
Pro tip: For multi-level navigation, consider using a caret that rotates 90 degrees to indicate a submenu, but keep the expand/collapse behavior consistent.
Next steps: Audit your current accordions. Remove split buttons, replace ambiguous icons with carets, and ensure links are underlined. Then run a quick usability test with 5 users to validate.
The Bottom Line
When in doubt, use a caret. It's the safest, most universally understood icon for accordions. Avoid split buttons, don't overcomplicate with arrows, and always underline links. Simplicity wins.
For a deeper dive into related UI patterns and modern web development, check out our analysis of Azure's AI datacenters built for NVIDIA's Rubin platform and how Meta reimagined recommendation retrieval with SilverTorch. Both offer valuable insights into scalable system design.