The Icon Designers

Handbook

Welcome to The Icon

Designers Handbook!
When I first started working with icons, I quickly discovered there
werent many resources to learn from. Sure, I found blog posts about
making icons, a few videos, and even some podcast episodes that
covered the topic, but what I craved was a holistic guide to getting
started.
This handbook is here to do just that. So prepare to learn everything
you need to get started with icon design.

Part 1

What are
Icons?

I know, it seems like were starting slow. To some extent we all

know what an icon is, but the complete answer to this question
might surprise you.
An icon is properly defined as:
A small picture on a computer screen that represents a
program or function - Merriam Webster Dictionary

That definition does a great job of explaining at a high level, and

its likely something close to what you were expecting. However,
a few technical aspects of what truly makes something an icon
still remain.

Icons are Quadratic

Every icon is constructed within a square boundary. This
doesnt mean every icon made should fill the square, but it
does mean that your icon should touch it either horizontally or
vertically.
Icons are generally aligned with other icons within a user
interface. Even a single icon you make for an app needs to
align with other app icons on the device.
A square 1:1 ratio keeps everything uniform. Well get into more
about this when we cover icon sets. For now, its important to
understand that every icon follows this rule.

Icons are Pixel Based

Lets quickly look at the formal definition of a pixel:
Any one of the very small dots that together form the
picture on a television screen, computer monitor, etc. Merriam Webster Dictionary

As the definition points out, pixels are very important for

screens of any kind. They are essentially the tiles that allow
screens to display an image. Because of their key role, I cant
stress how important it is to pay attention to them.
In recent years, certain advancements in technology have
reduced the perceived need for pixel precision. Formats such
as SVG (single vector graphic) and the introduction of ultra
high definition screens (retina displays in Apple terms) diminish
the visibility of pixels.
However, its very important to understand that every screen
uses pixels. In a majority of circumstances, pixels need to be
taken into consideration in order to make crisp final icons
and avoid making a blurry mess.

Icons are not scalable

Because icons focus so much on pixels, they are not
meant to be freely scaled. Instead they utilize a package of
images that look best at each size required.
If you look closely at the desk icons above, youll notice that
details are removed at each size. For example, the first desk
and second desks have a wood texture, while the third
removes the texture altogether.

Removing detail at each size allows for clarity. The smaller

an icon becomes, the more shape takes precedence over
texture.
Because technology changes so quickly, I dont want to get
into specifics with various platforms and their icon sizes.
Fortunately, every operating system provides user
interface guidelines that include sizes for every icon. A
simple search for the platform youre working on should
provide the information you need.
6

Part 2

A Single
Icon

Now that weve covered what an icon is, lets zoom in to a single
icon and look at whats involved. An icon by itself sets out to do a
few things:
Guide the viewer
Inform the viewer
Visually communicate goals
Icons speak a language of their own. By accomplishing the
above, they go beyond looking great and begin to function as
usable elements within an interface.

Guiding & Informing

An icon should let anyone who views it know what happens if
its pressed and/or what message its supporting. All icons fall
into these four categories of communication:
Direct - icons that indicate whats about to happen in a literal
manner such as arrows and check marks.
Indirect - icons that communicate whats about to happen in
a non-literal manner such as an envelope for email or a
notepad for notes.
Abstract - icons that utilize elements such as a company
logo or unidentifiable objects.
Supportive - icons that support content but do not directly
perform an action.
In most scenarios I would recommend staying away from an
abstract approach. Though that form of communication may
work very well in a few cases, they generally dont give the
viewer context and potentially work under the assumption that
the viewer recognizes a logo.

Communicating Goals
Every icon has a goal and so does the app, website, etc. that
utilizes that icon. Its your job to uncover the overarching
goals and make a final icon that not only directs the viewer,
but also communicates the right visual aesthetic.
Every brand has goals, and understanding them will help
you design a winning icon every time. Ask questions to find
out exactly what the goals are. What does the company
really want to communicate? What is it about this app that
compelled someone to develop it? What problem are they
solving?
Once you begin looking at the bigger picture of what an
icon needs to achieve, it becomes easier to make them with
purpose and intention.

Designing a Single Icon

Lets quickly break down the process for designing a single
icon. For this example well focus on an app icon. These
icons are more robust than icons used for navigating an app
or website and serve as the front door to the entire
experience.

Summarize the Message

This can take time, but it lays a clear foundation for the
steps youll take moving forward.
Lets say youre working on an icon for an app that will locate bakeries in your area and help you find the best bakery
for your special occasion.
Shortening the message to Find great bakeries provides a
lot of clarity. Youve now focused on what the icon should
be conveying. This is an example of an indirect icon. You
dont have to illustrate every aspect of what the app does,
just the key points.

10

Pull out the Key Words

While Find great bakeries is a great summary, pulling out key
words will provide excellent material for your final icon.
Here are some key word examples pulled from the summary:
Find, location, map, navigation, bakeries, cupcakes, cakes,
dough
Of course, those are just a few examples. The goal of this
exercise is to form prompts you can start working with.

Do Your Research
At this point you have a list of words to work with so ideas
should be flowing a bit easier now. The first thing that comes
to mind will most likely never be the final concept. Dont
stress during the upfront work. Look into color choices and
why theyre important, challenge yourself to try new things,
and be intentional.

Start with Sketching

When designing any icon, I strongly recommend starting with
some sketch work. You dont need to be excellent at it, the
goal is to simply get your ideas down on paper. My sketches
dont look fantastic, but they allow basic concepts to flow.

11

Part 3

Icon Sets

Icon sets come with a challenge. Every icon needs to be cohesive

and communicate its intended message.
Designing a cohesive icon set is an art in itself. The representations you choose can vary in both shape and size. A good balance
involves making both calculated and instinctive decisions. In other
words, your icons wont always conform to a rule book. Visual
balance is just as important as technical balance. Fortunately,
there are some guiding principles to help you get on the right
track.

Focus on Width & Height

As covered in part one, all icons must fit into a square
container. This can be a real challenge when vertical and
horizontal icon shapes need to sit side-by-side.
To prevent imbalance, make sure your icons align to the
center of their boxes. This weights them evenly while also
respecting your width and height constraints.

13

Create a Simple Grid

Grids dont have to be complicated. In fact, the type of grid I
usually create is extremely simple. Complicated grids might
look cool, but they force the composition into tight constraints
that dont always work best for every icon in a set. Defining key
constraints is much more productive.
Start by determining the narrowest width and height each icon
should be. In the example to the right Im making a 120120
pixel icon set and constraining the narrowest width and height
to 88 pixels.
The best way to stick with these constraints is to draw a plus
sign. Make two rectangles equal in length, intersecting at a mid
point, and visually filling a square.
The hub of this balance can be found at the center of the plus,
where the two rectangles intersect and make a square. This
grid will easily go a long way in defining balance for your icon
set.
Remember that a grid is simply a guideline. Sometimes an
icon will break this mold while still remaining visually balanced
and thats okay. Your main objective is to stay within the outer
box.

14

Try Different Angles

If an icon needs to be a narrow shape that doesnt fit within
your width and height constraints, consider angling it. This
will allow the icon to fill more of its allotted space while remaining cohesive with the other icons in your set.

Keep using the same angle for all angled icons in the set.
Two icons with opposite angles will look out of place. This
is something I like to call the dueling icon effect. When two
icons compete for an angle, neither wins.

15

Part 4

Simple
Recipes

This section of the handbook is a collection of recipes Ive put

together to help you make common icons. These are in no way
the only way to make these icons, but they should get you on the
right track to working with shapes and building icons.
Each section displays the final icon followed by a list of steps to
quickly make that icon. Again this guide was not designed with
any specific software in mind, so you can use these recipes
anywhere you choose. If youre interested in any specific tools I
use, check out kyleadams.me/tools for a full list.

Recipe 1

Location Pin

17

Draw a circle. Note that the width of

this circle will determine the width of
the final icon.

Add a smaller circle inside of the

circle from step one.

Pull the bottom of circle one

down.

18

Convert the lower edge of circle one

to a point.

Pull the lower vector handles on

either side of circle one down.

19

Recipe 2

Music Note

20

Draw two circles and align the bottom

of the right to the middle of the left.

Draw a rectangle that aligns

with the top and middle of each
circle

Move the rectangle up and

connect it with the right side of
each circle using simple lines.

21

Recipe 3

Cloud

22

Draw two circles and connect their

center points with a rectangle

Add a circle that aligns with the

center of the left circle and
bottom of the rectangle

Add another circle that aligns with

the center of the right circle, top
of the right circle, and bottom of
the rectangle. Combine these
shapes to complete the cloud.

23

Youve reached the end!

As I hope youve come to learn after reading this guide, icons are my passion. Im
really excited that youre interested in
this topic and I have plenty more to
share with you!
If you found this resource helpful you
can find even more information about
icon design at kyleadams.me.

24

 Kyle Adams Design 2016. All Rights Reserved.

25