Designing icons for use in icon fonts

Every website embeds icons one way or another, even if it’s only a small heart before a ‘favourite’ button. Images are difficult to scale, colour and manipulate without image editing software like Photoshop. Imagine if Amazon were to change the 100+ icons on their website to blue or a larger size. That would not only be time consuming but also heavily prone to errors. We faced this problem frequently while developing a Tumblr blog theme. The solution came down to icon fonts, which are fonts just like Ariel or Helvetica but with embedded icons instead of letters. This method is highly effective because it enables us to change properties such as the colour, size, and shadow of all our icons with just a few lines of CSS. Just like how you might change the formatting of text in your favourite text editing program.

Icon fonts have many applications and can be easily integrated into websites, software and print materials. This is why we developed an icon library called Pictonic. As of this article, Pictonic has over 2000 icons with support for all major browsers’ font formats. Each custom built font pack includes your custom built icon font, icon PNGs in black and white from 16x16 to 512x512,css, less and scss files and a demo page to demonstrate usage. We care obsessively about loading speed, so only the icons you hand-picked from Pictonic are included in your custom font pack. This way, your website won’t load any unnecessary icons. Try it out using our free social icon set!

1-What makes a good icon?

Because icons describe without words, they should be instantly recognisable. If you have to think more than 10 seconds about what an icon is trying to represent, it’s not a good icon. Icons are a form of ‘pictogram’ often inspired from real life objects and places. A pictogram:

“conveys its meaning through its pictorial resemblance to a physical object.”  Wikipedia

What makes pictograms so easy to understand by everyone:  

 

You can see some great examples of how simplicity and functionality can work together in Paul Rand’s logos and Braun’s products designed by Dieter Rams. These are obvious inspiration to Apple designs. 

Don’t forget; the simpler the icon, the easier it will be to modify.


2-Exploration

It’s a good idea to explore other web fonts and GUI samples for inspiration as it’ll help to determine your waypoints and target areas. Decide whether you want to design for multiple platforms or something specific.  

http://www.uiparade.com/

Create a list with some theme ideas like sports, entertainment, computer environment, games etc. Pick one of them to focus on. This will allow you to identify similar icons in the same category for future designs.

Logo Sets


3-Sketches

I strongly suggest to start with pen and paper, form your ideas using simple geometric shapes, and define a theme before you go on to produce detailed technical drawings. Don’t worry about your drawing skills! You can also use grid paper as a reference and scan it afterwards.

Turbomilk Metrics IconsArt by Jordan Brazelton con Sketches


4-Illustrator Preparation

I’ve been using Illustrator for a long time so I am going to demo using it, but if you are already using other tools, don’t worry they are all quite similar. 

Note: If using Photoshop, the “Path to Illustrator” command can be used to transfer shapes and paths, but Illustrator will still be the last stop to get your SVG file format.


4.1   - Grid preparation

Using pixel based grid (View – Show Grid) in Illustrator gives structural stability across your icons as it allows the exact width and height to be defined.

 I used rectangle grids to show more details but you can also use square grids.

Grid Preparation

Make sure to check ‘Snap to Grid’ (View – Snap to Grid), as it’s highly useful for creating generic shapes and minimises antialiasing issues as icons scale in size.

Snap to Grid

Grid usage also gives precise proportions between icons and white space. If we are designing a single document icon, it’ll have simple lines and borders. Once the amount of white space between these elements have been finalised, we can use the same proportions for other icons as a reference. Icons can be compared side by side to locate any unwanted elements that disturb the unity of the set.

Icons side by side

Note: Rules of symmetry don’t work all the time. There are no strict rules you can follow when designing creative stuff. You may need to turn off ‘Snap to Grid’ and work on different asymmetric shapes. Nature behaves asymmetrically and we should do the same to have aesthetic quality.

Symmetry vs Asymmetry


4.2   - Use artboards

If you use Illustrator, then you will probably have used multiple artboards before. Imagine yourself working on an actual desktop with pieces of papers, each containing sketches of different icons within different sets. Artboards provide a flexibile way to view and manage multiple sets of icons, and make it easy to transfer your icons between other artboards without having to open multiple documents, which was very helpful when developing iconsets for Pictonic.

Use Artboards


4.3  – Use only one colour – negative space

Use only one colour as that is the best way to make icons as customisable and edible as possible. Think of your icon as a black and white photo where light and dark areas create very clear contrast value on the target object. Use black to define the shape and white space to define empty areas, transparency and reflection.  

Negative Space


4.4   - Basic shapes first

Start with basic geometrical shapes. Circles, squares, triangles are all good starting shapes. It gives you a chance to create more complex ones step by step. It may be hard to see them when you look at the final designs but if details are removed, then the uniformity becomes clear. So what makes your icons different from the others: details.

Basic Shapes

Variations


4.5   - Use Symbols

You may want to keep some special shapes to use again and again, but it can be messy to manage different versions. Keep them as a symbol and build up more details each time.

Use Symbols


4.6   – Have different opinions

It can be deceptive to look at the same design over and over again. Take a break and inspect it again using zoom in/out. You can also ask opinions from friends and family to get different perspectives.


4.7   - Never combine your shapes

Unless you are 100% happy with the icons, never use the Expand, Combine or Compound commands as this makes it really difficult to edit your icons later. 

Never combine your shapes



5-SVG preparation

You have finished your first set, well done! Now it’s the time for boring stuff. Create a new document 512x512px in size. You can use a bigger size but 512x512 will scale down nicely to smaller sizes like 64x64, 32x32 etc.

512x512px size document

Copy and paste your icons into separate layers with unique yet short layer names. This copy-paste process may take time but it’s a great way to check your icons before the font building process.

Each icon may contain multiple paths, groups, shapes which you can see under the layer tab. It would be nice to have each icon in a single path instead of this mess. Click on layer and use Ctrl+8 (Cmd+8) or the Compound Path option. It gives you better and tidier HTML export from your SVG file. If you receive any error messages while you convert them to compound path, something has gone wrong with your icons. Unclosed shapes, uncombined paths, overlapped borders are common mistakes. You can try to use the Expand / Expand Appearance option as a first choice if you receive an error. It fixes many problems like these in a second.

Compound path

Now everything is clear and we are ready to save our icons in SVG format. This is the most simple step: Save As from your File tab and select SVG format, that’s all!

Recent comments

blog comments powered by Disqus