Skip to main content

Easy Steps To Better Icon Design

Icon and vector marketplaces like "Iconfinder" are making well-designed vector icons an inexpensive and readily available resource for web and print designers. Thousands of high-quality premium icon sets and hundreds of great free sets are available.
Every icon set submitted to Iconfinder is reviewed and evaluated for potential appeal to our website users and for potential commercial value as premium icons. When reviewing icon sets submitted to the website, we have a responsibility to our designers and to our customers to make sure all premium icons on the website are of the highest possible quality. To achieve this, we are constantly aware of the difference between “not quite good enough” and “premium quality.” The difference is often very small and usually requires minimal changes, but it has a great impact on the design and value of the icon set. Unlike many other marketplaces, we rarely reject sets that don’t quite meet our quality requirements outright. Instead, we will share very specific, actionable suggestions for how the designer can improve the icons.
This article discusses a set of design guidelines in six steps. The steps follow the basics of sound icon design, including consistency, legibility and clarity. The principles of effective icon design have been discussed at length by icon designer John Hicks of Hicks Design in his book The Icon Handbook, as well as by Google in its material design guidelines for system icons. The six steps discussed in this article should be seen as a guide, not a dogmatic list of rules. Part of becoming a great designer is learning when to break the rules and when to follow them, as we will demonstrate here.
In the example images that follow in this article, the six steps discussed will be applied to a reworking of an icon of a dog (a Corgi, to be exact) that was recently submitted by an Iconfinder user named Kem Bardly. The icon had potential but was not quite polished enough to be considered “premium quality.” We provided Kem with some easy tips to follow, and, with a little reworking, his icons were ready for approval as a premium icon set. The image below shows the before and after versions of Kem’s icon. In the sections that follow, we will explain how to methodically go from before to after.



Corgi icon makeover before and after
The image on the left above shows the original icon. The image on the right shows the redesigned icon, which implements the principles in this article. (Image: Kem Bardly)

Note that while the guidelines discussed in the article are geared to web icons, they are generally applicable to print icons as well. The typical 300 dots per inch (DPI) of printed material makes pixel-perfection essentially meaningless. If you are a print designer reading this, all of the principles covered are applicable, but you can largely ignore the pixel-perfection pieces.

Three Attributes Of Effective Icon Design Link

Icons that are well designed exhibit a methodical and deliberate approach to the three major attributes that make up any icon design: form, aesthetic unity and recognition. When designing a new icon set, consider each of these attributes in an iterative approach, starting with the general (form) and proceeding to the specific (recognizability). Even if you’re creating a single icon, these three attributes are still implied and can be extrapolated from a single design.
No doubt, more than three attributes make up effective icon design, but the three elaborated below are a good place to start. For the sake of relative brevity, we have focused on what we consider to be the three main attributes.

FORM LINK

Form is the underlying structure of an icon, or how it is made. If you ignore the details of an icon and draw a line around the major shapes, do they form a square, a circle, a horizontal or vertical rectangle, a triangle or a more organic shape? The primary geometric shapes — circle, square and triangle — create a visually stable foundation for icon design. In our Corgi example by Kem Bardly, the dog’s head is made up of two triangles and two ellipses. Just as one would start a drawing by sketching the largest, simplest shapes and then refining towards greater and greater detail, one would start an icon from the simplest shapes and then add more detail — but only as much detail as is needed to communicate the concept being represented, be it an object, idea or action.



Corgi icon underlying form
The key lines in this image show the basic underlying shapes that define the design’s form. (Image: Kem Bardly)

AESTHETIC UNITY LINK

The elements that are shared within a single icon and across an icon set are what we call the aesthetic unity. These elements are things like rounded or square corners, the specific size of corners (2 pixels, 4 pixels, etc.), limited and consistent line weights (2 pixels, 4 pixels, etc.), the style (flat, line, filled line or glyph), the color palette and more. The aesthetic unity of a set is the collection of design elements and/or choices you repeat throughout the set to visually tie it together as a cohesive whole. In the examples below, notice that each of the three dogs from Kem’s set share common elements, such as the 2-pixel rounded corners, the 2-pixel-thick stroke around the dogs’ faces and the heart-shaped noses.


Three dog icons showing aesthetic unity
These three dog icons share common design and style elements, creating aesthetic unity. (Image: Kem Bardly)

RECOGNIZABILITY LINK

Recognizability is a product of an icon’s essence or what makes an icon unique. Whether an icon works ultimately depends on how easily the viewer comprehends the object, idea or action it depicts. Recognizability includes showing the properties that the viewer commonly associates with that idea, but it can also include elements that are unique or unexpected, such as the heart for the Corgi’s nose. Remember that recognizability refers not only to comprehension of the object, idea or action being depicted, but also to recognition of your unique icon set. In this respect, aesthetic unity and recognition can, and often do, overlap. In the image below, we recognize each of the two dogs as a Corgi and Siberian Husky, respectively, because of their unique colors, head shape and ears, while still recognizing them as part of the same set because of the shared design and style elements.


orgi and Siberian Husky icons
The unique qualities of each dog make them individually recognizable, while the common design and style elements make them recognizable as a set. (Image: Kem Bardly)

Thus far, we have looked at what we consider to be the three main attributes of effective icon design. In the next section, we will look in depth at six steps to properly address these three areas of concern.

The Six Steps Link

ALWAYS START WITH A GRID LINK

The benefits of various grid sizes would best be handled in a separate article. For our purposes, we’ll work with a 32 × 32-pixel grid. Our grid also contains some basic guides to help us create the underlying form of each icon design.


Corgi icon makeover before and after
Here, we see a 32 × 32-pixel grid, with a 2-pixel border (or “no-go zone”) for breathing room.

The outer 2 pixels of the grid are what we call the “no-go zone.” Avoid putting any part of the icon in this space unless absolutely necessary. The purpose of the no-go zone is to create some breathing room around the icon.
Part of the form of an icon is the general shape and orientation. If you draw a line around the outside edges of an icon — the bounding box, if you will — the shape will generally be a square, circle, triangle, horizontal rectangle, vertical rectangle or diagonal rectangle.
Circular icons are centered in the grid and will usually touch all four of the outermost edges of the content area, without going into the no-go zone. Note that a common reason for breaking the no-go zone rule is if some accent or minor element needs to extend beyond the circle in order to maintain the integrity of the design, as demonstrated below.


Round icon showing alignment with grid and key lines
The alignment of circular icons with the grid and key lines (Image: Scott Lewis)

Square icons are also centered in the grid but do not, in most cases, extend all the way to the outermost edges of the content area. To maintain a consistent visual weight with circular and triangular icons, most rectangular and square icons will align to the key line in the middle (the orange area in the image below). When to align to each key line is determined by the visual weight of the icon itself; getting a feel for when to use which size just takes practice. Look at the square layout image below. The three concentric squares mentioned above are shown in light blue, orange and light green.


Round and square icons on a grid
The alignment and sizing of round and square icons relative to the grid (Image:Scott Lewis)

Inside the 32-pixel square, you will notice the 20 × 28-pixel vertical and horizontal rectangles. We loosely follow these rectangles for icons that are horizontal or vertical in orientation and try to make the dimensions of any icons oriented thus, to match the 20 × 28-pixel dimensions of these rectangles.


Vertical and horizontal icons on a grid
The alignment and sizing of vertically and horizontally oriented icons relative to the grid (Image: Scott Lewis)

Diagonally oriented icons are aligned to the edges of the circular content area, as seen in the image below. Notice that the outermost points of the saw are approximately aligned to the edges of the circle. This is an area where you do not need to be exact; close is good enough.


Diagonally oriented icon on a grid
The alignment and sizing of a diagonally oriented icon relative to the grid (Image: Scott Lewis)

Remember that you do not need to follow the grid and guides exactly every time. The grid is there to help you make the icons consistent, but if you have to choose between making an icon great and following the rules, break the rules — just do so sparingly. As Hemmo de Jonge, better known by his nicknameDutch Icon, has said:
The essence of an individual icon outweighs the importance of set cohesion.

START WITH SIMPLE GEOMETRIC SHAPES LINK

Start your icon designs by roughly outlining the major shapes with simple circles, rectangles and triangles. Even if an icon is going to end up being mostly organic in nature, start with the shape tools in Adobe Illustrator. When it comes to making icons, especially for smaller sizes on screen, the slight variations in edges that result from hand drawing will make an icon look less refined. Starting with basic geometric shapes will make the edges more precise (especially along curves) and will allow you to adjust the relative scale of elements within a design quickly, as well as ensure that you follow the grid and form.


Basic geometric shapes of the corgi icon
Here are the basic geometric shapes, two triangles and two ellipses, that make up the Corgi icon.

MAKE IT UNIQUE LINK

The number of talented designers who are creating high-quality icon sets, many of which are available for free, seems to be growing every day. Unfortunately, a lot of those designers rely too heavily on trends or the styles of the most popular designers. As creative professionals, we should be looking outside of the icon industry, to architecture, typography, industrial design, psychology, nature and any other area in which we can find inspiration. Because so many icon sets look alike these days, making your designs unique is ever more important.
Corgi icon with a heart-shaped nose
The heart-shaped nose on the Corgi makes this icon unique and personal. (Image: Kem Bardly)
In the final “after” image, we have a unique touch in the heart-shaped nose, which adds a dash of novelty and lightheartedness to the design.
These simple steps should be seen as a starting point, not a definitive guide. There is no single way to design icons. In this article, we have outlined the basics of a consistent approach to design, but other designers certainly have their own opinions and techniques. The best way to become a better designer is to look at as many visual references as you can, to read a variety of material, to sketch regularly (carry a sketchbook wherever you go), and to practice, practice, practice.
Corgi icon makeover before and after
The image on the left above shows the original icon. The image on the right shows the redesigned icon, which implements the principles in this article. (Image: Kem Bardly)

Conclusion Link

We have shared the fundamentals of how to create premium quality icons. These fundamentals are technical skills; anyone can learn and master them with practice. Remember that to create better icons, start from the general (form) and work toward the specific (recognizability). And keep your icons internally consistent, as well as consistent across the set, by paying attention to the shared elements (the aesthetic unity) of the icon or set. Once you have mastered the technical fundamentals, you can focus your energy on what makes an icon truly stand out: your unique creative vision.

Comments

You may also want to read these ⤵️

Referee kills player in a football match

A referee is facing murder charges after football players allegedly forced him to

Do not watch this while driving

Kids are lovely and fun to watch most times. I know most of you did this and so many other funny stuffs as a kid. Feel free to share yours... Do not watch this while driving

The Pros and Cons Of COVID-19 Contact Tracing Apps

                Written by                Jack -  Guest author Contact tracing apps seem to be the new fad. Their popularity is also one that comes on the back of a series of unfortunate events. They seem to hold another approach to fighting the menace of a disease that has claimed no less than 400,000 lives worldwide. The widespread race to get these apps working can also be attributed to the coming together of two big names in tech, Apple and Google, to make the frameworks for such apps happen. Like every other thing, though, how does the scales tip in favor of, or against, these apps? The Case for Contact Tracing Apps In April alone, the US people lost more jobs than the economy had been able to gain in about a combined decade. More unemployment claims are filed daily, while companies do not take their staff out of furlough anytime soon. Businesses are folding up daily, too, especially those still p...

Over 40 Million Accounts Found Guilty

Microsoft has uncovered 44 million user accounts using usernames and passwords that have been leaked through security breaches.

RAW TALENT ep1 (freestyle by Gdlpeid)

Just watch! Freestyle by ''Gdlpeeid''. A rapper with a difference.  Pure raw talent.

These 10 Powerful Words And Phrases Defined The Decade

Honestly, it has been a wonderful decade to remember.  A lot has happened and a lot has been spoken also. But our focus is on the words and phrases spoken.  Below are words and phrases spoken between 2010 - 2019 that defined the decade.....

By February 2020 - WhatsApp Will Stop Working on These Phones

Every now and then, WhatsApp does fish out a list of old phones for which support is discontinued and if you have an old phone lying around as a backup, you might want to read on.

Apple Has Released iOS 13.2.2 And Fixes Major Issue

All thanks to Apple,  the tech  giant just released iOS 13.2.2, which addresses the issue of background apps being killed prematurely, along with a handful of other annoyances.

This Magnetic thread Can Be Used To Clear Blood Clot in The Brain

Link from mashable.com  Researchers at MIT developed a thread that can be steered magnetically to glide through the brain's blood vessels and

This gigantic monster device turns wave energy into electricity

This 826-ton buoy was developed by OceanEnergy to turn wave energy into electricity. IEEE Spectrum reported that "OE Buoy" was towed from Oregon to Hawaii, where it will undergo a series of tests that will prove whether it can withstand the battering waves while generating electricity. Click the link below to watch the video..