Jon Hicks - The Icon Handbook

The Icon Handbook
by Jon Hicks

Published in 2011 by Five Simple Steps

Studio Two, The Coach House
Stanwell Road
Penarth
CF64 3EU
United Kingdom

On the web: fivesimplesteps.com
and: www.hicksdesign.co.uk/
Please send errors to

Publisher: Five Simple Steps
Editor: Chris Mills
Tech Editors: Gedeon Maheux, Andy Clarke
Copy Editor: Owen Gregory
Production Editor: Sarah Morris
Design & Art Direction: Nick Boulton, Colin Kersley, Jon Hicks, Mark Boulton, Nathan Ford, Alex Morris
Front Cover Illustration: Jon Hicks

Copyright 2011 Jon Hicks
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher.
ISBN: 978-1-907828-04-1
A catalogue record of this book is available from the British Library.

Approximately nine and a half billion miles from Earth, the American space satellite Pioneer 10 continues its lonely journey through the outer reaches of our solar system. If the space probe is ever discovered by another intelligent life form, the extraterrestrials will find a gold-plated plaque affixed to the side of the satellite. Engraved on this plaque is a pictorial message that communicates the essence of our human species and the location of planet Earth.

I can think of no greater example than the Pioneer plaque to demonstrate the universal communicative power of symbols. Imagine all the sophisticated technology embedded in this satellite. Yet, when tasked with telling the most important story, the story of the human race, scientists relied on hieroglyphs, one of the most basic and ancient forms of communication. They did this because they knew symbols have the power to transcend any cultural or even cosmic barrier and deliver information effortlessly and effectively.

It comes as no surprise then, that in our ever shrinking and highly technological world, symbols, because of their universal communicative power, have become the preferred language of the internet age. In the past few years alone there has been an explosion of new symbols and icons added to the lexicon, and this trend shows no signs of stopping. Think of all the symbols that have been created to represent concepts around social media: tweet; like; share; link; blog; user. These symbols have become and will remain a part of our everyday life. Now imagine all the symbols that will be needed to represent new concepts in medicine, nanotechnology, environmental protection, human rights and augmented reality. It is safe to say designers are poised to exponentially expand the worlds visual language vocabulary over the coming years, and this book will be an invaluable tool to assist them.

Edward J Boatman
Co-founder of the Noun Project

Trying to capture the essence of an object or idea with only a few lines and at the same time maintaining its elegance is pretty much design in a nutshell. Thats whats so great about icons, theyre tiny poems.Kyle Tezak, The Four Icon Challenge

I was brought up as Im sure you were with icons all around me, especially in the home. The stereo and TV had them, the labels in my clothes had them, and so did the machine that washed them. Whenever we travelled in the car, I would record the road signs I saw in my iSpy book, and see what landmarks were near us on an Ordnance Survey map with the aid of the key. The difference between Church with Tower and Church with Spire is forever etched into my consciousness.

My father was a keen meteorologist, so the first time I was particularly aware of icons was through the daily routine of BBC weather reports. Michael Fish would slap them on to the map, where they would stick 90% of the time.

Icons are little miracle workers. They circumvent language obstacles, give concise warnings and directions, convey our moods and show which buttons to press. Anyone needing to find a toilet in an unfamiliar country has been thankful for the familiar sign that not only shows where it is, but which one to use. The rise of desktop computers, and better and better mobile devices has extended icon use even further, with an abundance of applications requiring icons to differentiate between them and navigate their interfaces.

To some, however, icons are little more than a decorative flourish, merely a means of making a text-heavy design look more appealing. Either the designer misunderstands their advantages, or overuses them, creating a Christmas tree effect, confusing the eye and distracting the visitor.

This is a book that Ive been wanting to write for a long time. Whenever Ive looked for a book on this subject, the only available publications are reference guides that simply reproduce as many symbols as possible. Where books have gone into theory, they were published decades before desktop computers, and therefore miss the most relevant and active context of icon use. Sometimes the topic is covered as a part of a book about logo design, and amounts to little more than a page or two. So Ive set out to create the manual, reference guide and coffee table book that I always desired.

Its aimed at designers who already have basic vector and bitmap drawing skills. It could be that you only have to create a simple favicon, or perhaps youve been asked to work on a website or mobile app that requires icons. You might usually rely on a resource like a royalty-free icon set, which may provide common icons but probably doesnt provide everything you need.

This book begins at the point when you need to create your own icons. Its purpose is to guide relatively inexperienced designers through an icon design workflow, starting with favicons and working up to application icons, as well as inspiring and providing a reference point for existing icon designers. It does not set out to teach you how to draw in a particular application, although it does highlight the pitfalls of particular graphic editors and explain their individual advantages. The aim is not to improve proficiency in particular applications but, rather, to show you how to create icons with the common toolset found in most of them, so you can be more versatile.

Before we go any further though, theres something we need to clear up

Leaving aside the religious connotations of the term, the word icon today covers a wide range of image types, from monochrome play and pause buttons to the highly detailed, full-colour icons used to identify an application. They can be as simple as a triangle, or as complex as a photorealistic leaf with veins and droplets of water, but they all live under the broad umbrella of icons.

One distinction we need to draw early on is that between an icon and a logo. Logos are unique identifiers that work best when they stand out among other logos. Icons, on the other hand, generally dont communicate a corporate identity; rather, they inform, translate and warn. They tell us which route to take, which buttons to press and what danger is ahead; they work best when theyre familiar and recognisable. Finding a toilet in a foreign airport would be so much harder if the sign used the Armitage Shanks logo instead of the familiar man and woman symbols.