Accordion Icons: Which Signifiers Work Best?

Design Recommendations If using accordions in your mobile menus, the caret appears to be the safest icon choice. Do not have icons and text labels link to different actions (i.e. label directly to page, icon opening an accordion).  Our study findings further support our previous recommendations that you should not use split buttons for accordions. Our study showed that users tapped fairly equally on both the text label and the icon and did not expect them to do different things. Decide if your menu items will either open a submenu accordion or go directly to a category-overview page.  If you choose to have your menu items link directly to a landing page, do not use a right-aligned icon.

Summary Users tend to click fairly equally on both the accordion icon and the accordion label, so avoid dissociating those by assigning them different functionalities.  Use a caret icon to designate an accordion, whether on desktop or mobile — our study found that of the standard set of icons used in this context, only the caret performed better than either no icon or a nonsense icon at indicating that than it was an accordion.