Spacing and padding iconography

Wanted to practice making an icon set. I created a 24×24 px grid as a starting point. Let’s say, based off this grid, I have a rectangle icon that is 16×24 px and a square icon that is 20×20 px, but they’re both inside the 24×24 container.

I want to put 4 icons next to each other on a webpage. If I base the spacing between each icon off of the edges of the 24×24 container, wouldn’t the spacing look off since it differs between icons?

What’s the best practice to deal with this? Should I even be spacing icons off of the container size? Should my icons be different dimensions?


IMHO it’s unavoidable to have slightly differing dimensions in an icon set if they are each to have proper proportionate character.

The basic question you are asking is the same thing underlying optical kerning versus mechanical / monospace, and the answer depends on how significant the final impact.

For myself, I lay out icon sets mechanically (using the container) initially, then optically adjust as needed to get the right spacing.

Source : Link , Question Author : anonymous , Answer Author : GerardFalla

Leave a Comment