Place icons on the left
An icon can give users a hint about the button's purpose. Leading icons are commonly placed before the label in left-to-right languages. Research shows that in left-to-right languages, users scan pages, paintings, movie screens, and just about everything from the left.[1] For this reason, placing an icon on the left helps identify a button and its purpose much faster. When it appears after a button label, the icon serves only as decoration.
Additionally, placing your icons on the left will leave room on the right for a downward pointing arrow when you need a dropdown menu.
If icons are self-explanatory and recognizable, users won't need to read the label. Use a leading icon to grab their attention.
Pro Tip: Place the icon after the label for directional actions (like “Next →”) or trailing indicators (like checkmarks or spinners)
References
- F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) | Nielsen Norman Group
