Well, I’m back again, but this time I’m going to do something different, something that I hope you'll find interesting.
Today, I’m going to take a step back from the regular “in-depth technical tutorials/quick tips” and talk a little bit about icon design from a more general perspective. I'll share with you ten tips that I’ve come up with after doing some research from both my work and the work of others.
So if you’re into icon design as much as I am, grab a hot cup of coffee (I already have mine), and buckle in, since in the following article, we’re going to go over some things that might change/improve your creative process when it comes to designing these little pieces of artwork.
Also, before we start, I wanted to let you know that all of the icon packs used in this piece, and thousands more, can be found over at Envato Market, where designers from all around the world regularly upload new work.
1. Know Your Icon History
I know some of you will probably disagree, but the fact is no matter what you do in life, whether you’re a designer or a mechanical engineer (or anything else by that logic), you should always find the time and energy to gather information on the subject, since not only do you owe your career to those people, but you will also find out some interesting and educational things during the process.
Now, you don’t really need to go all crazy on the research, but you should at least try and find an answer to these three simple questions:
Who?
When?
Why?
Who?
The “Who” stands for the first creative tinkerers that came up with the idea of using icons as digital symbols. This aspect is usually overlooked and I don’t really understand why, since without the original “creators”, icon design might not have even been what it is today; these people laid the foundation for all that we use now. So, open up a tab and pay some homage by reading whatever you can find about them. You’ll probably understand why these people are so important to the birth and evolution of icon design and user interfaces.
When?
The “When”, as you’ve probably already guessed, stands for “that specific window in time” when the actual need for icons as digital visual symbols appeared. For those of you who didn’t know, icon design only appeared back in 1981 with the birth of the Xerox 8010 Star, which was basically the first computer that had a GUI or Graphic User Interface, which means that the art form itself is by no means old compared to others. But it’s not “young” either, since it has evolved incredibly quickly over the years, and it still hasn’t reached its full momentum.
Why?
The “Why” is probably the most important out of the three since it will explain how it all came to be, but to be honest, all of them are deeply interlinked, because the three variables influenced one another to a high degree.
Let’s take a minute and consider how different things could have been if the reasons behind the birth of the GUI were different, or if the people behind the project were never born. We would probably still be using line interfaces—well, probably not, but hey, things would be a little different, believe me!
Now, I won’t let you off that easy by giving you all the answers, since I really don’t want to spoil the journey for you. But I will leave you a link to a beautiful interactive website that has all the information gathered in one place and presents it so damn well.
In the end, this is just an exercise meant to help you get in touch with the roots of icon design, which I strongly advise you to do since you’ll understand why some things are as they are today. Also by comparing what has been done up until this point, you should be able to see how icons have evolved in terms of style and complexity, and grasp the direction of where things are going, or who knows even change that direction by producing something new and innovative.
2. Carry Out Some Basic Research for Any New Project
Now if the first tip was a nice little exercise that I thought you could do to boost your knowledge about icon design, this one is in my opinion a rule that you should try and adhere to, since it will help you define the style and visual language of the elements that you have to design within every new project.
Coming from a background in social sciences, I’ve managed to understand and appreciate the benefits of developing and applying an early research phase in almost everything that I do, even in icon design, since it allows me to better understand the “subject” and how it can affect both me and the other people/end users that it’s meant to cross paths with.
Now, in our case, the “subject” is actually a digital product that is created to sustain a visual conversation with users who will in the end interact with it. This interaction has to be easy to establish, and most importantly it has to feel natural, in the sense that the symbol has to speak clearly and trigger a common specific emotion/word in the hearts and minds of those who are viewing it, no matter whether it’s the first or the thirtieth time they're laying eyes on it.
So great icons have to be universal, and they have to go beyond barriers like gender, race, age, etc., and communicate the same message no matter who the end user is.
Now, as with any other product, icons are usually created with a certain role in mind. Whether they’re going to be used on a website or displayed inside an app, you should always take some time to think about the different variables that you have to account for when creating each and every one of them, since the style and "feel" will almost certainly be affected by these factors.
This can be easily achieved by spending a couple of hours and engaging in a research stage where you have to figure out the answers to these three short questions:
Who?
What?
How?
Who?
The “who” stands for “user” and describes all the variables that define him or her. This question is essential since, depending on the target audience, you need to adapt your design patterns in order for them to satisfy some conditions that might vary from one project to another.
In other words, you have to “figure out” who your user is by constructing an exhaustive list of characteristics that in the end might affect his or her experience with the icons and the UI itself.
Usually these characteristics are:
Age (younger users vs. older ones)
Gender (male users vs. female ones)
Race (cultural differences)
Education (educated users vs. users with no education)
Technical Skills (tech savvy users vs. users that fear technology)
Let’s take a quick example, and think about how age as a socio-demographic variable affects the way younger generations interact with UIs compared to older ones.
If your end user is younger, chances are that his or her eyes are more equipped to deal with smaller sized icons, but for an older user, things might be different. With age comes sight deterioration, which poses a serious problem if you’ve created a super small interface.
Then you have the problem of older users being afraid to change and use new technologies, since it’s harder for them to understand and figure out how new stuff works compared to the old ones they used back in the day.
The style of the actual icon can be perceived and accepted differently by older users, especially in cases where we use bright, saturated colors that might not be that appealing to them, since their eyes react differently to these stimuli compared to the eyes of younger people.
Now, if we throw in “education” as a third variable, then we have an even bigger divide, since within both age groups there will be users that have a basic education and users that haven’t had the chance to attend a proper learning institute.
While I don’t necessarily think that there’s a general rule when it comes to the level of education and the user’s ability to use a specific technology, there are definitely situations where users that have never come across a specific symbol might not be able to understand the meaning of an icon, since they’ve never had the chance to conceptualize it in that form.
Also, race is another thing we still have to think about, since some symbols might be read differently by users from other regions of the world depending on the context they are put in.
Once you start finding answers, you will see how your “user” is taking shape, since with each quality that you discover, you come closer to creating a definitive pattern that you will need to implement and use within your design, and therefore your visual language.
On the other hand, the “who” must also be used to figure out who the person or company that is initiating the communication is, since by knowing both the source and receiver we can identify the perfect sweet spot where the icons and UI communicate effortlessly, and they do so in a manner that reflects the personality of the company that is behind it.
This last part is usually done by creating custom variations of the symbols that are already being used, in order to give them a unique style that people can easily link to a brand.
What?
The “what” stands for “message”, or more precisely what I as a visual creator have to communicate to my audience. It might be a simple word, or an emotion. Whatever we want to pass on to our users, we have to make sure that it’s done in a manner that is simple enough to be understood by the person interacting with it.
Now, it’s pretty obvious that our “message” is directly linked to our audience, so depending on what variables we have identified within the end user, we have to make it simple enough for them to be able to interpret and understand.
So, if our audience is mainly composed of young people that have a higher level of education, that gives us the power of creating more complex-looking icons. If the users were older and had a lower level of education, then we would have to adapt our visual language so that our icons were simple enough to pass the idea through to them.
The “what” can also stand for “mission”, or more exactly the core business of a product, where in some cases users are actually required to have a basic visual symbol knowledge base in order for them to be able to interact with it.
Of course, you still have to try to build a language that is easily accessible to your core audience, but sometimes you might just have to force them to learn new things since in the end it’s in their best interest to do so.
A perfect example of this is using new creative/technical software such as Adobe Illustrator, AutoCad or any other one where, even though the icons were created with simplicity and ease of use in mind, the user still has to widen his or her visual knowledge base by getting familiar with the specific functions and buttons available as icons.
How?
The “how” stands for multiple things, from “how is my user going to interact with my UI?” to the different ways that I can adapt the visual language to facilitate an easier interaction. So the “how” will show us the path that we need to take once we’ve found the answers to the previous two questions. It is our guide that allows us to build and refine our visual language, allowing us to sustain a clear connection with our target audience, our end users, who at this point should be clearer than ever.
The “how” will also let us define the style and direction of our icons, since now we should know whether we should use smaller icons vs. larger ones, or more complex ones vs. basic ones.
Once you’ve found the answers to these three questions, you can then move on and start working on the actual icons themselves, since you should have a strong foundation to start from.
3. Figure Out the Theme
The theme is usually the next logical step that one needs to take when creating icons, and is something deeply related to the context where they will be used. You can think of the “theme” as being a story that is told by its composing elements, the icons.
As with any story, the facts have to be in sync, since you can’t name your story “The Old Man and the Sea” and then start talking about spaceships and rockets—that would be pretty confusing. So your “theme” will be reflected by the carefully crafted icons which will have to touch base with the idea/concept behind it.
Depending on who you are creating the icons for, whether it’s for yourself or for a client/company, you will find that the paths to choosing the right theme are quite different because the context might give you more or less liberty than you would desire.
Usually, if you’re creating an icon pack just for you, to use as part of your portfolio or to sell online, you have full creative liberty when it comes to finding a theme since nobody else is involved in the making and sharing of the product. The problem is that sometimes this can prove to be a hard challenge since it’s tricky to figure out exactly what you want to do all the time.
What I usually do when I find myself in a pickle is grab a piece of paper and then write down five different keywords that I would like to transform into icons. Once I’ve made my selection, I then start thinking about the different objects that I could include into my pack and write those down as well, making sure to gather at least 20 elements so that I’ll have a strong start. Then I take a couple of moments and revise my list since this usually results in adding more elements that I might have overlooked. When I’ve reached a number that I feel comfortable about, I then move on to the next step.
Now, when creating a theme for a client, the decision is usually made in collaboration with one or sometimes multiple persons who will try to present you their vision and then wait for you to come up with something that fulfills that vision. Most of the time you will find this helpful, since clients will always know more about their product/service than you, which means they can actually be a great resource that you can use in order to do your job.
Other times, the client will be totally unprepared and will want you to create something similar to what designer “X” or “Y” did for somebody else. If you’re ever in that situation, always remind your client that being original is more important than having a visual identity similar to somebody else’s. It is in these moments that you have to take control and guide the client to a common ground, where they don’t feel left outside of the decision-making process, and show them why your vision might work better.
4. Defining a Style for Your Icons
Once you have a theme, the next thing you have to start thinking about is the style that you want to use to create your icons. Now if the “theme” is your story then the “style” is how you tell that story, and it’s really important since it gives you the opportunity to set yourself apart from all the rest, by making something unique.
Today we have two big, not so completely different styles that are trending: flat and line icons.
4.1. Flat Icons
The first one is "flat", which is probably the easiest thing to call it, since it doesn't have all the bling and polish that skeuomorphism had going on for it, but instead follows a simpler principle where the symbol is a more playful depiction of its real-life counterpart or function.
If I were to briefly characterize the style, I would say that it's easy to grasp since you don't have to develop and master any crazy gradient skills, and it's fun to work with since you can play with a lot of shapes and colors and get something really interesting in the end.
4.2. Line Icons
The second style is "line", and it's a combination of flat with a flavor of old-school line work, where you isolate the different sections of the composition by adding thinner or thicker lines or outlines. Compared to the previous style, line icons can be built by using both fill shapes and outlines.
Or you can do it by using just lines.
Another thing that's different with this style is that it forces you to work a lot more with the Pen Tool (P) compared to flat icons where you would rely on basic shapes such as rectangles and circles which you would adjust using the Pathfinder panel in combination with some other adjusting tools.
Now whether it’s “line icons” or “flat icons” it doesn’t really matter as long as you create something that carries your own personal signature, which if it’s good enough will instantly let people know who the author is.
I find style to be a sum of three different aspects:
Color
Shape
Expression
Color
Color is one of those things that helps define a personal style but it’s not that easy to master, since there’s an entire theory behind it, which you have to master since it will help you a lot. You can think of color as the “tone” that you set for your story. The brighter and warmer the colors are, the happier and warmer the story becomes.
Change the warmth of your colors and then the “tone” will shift from something friendly to something a little more distant.
Of course, this is just a small interpretation, since there are all kinds of meanings assigned to colors, which I won’t go over, since there’s already a very well-written piece that explains everything that you need to know in depth.
Shape
Now if color sets the “tone” to the story, then shape defines the skills of the “storyteller” since there are designers that can create highly detailed pieces of artwork, while others achieve the same effect using simple shapes that are just as expressive.
Beyond that, shape also helps establish the “mood” of the story, or more exactly how your users perceive the icons. You can go for a more playful feel which can be achieved by using soft rounded corners and shapes or for something more formal by using straight corners and lines.
You can also choose between shapes and lines that have a more organic feel that look more natural and ones that feel more man-made. In the end it’s all up to you and the project’s needs.
Expression
Expression can be viewed as the “emotion” that your icons trigger inside the mind of the person viewing them. As you’ve probably guessed, this is mainly done by combining smart color schemes with the right type of shapes. Without expression, your style will inevitably suffer since you won’t have that unique “something” capable of engaging the mind of the beholder.
Now the problem with style is that it’s somewhat hard to find, since usually creative minds are wired differently, which means that a particular designer might develop his or her style faster while others might have to work a little harder to discover theirs.
Usually, this is the biggest question that people ask in icon design, but the honest truth is that there is no universal formula for achieving a mind-blowing style. It’s all subjective to each and every one of us, and it only depends on the time and energy that we put into the process of becoming better at what we do. Style won’t find you until you’ve proven to be worthy of it, but believe me, when it does, you’ll be smiling for days.
Also, there’s nothing wrong with trying out different styles, since this is actually a good way to find out what you’re good at and what you could do to improve. Don’t believe me? Well, just pick a couple of your favorite icon designers and go back to their early days and try and see how their style developed and changed over time.
Today the trend with icon design is mostly focused on “line work”, where the composition is made out of fill colors and hard thick lines that delimit the different sections that build up the actual icon. The reason behind its popularity is mainly due to the simplicity with which you can express an idea/emotion by using just a couple of shapes and colors, compared to the old days of skeuomorphism where icons were created to resemble their real-world counterparts as closely as technically possible.
The thing with style is that it’s always changing, since designers always find new ways of improving what was done up to a certain point, which in the end leads to a transition to something new, something “fresh” that is powerful enough to make everybody else adhere to it. Also, as in fashion, icon trends always find a way of reviving themselves so there’s always a chance that we will see a dying trend come back to life at a distant point in time.
5. Create With Size Variation in Mind
Size—or more exactly “sizes”—is probably the most important aspect that you need to decide on, no matter the project that you’re working on, since your icons will probably be used across a range of different size and pixel density screens. This means that they have to follow certain predefined sizes established either by the interface or by the OS itself.
This is usually the case for mobile OS's where the companies responsible for their creation and development make these specifications public and ask the developers to adhere to them in order to keep things consistent.
So whether it’s Google’s Android or Apple’s iOS, you can easily find the right size / sizes that you need to come up with when creating a set of icons for a mobile app.
Other times you will be working on a website or a piece of software that will give you more freedom, but that means you have to take time and research which size works best depending on the different variables that you have to consider.
Now, you don’t have to know each size variation for each device and OS by heart, but you have to know that depending on the project’s needs, you will have to adapt and use predefined values instead of coming up with ones on your own.
On the other hand, if you’re building an icon pack to sell on an online market, you have the same rules here too, since usually these packs come with predefined size variations, that start from 16 x 16 px all the way to 256 x 256 px.
By knowing exactly which sizes you have to create, it will be far easier to manage any project, since you won’t have to pull the plug on the creative process and waste time on doing research that you should have done before you started creating anything.
As a general rule, no matter where your icon will end up being used, always start from the smallest size and use that as a base grid to build all the larger ones since when dealing with pixel perfect objects it’s easier to scale them up than to scale them down, which usually results in breaking your design.
You can read more on the process of correctly scaling your icons in this little tutorial that I wrote just recently.
6. Achieve Consistency and Coherence Using Reference Grids
As a general rule, if you’re creating an icon pack, so more than one icon for a project, the product has to be consistent all the way, otherwise the “style” will end up being nonexistent since your icons won’t be in visual harmony.
That being said, the next thing that you should start learning and applying throughout your workflow is Reference Grids. By definition, a Grid is a “structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy-to-absorb manner” (Wikipedia).
In icon design, Reference Grids are usually a necessity since they allow you to create cohesive icon packs, which is kind of a must since you can’t sell a product that has an unbalanced style across its assets.
7. Always Avoid Using Text Inside Your Icons
Let’s be honest: if your icon isn’t able to tell its story by simply taking a look at it, then you’ve probably done something wrong, since the symbol behind it has to overcome the need of using any words.
Think how weird it would be if you had a clock icon with the word “clock” written under it. I mean, it should be obvious that what you’ve created is a clock without having to express it with words.
Beyond that, think how hard it would be to create a super small icon (24 x 24 px) and put in a word with a 6 px font weight next to it, and then actually expect the user to be able to read it.
Yeah, sure there are a couple of situations where you could use a letter or number, for example a text document icon or a calendar one, but these are usually rare cases, where these symbols might actually add to the style and meaning of the icon.
As a general rule, you should always stay away from using text, and instead find a way to create an icon that has a clear voice and expresses what it stands for from the start, without the need of any external help.
When it comes to photos, there are situations where images are still being used, but I have to be honest, I’ve never even once thought about using photos as part of an icon. I mean it’s just plain weird, since the whole reason for using icons in the first place is to translate a function or part of reality into a UI.
8. Aim to Achieve Pixel Perfection
For those who have read some of my other tutorials, you might know by now that I’m a real fanatic when it comes to creating pixel-perfect artwork, since I’m a strong believer in a “job well done”.
No matter what you’re doing, whether it’s icon design or mechanical clocks, there’s a clear line between those who create with quality in mind and those who create just for the sheer motive of making a quick buck. Believe me, you’ll always want to be part of the first group since otherwise you won’t last long.
This is the case with icon design, where in order to be good you’ll have to learn how to create for the digital medium by making sure that every little shape and line is perfectly snapped to the pixel grid in order for the icon to be as sharp and crisp as possible.
I’ve seen tons of badly constructed icons that look all mushy when displayed on higher dpi devices, and I’ve always asked myself why they didn’t do things the right way. In the end, it was this that motivated me to research as much as I could on the subject and create a “how to” instructional tutorial that explains the process of creating pixel-perfect artwork.
If learning by watching is more up your alley, then there's also a nice video course that I created a few months ago, which will take you through the step-by-step process of creating a set of pixel-perfect icons.
9. Learn to Master the Art of Simplicity
This one falls under the “less is more” principle since the whole idea of icon design is to create a visual symbol that speaks for itself while being as simple as possible in terms of its overall construction.
The reason behind this is that usually icons come in small-sized packages, which means that you as a designer and visual tinkerer have to find the optimal amount of detail that enables it to maintain its informational package while losing as much unnecessary “visual weight” as possible. By doing so, you will enable users to be more confident in their ability to understand and use both the icon and the different functions integrated within it, thus creating a more efficient interaction.
Some might argue that by stripping the icon down to its “bare essentials” you end up losing a lot of its visual appeal, but let me strongly disagree since I’ve seen some spectacular icons that are beautiful in their simplicity.
Remember, in the end your mission as an icon designer is to create something functional that is easy to use and has a nice appeal to it.
10. Always Iterate
Never, ever stop at just the first version of a design. Always force yourself to create as many iterations as possible until you find that golden one that not only speaks volumes but also looks the best. By doing so, you always push yourself to grow and develop skills faster and most importantly do a better job, which is something that each and every one of us should aim for.
It doesn’t matter if it happens on a plain piece of paper or on an 800 x 600 px Artboard. What matters is that you explore as many directions as possible before deciding on the definitive version, because your first ideas are not always the best ones.
If you want to push your skills and imagination to the max, limit yourself to six or eight iterations and do your best for each and every one of them. Then when you’re done, take a couple of moments to analyze and see which one does the job better and why.
If you manage to take this and turn it into a daily routine, I guarantee you will be able to tackle new projects faster, since you’ll know from the start which style works best, and you’ll become better at creating icons that in the end will reflect your level of craftsmanship.
In Conclusion
Now, to wrap things up, all these tips are simple things that each and every one of you could have probably come up with, but what makes them special (at least for me) is that they came from my own experience, my own creative journeys with both their ups and downs so that you can improve the way you tackle the creation of icons.
I really hope you’ve found them useful, and if you have any other tip that you want to share with the rest of us, make sure to leave it in the comments area since I’m sure that both I and everybody else reading it will be thankful.
Also, before I go I'll leave you with a link to all the icon packs that I've used as references, in case you want to check them out.
Media Player Icons by Yurlick
Christmas Icons by Rodionova
Universal Flat Icons by Vasabii
The Christmas Icons by Lastspark
Christmas Line Icons by Kuzzie
Art Vector Icons by Naripuru
Finance Icon by Albarn
E-commerce Business and Finance by Kolo_designer
Document Icons Set by In-Finity
Office Icons by Mikkimikki_prg