3

Wanted to practice making an icon set. I created a 24x24 px grid as a starting point. Let’s say, based off this grid, I have a rectangle icon that is 16x24 px and a square icon that is 20x20 px, but they’re both inside the 24x24 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 24x24 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?

Improve this question
1
  • Icons of different dimensions in the same set could cause unexpected weirdness if they're being positioned/ with CSS or similar, and it would make for a much more complicated sprite sheet...
    – tobybot
    Apr 18, 2018 at 16:46

1 Answer 1

Reset to default
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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