What are the Best Design Guidelines for Icon Design

Designing icons can be both challenging and fun. If you do it properly, your icon design will communicate a clear purpose and positively impact the user experience.

Imagine yourself driving from work. You've had your car for years now, and you think you know it better than anyone else. The steering wheel feels like it was specially designed for your grip, the foot finds the gas pedal without you looking for it, and you know the vehicle works perfectly just by the engine's sound.

Then, suddenly an unfamiliar light pops up on the dashboard. It looks a lot like a pot with a ribbed bottom, boiling an exclamation mark inside.

You decide to deal it with tomorrow and take the car to the garage after work. Then, in the morning, you rush to get to the office on time, you go to the parking lot, only to find your car with a flat tire.

If only that icon were more explicit and descriptive, you would have known that it was a warning from your vehicle's tire pressure management system and would have addressed the issue sooner rather than later.

{{ICONS_PORTFOLIO="/dev/components"}}

Clarity is the most critical factor of icon design

An icon is a symbol for visual communication with users, a graphic sign that represents information, ideas, or objects. An icon must provide clarity; otherwise it has no meaning or purpose. UX designers know this all too well, yet we often see an icon or icon set that either confuses or distracts the user.

Like any other graphic design element, context is the key to creating a compelling icon with clear purpose and descriptive properties. Without the context, you might get lost with irrelevant details and end up with a completely inappropriate icon.

Developing a single icon for a mobile app, a set of icons for a software or system tray icons for PC or MAC, is much easier if you understand the context for designing the icons, so it's best to start from there.

Think about the purpose and find the best way to create an association between the design and the meaning. A particularly outstanding icon can last for years without an update, sometimes even outlasting their original reference point - floppy discs are long gone, but we continue to see them as a "save" button.

Form

No matter how detailed the design is, the icons are created from simple squares, circles, ellipses, triangles, and other geometric shapes. These building blocks are the foundation of the icon design.

When creating icons, you should consider what they mean and the kind of emotions they can trigger subconsciously. Certain shapes can activate psychological responses, so always consider how the design of your icon can affect the users.

Rectangles and squares give a sense of stability. UX designers work with these shapes to convey loyalty and safety.

Circles are the simplest forms and are often found in nature. They can communicate health, vitality, community, relationships, and repetitiveness.

Triangles are associated with stability, power, science, and movement. The universal use of a triangular shape in icon design is the button for "play."

Style

Choosing an icon style and holding on to it will ensure consistency, which is highly important when creating sets. If, for example, you decided to make an icon with round edges, make sure all the icons from the set follow that rule.

Pixel art icons

The first set of icons was developed in the early 89s, using the technology of the time. One can expect that the icons back then were simple illustrations pixelated by the low resolution.

Today pixel art icons maintain their popularity since they are a powerful nostalgia trigger. When developing these icons, designers use as few design elements as possible to grab the audience's attention.

With today's available technology and design tools, designers can use their creativity and revamp this style with more colors, details, and depth.

Isometric icons

With the Atari 520ST computer launch in 1985, we saw an evolution of pixel art icons. If the icons before were two-dimensional, the introduction of isometric icons created a three-dimensional look and depth.

Line icons

Line icons are direct successors of pixel art icons and one of the most popular styles used today. They can portray powerful imagery using simple outlines and shapes.

With the evolution of computer displays, this style has become more organic as designers can now use curved lines, rounded corners, and a variety of line weights. The use of colors adds even more visual weight to this style and attracts the audience's attention without burdening the design with sufficient details.

Glyph icons

The term “glyph” is defined as a hieroglyphic symbol. From a design perspective, glyph icons use monochromatic shapes and negative spaces separating their different elements or composing sections.

Flat icons

With Microsoft’s new visual language Metro in 2012, the flat icons became extremely popular. The style depends on a clean, minimalist approach, void of plenty of details, stripped to its bare essentials.

Material icons

Material icons are an excellent step forward from flat design. This visual style is created by stacking elements over one another, using highlights and shadows. Google even created a practical online guide to help interface designers understand material properties, layout principles, and color styles.

Dimensional icons

The dimensional style combines the elements of line icons and isometric ones, adding a dimension of depth to the icon from a horizontal point of view. Simply put, the style relies on the use of perspective in design by presenting both the front side of the object and one of the object's sides.

3D icons

The three-dimensional design gives designers the ability to create icons closer to what users visualize when thinking about the product. 3D icons can do more for an interface than flat icons, for that matter.

Even though 3D design allows designers to reach the full potential of their creativity, it's easy to forget that icons should remain simple.

Hand-drawn icons

Hand-drawn icons are, by definition, more personal and give a human touch to the design. Although this style offers limitless possibilities, depending on the designer's talent, these icons are not frequently used, as brands view them as too "playful", which may interfere with their personality.

Grid

A grid governs almost every design aspect. It will help a lot if you fit icons in the pixel grid to avoid blurry edges when creating icons. Pixel perfection will help you reach balance and flawless design. Don't think of this as a limitation but an effective way to achieve precision.

• Dot grids can give you structure without too much distraction
• Square grids are helpful when working with straight lines
• Square grids with diagonal lines are useful when working with almost any geometric shape
• Thirty-degree angle grids can give designs a three-dimensional look.

The best practice is to work on a grid 24 by 24px because it ensures clarity and proper visibility. You can scale it down or up, but make sure it's divisible with 8.

Scalability is critical for the user interface. Think where your icon might appear. People can see it anywhere, from small phone displays to tv screens. When you test the different icon sizes, you make sure it looks outstanding in every case.

Complexity

Icons are tiny, which means you need to be sure that when people see them, they can understand what they depict and their meaning. Designers should avoid integrating complex concepts and elements into icon design.

Create the first draft of your icon, and then think about what you can remove from the design without affecting its meaning. Once you end up with the most basic configuration, that's probably the best version of the icon.

Symbolism

As we mentioned earlier, icons are symbols for visual communication. As with any verbal language, some elements carry universal meanings.

When the icon depicts an envelope, you'll need mere milliseconds to translate it into the word "email." When you see a triangular icon, even if it's stylized to abstraction, you'll probably connect the dots immediately and understand it means "play the media." Symbols are crucial for digital communication.

If you're unsure how to depict a specific concept, service, or product, visit the noun project and find the best symbol for a particular purpose.

Conclusion

If done well, icons can do more for the user interface than any textual reference. They are a perfect tool for navigation; they can communicate ideas and concepts and help products stand out from the crowd.

Make sure to use best practices for your icon designs to help clients keep their users and customers happy. These are simple guidelines to help you create compelling and striking icons. However, don't forget that sometimes you can break the rules and create outside-the-box designs.