3

What is the best practice for using both icon and label in a button should it be before the label or after ?

3

According to the article Where to Place Icons Next to Button Labels, from UX movement, the icon should come first:

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.

enter image description here

1

Aline has a great link to research in his answer. I'll add that if the icon is on the left, you leave the right side available to add a downward pointing arrow to indicate a dropdown menu. Additionally, after some digging, I found way more examples of icon on the left than on the right:

GitHub Buttons:

enter image description here

GitHub Labels:

enter image description here

Google Account:

enter image description here

StackExchange:

enter image description here

KnowBe4 Admin Portal:

enter image description here

WordPress.org Blog:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.