Should the icon be placed to the left or the right of the text?

Answer: In 90% of cases, place the icon to the LEFT.

Here is the logic behind it:

• Reading Flow (Left-to-Right): In western languages, we read from left to right. Placing the icon on the left allows the user to see the visual symbol before reading the text. The icon acts as a visual “anchor” that speeds up recognition.
  • Example: A trash can icon to the left of the word “Delete”. The brain recognizes the shape faster than it reads the word.
• The List Effect: If you have a vertical list of menu items, icons on the left create a tidy vertical line (a “gutter”), making the list easy to scan.

Exceptions (When to put it on the RIGHT):

There are specific patterns where the icon belongs on the right side:

1. Continuity / Forward Movement: Arrows indicating “Next,” “Continue,” or “Go to details” (e.g., Read more ->).
2. Dropdowns: The small chevron/caret (▼) indicates a menu will open below.
3. External Links: The small “box with arrow” icon usually sits at the end of a link to indicate it leads to a new site.
4. Status Indicators: A checkmark (✓) or warning symbol often sits to the right of a form field to confirm validation.