Create a Car Icon in Affinity Designer

Today we’re going to create a car icon in Affinity Designer using basic shapes! Icons are images or symbols that are used to represent files or programs on an operating system. And, icons help users identify these files and programs.

Here is a site that shows the Average Size for App Icons on Apple’s devices.

Here is a site that shows the Average Size for App Icons on Android devices.

Step 1

First, go to File > New. Then, set up a document with the following properties.

Step 2

Second, make sure your snapping is turned on. Next, grab the Rectangle tool. Then, draw a rectangle that touches the left and right edge of the artboard.

Step 3

Third, set the Fill color of the rectangle to the following color (or you can use a color of your choosing).

Step 4

With the rectangle selected, go to the Context toolbar. Select Corner and click Rounded. Set the roundness to 10%.

Step 5

Grab the Rectangle tool again and draw a rectangle over top the first rectangle.

Step 6

With the second rectangle selected, go to the Context toolbar and select Convert to Curves.

Step 7

Now, grab the Node tool (press A on the keyboard for a shortcut). Select the top left node of the second rectangle. Hold Shift and drag this node to the right with your mouse.

Step 8

Select the top right node. Then, hold Shift and drag it to the left.

Step 9

Next, select the second rectangle. Press CTRL + J to duplicate it (or right-click on it and select Duplicate).

Step 10

The next step for creating this car icon in Affinity Designer is to change the Fill color of this shape to the following color. Then make it smaller. Press CTRL + Shift and drag any of the corners inward to decrease its size.

Step 11

Now, grab the Ellipse tool. Hold CTRL + Shift and draw an ellipse on the left par of the original rectangle. Give it the following color.

Step 12

With the ellipse selected, press CTRL + J to duplicate the ellipse. Then hold Shift to drag the duplicated ellipse to the right side of the original ellipse.

Step 13

Grab the Rectangle tool. Draw a rectangle beneath the original rectangle on the left side. Set the rectangle to the following Fill color.

Step 14

After that, go to the Context toolbar. Go to the Corner section and select Rounded.

Step 15

Deselect the Single Radius. Set the TL and TR corners to 10%. Leave the BL and BR corners at 25%.

Step 16

With the rounded rectangle selected, hold ALT + Shift (or CTRL + Shift) and drag a copy of the rounded rectangle over to the right side.

Step 17

Grab the Rounded Rectangle tool. Draw a rectangle between the two ellipses. Give it the following Fill color.

Step 18

Now, grab the Rectangle tool. Draw a rectangle on top of the rounded rectangle. Give it a black Fill color.

Step 19

With the smaller rectangle selected, press ALT + Shift (or CTRL + Shift) and drag a copy of the rectangle slightly down. Then press CTRL + J to make a duplicate of the second rectangle (the third rectangle should appear equidistance from the second rectangle).

Step 20

Go to the Layers Panel. Select the three rectangles. Drag them inside of the rounded rectangle.

Step 21

Now, grab the Rectangle tool. Draw a rectangle on the light blue curve shape. Set it to the following Fill color.

Step 22

With the rectangle selected, go to the Context toolbar. Set the Corner to Rounded. Uncheck the Single Radius. Set the TL and TR corners to 15%. Set the BL and BR to 0%.

Step 23

Make sure the rectangle is still selected. Press ALT + Shift (or CTRL + Shift) and drag a copy of that rectangle to the left side.

Step 24

Next, grab the Ellipse tool. Draw an ellipse in the center of the brownish rectangle on the right side. Get rid of the Fill color and give it a Stroke color of black.

Step 25

In the Stroke Panel, set the stroke Width to 1pt.

Step 26

Now, let’s move to the next step in the car icon in Affinity Designer tutorial. Go to the Layers Panel. Next, drag the ellipse inside of the rectangle. Then (on your illustration), hold Shift and pull the ellipse down so that only half of it is showing.

Step 27

Grab the Rectangle tool. Draw a vertical rectangle on the light blue curve shape at the top in the center of it.

Step 28

With the Rectangle tool still active, draw a horizontal rectangle below the vertical rectangle you just created.

Step 29

Select the horizontal rectangle. Go to the Context toolbar. Go to the Corner section and select Rounded. Leave the corner percentage at 25%.

Step 30

Now, grab the Rectangle tool. Draw a rectangle on the left side of the upper half of the car. Rotate it -30 degrees (as seen in the Transform Panel).

Step 31

With the rectangle still selected, go to the Toolbar and select Move to Back.

Step 32

Grab the Rectangle tool and draw a rectangle on top of the previous rectangle.

Step 33

With the new rectangle selected, go to the Context toolbar. Set the Corner to Rounded.

Step 34

Select both rectangles. Press CTRL + G to group them together (or right click on it and select Group). Set the Fill color of the rectangles to the following colors.

Step 35

With the mirror (the rectangle group) selected, press CTRL + J to duplicate it (or right click on it and select Duplicate).

Step 36

Go to the Rotation Panel in the Toolbar and select Flip Horizontal.

Step 37

With the duplicated group selected, hold Shift and drag the duplicated mirror to the right side of the car.

Step 38

Press CTRL + A to select all the car elements. Then press CTRL + G to group all the car elements together.

Step 39

Grab the Rectangle tool. Draw a rectangle that covers the entire artboard.

Step 40

With the rectangle selected, go up to the Toolbar and select Move to Back so that the rectangle is behind the car.

Step 41

Finally, give the rectangle a Fill color of your choosing.

Congratulations! You now know how to create a car icon in Affinity Designer. For more icon tutorials in Affinity Designer, check out this one on how to create an envelope icon.