The Icon Designer’s

Handbook

Welcome to The Icon Designer’s Handbook!

When I first started working with icons, I quickly discovered there weren’t 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 we’re 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 it’s likely something close to what you were expecting. However, a few technical aspects of what truly makes something an icon still remain.

Icons are QuadraticEvery icon is constructed within a square boundary. This doesn’t 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. We’ll get into more about this when we cover icon sets. For now, it’s important to understand that every icon follows this rule.

4

Icons are Pixel Based

Let’s 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 can’t 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, it’s 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.

5

Icons are not scalableBecause 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, you’ll 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 don’t 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 you’re working on should provide the information you need.

6

Part 2

A Single Icon

Now that we’ve covered what an icon is, let’s zoom in to a single icon and look at what’s 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 & InformingAn icon should let anyone who views it know what happens if it’s pressed and/or what message it’s supporting. All icons fall into these four categories of communication:

• Direct - icons that indicate what’s about to happen in a literal manner such as arrows and check marks.

• Indirect - icons that communicate what’s 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 don’t give the viewer context and potentially work under the assumption that the viewer recognizes a logo.

8

Communicating GoalsEvery icon has a goal and so does the app, website, etc. that utilizes that icon. It’s 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.

9

Designing a Single IconLet’s quickly break down the process for designing a single icon. For this example we’ll 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 MessageThis can take time, but it lays a clear foundation for the steps you’ll take moving forward.

Let’s say you’re working on an icon for an app that will lo-cate 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. You’ve now focused on what the icon should be conveying. This is an example of an indirect icon. You don’t have to illustrate every aspect of what the app does, just the key points.

10

Pull out the Key WordsWhile “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 ResearchAt 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. Don’t stress during the upfront work. Look into color choices and why they’re important, challenge yourself to try new things, and be intentional.

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

11

Part 3

Icon SetsIcon 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 representa-tions you choose can vary in both shape and size. A good balance involves making both calculated and instinctive decisions. In other words, your icons won’t 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 & HeightAs 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 GridGrids don’t 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 don’t 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 I’m making a 120×120 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 that’s okay. Your main objective is to stay within the outer box.

14

Try Different AnglesIf an icon needs to be a narrow shape that doesn’t fit within your width and height constraints, consider angling it. This will allow the icon to fill more of its allotted space while re-maining 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 I’ve 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 you’re 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

24

You’ve reached the end! As I hope you’ve come to learn after read-ing this guide, icons are my passion. I’m really excited that you’re 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.

© Kyle Adams Design 2016. All Rights Reserved. 25