medium bookmark / Raindrop.io |

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.

Link

A linked chain icon is quite similar, but knocking out the area surrounding the overlapping links requires a bit of planning.

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.

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 → Compound Path → Release 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.

I’ve been tweeting quite a few of these icon speed runs recently, and collected them all into an Imgur album, 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.