Resources

Drawing icons

Last updated: June 2017

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.

image

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.

image

Paths

The stroke settings should be as follows:

  • Weight: 1pt
  • Cap: Round cap
  • Corner: Round join
  • Align stroke: Align stroke to center

image

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.

image

image

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.

image

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.

image

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.

image

Export settings

Text and strokes should be expanded to paths before exporting using the following settings:

image