Iconography
A guide to creating digital iconography
Introduction
Icons are a universal language, they have a simple purpose which is to be understood by everyone. As a result people need to understand this language and not be confused or mislead by it. There is a lot that goes into icons such as styling, semiotics, and the content in which they will be used. Within this article I will provide you with the key points of whats needed to get you started on making your own icons, and some points to consider.
Why are icons so important? Icons are the simplest form of dialogue between the user and a product. It shows them how to navigate and interact with the product, being seamless and stress free. You could have an amazing product but if people get confused on how to use it, it will frustrate users. The challenge is making the simplest form of communication that compliments a brand/product and leads the user.
Within this article I will walk you through the processes of making a set of icons; Setting your document up; making a style; the best way to create icons; rules and thoughts you should follow; making your icons pixel perfect; things to consider when scaling and finally exporting them. Lets get started.
Setting Up
When creating your grids don’t over complicate them. Having a complex grid will give you too many restrictions to work with, so keep it as simple as you can. One main rule to follow is don’t be obedient to the grid. It is there for guidance and you shouldn't force your icons to fit to it exactly. For best practise, the main structure of the icons should follow the grid if possible, but the detailing can be allowed to be more open.
Get a rough idea of what size(s) you need your icons at. Be sure to keep your artboards at an even number that should then scale up in even multiples (e.g multiples of 6, so 24px, 30px, 36px etc). Always start from the smallest or one of the smallest sizes as its easier to get your icons to work at a smaller size and work up. Working from large to small can be difficult as you may find certain details may not work or fit at that level.
Styling
There are many styles of icons, but they mainly focus around having stroked edges or filled shapes. You can then add minor details such as rounded corners or gaps, then layers of colour etc. Its important however to get a good idea of what you want at the beginning or you’ll be changing your style throughout which gets messy and creates risks of inconsistency. Strokes are generally nicer as they open up the negative space to use and feel a bit lighter, this does depend on the brand though.
There are a few main aspects you want to bear in mind when deciding on a style. The brand and product you are going to be making your icons for;
- What is the tone of voice?
- What is their logo like?
- What font will your icons be used next to?
Something else to think about is to draw details from the brands font.
- Does the font have curves to its edges?
- Is it a thin or thick font?
- Is it rounded?
- Does it have any other particular features in it?
You also want to take in to account the application of these icons, are they going to be used in a UI? If so make them simplistic, this is because they should direct the user, not distract. Are they going to be used in a more artistic approach to jazz up some menu options? In which case adding some more detail and colour to them could help as they’re now serving a more artistic purpose. Generally you also need to think about the audience and what is best for them. If your icons are too complex or to simple then they will be difficult to understand, and so wont work so well.
Creation
Now you have your artboards set up and an idea of a style you want to use you can start creating your icons. Making them is fairly simple, the main rule is to work with basic shapes. Build them up or adjust them to get what you need. This helps keep your icons on solid pixels and stops them from having obscurities.
If you use strokes its easiest to use even numbers so they they don’t create half pixels. However sometimes an odd number suits a style better, in which case there are ways to make it work, for example if its a stroked shape having it as an inside stroke will keep it on pixels.
While making your icons think about the negative space. If its tight it’ll look compact, but too much space and it’ll look empty. So try to find a good balance for your icons. For example having an empty TV screen icon next to a detailed laptop icon won’t balance out well. Be sure your icons work well together and try to keep a nice balance between them.
Another tip is to try and re-use specific shapes throughout your icon set. This will help keep them looking structurally similar and consistent, so re-use certain shapes when possible. While building your shapes up be sure to think about spacing between them as well, they should mimic the sizes of your shapes and strokes, this will help it look structurally balanced.
Rules and thoughts
Take into account where your icons are going to be used. If you’re designing for mobile you probably want a fairly thin style (this isn’t a definite rule as you may want a thicker style if it suits the brand), however on TV users will be sat far away from the TV and so you probably want to use a thicker style so they are easier to see.
In terms of semiotics (the study of signs and symbols and their use or interpretation) there are some icons which already have their meanings set, and so its simple just to adapt it to you’re style. For example icons such as Menu, Home, Download, basically follow more or less the icon shape. However icons such as Catalogue or Featured aren’t so easily distinguished as an icon. So its important to bear in mind the semiotics of your icons.
You’ll need to think about what makes most sense to people? How will users recognise what it means? Its good practise if you’re dealing with icons such as these to test them on a few people and see if the understand the.
Doing some further research of the word, what it means or does, will help you get a better understanding as well. For example ‘Catalogue’ is usually a book but its function is to hold lots of content so it could be something more abstract that conveys this meaning. Also another tip I’ve found useful is to delve into the thesaurus, search for your word and see what other similar meanings its linked to, that might also help trigger an idea.
Pixel Perfection
Using whole numbered shapes should help keep your icons on pixel. However always check your icons over in pixel preview mode, do this as you go to keep them tidy. Its important to outline your stokes as well and combine all your shapes within each icon so that they are one solid shape, you can then get a better idea of the whole shape on the pixels. However! before you combine your icon into one shape duplicate the artboard, just incase you need to make changes to it later. Its much easier to change the building blocks instead of the final structure.
While in pixel preview make sure all your points are on whole numbers and that there are no blurred edges where there aren't meant to be any. Bare in mind anything with a curve will look pixelated. There isn't to much you can do to make it better so just focus on the vertical and horizontal lines.
Scaling
When scaling up your icons re-create them at the large size, don’t scale them up. This means you will usually get a better result and keep your pixels on point. As you scale be sure to increase or decrease the weight of your icon accordingly to best fit your style at that size. When working with small sizes it can be difficult to achieve pixel perfection, but as long as you stick to whole numbers you’ll get a good result. Using strokes of 2px as the lowest will help keep the pixels on point.
Exporting
SVGs is the most ideal, they keep the vector value and they’re much easier in general to implement into code. However, this depends on the complexity, if it is a very detailed icon it can become a large asset and effect performance. SVGs also provides the ability to animate and customise the icon. If you are going to be using an older browser or system, they wont work.
PNGs are mainly used as back ups as they are not vector and can be fairly heavy in size. You can change the colour but you can’t animate these like an SVG.
TTF are fonts for icons, as a result they can be treated like a font and scaled and change colour etc. However it is basically a hack for web. It doesn't sit on pixels well, it can get muddled with emoji’s, if text is switched for a dyslexic font they’re lost.
In my opinion use SVG’s whenever possible, provide the most flexibility, optimise rendering and can be robustly used across platforms.
Summary
To sum up the main key points are:
- Set up your grids, artboards and rules.
- Think of a suitable style you wish to use and keep it consistent throughout.
- Start building your icons from shapes and strokes.
- Think about the semiotics of your icons, make sure they make sense.
- Make sure your icons are pixel perfect.
- Finally export at whatever format is best for your platform.
