Drawing icons
Drawing guidelines
Document set up
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.
Grid
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.
Paths
The stroke settings should be as follows:
- Weight: 1pt
- Cap: Round cap
- Corner: Round join
- Align stroke: Align stroke to center
Grid and path alignment
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 XX
.5 px.
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.
Path breaks
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.
Corners
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.
Export settings
Text and strokes should be expanded to paths before exporting using the following settings: