When designing icons for the web, there are a few things to keep in mind:
- How will the icon scale?
It is important to use vector graphics, or SVGs when designing icons for the web, as these will scale up without losing quality. SVGs can be exported from Illustrator and function similar to EPS files from the world of print design. - How will it appear when scaling?
Current design trends lead many designers to create icons with outlines, or hairline elements. When sketching icons in Illustrator it is easy to rely on the pen tool when creating objects. At a particular zoom setting, the hairline setting on 1 or 2 pixels might appear ideal. However, as you scale up, or down, the line weight can get very thin, or very thick. Icons need to be built as vectors, not hairlines with a stroke tool when designing for the web. - How will the aspect ratio work across browsers and devices?
When designing icons for the web, it is important to try to establish a square aspect ratio. Icons that are too tall or too wide will cause UI developers issues when they render the page layout. For example, if icons are laid into a grid pattern, and some are narrower than others, they may appear sized differently.
Exporting icons for the web:
Once you have square icons built as vectors in Illustrator, it is critical to handle your file management appropriately, so you can maintain a master file, with clean asset export.
We recommend using the Asset Export panel in Illustrator, which allows you to save grouped icons to the panel and name them. You can then specify the export format. Within the panel, updates to the icon group will change over time, as you modify elements within your file. In the example above icons are grouped on the pasteboard and labeled with the meaning. Assets are visible in the Asset Export panel, with the same name. This consistency allows other designers working on your file to follow along, and add to the file over time.
With this in mind, you should be able to create compelling icons to turn your website projects into a success. Go to it!