#Icon px
robust wagon
marble haven
Usually I think that’s why a lot of icons are vectorized but I’m not sure if that completely solves this issue
ember prairie
I am interested on how do I set up the grid to make them perfect pixel. Are there specific steps? The technical parts.
dusky path
that’s how we recommend it to our designers: https://www.chromadesignsystem.com/learn/guidelines/icons-designers
vernal tiger
Draw on the pixel grid, make icons for specific breakpoints.
Dont rely on the browser to render clean versions of your icons from SVG scaling
While I think Marc's document is moving in the right direction... being careful and considerate about how each icon will be used lets you set your icon set up for success by being very intentional about rendering
This is from the apple music UI
but I can spend 12 seconds and redraw it on a grid
and suddenly its not mashed potatos
here is an icon from Marc's example, and it redrawn on the grid
and not converted to SVG from illustrator and then dropped onto the web
Where you can clearly see that its a 2px stroke that sits on a half pixel, so it antialiases out into three pixels to get the same approximate rendering
glacial star
not exactly mentioned, but one of the most important step first and foremost is to actually start your artboard at the intended size the icon will be used at. that way your pixel grid is going to perfectly reflect what will be rendered, and you can properly gauge scale/detail much more accurately. don't ever make an icon at a larger size then scale it down because it's "easier"
vernal tiger
or small and then larger, unless you know the stepping is going to be exact
8 -> 16 -> 32
but you couldnt do like 8 -> 16 -> 24
and then even then, everything will have to be on specific pixels
or it'll end up on half pixels
