0

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.

1 Answer 1

3

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.

1
  • Thanks for your reply. I edited my original question a little to clarify my question more. I am editing in a vector application for sure, and am interested mainly in the canvas size that each icon in the set should be designed at.
    – cholson
    Mar 14, 2018 at 21:04

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.