In an app, when using icons, we can have place it on a button, or have the icon borderless. I would think that having it on a button gives better affordance, but it seems that many reputable companies are choosing the borderless route.

What are the advantages and disadvantages of each approach in UX terms?

Paypal screen OKCupid screen

  • 5
    see also: Do unique icon contours help people scan? Mar 13, 2012 at 18:23
  • 1
    Although unrelated to the question, the icon with the label quiver in the second image is in fact an arrow and not a quiver. This error is like using a picture of a cookie for a button that gives you a cookie jar.
    – Dan D.
    Mar 13, 2012 at 21:08

3 Answers 3


To me, especially with an app with a touch interface, the borders serve a clear purpose of defining the area that is able to be used to touch/click to trigger an action.

Take the pink quiver icon. Without that border, the apparent touch area of that icon would be small, even if the actual touch area was larger, and it might give a user pause as they try to position their finger in order to hit a small icon area that doesn't actually exist.

Of course, this only really starts to matter if your icons are actually thin or small, and thus cover only a small area. And in all such cases, there's no reason the border/background couldn't be a very subtle one anyway.


It clearly depends upon the space you have between the icons, for example in your PayPal app you have a dashboard with lots of space - so you can have borderless icons. So that user can tap on any icon without any mistake.

Whereas in your Locals app, all your icons are cluttered in small space, so that requires icons on buttons or some borders representing the clear separation between touch areas of each icon.

It also depends upon the guidelines provided by the platform. for eg. new guidelines for Android ICS. They never have any icons within borders. enter image description here


In my humble opinion,

flat or bordered buttons are not so much a matter of the tapping area or white space between them. I think it's a primer problem of whether the user can understand in the first place if something is a button or not.

You see, the traditional interaction cases so far on the web and desktop applications, usually included a mouse so there was something possible, that certainly doesn't apply on touch interfaces: hover. If hovering over an UI element is possible, the element can respond in many ways to say "hey I'am clickable" or provide a tooltip with a call to action. In mobile devices, it's just trial and error. You tap on things and if they respond you learn they do something. Bordered and embossed things are known to be buttons (well most of the times), so a user can create an interaction scenario prior touching anything.

Finally, maybe it actually relates somehow to white space since non-bordered buttons definitely require a more explanatory call to action like i.e "show me the money" whilst a bordered button could only be "money".

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.