A question to Icons8 support:

What is the simplest way to create a transparent border around a shape? In many of your icons there are shapes that overlap other shapes, and the shape on top has a transparent border, how do I  achieve this? I’m guessing it’s using the boolean tools, but sometimes this seems overly complicated.

In other words, how to combine two icons into something like this (all examples are from our Android L icon pack):

The easiest way to combine two icons is using the Effects tool by Icons8. However, it only works with Icons8 icons at the moment.

Sometimes adding the transparent border around an icon is more complicated. In the end it comes down to the boolean operation (Subtract), but there’s a hack.

Of course, simply subtracting the top shape will add no border:

So let’s add the border around this shape, and expand it. I’ve done it here in Sketch, but it’s very similar in Adobe Illustrator, too.


With a little practice, a style, and learned shortcuts, it becomes really quick. It’s even quicker in Illustrator, where you can record an action.