Is there a recommended distance between an action icon in the toolbar?

Question

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

Answer 1

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

_{Info source uxmovement.com}

Answer 2

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 👇

https://material.io/design/layout/spacing-methods.html#touch-targets

⌘N every day!