How to Design an Icon Using Boolean Operations in Sketch

Sketch’s “boolean operations” allow us to create complex paths by combining existing shapes. Let’s learn how to make the most of them by designing an icon in this screencast tutorial.

How to Design an Icon Using Boolean Operations in Sketch

Watch Screencast

 

What Are Boolean Operations?

“Boolean”, in terms of computer programming, is a data type which can be either “true” or “false”. In terms of graphics applications like Sketch, we use “boolean” to describe how shapes are combined, using values such as “and”, “or”, “not” etc.

You’ll sometimes hear boolean operations referred to as “Pathfinder” tools, and the options available are: 

  • Union: Where the result is the sum of both paths’ areas.
  • Subtract: Where the area of the top path is removed from the one underneath.
  • Intersect: Which leaves the area where the original shapes overlap.
  • Difference: Effectively the opposite of “intersect”, leaving the parts where the original paths don’t overlap.

Using Boolean Operations

Creating complex shapes is something you’ll inevitably come across in icon design, so let’s take a look at how boolean tools can help us. 

For example, in trying to recreate this anchor icon, we might begin with two circle shapes, the uppermost of which we’ll subtract from the lower.

How to Design an Icon Using Boolean Operations in Sketch

After some more subtraction, we’ll add some triangles to the end of our anchor’s base, using the union operation to combine all three shapes into one.

How to Design an Icon Using Boolean Operations in Sketch

Editing

You may have heard the term “non-destructive” design, which refers to a way of working in graphics applications which doesn’t destroy vital information as you go along. Here, for example, you might think we’d have a problem if we wanted to make our triangles larger, but thanks to Sketch’s non-destructive techniques we haven’t burned our bridges.

Each object within this Combined Shape is still accessible as its own layer, so isolating and editing the triangles is no problem:

How to Design an Icon Using Boolean Operations in Sketch

Ultimately, when your shapes are all created, combined, subtracted, intersected, whatever you need to do, you can click Flatten to remove isolating capabilities. Much like Adobe Illustrator’s Expand option, this will leave you with single complex paths, which might be more appropriate for distributing your icon.

How to Design an Icon Using Boolean Operations in Sketch

Conclusion

Sketch’s four boolean operations allow us to build complex paths by combining shapes in different ways. As we demonstrated, they’re very useful for icon design. Use them today!

Useful Links