currently i'm designing a back-office to manage geolocation of items in realtime, well... The thing is you can download a csv with all data detailed...

which is the right position to put an icon with a text next to it?

is proper to put an icon with a text next to it? if not, which is the best practice to put a download button/action?


Pd: sorry for my bad english, honestly

  • Which platform/interface? – DarrylGodden Mar 5 '20 at 11:58

An icon should always be positioned either above or before the label which describes it.

The icon is intended to be an easily scannable item that allows the user to quickly identify a control or section of the UI and as such should come before the content it represents. You should generally place the icon so that it is inline with the text and is 'read' before the text (so to the left of the text in ltr langs and to the right of the text in rtl langs). In this format, the icon is there to support the text content and can act as a hint of the content of the text before the user has to actually parse the text.

You can place the icon above the text but I would suggest only doing so if the icon is the main focus of that UI element and the text is supporting the icon. This can be used for the main navigation links in your application where a user is more likely to be familiar with the icons themselves and the text is just there to act as a fallback for users that are not yet familiar.

  • Just as an aside: UI is art and in art there are no rules. – user121402 Mar 7 '20 at 21:01

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