Where to Place Icons Next to Button Labels

by on 05/13/14 at 12:07 pm

Icons placed next to button labels are like bullet points placed next to items in a list. Both can make information easier to find and scan, as long as they’re placed in the right spot.

Eyetracking research has shown that users scan from the left in a vertical movement. In order for icons to serve as a visual scanning aid, users need to see them before they see the button label. Placing them to the left of your button label allows users to see the icon first. If you place icons to the right of your button label, they’re not helping users scan because users see them last. If users read the label first, your icon serves no purpose other than decoration. Icons describe button labels, not the other way around.

Where to Place Icons Next to Button Labels

Icons are also misplaced on button labels with body text. Users scan from the left in a top-down vertical direction. This means when you place icons to the left-center of button labels with body text, users will see the button label before the icon. This doesn’t help users scan. To make your icons a visual scanning aid, align the icon with the button label instead of centering it with the button label and body text. Users will then be able to scan easier because they’ll see the icon first.

Icons and bullet points work similarly. Bullet points are effective because they draw attention from the rest of the text on a page. Icons are effective because they draw attention from the rest of the text on an interface. If users can’t find your button labels easily, they’ll have trouble navigating your site. Place them where they’re easy to scan, and they’ll be able to find your buttons in less time with less work.


Where to Place Icons Next to Button Labels Where to Place Icons Next to Button Labels

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

2 Responses to “Where to Place Icons Next to Button Labels”

  1. Ricardo Zea

    May 14th, 2014

    What’s your take on right-pointing arrows in buttons with CTAs like “Apply Now »” or “Next »” for example?

    • anthony

      May 16th, 2014

      Those are affordances, not icons, that belong on the right. Affordances describe what’s a button. Icons describe where that button takes you.

Leave a Comment