What are the Best Sizes for Designing an Icon Set Used for Web

Question

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.

Answer 1

You should design in a vector based environment so that your master designs are resolution independent. That way you can export them at any resolution that makes sense now as well as any that become relevant in the future. Even better, stay in the vector domain (i.e. SVG) so that pixels don’t rule the design process.

You may need to have a set of rules to work to such as minimum line weights so that everything works nicely at different sizes and in different resolutions, but you can establish these with a little experimentation.

Also, you may need to have variants for small, medium and large (for instance) with different levels of detail, but keeping everything as vectors makes this much easier to manage.