How to Design Icons & Icon Systems

Creating an icon is simple, but creating many icons that fit within a system and larger design is decidedly trickier.

The right thinking applied ahead of time can make the task manageable and result in a better, more cohesive design, especially when each piece is fine-tuned, both aesthetically and conceptually.
It’s all too easy to default to an icon library, but in the same way that stock photography often yields unsatisfying and disingenuous results, a stock icon library won’t always integrate easily or harmoniously into a design. Worse, a library of icons patched together from disparate sources will likely have disparate details. Even minor differences in stroke width, spacing and drawing will clash with each other and your site.
So you want to create your own icon set then, right? Let’s get started.

 Use your head 

 1) Start with multiple forms 

When starting a new icon system or series, it’s important to work on several at once. Working one at a time makes it easy to land on a decision for one piece that doesn’t work for another.
For instance, a system for drawing icons that represent physical media might be broken by something with no tangibility, like a download icon. A stylized login with open edges might suddenly look incorrect when all the accompanying icon shapes are closed. Hipster glasses might work with a black fill, but what if the other icons are drawn entirely via strokes?
Even a simple icon set can be made more complicated when objects overlap, when an object contains negative space, when you represent heavy forms next to light, or objects next to concepts. When you start with multiple icons on your artboard, many decisions happen at once, and you’ll get ahead of potential pitfalls. You’ll work more quickly and are likely to build a more cohesive aesthetic.

 2) Consider what each icon wants to communicate 

Often, inexplicably, an icon set will represent video through a camcorder, an old mouse-ear camera, or a film reel. But video can be shot on a phone, on an iPad, on a DSLR, on a celluloid camera, on a Game Boy, on a camcorder, on a Flip cam, on a Playstation Eye, on a surveillance cam, on a spy satellite, on a nanny cam, on a TSA full-body scanner… So it really doesn’t make sense to choose just one of those to represent a link to web video content.
Recently, I was asked to replace a stock icon set used in an existing site, which meant redesigning a couple of video icons. In each instance, those icons linked to web video content.
The default camera icon described the origin, when it should have been describing the destination. Combined with the aforementioned discrepancy in where video originates, it seemed logical to create a simplified web player icon with the universal play symbol and progress bar. Nothing radical, but effective and coherent. In short, the default symbol attached to an idea isn’t always the best option.
Conversely, there are some symbols that are just universally understood and probably shouldn’t be messed with. If a layout needs an email icon, there’s nothing wrong with an envelope (or some variation of). Granted, no one’s actually mailing anything, but the envelope is synonymous with email. An abstracted postman, email client, or carrier pigeon might just be confusing. Sometimes you stick with what works.

 Look around you 

 3) Pull from aesthetic cues from context 

To build out the previously mentioned replacement icon set, I looked to the existing site for influence. The design features a strongly gridded layout with hard edges separating content areas. Three pixel underlines lend emphasis to headlines and form fields, while CTAs are reversed in bold, solid blocks.
For a moment I was tempted to build contrast via some blend of rounded corners and intricate detail, but it was also clear that rectilinear shapes would sit nicely in the container corners or next to right-angled buttons. To create the icons, I pulled in the three pixel rule to outline main forms with a lighter, two pixel stroke for detail. I used square corners and terminals to further emphasize the intersecting, perpendicular arrangement.
The solution here was obvious, but even extremely subtle cues taken from context will enhance the cohesion between an icon set and a design. Pull from the weight, stroke or terminals of a headline font. Pull from similar graphic or geometric elements. Look at the general tone or density of a layout—does it feel dense or airy? Design your icons to be harmonious with that particular feeling. Consider early how the colors from site will work with your icons.

 4) Look at other icons, look at real life 

Let’s be honest: there are only so many ways to simply and graphically represent a concept. More than likely, there are already hundreds of icons out there representing whatever you may be designing. But that shouldn’t stop you from creating something that uniquely fits into your system and design.
When designing a new icon, I often do an image search for other similar icons, both in order to make sure I do something different and to get insight into the logic of a form that I might not have realized yet. Another designer’s approach might inform your struggles with a particularly perplexing burrito icon, the way the tortilla folds in on the sides and top, for example.
The Noun Project and Dribbble are both excellent resources for getting a glimpse of how other designers have tackled similar problems. Non-icon image searches or observing objects in reality can also be enlightening. Just like any form of drawing, icons should always (usually) be based (at least partly) on the logic and reality of an object.

 Sweat the small stuff 

 5) Look at scale 

Simply put, make sure your icons work at multiple levels of scaling—large and small, lo-res, retina, et cetera. It is is helpful to look at different sizes often and early in the process. Also, depending on your system and the number of icons you plan to create, it’s sometimes necessary (and acceptable) to create secondary, extra small versions with slightly varied stroke or fill treatments (to maintain visual consistency).

 6) Scrutinize every detail 

Obvious, but needs to be said. Establish proportional relationships between elements, their scaling, and their spacing. Make sure objects are centered when they’re supposed to be, that parallel strokes are actually parallel. Angles are uniform, rounded bits are fully round.
Use a grid. Go back to the elements and principles of design. Go back to high school geometry.

 7) Lastly, be stylish 

Some of the best icons stand on their own, conveying the whimsy, the style, and the attitude of their designer. Icons don’t have to be static and stuffy. Play with the full set of tools you use in larger designs—a range of complementary and contrasting colors, shapes both flat and dimensional, curves, corners, opacity, texture, movement, layers. It’s all available.

About eROI

eROI crafts compelling digital experiences across email, web, and social channels. Our work has been consistently successful in driving revenue and exceeding goals for our partners.