Getting up close and personal with icons

Courtesy of Mike Wilson

It’s probably safe to say that icons are so pervasive in our daily lives that we hardly give much thought to them. Even just today, you’ve probably seen dozens of icons — on your screens, on the streets, in buildings — but when is the last time you paid attention to an icon?

As someone who spends a lot of time thinking about user interface design, I’ve been hanging out with icons a lot lately. I’ve wondered how they were designed, what they mean to us when we know what they mean, and what they might mean to those who don’t.

In the spirit of learning (about icons) by doing, I recreated six icons as scalable vector graphics (SVGs). They say practice makes perfect, right?

The Process

A quick skim of my surroundings in the gym led me to finding over 10 icons, primarily on machines and equipment, posters, and the walls of the building. I selected nine icons to sketch, and later narrowed the group down to six icons to vectorize. Some are more complex than others, and some have meanings that are more universally understood. While I could have recreated common icons — like the figures representing male and female bodies on bathroom signs, or the accessibility icon that depicts a person in a wheelchair — I wanted to work with a set of icons that seemed relatively less common.

Icons in their native habitats

After taking photographs of the each icon, I began sketching them in pencil in my notebook. I sought to identify core shapes and lines in each icon through close observations, and I chose not to worry about precision, since the sketches would only serve as rough guides later on. Through sketching, I thought about proportions, spacing, angles, and curves, and I began to develop mental plans to prepare for the next step of drawing the icons digitally.

The original sketches

Once I completed the sketches, I took photos and uploaded each, and then pulled them into Sketch, along with the images of the original icons for reference. I decreased the opacity of the pencil sketch images and began drawing shapes and lines directly on top in order to create my icons. As I was working, I used a bright red border and no fill for my shapes, so that I could clearly distinguish the shapes from the pencil sketch underneath.

Work in progress

At first, I struggled with creating complex shapes in Sketch; even hearts were tricky to create. With practice (and the help of a few Youtube tutorials,) I was more fluidly and strategically able to combine foundational shapes rectangles and circles to create desired outcomes. For more complicated shapes, like hands, I opted to draw vectors and carefully modified the curves to emulate the original counterparts.

Work in progress, further along

Once I had drawn a given icon to the best of my ability, I repeated the process with the other icons. The complete set looks like this:

Climbing gym icons, three ways.

As tiny as they may be, icons can be quite time consuming to design digitally. Nevertheless, icons are a crucial way of communicating; they can cross cultural barriers, quickly inform users how to operate a tool, or share important feedback about the status of a system. Being able to create icons that are beautiful and clearly understood is an invaluable skill for user interface designers — and now that I’ve begun designing icons, I’ll hardly take them for granted again.

Show your support

Clapping shows how much you appreciated Erika Harano’s story.