Last updated: June 2017
When starting a new icon, either use the AI paths file or create a new 72 ppi document using pixels as the units and with ‘Align New Objects to Pixel Grid’ deselected.
Web icons are drawn using a 17 × 17 pixel grid. Use the preferences below after opening or creating a document to set the grid up correctly.
The stroke settings should be as follows:
- Weight: 1pt
- Cap: Round cap
- Corner: Round join
- Align stroke: Align stroke to center
The plus icon below is a good example how the path coordinates align to the pixel grid.The values of the position (X or Y) and the dimensions (W or H) can be either
XX.0 px OR
Having the paths aligned to the grid correctly insures better legibality and sharpness at smaller sizes. The example below represents a pixel preview (scaled up 3200%) of the same icon path. The icon on the left is aligned correclty to the pixel grid, unlike the icon on the right.
If there are ‘objects’ that overlap in the icon illustration, consider introducing a path break to make each item more distinct from the other. Typically a 1 pixel space is used.
Right angles should have a corner radius of 1 px. Obtuse angles should also be rounded, although be mindful of how the path renders on the pixel grid.
Text and strokes should be expanded to paths before exporting using the following settings: