How to Make Icons

Final product image — What You'll Be Creating

Always wanted to learn what it takes to create your own icon, but never knew exactly where to start? Well, with this article, that's going to change. You'll learn what an icon is and get answers to the most common questions and problems that come up. Along the way, you'll discover that the process isn't as hard as you might once have thought.

Oh, and before I forget, if you want to expand your icon library, you can always head over to Envato Elements where you'll find a great collection of vector icon packs just waiting to be picked up. Or download some free SVG icons from Reshot.

1. What Are Icons?

If there’s one truly important thing that school managed to teach me, it’s that whenever you find yourself tackling a new concept, you should always put in the time and thoroughly carry out the research, so that you can have a full understanding of what it ultimately stands for.

So, being the creature of habit that I am, I’m going to instill in you that same method of problem solving, starting with the most basic of questions: “What is an icon?”

Well, according to Google, the word originates from the Greek eikόn (image) and is commonly defined today as a:

“devotional painting of Christ or another holy figure, typically executed on wood and used ceremonially in the Byzantine and other Eastern Churches”.

While this isn’t exactly the type of icon that we creatives tend to think off, it might be the first thing that some people visualize when you tell them that you earn your living doing “icon design”.

Don’t get me wrong, I have nothing against the art of painting icons, which is in itself a beautiful yet hard craft, but we’re talking about a whole different use of the hands and imagination here.

From a more modern, digital perspective, an “icon” is defined as:

“a symbol or graphic representation on a screen of a program, option, or window”.

Whether you’re using a Mac or a PC, an iPhone or an Android device, every single one of them has a user interface based on icons of different shapes, colors, and sizes.

2. Why Do We Use Icons?

Historically, the first ever set of computer icons was conceptualized almost 37 years ago (more exactly in 1981), when a computer scientist by the name of David Canfield Smith joined forces with designer Norman Lloyd Cox while working on the GUI (Graphical User Interface) of the Xerox Star 8010. Their task was to ease the user’s interaction with the machine, which they creatively overcame by introducing familiar graphic symbols meant to reflect real-life objects to which the user could relate.

Since back in the day computers were mostly used within work environments, they quickly realized that they could find inspiration by looking at the most common objects found within an office, thus bringing the “office metaphor” to life.

This laid the foundation for building the first ever common visual language for the digital age, which has shaped not only the way GUIs look but also how they function.

Ease of Interaction

Fast forward to today, and while they’ve definitely seen some changes in terms of form, their core function has remained pretty much identical, since they continue to serve the same purpose that they were originally designed for, and that is easing our interaction with the different pieces and types of software.

And honestly, should we even be surprised? Imagine having to use a piece of software that has a GUI based entirely on the use of keywords. I just did, and believe me, it quickly turned into a little nightmare.

Language Barrier Breakers

Icons behave as universal visual symbols that break free of the language barrier, due to the fact that they manage to portray images that can be easily understood by users who come from different sides of the planet.

Instead of having to figure out ways of conveying the same meaning to speakers of two different languages, you can easily find a commonly accepted symbol that does the job for you.

Of course, there will occasionally be some depictions that might require users to go through a process of memorizing a symbol in order to add it to their lingo. Usually, this will happen in the case of new concepts or technologies with which they need to get familiar with.

Faster Thought Triggers

Compared to words, images have the ability to stimulate our eyes significantly faster and for a longer time span. This in turn means that the user will not only decipher the meaning behind an icon faster, but the overall expected engagement time will be far smaller.

Imagine having some complex software with a lot of tools and functions. Now, what would it look like if all the tools were illustrated using labels, i.e. text instead of symbols? While you might manage to figure out the position of some of them, it would quickly become a visual overload which would eventually make you hate that piece of software.

Believe it or not, there's a real reason why we moved away from command-line interfaces, and it mostly has to do with aesthetics and ease of interaction.

Eye Candy

Going beyond the idea of functionality, icons behave as visual triggers meant not only to portray an idea faster but also to do so in a manner that is pleasing to the eye.

For example, I like to think of a device’s screen as being one of those shelves that I usually stroll past when I do my shopping at the local mini market. If the products are wrapped in a colorful, eye-catching manner, then my attention is immediately drawn to them, even though sometimes I don’t even need that product—I’m just interested in seeing what it contains.

The same can be said about icons, since the better they look, the more compelled the user will be to stare at them and then engage in interaction, which sometimes is exactly what we want them to do.

3. How to Make an Icon

Okay, so up to this point we’ve talked about what icons are and why we use them. Now it’s time to get a sense of what it takes to make one.

3.1. The Research Phase

Every time you start working on a new icon-based project, there are a few key aspects that you need to figure out before you go through the actual process of building the icons.

I call this the “research phase” since that’s basically all that you’re going to be doing. You're going to spend a few minutes or hours, depending on the time and patience that you have, looking for answers to a few basic questions.

How Many Size Variations Do You Need?

The first question that you should always ask yourself has to do with the number of size variations that you need to create for a specific icon.

Do you need one icon, two, or maybe more?

If, for some reason, you end up working on a single-size project, then this part should be pretty easy to go over. On the other hand, if you need to provide multiple sizes, then you might find yourself in a pickle, especially if you’re doing client work but don’t have a clear brief indicating the required values.

Luckily for us, most of these values have already become industry “standards”, which means that you don’t have to waste time playing with numbers in order to figure out what works and what doesn’t.

If you know where the icons will be used, you can usually find the required sizing values by doing a simple Google search.

Small Icons:

12 x 12 px
16 x 16 px
24 x 24 px
32 x 32 px
48 x 48 px

Medium Icons:

64 x 64 px
96 x 96 px
128 x 128 px
256 x 256 px

Large Icons:

512 x 512 px
1024 x 1024 px

Quick tip: if you take a closer look at the above size values, you'll quickly notice that most of them are actually created by doubling the previous number: 12 > 24 > 48 > 96; 16 > 32 > 64 > 128 > 256 > 512 > 1024.

In some cases, such as for mobile apps, you can find detailed guidelines straight from the OS manufacturers that are meant to help you out:

What Will Your Base Size Be?

When working on multiple-size projects, I strongly recommend you always start from the smallest addressable size possible.

This will become your base size, which you will later on use in order to make all the other required ones. The reason has to do with the pixel-perfect nature of your shapes, which will break down if you build big and then try to get the smaller variations by resizing them.

When it comes to choosing a value for the actual base size, it all depends on the project’s requirements, but the general rule is that you should always go as small as possible.

For example, if I need to create three variations (16 x 16 px, 32 x 32 px, and 64 x 64 px), I’ll always make sure to start with the 16 x 16 px as my base size, and then create the other ones by doubling it up.

What Are the Subject’s Main Defining Features?

Once we’ve figured out the sizing problem, we need to take a couple of moments and break down the concept that we’re going to be illustrating. For me personally, this step is a must since it allows me to identify and isolate its main traits.

You can easily do this by grabbing a piece of paper or by opening up a text document, and then gradually writing down short observations (keywords) that have to do with its shape, size, colors, composing elements/features, etc.

While some tend to spend less time on this part of the research, adding that extra minute can prove to be extremely helpful, especially if you’re just starting out, since it will make things easier when it comes to getting a “feel” of the subject.

What Style Do You Use?

At this point, we can and should start thinking of the “style”, or in other words the look that our icons will end up embracing.

Back in the day, things were quite different, since the style of the first icons was dictated by the limited display technology. That in turn ended up shaping the way these visual symbols looked, but also laid the foundation for the first ever style, which used shapes defined by bold, hard lines for the outer sections and thinner ones for the inner details.

Today, that pixel barrier has long been crossed, allowing us to grow and create new styles, which are constantly evolving and changing.

The most popular styles are:

pixel art
flat
material
line art
isometric
glyph
skeuomorphic
dimensional
hand-drawn
animated

Personally, when it comes to choosing a look for my future icons, I usually end up going to Dribbble.com, where I tend to spend a few minutes analyzing the current trends. As I scroll up and down, I quickly manage to get an idea of what I would like to do, and then I try to stick to that.

That being said, I strongly recommend you get a good idea of what you’re aiming for from the start, since otherwise you might find yourself losing a lot of time by going back and forth through different styles.

Oh, and another thing, please don’t become that designer who sees something good and then fully copies another person’s work, putting it out there as being their own. While some people recommend this approach in order to learn and grow, that’s what it should ultimately be, an exercise where you try to figure out how some things are done.

If copying is all that you end up doing, then you might never reach that point where you develop a personal style, which is what sets a good icon designer apart from the rest.

If you want to find out more about this subject, I strongly recommend you read my 10 Styles That Have Changed the Face of Icon Design article, which will break down the main existing styles and their traits.

10 Styles That Have Changed the Face of Icon Design

How to Find Inspiration

Depending on the nature of the project that you’re taking on, whether it’s a personal one or client work, you’ll ultimately find yourself in need of some inspiration. This phase is pretty entangled with the selecting a style one, since this is where you start laying the foundation for your future icons.

So how do you go about getting that feeling of being inspired?

Well, the best way to get your creative juices flowing is to create what is commonly known as a “mood board” (or inspiration board).

As the name suggests, a mood board is a collection, or more exactly a collage of image-based ideas, ranging from color palettes to photos, illustrations, textures, typography, etc. It helps you get a direction for what you would ultimately like your product to feel like.

As a designer, you’re constantly bookmarking stuff that grabs your attention, but sometimes it’s kind of hard to keep track of all of them, especially when you need to view them all at once.

This is where tools like Pinterest and Instagram come in handy, since they allow you to create mood boards at a click of a button.

Another alternative, which I know a lot of people tend to use, is to download the image selection that you’ve made, and then create the mood board directly within your graphics suite.

If you’re using a single-monitor setup then this might work better for you, but if you’re on team double, you might consider using the first approach.

When it comes to the actual images themselves, I usually rely on one of the following resources:

Sometimes, you’ll find yourself in that situation where you have a more complicated subject that you might need help with in order to figure out the symbol used for it. When this happens, I usually go to The Noun Project or Iconfinder and do a simple search, which always brings up a large selection of images that help me understand the subject better.

At this point, you should have covered all of the above questions, which means that we are now ready to move on to the next phase.

3.2. The Building Phase

So, you’ve figured out your base size, decided on the size variations, and even set up a little mood board, which brings us to the second phase of the process.

Now, regardless of the software that you’re using—Adobe Illustrator, Adobe Photoshop, Affinity Designer, Sketch, etc.—this next part is pretty much the same, since you can apply the concepts to any of the existing graphics suites.

The same can be said about the different operating systems, since whether you’re a Mac or Windows user, you'll be able to achieve the same result by following the same process.

That being said, let’s see what it takes to start building your icon.

Make It Pixel Perfect

At this point, most of the programs already come preconfigured to help you create your icons with pixel perfection in mind.

If this is your first time hearing about this idea, then I strongly recommend you take a couple of moments and go through my How to Create Pixel-Perfect Artwork article, which should bring you up to speed.

how to create pixel perfect artwork — How to Create Pixel-Perfect Artwork in Adobe Illustrator

Now, assuming you’ve finished reading the above article, the question is whether or not we should put in the time and adapt to this more rigorous workflow.

Well, personally I’ve been using it for more than five years now, and no matter how much more time it might end up eating, I still believe it’s all worth it. If you take a look at how things were originally done back in the early years of this craft, when resolution was a problem, you’ll notice that icons were built using pixel grids, not random sized shapes.

Set Up a Proper Project File

The first step to creating your own icon, or icon pack, is to set up a new project file. Simple, right? Well, not really, since if you’re just starting out, there are a couple of things that you should be aware of.

The Profile

First, you should always make sure that your document’s profile is set to Web, since icons are usually used in the digital medium.

This is actually important, since different profiles will have different color systems (Web uses RGB, while Print uses CMYK), which might result in unwanted color representations when viewed by other people.

The Measuring Units

Next, we have the measuring units used to describe the width, height, corner radius, stroke weight, and spacing used for the different composing shapes.

By default, the units should always be set to Pixel as long as you make sure that the document is intended to be used for the web.

We use pixels instead of something else since it's the universally agreed-upon unit used to measure any digital product.

The Number of Artboards

Once you’ve set your document’s profile and units, you need to figure out if you’re going to be using one larger Artboard or multiple smaller ones.

My advice is to always try to take the second route, since it will make things a lot easier when it comes to exporting the icons.

Going beyond that, having multiple Artboards means you can more easily focus on one asset at a time, as you gradually build your pack.

Use Layers

Whether you’re creating a single icon, or an entire pack, you should always try and use a couple of layers in order to separate your assets from your reference grids.

By doing so, you can easily build your icons without having to worry that you’ll move or group the underlying grids by mistake.

Going beyond that, it will help you out during the exporting process, since you’ll want to be able to hide your grids.

Use Reference Grids

By definition, a "reference grid" is a visual tool consisting of geometric guidelines meant to help you achieve size consistency throughout your icons.

It can be as simple as two squares stacked on top of one another, or you can use something a little more complex. Personally, I prefer to go with the more basic one since it does the job better than expected.

Normally, I start out by creating the main reference surface using the exact same width and height values as my underlying Artboard. Then I add a slightly smaller one called the active drawing area, which is where I’m going to be positioning all of my asset’s composing shapes.

This will give me an all-around protective padding, which I always include in order to make sure that the icons don’t get clipped once they get delivered and used later on by the client.

When working on multiple icons, my golden rule is to decide whether or not I’m going to fill in both the width and height of the active drawing area or just one of them, depending on the style that I’m going for. Once I figure this out, I’ll take that rule and apply it to all my other assets, thus achieving the consistency that I’m aiming for.

4. The Do's and Don'ts of Creating Icons

Once you’ve finished setting up your project file, layers, and reference grids, all that remains is to start working on the actual icons. Now, depending on the style that you’re going for, there are a couple of things that you should be aware of.

Keep It Simple

When we start learning something new, we always have that desire to create at a higher level, since we tend to look at what other people are doing and think, “Well, that can’t be that hard.”

While I don't doubt your ability to put together something completely amazing, I actually recommend you start by doing simple designs at first, so that you can gradually build your skills in a more organic manner.

Beyond that, sometimes simple is just better since the idea is to portray a subject—whether it’s an object, a function, or an idea—in a way that any user can instantly understand.

Start With Basic Shapes

If you're having a hard time working on a project, the best idea is to take a step back and then focus on laying down the subject's basic shapes. Whether you're using rectangles, circles, or both, try to loosen up and see how you can build your icon by focusing on its main composing sections.

Once you've laid down your foundation, you can then start adjusting the main building blocks and gradually add details to them until you reach the desired form.

Focus on Colors

A lot of the time, I see incredible work put out there by random creatives who put a lot of attention into their compositions, but for some reason fail when it comes to colors. Believe it or not, a color palette can make or break your beautiful artwork, which is why I believe it’s important that you take the time and learn all that you can about color theory.

If you’re feeling lazy, or simply don’t have the time to start reading books about this subject, then just look up some icons (some good ones), and try and analyze the way their creator used colors in order to bring them to life.

Sometimes, learning by looking at another one’s example can fire up the memory muscles a lot faster, teaching your mind which colors work and which don’t.

Avoid Using Text Within Your Icons

This one is kind of a no-brainer, since the whole idea behind an icon is to eliminate the need for written letters, which should be replaced by symbols.

Of course, there will always be those few situations when you actually need to use letters in order to distinguish one icon from another. The best example is when you need to put together a document-themed icon pack, where you need to illustrate a PNG file, a JPEG, and an SVG. Since the shape of the document needs to remain identical, your best approach to do this would be to add a little label to the center of each document in order to let the user know which one is which.

You can find a more detailed list by reading my 10 Top Tips for Creating Awesome Icons, which should bring more light to this subject.

Some styles, such as line icons, require a little more attention when it comes to the actual building process. From path overlapping to stroke positioning, I've covered all the different nooks and crannies that you need to be aware of when creating these sorts of icons.

5. Common Problems

Next, we're going to quickly go through some of the most common problems that you'll have to deal with when working on a new icon.

Shape Rotation

This is probably the most annoying one when it comes to working on a pixel-perfect icon, since anytime you rotate a shape, it will instantly snap off the underlying Pixel Grid. When this happens, the shape’s width and height values will turn into decimal values, which is usually indicated by the software's transform panel.

example of shape snapping off the pixel grid after being rotated

While you might think that this isn’t such a big issue, you’ll shortly find out that it actually is, since if you need to align the shape to the edge of another one, you simply won’t be able to.

Depending on the complexity of the shape, most times you can fix the problem by individually selecting its anchors/nodes, and then snapping them back into place to the nearest gridline intersection.

Personally, I tend to stay away from rotated shapes and only use them when I really have to, making sure to do my best to snap them back to the Pixel Grid.

Creating Size Variations

So you've managed to create the base size for your icon, but how about adding multiple size variations based on it?

Well, the process itself is fairly simple, since most of the time all you have to do is double the size of your current icon using a 200% increment.

For example, if you have an icon that is 64 x 64 px, you can easily create the next size variation by doubling its width and height values, so 128 x 128 px.

You can find out more about this particular process by reading my article How to Scale Icons Correctly in Adobe Illustrator, which presents concepts that can be used in most graphics suites.

6. How to Export Your Icon

We've gone through the main steps required in order to create an icon, so now let's take a couple of moments and talk about what we need to be aware of when exporting it.

This last part of the process, while it might seem complicated, is actually really simple.

Choose the Right Format

The first thing that you need to do is figure out what file format you're going to be using to save your final design.

Normally, when creating icons, you'll want to export them using a transparent background, so that they can be used on a colored surface. This feature is supported by the following raster file formats:

Out of all of them, you will usually end up using PNG because it offers complete compatibility, using a very small footprint when it comes to size. This means that it can basically be used anywhere, whether it's a website, a desktop application, a mobile app, a Word document, etc.

SVG is turning out to become another popular format for the web because it's a scalable format that you can adjust on the fly and resize without any loss of quality.

Save Them Individually

When it comes to the process itself, it varies from tool to tool. Some come with dedicated exporting tools, while others still rely on more traditional methods.

No matter which software you use, the key objective is to always make sure to save each and every icon as its own individual file, naming them when possible.

Expand Your Icon-Building Skills!

Now that we've reached the end of the article, I want to leave you with a few hand-picked tutorials that should get you up and running in no time!