I recently presented a short talk at WordCamp London and Staffs Web Meetup about designing icons. I thought it might be nice to delve into the topic a little further to offer some tips and tricks when designing icons.
There are lots of different ways to represent a single thing. Take the word ‘charity or ‘event’ for example. Brainstorm ideas with a friend or colleague. Collate a list of ideas and narrow them down to the ones you think will work best. You don’t need to sketch or design anything at this stage. Brainstorming with others is invaluable. Everybody thinks differently so getting other opinions is important.
Icons need to be familiar and recognisable. Creativity is important but stick to conventions. Usability should always take priority. A user area is represented by a person, a menu is represented by a burger and a play button is represented by a triangle.
Icons are used to aid the flow and navigation of a website. They need to be instantly recognisable. If there is a convention for an action, stick to it!
I learn’t this trick after listening to Jon Hicks being interviewed on Paul Boag’s podcast. Jon Hicks is often considered the king of iconography.
When designing icons make the lines slightly thinner than you think they should be. If you’re designing a 16 pixel by 16 pixel icon you might assume the lines should be 1 pixel thick. Instead make them 0.8 pixels. This will help make the lines look crisper, especially on rounded corners.
When designing in Sketch or Adobe Illustrator make sure to keep checking the rasterised version of the icon. When a shape is rasterised it will use a lot more pixels so making the lines a little thinner helps counter this.
Design your icons at the size they’ll be used. This allows you to get a good idea of the detail you need add to them. Make sure to keep zooming out to 100% so you keep check of what it looks like at the actual size. Don’t get carried away adding detail, particularly on small icons. As rounded corners alias you’ll find that tiny space quickly fills up!
Keeping things simple is important. More detail will often make an icon less recognisable. An icon needs to be recognised immediately. If people have to pause to think what they mean, it probably means the icon isn’t right for its use. With iconography, less is definitely more.
Retina is on the rise, most mobiles and tablets are now retina. It is important to keep it in mind but not to design for them. Most computers are still standard resolution. When designing a retina icon you have the ability to bring in more detail. Unfortunately when the same icon is shown on a standard display it becomes blurry and difficult to understand. The reduced pixels will make the icon unrecognisable.
There is a new trend of icons that are responsive. This allows you to add detail and change the look of the icon as screen resolutions improve, or as you make the icon bigger. I haven’t done much research on this but hope to look into it further in the future.
Your opinions and perceptions will differ from everyone else. Make sure to show your icons to others. Ask what they represent. The most important thing about an icon is that it is easily recognised and familiar to people. Don’t be scared to go back to the brainstorming stage if an icon isn’t working out.
The ultimate test of an icon is when you see it in context. Drop your icon into the website and see what it looks like. Place it next to other icons and see how they sit together. You’ll probably find yourself tweaking the sizes and proportions so they look correct when placed side by side. It is really important that the icons look and feel part of the same icon pack. There will be lots of scenarios where you’ll have several icons side by side, this is the ultimate test of whether you’ve designed a successful icon set.
When outputting your icons they need to be flat shapes. The pathfinder tools in Illustrator (or Sketch equivalent) are helpful, both designing and outputting your icons. Icons can quickly become complex shapes so try to keep them to one layer. If you’re using strokes, you’ll need to convert these to compound paths.
To generate a font we used Fontello. We like Fontello because as well as generating the font, it also provides all the CSS for your website.
Icons take a very long time to create. Consider finding an icon pack online that is close to your needs and extend the pack with your niche icons. There are lots of great icon packs available to purchase. If you’re missing a few icons, you can design those in the style of the pack you purchased.
Trying new things is what makes our jobs interesting. Designing icons has been very rewarding and I’m looking forward to my next challenge.
For further reading: