See example from Outlook.

I know the answer may vary, so I'm looking for an answer which is backed up (not sure if anyone researched it). I want to show my team and try to convince them of the current gap (10 px) is too small enter image description here

2 Answers 2


The best way to understand distances in interactive elements is using, or imagining if it doesn't exist, the application on mobile devices where the minimum distance allowed depends on the necessary space for the user's finger. For this there are several studies, the main conclusion is that it depends on the size of the icon or button.

A larger size of the icon / button = less space is required
  • 12-24 pixels for a large button
  • 24-36 pixels for a medium button
  • 36-48 pixels for a small button

enter image description here

Info source uxmovement.com


The material system recomends that you should have min 48x48 dp touch area with 8 dp between the elements. That goes with what Danielillo mentioned; it's not the size of an element it’s the size of an interactive area. So with bigger elements, you don't need as much white space around them.

source 👇


⌘N every day!

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.