Tag Archives: icon

Easy Steps to Make Your Icon Design Better


In design world, small things can provide big differences to the whole design and value of the icon set. In the following article, we will give some steps that every web designers can follow to improve their icons.

Always Start with a Grid

The benefits of various grid sizes would best be handled in a separate article. For our purposes, we’ll work with a 32 x 32 pixel grid. Our grid also contains some basic guides to help us create the underlying form of each icon design. Part of the form of an icon is the general shape and orientation. You can choose a square circle, triangle, horizontal rectangle, vertical rectangle or diagonal rectangle when you want to draw a line around the outside edges of an icon. The outer 2 pixels of the grid are what we call the “no-go zone.” So, avoid putting any part of the icon in this space unless absolutely necessary. With no go zone icon, an icon can have a breathing room around.

Bear in mind that grid is there to help you make the icons consistent. But, you can unfollow the rules whenever you want.

Simple Geometric Shapes

Begin your icon designs by roughly outlining the major shapes with simple circles, rectangles and triangles. Start with the shape tools in Adobe Illustrator, although icon is going to end up being most organic in nature. The slight variations in edges that result from hand drawing will make an icon look less refined. However, this causes smaller sizes icons on screen. To make the edges look more precise and, you can start with basic geometric shapes. Moreover, this allows you to adjust the relative scale of elements within a design quickly. On the other hand, it also ensures you still follow the grid and form.

Use Consistent Design Elements and Accents Across Icons

Using consistent kind of accent across an icon set can really tie the set together. In the example below, the designers employed a common stylistic element with the heart-shaped nose. The heart nose, not only ties the icons together, but it also adds a whimsical element. Furthermore, it also communicates affection for our four-legged friends.


Use Details and Decorations Sparingly

Good Icons should be able to communicate an object, idea or action quickly. In fact, you need to avoid making complex icons with so many small details. This will make the icon or set of icons is also an important aspect of aesthetic unity and recognizability. To determine the right level of detail in an icon or set is to include the bare minimum of details. It is needed to make the meaning clear.

Make it Unique

There are number of talented designers, so how can you stand among all of those crowds? The answer is by being creative. Only by producing creative result, one can survive in this creative industry. As creative professionals, we should be looking outside of the icon industry. For example, to architecture, typography, industrial design, psychology, nature and any other area in which we can find inspiration.