A Complete Guide to Iconography

This article is meant to help you understand what makes an icon set outstanding and how to create one. Whether you are a designer who wants to venture into icon design or need a set of icons for your website or product, this guide will aid you in your creative process.

Icons are tiny illustrations, which help us orientate, make decisions, and find what we're looking for. We've been using icons from prehistoric times. Cave drawings and hieroglyphs are nothing but icons.

Today, we see icons everywhere; in airports, shopping malls, streets, and of course, in the digital world. These computer symbols are a universal language that anybody can understand, so no wonder they are a crucial part of any design system or product experience.

With attention span limited to mere seconds, web designers think of icons as life-savers in this world of noise and random information. People's attention span is so short that the only thing potent enough to convey a complex message in mere seconds is the icon.

Whether we need to find a particular app or specific content on a website, icons save time and energy for both the user and the designer. As the world gets busier and more globalized, we will depend on icons even more in the future.

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

Icon design fundamentals

Whether you're a designer or hiring one, you need to understand the technical specifications of icon design before creating yours. Let's start with the basics.

Size

Consistency is vital when it comes to icon design. The first thing you need to know is how your grid is built - is it a multiple of 8 or 10? The size of the grid will determine the size of the icons. If you use the 8 point grid, your icons should be 24x24px or 32x32px, as the size must be divisible by the number of grid points.

Additionally, when building icons, you always want to align objects to the pixel grid, especially straight lines, as it makes the spacing easier.

Choose a common size for all your icons. If you want to have one size for product icons and a different, larger size for marketing icons, you still need to make them adequate to the grid. For example, if your product icon is 24x24px, your marketing icon can be 80x80px.

The larger the icon, the more details you can add.

Color

Your icons may be used in different colors to complement the overall design of your website or product. However, start designing, you should make them in one color, preferably black. Otherwise, they will be too complex and challenging for application. When you want to change their color to fit the design, you can adjust them easily.

Strokes or fills

To keep the consistency of your icons, decide if you want an icon set created with strokes or fills. Icons designed with fills are ideal for products, as they are more accessible for people to scan.

If you want to combine icons with strokes and fills, make sure they are cohesive by using the same basic shapes.

Design principles

Balancing, composition, and unity are crucial factors for great icon design when creating icons.

Balance and composition

Squares and circles are the most common shapes used for icons. Decide what geometric shape you will use, and ensure the illustration is centered in the frame. Balanced icons seem stable, make the viewer feel comfortable, and are pleasing to the eye.

As with most design aspects, with iconography, less is more. Simplify the design as much as you can because complex icons are difficult to apply and burden the users' perception.

Cohesion

Creating a set of icons means you want them to function as a whole. Determine the general style, and ensure that every new icon you add to the set in the future complies with that style.

Your set of icons should be consistent with your brand identity. Consistency means your target audience won't be confused by the design of your icons and will intuitively understand their meaning.

Metaphors

Even if you get creative with already established or universal symbols for specific content, users will understand the metaphor in the illustration that reflects your company's voice and tone. The birdhouse used for the "home" button on Twitter is a perfect example!

When you design each icon, you must clarify the meaning behind the picture. Obvious connotations will save users precious time decoding the icons' meaning.

Abstraction

Some content is easy to illustrate, and others are not. When designers design an icon representing complex or multiple concepts, they often do it with abstract iconography. Abstract icons can convey meaning through shapes and colors without depicting anything concrete.

Tools

There are many great tools for icon design out there. In the past, designers typically used Photoshop, while today, Illustrator is the most widely used software. Figma has been gaining popularity in recent years for its sharing and prototyping features.

Final thoughts

Custom icons should have the brand identity baked in to ensure consistency and recognition. More so, the authenticity of your iconography will help your brand stand out from the crowd.

Icons should be simple, easy to interpret, and applicable. Whichever style or color you choose to implement on your icon set, make sure it complements the overall design system.

And finally, it’s safe to follow the rules; however, don’t be afraid to get creative and make the best of your imagination, even if you have to break a few rules in the process.