Vector icon speedruns
It’s common to have to draw the same kinds of icons over and over — many different apps and websites use similar glyphs, but each instance typically needs to be tweaked for size and style, so they need to be redrawn.
Due to this repetition, I’ve always been interested in trying to work out optimal ways to create them. This is to save time, but also as a fun challenge. I’ve explored the best way to create some common icons using Illustrator (with my Greyprint templates), but many of the techniques translate to other tools.
Hearts #
I think the quickest way to create a heart icon is with three points in a v-shape, and a large stroke. This method has some advantages, like being able to create curvy hearts by dragging out the bézier control handles. It’s pretty versatile, depending on the kinds of hearts you like.
Wi-fi #
A wi-fi strength icon can be created with a few circles, and some boolean operations. Illustrator’s pathfinder › divide was used to break everything up into separate components.
Linked rings #
A similar technique can be used to create linked rings. In this example, Object › Path › Outline Stroke was used to outline the strokes, and pathfinder was used to subtract the objects.
Radioactive #
Sometimes, it’s possible to get away without having to construct the shape manually. Dashes can be very helpful, especially in cases where a circle needs to be divided into equal portions.
Snowflake #
Illustrator’s appearance panel can add live transformations, to create copies of objects. This is great for kaleidoscope-like effects, and an incredibly quick way to build a snowflake that can be edited in realtime.
Fingerprint #
This fingerprint icon uses a combination of many techniques, including the blend tool, which creates intermediate, morphed steps between objects.
Celtic knot #
This Celtic knot took a while to figure out. The first few moves involve drawing a polygon, rotating some of the points, then rounding the corners.
Puzzle piece #
It can be very handy move some, but not all, of the points in a path.
Shield #
Sometimes there just isn’t a way to cheat. Sometimes you have to break out the pen tool and draw a shape by hand. Here’s how I’d create a shield.
Object › Path › Outline Stroke was used to convert the outlined stroke into two separate paths. The reflected path could be done live, using the appearance panel, if the shape needed to be tweaked while seeing the result.
Phone #
More hand path drawing was used to create this phone.
Impossible Reuleaux triangle #
There’s a lot going on in this impossible Reuleaux triangle speedrun. It predominately uses similar techniques to all the icons above though — outlining strokes, pathfinder operations, and creating duplicates by rotating around a specific origin.
More icon speedruns #
I’ve been tweeting quite a few of these icon speedruns recently, and collected them all into a Twitter Moment, if you’re interested in seeing some more.
If there’s an icon you’re struggling with, let me know, and I’ll see what I can do.
Published 19 May 2017.