How to create an icon set

How to create an icon set

Icons are symbols, which can be literal or metaphorical. They have the ability to communicate ideas, function and meaning in a common and visual language, helping us navigate through our physical and digital lives.

In this article we'll discuss the thought process behind creating an icon set. A set consisting of 16 icons can take up to 8-10 hours to research and produce. By using some of the tips outlined below, you'll be able to streamline your workflow and cut down on the production time.

The four phases outlined here are Discovery, Planning, Design and Implementation.

1. Discovery

Before jumping into the creative work, it really pays off to start off by doing research. Luckily, the web design community has some great resources which can make the designer’s workflow much easier.

To begin, brainstorm by jotting down a list of words related to your subject. Keyword searches, along with tools such as a thesaurus and Google's Keyword Planner will help to broaden your search.

Visit some Web sites related to your topic. The categories in their navigation will be a hint as to what the most popular subjects are. Even old telephone books, such as the Yellow Pages are great reference tools. Scan the ads for phrases related to your subject.

If you plan on selling your icons consider the approach of the 'Long Tail'. The gist of it being that you'll have better success designing hard-to-find items instead of going with popular themes that have already been hashed out millions of times.

After doing some research it's actually helpful to take a break and allow this information to process. Grab a cup of coffee, more ideas will reveal themselves. Once your satisfied with the list, lets move on to the next phase.

Airport Signage
Image by Martijn van Exel, Flickr

2. Planning

As we begin to think about the execution of our icons, the context of where they will be used must be considered first. Usage requirements will determine how much flexibility we have in the design phase, determining the constraints we have to work within.

The first question to ask is, will the icon set be used exclusively in print, digitally, or both? It's important to establish this up front, because they're aren't as many constraints when designing for print. Small businesses may need icons for their establishments, and won't rely on the icons for web navigation. Signage, menu design, brochures and other print collateral are some examples.

Stylistically, icons that appear in print may have more of an organic, hand drawn look. Intentionally drawing them to be anti-perfect gives your icons a human touch, providing warmth and making them feel less computer generated. In these cases, you can break the constraints of grid (just a bit) to achieve the look you want.

Consider how ubiquitous you desire your icon set to be. Keep in mind that the more you break standardized norms, the less intuitive they will be. Users have preconceived expectations about the meanings of particular computer system icons. A gear has become synonymous with settings for example. Obviously Apple, Android, Microsoft and other operating systems have a major influence upon UI systems, so going with their conventions is a good place to start. Play around and stretch the boundaries when appropriate.

Trends change over time, and the associations we have with certain forms will evolve. Most software applications use a Floppy Disk for 'Save' to be ubiquitous, even though millennials may not know what a floppy disk is. This kind of disconnect will resolve over time as new associations develop.

Sketchbook

3. Design

Finally, we can start to think about the aesthetic quality and styling of your icon set. We have a list of subjects to draw, and understand the perimeters of the project, so let's get to the fun part.

Referencing your list of subjects, get out some paper and a pencil and start drawing by hand. Start out with basic sketches. At this point you're working quickly, refining the details and working out many options for each icon in the set. Once your satisfied with the sketches, scan them into your computer and use a drawing program such as Adobe Illustrator to create vector shapes. Vectors are resizable and will provide the best performance when you output the icons.

Three things to keep in mind during the design phase: Clarity, Consistency and Form.

Clarity

Clarity is perhaps the most important element of icon design and UI. Icons should be designed so their meaning is not ambiguous. The purpose of an icon set is to enable people to interact with a system, and when icons achieve this, life is a little easier to navigate through.

If users don't intuitively understand the meaning behind the icons being used, they are forced to learn their meanings. At this point they will often become frustrated or confused, which is not the result we want.

Another consideration is that system icons and other UI elements should not compete for attention with the content, so overly complex, animated or colorful icons may need to be tested.

Consistency

A great icon set needs clarity, but it also needs consistency, this helps users to develop usage patterns. Consistency gives your icons a uniqueness across the set, and stylistically makes them easy on the eyes. Users appreciate consistency, as it helps provide a stable platform.

As you create the individual icons adhere to a grid. This will enhance the appearance and usability of your icon set, helping to provide desired consistency. Moleskin's squared sketchbooks are perfect for sketching icon sets.

Learn how to design pixel perfect icons and download a grid here.

Email Icon in Grid

Form

In addition to clarity and consistency, it's important for your icon set to have style and personality.

Form is defined as the shape or visual quality of the icons, how they look. It's the aesthetic that gives your designs an appealing quality and uniqueness all their own.

Shape, color, line weight, texture, perspective and symmetry are some of the important elements that make up the overall form of an icon. Keep these elements consistent as you design across the set. Flat perspective is recommended, although 2D and 3D isometric perspectives can add dimension.

Draw a couple of icons and see how well they fit together side by side. When you've got a theme going, continue to draw out the entire set.

As you design, remember to keep it simple. Not too many elements, eliminate the unnecessary. You're going for a highly visual aesthetic, recognizable and simple.

Icon Set

4. Implementation

Great, your vectors are drawn, let's put them into production. Here's some tips for saving them out to different file formats, depending upon their usage.

Icons for print applications

If your icons are going to be used in print, save the icons as .EPS files, preferably in Adobe Illustrator 10 version. AI10 allows for metadata, and it's established enough that most graphic programs can open the format.

Icons for digital applications

If your icons are going to be used in software, you've got some considerations to make. Hardware manufacturers are producing newer generations of higher pixel density screens. The challenge for designers is that Retina Displays, mobile devices and other desktop monitors render software interfaces differently.

Additionally, not all users have perfect eyesight. For better accessibility, assume the graphical user interface your designing for may be magnified.

Taking these considerations in mind, let's discuss three formats that you can save your icons to: .SVG, .PNG and fonts.

SVG format

SVGs are growing in popularity because they scale, and are thus responsive in various view ports. Mobile devices exceed PCs in Internet usage, which means that icons are being rendered in responsive interfaces. SVGs render high quality vector shapes without the hefty download and are compatible with most legacy browsers.

If you're comfortable coding in XML, this may be the way to go. Any vector file can be converted into an SVG.

PROS of using SVGs:

  • Vector based. Easy to manipulate.
  • Great rendering on Retina.
  • Visually impaired users can zoom in.
  • Negligible performance characteristics. 
  • Normalized look and feel of icons cross browser.
  • SVGs allow for animation.

CONS of using SVGs:

  • Incompatible SVG library implementation.
  • Requires XML decoding and rendering.
  • SVGs are vector XML files and require some programming.
  • Total file size of SVGs is larger than PNGs (64x64px).

PNG format

PNGs are raster based and very popular. PNGs are super easy to implement, so your workflow might be a little faster.

PROS of using PNGs:

  • Small and simple. Negligible performance characteristics. 
  • Rendering of PNG's is fast (especially on mobile devices).
  • Easy to implement.
  • Supports multi levels transparency: 256 levels of opacity from fully opaque to fully transparent.
  • Minimum compression loss. The image quality is not changed by any compression ratio.

CONS of using PNGs:

  • Doesn’t support animation

FONT format

Fonts are harder to work with than SVGs and PNGs. Some people prefer them, although they tend to not give you as much control over the final output.

PROS of creating icon fonts:

  • Small file size.
  • Ease of integration and performance.

CONS of creating icon fonts:

  • Browsers render differently.
  • Multi-color icons can't be created.
  • Browsers render the icons as text, so there may be anti-aliasing.
  • Can be difficult to position.

As technology continues to develop over time, standardization may become the norm. For now, there are trade offs and sacrifices depending upon the format chosen. No format is perfect, nor is one format the best in every scenario. Like any technical decision, the solution should be determined by how well it matches up with the project requirements.


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, giving you a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

The Golden Spiral: Design found in art and nature
The Golden Spiral: Design found in art and nature

Creating amazing design starts with a simple number. The Golden Spiral can be found in both art and nature.

Continue Reading →

9 eye-popping app icon design ideas
9 eye-popping app icon design ideas

Looking for another way to increase app downloads? It's time to take a serious look at your app icon design. Here are 9 brilliant ideas to inspire your design!

Continue Reading →

Understanding the common elements of graphic design
Understanding the common elements of graphic design

There is a reason why certain symbols seem so familiar. We're breaking down the meanings of common symbols of graphic design in this post.

Continue Reading →