How to design effective icons, Part 1

Create a cohesive visual language that’s beautiful and meaningful

A digital illustration of a bell app icon placed diagonally on a white background with a teal grid. Positioned over the icon are a purple Go button, a black search bar, and a black pointer arrow.

Several years ago, I had a baby in the U.S. and wanted to video chat with my 80-year-old grandmother in France. Since she was unfamiliar with the video camera icon on her laptop—an abstract combination of a rectangle and triangle—and there was no identifying text next to it, she was unable to accept the incoming video call and couldn’t start a new one. It was heartbreaking that we couldn’t figure it out over the phone and in the end, it wasn't just my newborn who was crying.

My grandmother did eventually meet her great granddaughter, in person, but the experience taught me that it's impossible to open any application or website on any device without having to use, understand, and interact with iconography—which means that demand is limitless and being able to design icons that are consistent and look good is a valuable skill.

Over the years I’ve established a consistent set of guidelines and practices that have been critical to the success of my work as an icon designer at Adobe. I created this guide to aid creative pros, engineers, and designers new to this area of work. Here, in Part 1, I’ll discuss the prep work necessary to create icons that are beautiful, consistent, and tell the right story. In Part 2, I’ll discuss the design considerations that will ensure they're balanced, understandable, and easy to export and maintain.

Necessary prep work

First things first: Set up your workstation. I won't go into too much detail because workstation set-up involves many personal decisions, but I will say that icon design is time-intensive, so software and ergonomics are key. To ease wrist strain and more closely mimic the natural feeling of drawing, I use a Wacom tablet with a stylus, but a mouse will do.

You'll also need vector software... There are many apps, but for me nothing works like Adobe Illustrator coupled with a collaborative design tool for creating, maintaining, and sharing icon libraries.

A vector illustration with four images. Left to right, a silhouette of a person with poor seated posture facing a computer monitor (a red circle with a white x is above it); a silhouette of a person with perfect seated posture facing a computer monitor (a green circle with a white checkmark is above it); a tablet and a drawing stylus; a computer screen with with Illustrator's Pen tool on it.
Having the right tools for the job makes icon work exponentially easier.

....and a good chair. Sit about an arm’s length from your screen to avoid bad posture and turtling or craning your neck (which is easy to do when looking closely at your icons). Details matter in icon design but it’s important to not strain your neck while working on them. Use shortcuts to zoom in and out of the canvas: zoom in to 3200% when editing vector shapes and zoom out to 100% to see if you're satisfied with the result. It also works to open a second window in Illustrator (Ai > Menu > Window > New Window) with the 100% representation of your icon so you can move easily between 3200% and 100%.

Know your icon types

Icons in applications and digital interfaces usually fall into one of three categories:

Three images on a white background. Left to right: a white Adobe Acrobat logo in a red icon; the Adobe Acrobat logo and wordmark; the Adobe Acrobat logo used to identify a file type.
From left: Examples of an app icon, a platform system icon, and a workflow icon.

Find the right metaphor: Learned meaning and understanding

To imbue an icon with meaning, you must first understand how it will help a user successfully complete a task, then translate that action to a visual entity—a metaphor. Finding the right metaphor for an icon is a process guided by research and completed by imagination and inspiration.

Imagine looking for specific functionality in an interface and not being able to find it because an icon is poorly drawn, or the metaphor is so off base or abstract that it can’t be associated with an action. Icons should always be familiar and straightforward, so people aren't left guessing.

Three black line art images on a white background. Left to right: an open-ended clockwise rotating arrow, an arrow pointing upward into a cloud; an arrow pointing right into a rectangle.
Arrows help communicate basic functions like rotating, saving to the cloud, and signing in.

As an example, arrows in icons gained popularity with the introduction of cloud storage, which distinguished where content was being stored. But arrows (and chevrons) are also universal shapes that communicate basic direction and computable transitions like file exporting. Their distinct shape makes them distinguishable at small sizes, and because different directions of arrows can show relationships between things to be connected, selected, downloaded, or shared, they can quickly communicate predictable outcomes.

On a white background from left: a black search field with a magnifying glass and the words "computer file attached to an email" in white type + a digital illustration of a paperclip holding pages together = black line art of a paperclip.
Two familiar concepts are combined to create an understandable metaphor for the function of appending a file to an email. (Paperclip illustration by robynmac/Adobe Stock)

Remember the goal of an icon is to communicate as fully as possible, so combine them carefully to build up a knowledge base to support the way that people understand and use them. Take care to use metaphors that people understand and to not use familiar metaphors (like arrows) in unfamiliar ways. Icon metaphors need to be learned and people don't want to learn them when they're in a hurry to get something done.

Finally, do your research: Make it as easy as possible for your audience to understand your icon by exploring your options and checking metaphors for meaning on websites like Noun Project, Iconfinder, or Google Images.

Badges (and modifiers) add supplemental meaning

When designing, try to think about the long-term use of icons. Most will show one primary element but planning for badges—familiar symbols usually added to icons for in-app notifications—will help you manage the set as more complex features are added.

A digital illustration with four symbols on a white background. Left to right: black line art of a piece of paper with a white checkmark inside a green circle in the lower right corner; black line art of a piece of paper with a white exclamation mark inside a red triange in the lower right corner; a white checkmark inside a green circle; a white exclamation mark inside a red triangle.
Icon badges, combining familiar colors and symbols to add supplemental meaning to app states, often do double duty as standalone modifiers.

When thinking about badges, less is more. Give primary consideration to where they'll be placed and be consistent with that placement throughout the set. Define the space, like a circle cutout, and remember that icons can quickly become unreadable, and their meanings unclear, at small sizes. Color contrast between the cutout and the symbol inside it, and providing enough space to ensure readability, is crucial.

One last thing to know about badges: This same supplemental content being placed in a colored circle or triangle, can also be used as a modifier. Placed in tooltips and tool panels, modifiers usually call attention to the status of assets, files, or operating systems. These alerts need to stand out, so simplicity is key.

Form and beauty (yes, icons must look good)

Constructing and building a production-ready icon includes complex pathfinder operations (to combine, add, and subtract the shapes that comprise it) and rigorous anchor point snapping (for alignment) and it can be quite easy to underestimate how long those things take—especially for multiple icons.

To save time when constructing the first iterations of icon shapes, I use a “fake it till you make it,” or scrapbook approach: I draw and build the shapes by masking any areas that will require pathfinder cutouts. They look like final versions but are really shapes overlaid by other shapes. Not only do they help get the look-and-feel right before spending time constructing a final version, but they can also make it easier to incorporate client feedback.

On a white background with a light gray grid from left to right: a black line drawing of a drop shape with purple highlights at the pointed tip and rounded bottom; a black line drawing of a circle comprisde of a counter-clockwise arrow with a removed portion highlighted in purple inside a bounding box.
A natural drop shape (left), and its construction (right), a circle connects to a straight line with an arrow tip.

A word of advice about natural shapes: It's no secret that forms found in nature are pleasing but recreating natural shapes in vector form can be challenging and take longer than expected. Shapes like drops are difficult because they combine curved and straight strokes that require a seamless connection, for the visual transition to be smooth. Finding the right proportions can easily add hours to initial design time (even without adding complex cutouts to the mix).

Don't give up. Keep iterating and make duplicates of your shape evolutions as you go because an early iteration may end up being the best of the bunch.

Visual consistency

Maintaining consistency in icon sets is important and thinking about a few things in advance will help:

Up next, “How to design effective icons, Part 2: Refine your work, and style, and stay (really) organized.”

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link