How to make custom icons in Sketch using Boolean operations

When it comes to creating an icon in Sketch, there are only 2 things you need: basic shapes and Boolean operations.

Boolean operations give you the power to combine shapes using a ton of different configurations. In Sketch, the 4 operations are Union, Subtract, Intersect, and Difference.

Boolean operations in Sketch: Start with a basic shape

To get started, press Command + N to create a new document. Then we’ll start by creating a handle for our example image, a wrench. Go to Insert > Choose shape > Rectangle, and click and drag to create a tall, skinny rectangle.

That’s easy, but the problem is that the corners are sharp and it’s a bit blocky. To adjust this, go over to the Inspector on the right hand menu. Drag Radius to the right—it creates a rounded corner on the top and the bottom. The bottom matters most in this case, since the top is actually going to be hidden in next steps.

Boolean operations in Sketch: Get shapes lined up correctly

To hide the top of that shape with the top of our wrench, go to Insert > Shape > Choose oval.

Pro tip: Important Sketch shortcuts to use in this case are R for rectangle and O for oval. I’ve illustrated the long way for instruction purposes here.

After that, click and drag while holding Shift to get a perfect circle. As you can see in the image above, I can now click and drag to position this circle at the top of our rounded rectangle.

The red lines shown are smart guides to help show when everything is properly aligned. Once the positioning is correct, it’s time to start combining and subtracting shapes.

Boolean operations in Sketch: Combining and subtracting shapes

At this point, I usually scroll up to give myself some workspace. After selecting the handle at the bottom, hold Option and drag it upward to create a duplicate. This is going to be what carves out the top of the wrench.

Next, we’ll click the bottom of the handle, hold Shift, and click the circle. Then, Boolean operations enter the mix from the top toolbar. By using the Union function, the 2 shapes get combined into one.

After returning to our top rectangle, hold Shift and click what’s becoming our wrench—but this time use the Subtract operation. At this point, the image is more clear but the proportions are off—and this is where Boolean operations in Sketch get really cool.

Boolean operations in Sketch: Arranging icons and using Subtract

Now, if I press return or double click the wrench, all the shapes are live and ready to be moved and resized. However, the icon isn’t perfect yet—it’s still missing the hole at the bottom of the wrench.

To create this, press O to go back to the oval tool, hold Shift, and drag to create a circle. Then drag it over the bottom here before using the Boolean operator Subtract once again.

Now that it looks more like a wrench, hold Command, position the cursor over the top right corner, and click and drag to rotate. Hold Shift locks this into 15-degree increments.

At 45 degree, duplicate it with Command + D, and do the same thing in the other direction. To make this look even better, rotate the duplicate back so it’s perpendicular to the first.

To carve a gap between the wrench on top and the wrench behind it, duplicate the image one more time. Now on the layers list, you should see:

• a wrench tilted to the right
• the wrench tilted to the left
• an extra copy on top

To make sure I have the extra copy on the left selected, go to the Inspector and create a border. Choosing white is best in this case so we can preview the effect of cutting out the wrench below. Then, switch the position from Center to Outside—you don’t want to cut into the wrench that you’re creating the border around.

Make this about 10 pixels wide. You can see the effect right away, but the problem with this is that the wrench on top has a border—it’s not actually cutting into the layer below. If you change the color to something like pink, that’s much more obvious.

To fix this problem there are a couple of steps to follow.

Boolean operations in Sketch: Combining multiple images

Remember, these are all separate pieces displaying as a wrench. To turn this into a single piece, choose Flatten on the toolbar. It’s no longer going to be editable the way it was before—you can still edit points on the shape—but not the individual rectangles and circles.

Now, go to Layer > Convert to outlines. This turns the outline into a shape— which can now be used with a Boolean operation. When it was a border, that was simply a visual effect, one that couldn’t carve into the shape below it. Now that I’ve got my border turned into a shape, holding Shift and clicking the wrench—along with the Subtract Boolean operation—carves it out as needed.

Finally, select the top and bottom copy and use Union to combine them. Alas, we have one, final shape. If you expand the layers panel and look at the final result, it’s a lot of random little shapes.

Use flatten once more to simplify it. At that point, it’s ready to be styled. Go over to Fills and select your preference—in this case, it’s a blue steel color.

Pro tip: Adding another layer creates a gradient by default. That’s a pretty cool shortcut in Sketch to give something some dimensionality.

And just like that, we have a wrench.

What are you designing with Sketch? Tell us on Twitter: @InVisionApp.

Looking for more Sketch tutorials?

3 effortless ways to work faster in Sketch
How to override colors in Sketch

Creating infinitely scalable connection arrows in Sketch