How to Design Better Icons

Icons go straight to the beating heart of graphic design. A successful icon communicates essential information simply yet effectively, often with just a few black lines and a splash or two of color. Great icons seem unique, even as they’re instantly recognized and understood by everyone who encounters them. Icon design may require savvy and skill, but it doesn’t have to be daunting. All it takes to get started is some advance preparation and a systematic approach to the task. With that in mind, we’ve put together a step-by-step guide to designing original, eye-catching icons, along with five essential tips for making your finished product stand out from the crowd.

Develop Your Concepts

Though it can be tempting to jump into designing a new icon or set of icons in a vector-based drawing app (more on that below), there’s much important work to be done before you put virtual pen to paper. Whether designing for yourself or a client, the first stage of icon creation involves developing the concepts that will support and guide your work.

“Concepting” your icons first means understanding how, where, and by whom your icons will be used. Is this a brand-related mission for a start-up or an innovative new product? Will your icons help people navigate city streets or communicate potentially life-saving information? Is the audience for your icons local, national, or global? If you are working with a business client, listen carefully to the specific words they use to  describe their company or product.Making sure you have a clear sense of your overall mission, as well as the purpose, and context for your work is the crucial first step toward creating original and effective icons.

Put Words on Paper

Once your concepts come into focus, you may find it useful to put words to what you want to express. As part of his Skillshare class “Exploring a Brand Identity: Design a Brand Icon,” top designer Benny Gold performs a live word association with pad and pencil that demystifies and illuminates this process. First, create a list of keywords for each icon, then list words that are more loosely associated with those terms to  help you more fully flesh out specific concepts. Look for patterns in the words you jot down and begin to imagine visual representations of some of the strongest.

Use Visual References

Benny Gold shares another pearl of design wisdom in his Skillshare class: “Every good design begins with a good reference.” There are thousands of sites across the web that compile free icons for every imaginable use, so keep refining your search terms for icons and subject matter until you find just the inspiration you need. Sites including The Noun Project, Icons8, and Swifticons offer high-quality, curated icons via paid download or subscription, often in a form that allows easy editing.

When you’re at this point in the creative process, it’s important to determine whether your icons will require visual metaphors, a depiction of real-world objects, or a combination of the two. Zajno Crew offers an insightful guide to developing visual metaphors for use in all kinds of graphic design projects.

It’s also important to decide on the graphic style you’d like to use for your icons: flat, hand-drawn, outlined, etc. Pinterest is an excellent source for icon style ideas, particularly the site’s “Icons: A study of Types and Styles” page.

Sketch Your Icons

Armed with strong visual references, start sketching your icons with whatever tools are comfortable for you. Use a grid of some kind (even a dotted-paper notebook can be helpful) and rely on geometric shapes such as circles, squares, and rectangles to provide a stable foundation for your design. This will also help you maintain consistency across an entire icon set. Add more detail as you go, but not too much — remember that simplicity is the essence of icon design.

Vectorize Your Designs

Icons should be usable in every imaginable context, from smart-phone apps to billboards. Using a vector-based drawing app will allow you to scale your designs without losing quality. Because Adobe Illustrator makes it easy to work with grids, guides, and basic design elements such as line weights, it has become the tool of choice for many icon designers. Skillshare has a variety of classes to help you get up to speed on Illustrator, including Anne Bracker’s popular “Learn Adobe Illustrator: Fundamentals for Beginners.” Many free and low-cost vector drawing tools for creating icons are also available. If you need a list of some of the most popular, TechRadar’s published an annual guide, “The Best Free Alternatives to Adobe Illustrator 2019.”

5 Essential Tips for Better Icon Design

If you want to create truly great icons, there are a few best practices that you should keep in mind as you work:

1. Consistency is king. A set of icons that’s not cohesive can look messy, unprofessional, and has very little chance of communicating what it should. Stick to a single style, theme, and color palette and you’ll avoid confusing viewers.
2. Your audience comes first. The meaning of specific icons can vary radically across cultures, so be sure to double-check your messaging when designing for a global audience. Keep your visual metaphors up-to-date with the times, too: in the early days of the internet, a CD served perfectly as a symbol for music — but that’s no longer the case.
3. Resist the urge to use words. Many icons incorporate a single letter to great effect (the Facebook “f” is a prime example), but any design that uses words is, by definition, more image than icon.
4. Try it in black and white. Vibrant colors are an important tool when creating icons, but you can test the effectiveness of your creations by removing the color. If it still communicates, you’ve probably got a strong icon. If not, consider another revision.
5. Check and recheck your work. When nearing completion of an icon set, be sure to perform a simple visual check of your work in a group.Slightly blur the icons or squint your eyes to make sure that visual weight is uniform across your set. Check for clarity of message and aesthetic unity, and make sure that there’s enough space, air, and contrast between elements to make your icons recognizable and engaging.

Want to learn more about designing icons? Check out Skillshare’s classes on how to design an icon and an icon set to get started.

Cover image by Skillshare student Catherine Chan for DKNG’s Illustrating an Icon Set: Design a Cohesive Series.