Important Concepts that Every Icon Designer Needs to Know

Digital design has become a popular trade which almost anyone can learn. But digital design is an umbrella term which includes all sorts of work like advertising banners, website layouts, motion graphics and of course icon design. While many of these practices have overlapping techniques they all tend to rely on varying skillsets.

This guide covers some of the basic structural concepts for icon designers. Fundamental design principles are difficult to teach and even more difficult to understand. A little practice can go a long way, but to obtain mastery requires changing your own perception of icon design.

Follow along with this post and see if you can apply any of these ideas to future work. Icon design requires talent and lots of patience – but keep with it and soon you’ll be crafting stupendous icons like you could only imagine.

Form & Space

Two primary ideas related to designing great icons are conceptual forms and the surrounding whitespace(or negative space). Icons are usually created from real-life objects – but icons rarely ever look photorealistic.

So it’s up to the designer to choose how much “realism” should be applied. Form is what dictates the shape, position, and detail of each icon.

For example, the newer iOS 8 tab bar icons are just thin lines. Very simple and clean. But going back to the older iOS 6 icons you’ll notice there was more detail as the forms felt more “full”.

One is not necessarily better than the other, although some people may prefer one over another. But the point is that form should be consistent with all icons in a set so that they look like one big happy icon family.

Space is related to form in the sense that each icon needs some space to breathe. Icons with different shades or colors may be filled without repercussion. But some icons work best with a little transparency so that people can recognize the shape more clearly.

These two ideas of form & space can seem ambiguous when you’re not familiar with icon design. Just keep these concept in mind when looking at icons and try to sleuth out similarities in the form and general design principles.

Color Matching

Another huge aspect to icon design is the color scheme. Lots of iconsets will have a matching color scheme while others will follow a more realistic approach. But even when you have dozens of icons using different colors you still need to be able to match tint and shades accurately.

Here’s a fun trick you can use to analyze an iconset: copy any full preview shot of a full iconset into Photoshop(or another program) and convert it to grayscale.

When you look at a design in grayscale it forces you to only see tone but not actual colors. This way you can get an idea for why certain areas of an icon are colored darker than others.

Unfortunately color theory is a very detailed subject which can’t be learned in a day. The subject does makes sense, but most designers come to understand color through practice rather than theory. But you might also try using some color picker tools for help when you’re stuck choosing a great color scheme.

Color is definitely an important part of icon design – but for new designers it’s often best to stick with a very small palette or monotone color scheme. This way you’ll be focused more on each icon’s form & proportions rather than colors.

The grayscale trick should prove that icons can still look pretty good in only black & white, so color is really an extra detail added onto a well-crafted icon.

Finding your Style

The beauty of icon design is that it matches up with a a lot of traditional artistic values. Obviously this includes the fundamentals like composition, color, light/shadows, texture, and proportions. But what ultimately grows on top of these fundamental principles is an idea called style.

Every skilled artist usually creates work their own unique “style” of drawing or painting. Style emerges from years of practice and mastery of different shapes and line qualities. Icon design follows a similar suit in regards to creating icon sets.

Each set of icons should follow a similar style. Pinpointing exactly what makes a style is complex, but when you see it you just know. It can relate to the thickness of each icon, shared colors, perspective, or any number of similar traits. No matter how you choose to define style it is one of the most important aspects of icon design.

It also happens to be one of the last areas which designers seem to fully comprehend. Unfortunately a newcomer won’t have as much confidence or practice with icon design, and this lack of experience will severely limit their style.

The best way to seriously improve is by practicing and cloning other icons. Try downloading a few freebie iconsets and manipulating them in Photoshop or Illustrator. Learn from others who seem to understand style by copying theirs. With practice you’ll learn how to mimic certain styles and even derive your own style from other designs.

Educational Resources

If all of this information seems a little confusing then you’re not alone! Icon design is very challenging even for those who have a great eye. Learning to draw traditionally takes months(if not years) of practice, and the same can be said for drawing digital icons.

The following resources should help you get started on the right track toward building your icon design skillset. Some of these resources are free online tutorials while others are premium courses with professional design instructors.

When choosing a lesson to follow there is no right or wrong answer. Everyone learns in different ways and we all digest information differently, too. The common denominator of all great icon designers is that they practiced a lot. So just pick a couple ideas that sound interesting to you and get started.

Premium Lessons

Conclusion

You’ll really want to put these ideas into practice to internalize the concepts properly. Icon design is one of the trickiest areas of design because the best content often incorporates traditional art with digital technique. But you don’t need to be a traditional artist in order to craft beautiful icons.

Just keep trying new things and remember to study what others have created. Over time you’ll recognize consistent icon design patterns which can be reliable goalposts for future work.

Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @<a href="http://twitter.com/jakerocheleau">jakerocheleau</a>.
Connect with Jake on <a href="https://plus.google.com/117805273496374929333/posts">Google +</a>