: What are the Best Sizes for Designing an Icon Set Used for Web The icons that I've created for a website of mine are starting to become a little disjointed in size and styling. I"m wanting

@Cofer715

Posted in: #BestPractice #Icon #WebsiteDesign

The icons that I've created for a website of mine are starting to become a little disjointed in size and styling. I"m wanting to spend some time creating a standardized icon set. I'm most concerned about the approach in creating a size that can be used throughout the site either big or small.

Question: What is the best size to create an icon set used for Web? 24x24 and 30x30 seem to be common as they're standards for Material design and iOS Design. So I could pick one of those; however, those can be pretty large for system icons (e.g. help icon).

Does one typically design 1 size (say 24x24) and then resize where necessary depending on the application? Say a large help icon vs a small help icon in a menu, for example, both based on the same 24x24 original icon.

I've seen 1 singular set of icons come in sizes of 18, 24, 30, 36, 42, 48 to cover a whole range of different sizes. Is something like this common practice? Where those don't divide into each other equally one would need to adjust the icon where necessary so that it precisely falls on the pixel grid and results in crisp lines across all sizes.

I'm curious how others in the web design community approach icon design used for the web.

Edit: forgot to add that I’m designing these in Sketch so in vector format, and to clarify my question is not so much as best practices of designing the actual icon but more on a standard size (canvas size of the icon if you will) of the set.

Vote Up Vote Down

Login to post a comment!