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.

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.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts
Share This Article

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

4 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?

  2. Thomas

    Aug 12th, 2014

    Short and to the point. Thank you!

Leave a Comment