In our system, we have many places where we show number values, and next to them we show an icon indicating whether the value is good/mediocre/bad. Before I joined the team, there was no guidelines, so in some instanced they placed the icon to the right of the number, and in others, they placed it to the left.

icons on right icons on left

Is there a rule/guideline/convention that specifies which is better and why?

  • Can you throw some light on the situation? When does the label have just a number and an icon, but no text? I mean, what does "✔ 12" mean?
    – SNag
    Jul 31, 2013 at 11:16
  • This is a table displayed in a dashboard. The table shows elements in rows, and each element is graded in several attributes (columns). Each grade indicates the status of that element on that attribute, and you generally want the grades as green as possible. There is no associated text next to the number or icon. Hope this describes the situation better.
    – Dvir Adler
    Aug 7, 2013 at 14:56

8 Answers 8


The placement of the icons beside the numbers would go by the natural reading order.

Status icons would appear at the end of the line. As seen in the example below, this makes sense because the viewer sees the subject first, then the count associated with the subject, and finally the status of the count. (For RTL languages, the figure would be a mirror image of the one below; and even in this case, the icon would still remain at the end of the line).


download bmml source – Wireframes created with Balsamiq Mockups

However, if the icons themselves are the subject, then they would be appear at the start of the line, and everything else would follow there-after. (Again, for RTL, the layout would be a mirror image of the one below).


download bmml source


If it is only that data then I would agree with simonteo.

Using the indicator ( which will always be the same size ) as a bulletpoint much like Iphone OS uses Application icons as "bullet" points in list.

I generally try to place those values or "object" which will be constant to left. Constant in size, dimensions etc when working with a list or possible table of data.

Question regarding the values:

  • What is more important to your user , the values or overview of the value so that they can concentrate on the good/mediocre/bad ones.

enter image description here


Icons to the left of the number usually indicate the intent of the data, icons to the right of the number usually indicate the quality of the data.

This is just my opinion + observation, but the flow goes from left to right:

What to enter >> entered value >> response to value entered

  • 1
    That being said, an opposing opinion is just as valid - consistency in the UI is more important.
    – Don Nickel
    Jul 31, 2013 at 12:04

I would consider two main things:

  1. proximity to another vertical line in the UI
  2. Reading direction of the audience (western and asiatic languages are generally right-to-left)

Your example conveniently abstracts the column from a context, but this context is too important to leave out.


download bmml source – Wireframes created with Balsamiq Mockups

A and D create stronger columns because of alignment and visual form. But, if these elements were not next to the edge of the window / screen, then the things they have proximity to then may change our reasoning for creating a 'strong column'


I agree with Don Nickel, in my experience the thought process followed is value -> status rather than status -> value. As previously pointed out, consistency across your UI is important, but given this specific scenario, I would go with putting the icons on the right of the numbers.


Some people write smileys this way =) and some others write smileys this way (= .

(= looks really weird to me and I'm always surprised when a person from the same culture as me types it that way. So I'm guessing that there isn't a definitive answer to the question of whether icons to the right or left are better.

I would suggest conducting a quick straw poll to see what majority of your users are used to. Once you have the answer, implement it consistently throughout your user interface and always use the same placement going forward.


If the icon is a comment on the figures, then it comes after.
This seems to be the case.
The iPhone examples don't apply here because in that case the icon is "the thing" and the text explains it.


enter image description here

My opinion is that this is the better design as the icons resemble bullet points and aid the user to view it easier.

  • 1
    When displaying data and supporting elements, it's imperative that the data itself is the most prominent visual element. If you're busy thinking about the icons as "bullet points" rather than actual information being conveyed to the user, then you need to rethink your approach to UX.
    – Racheet
    Jul 31, 2013 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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