Hi Feisdra. Scott Lewis here. You pose a couple of good questions. The answers will probably vary depending on whom you ask but I'll do my best to give you a useful answer.
For the record, I was taking (un)poetic license with the name "no go zone" but it's really just a margin.
The example you show of the fire extinguisher I would call 12 x 12 but it really depends on how the SVG is set up and how it renders in the UI. If the SVG is set up to include the margin as part of the rendering then it is 16 x 16. If the icon is displayed in the UI without the margin then it will be 12 x 12. I believe this is controlled byt the preserveAspectRatio
attribute in SVG.
Off the top of my head I am not 100% certain but I think you can control how it displays by setting the ViewBox (I will need to confirm that this is the correct attribute) to 16 x 16. The live area or what is considered the "content area" is actually 9 pixels wide by 12 pixels high and sized at 100% that is the number of pixels that will be activated in the UI. But you can build the SVG so that the margin is also included in the display. Think of it as a bounding box around the black area of the icon. When the UI renders it does the bounding box touch the edges of the black area or does it include the white space, i.e., margin/NGZ?
If you do any CSS coding you can think of this as being the same as the CSS box-sizing attribute and whether it is set to content-box
or border-box
. Your fire extinguisher is 9 x 12 when set to content-box
and 16 x 16 when set to border-box
.
I hope that helps with that question but feel free to ask follow-ups and I'll do my best to answer.
Your next question, should you make your icons touch the edge, I think "no", but again, it depends and may not be the same answer even within the same set. Some icons like round ones, diagonals, or icons with and extreme height-to-width ratio may need to touch the edges to appear visually the same size as the other icons.
Dutch Icon told me once that "the aesthetic value of each icon is more important that the grid" so make each icon the best it can be and be as true as you can to the grid as your second priority. If you look at the different design sets like Google Material Design icons (and you should), they do not make every icon the same size. They try to maintain stylistic integrity and consistency. I think this functions very much like designing a font. Some letters are actually a bit taller than the x-height to appear visually the same size based on the amount of white space in the counters. For instance, the letter "O" typically extends slightly beyond the top and bottom lines of the other letters. The same is true with letters like "S" also because our eyes, or rather our brains, put a lot of emphasis on the white area around the letters. If you make the O and S the exact same pixel height as rectangulare letters they will appear slightly shorter when they are not. So you have to make them slightly taller.
The same is true with icons. A square or rectangulare icon with a lot of black coverage will appear heavier and taller than a round or triangulare icon even if they are the same height. So you have to adjust the relative heights.
A great place to start is to try using the grids that Apple and Google provide for their icon design guidelines. It took me several years to realize that my icons looked "off" because I wasn't following a good guide. I learned how to keep my sets consistent by using the Google grid. If you are designing for Android and iOS then you will probably have to create multiple versions of your set because they use different grid sizes. Last time I checked, which was admittedly about 2 years ago, Apple was using a 60-pixel grid and Google was using a 24-pixel grid for the Material Design system.
Your wine bottle and hot dog are great examples! These pose two of the more challenging use cases when designing a consistent set. There is a lot of white space around the live area and the icons have a heigher aspect ratio (height-to-width). In this case you have a 3:1 ratio because your height is 3 times the width. There are a couple of ways you can handle this.
Some designers will exaggerate the ratio and make the wine bottle and hot dog fatter. You can try that. It seems counter intuitive but it can look great. I'll see if I can find an example to share in a subesquent reply. You can also make the neck of the wine bottle shorter.
This is another area that took me a long time to realize : The goal is not to depict the object exactly as it is, but just accurately enough so that the typical user will recognize it. You can get a lot of stylistic mileage out of playing with proportions.
As for the centered strokes ending up outside of the bounding box, that is okay. What is probably more important is making sure the storkes align to the pixel grid in your design app. The app can render the center of the line on the grid lines or it can render the center line to the center of the pixels. This is usually called "pixel-perfect". The rule of thumb I follow is that if my strokes are an even thickness (2, 4, etc) I align the center line of the stroke to the grid lines. If the stroke width is odd (1, 3, etc) I align to the center of the pixel. This makes sure the edges of the strokes always align to the pixel grid lines and give a nice crisp edge. With Retina displays this is less of an issue but IMO it always looks better to maintain pixel-perfection.
Fast-forward 3 years and I still ask myself if my icons' size is determined by the squared-ratio amount of pixels they use.
I answered this earlier less directly but the answer is "If your SVG ViewBox includes the margin area, then the size is the squared ratio. If the ViewBox is constrained to the edges of the black area of the icon, then that is the size". I guess more simply put, the size is whatever the SVG files ViewBox size is.
Questions:
Should my icons touch the edges of my artboard or not?
I don't think they should. As much as possible you should follow the rules in the original "Better Icon Design in Six Easy Steps" article. They are based on the Google Material Design Icons approach, which was based on the practices of designers like Stefan. It is more work and more subjective but I think the end result is better. You will need to take care with your SVG files to make sure the margin area is included in the display size, though. I am happy to help you figure out how to set up the SVG files to do this.
Am I confusing grid size with artboard size?
Perhaps but I think your confusion is warranted. Both approaches are valid. Hopefully the explanations above clarify this for you, though.
Do you think a follow-up article is warranted?