Sketch - How to create Heart in Sketch

In this tutorial we will learn to create HEART icon using Sketch.

Contents

• Step 1: Create artboard
• Step 2: A big square
• Step 3: Two circles
• Step 4: Merge the square and the circles
• Step 5: Rotate the shape
• Step 6: Smaller heart

Step 1: Create artboard

Open Sketch and create a new Artboard.

Click on Insert and then select Artboard or hit the A key on your keyboard and you will be able to create an artboard.

Now draw a square artboard having width 128px and height 128px.

Step 2: A big square

To create a heart we will start by first creating a square having width 74px and height 74px.

Go to Insert then select Shape and then click on Rectangle or simply hit the R key on your keyboard. Now draw the square.

Place the square at the bottom left corner of the artboard.

Remove the Borders from the right side menu and fill the square with black color by setting the Fills to #000 which is hex code for black.

Step 3: Two circles

Now draw two circles each having diameter 74px.

Go to Insert then select Shape and then click on Oval or simply hit the O key on your keyboard. Now draw the circles by holding Option and Shift keys together. This will give you a perfect circle.

Place one of the circle on the top of the square and the other one at the right side of the square.

You can adjust the size (width and height) of the circles from the right side menu by adjusting the Size.

Make sure the horizontal diameter of the top circle coincide with the top side edge of the square.

Similarly, coincide the vertical diameter of the right side circle with the right side edge of the square.

Now, remove the Borders of the circles and fill them with black color by setting the Fills to #000 black color.

Step 4: Merge the square and the circles

Now select the square and the two circles and merge them into one by clicking on the Layer menu then selecting Combine and then clicking on Union.

This will merge the square and the two circles into one.

Step 5: Rotate the shape

Select the shape that you got in Step 4 and then on the right side you will find Transform.

Go ahead and enter -45 and this will rotate the heart shape negative 45 degrees. This will give us the heart shape we all are familiar with.

Step 6: Smaller heart

Create a copy of the heart shape that we have created so far.

Now, change the Fills color to white. Use hex value #fff for white color.

At this moment the white heart will cover the black heart that is behind it.

Now, start reducing the size of the white circle holding Option and Shift key together. This will reduce the width and height proportionally.

As you start reducing the size of the white heart, the black heart will start to reveal itself. It is up to you how thick or thin you want to keep the heart shape.

Align the hearts at the center of the artboard and you will get the heart shape that was shown in the above video.

Now select both the hearts and subtract the white heart from the black heart. To do this go to Layer then select Combine and click on Subtract.

Congratulation!!! You have successfully created the heart.

Want to get more icons for FREE. Check out dyIcons project.

Have fun designing.