·

How to Create a Taxi Themed Icon Pack

Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

Welcome back to another Illustrator-based tutorial, in which we’re going to take an in-depth look behind the process of creating a taxi themed icon pack, using nothing more than a couple of basic geometric shapes, that we’re going to adjust here and there.

So, assuming you already have the software up and running, let’s jump straight into it!

Tutorial Details: Taxi Themed Icon Pack

  • Program: Adobe Illustrator
  • Difficulty: Beginner
  • Topics Covered: Compositional Construction, Shape Alignment, Grid Positioning
  • Estimated Completion Time: 60 Minutes

Final Image: Taxi Themed Icon Pack

How to Create a Taxi Themed Icon Pack

1. Set Up a New Document

As with any new project, we’re going to kick things off by creating a New Document by heading over to File > New (or by using the Control-N keyboard shortcut) which we will adjust as follows:

  • Number of Artboards: 6
  • Spacing: 48 px
  • Columns: 3
  • Width: 96 px
  • Height: 96 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72 ppi)
Setting up the document in Illustrator

2. Set Up the Layers


As soon as we’ve finished setting up our project file, we need to take a couple of moments and structure it by opening up the Layers panel and then creating a total of two layers which we will rename as follows:

  • layer 1 > reference grids
  • layer 2 > icons

By doing so, we will separate our icons from the reference grids, which will allow us to streamline our workflow.

Setting up the layers for each icon in the pack

3. Create the Reference Grids

Once we’ve finished layering our document, we can move on to adding the basic reference grids, which will help protect our icons from being clipped by integrating a small protective padding.

Step 1

Grab the Rectangle Tool (M) and use it to create a 96 x 96 px square, which we will color using #F15A24 and then position to the center of the first Artboard using the Align pane’s Horizontal and Vertical Align Center options.

Adding the grids for reference

Step 2

Add the active drawing area using a smaller 80 x 80 px square (#FFFFFF), which will give our icons an all-around 4 px protective padding. Once you’re done, make sure you select and group the two shapes together using the Control-G keyboard shortcut.

Creating a rectangle around the drawing area

Step 3

Fill in the remaining Artboards using seven copies (Control-C) of the one reference grid that we’ve just finished working on, which we will paste in place using the Control-F keyboard shortcut. Take your time and once you’re done, make sure you lock the current layer before moving on to the next step.

Filling in the remaining artboards

4. Create the Repeating Background

As soon as we’ve finished setting up our project file, we can position ourselves onto the second layer (that would be the top one), and then zoom in onto the first Artboard, so that we can start working on the repeating background.

Step 1

Start by creating an 80 x 80 px circle, which we will color using #FFD527 and then center align to the larger underlying Artboard.

Creating the circular background

Step 2

Create the vertical street segment using an 80 px tall 8 px thick Stroke line (#FFE36C) with a Round Cap, which we will center align to the larger circle, positioning it at a distance of 32 px from its right anchor point.

Adding a vertical street segment

Step 3

Add the main shape for the diagonal street segment using a 44 px wide 8 px thick Stroke (#FFE36C) with a Round Cap, which we will position onto the vertical one’s path, at a distance of 24 px from the active drawing area’s bottom edge.

Creating a horizontal line

Step 4

Adjust the shape that we’ve just created by selecting its left anchor point using the Direct Selection Tool (A) and then pushing it to the top by a distance of 8 px using either the directional arrow keys or the Move tool (right click > Transform > Move > Vertical > -8 px). Once you’re done, select and group the two street segments together using the Control-G keyboard shortcut.

Tilting the line so it is diagonal

Step 5

Since we want the stroke segments to remain confined to the surface of the actual background, we’ll have to mask them by first creating a copy (Control-C) of the larger underlying circle, which we will paste in front (Control-F) and then with both it and the lines selected, selected simply right click > Make Clipping Mask. Once you’re done, make sure you select and group (Control-G) the lines and the background together before moving on to the next step.

Make clipping mask

Step 6

Since we’re pretty much done working on the background, we can now quickly fill in the remaining Artboards using five copies (Control-C), which we will paste using the Control-F keyboard shortcut.

Copying and pasting the icon backgrounds

5. Create the Taxi App Icon

As soon as we’ve finished working on the repeating background, we can start working on our first icon, so assuming you’ve already positioned yourself back onto the first Artboard, let’s jump straight into it.

Step 1

Start by creating the main shape for the phone, using a 28 x 44 px rounded rectangle with a 4 px Corner Radius, which we will color using #FFFFFF and then position to the center of the larger background.

Creating the app icon - step 1

Step 2

Give the shape an outline using the Stroke method, by creating a copy (Control-C) of it, which we will paste in front (Control-F), and then adjust by first changing its color to #1C202D, and then flipping its Fill with its Stroke using the Shift-X keyboard shortcut. Set the resulting path’s Weight to 4 px, making sure to select and group the two together using the Control-G keyboard shortcut.

Creating the app icon - step 2

Step 3

Add the little notch using a 12 x 4 px rectangle, which we will color using #1C202D and then adjust by opening up the Transform panel and then setting the Radius of its bottom corners to 2 px from within the Rectangle Properties input boxes. Once you’re done, center align the resulting shape to the top edge of the phone’s path.

Creating the app icon - step 3

Step 4

Start working on the location pin, by creating its lower base using a 16 x 8 px ellipse, which we will color using #FFD527, and then position as seen in the reference image.

Creating the app icon - step 4

Step 5

Add the main shape for the pin, using a 12 x 12 px circle, which we will color using #1C202D and then position above the previous shape, at a distance of just 2 px.

Creating the app icon - step 5

Step 6

Adjust the shape that we’ve just created by first pinching its bottom anchor point using the Anchor Point Tool (Shift-C), and then selecting it using the Direct Selection Tool (A) and pushing it to the bottom by a distance of 4 px using the directional arrow keys.

Creating the app icon - step 6

Step 7

Adjust the roundness of the resulting shape, by giving it a 4 px thick outline (#1C202D) using the Stroke method, making sure to set its Corner to Round Join.

Creating the app icon - step 7

Step 8

Finish off the icon, by adding the little cutout using a smaller 4 x 4 px circle (#FFFFFF), which we will position to the center of the pin as seen in the reference image. Once you’re done, make sure you select and group (Control-G) all of the pin’s composing shapes, doing the same for the entire phone and icon afterwards.

Creating the app icon - step 8

6. Create the Payment Icon

Assuming you’ve finished working on the first icon, position yourself onto the neighbouring Artboard, so that we can start working on the next one.

Step 1

Create the main shape for the credit card, using a 20 x 20 px square (#FFFFFF), which we will adjust by setting the Radius of its top corners to 4 px, making sure to position the resulting shape as seen in the reference image.

Creating the payment icon - step 2

Step 2

Add the magnetic stripe using a 4 x 20 px rectangle, which we will color using #FFD527 and then position at a distance of 6 px from the credit card’s left edge.

Creating the payment icon – step

Step 3

Add the little text lines using a 2 x 2 px square (#1C202D) stacked on top of a taller 2 x 4 px one (#1C202D), which we will group (Control-G) and then position as seen in the reference image.

Creating the payment icon - step 3

Step 4

Give the credit card a 4 px thick outline (#1C202D) using the Stroke method, making sure to select and group all of its composing shapes afterwards using the Control-G keyboard shortcut.

Creating the payment icon - step 4

Step 5

Create the main shapes for the POS reader’s body, using a 32 x 24 px rounded rectangle (#FFFFFF) with a 4 px Corner Radius and a 4 px thick outline (#1C202D), which we will group (Control-G) and then position below the credit card, so that their paths overlap.

Creating the payment icon - step 4

Step 6

Add the device’s screen using a 16 x 6 px rectangle (#1C202D) with a 4 px thick outline (#1C202D), which we will group (Control-G) and then position as seen in the reference image.

Creating the payment icon - step 5

Step 7

Finish off the current icon, by adding the little buttons using four 2 x 2 px circles (#1C202D) horizontally distanced at 2 px from one another, making sure to group (Control-G) and then position them to the bottom section of the reader. Take your time, and once you’re done make sure you select and group (Control-G) all of the reader’s composing shapes, doing the same for the entire icon afterwards.

Creating the payment icon - step 6

7. Create the Chat Icon

Position yourself onto the third Artboard, and then zoom in on it so that we can start working on our next icon.

Step 1

Start by creating the main shape for the speech bubble using a 40 x 40 px circle, which we will color using #FFFFFF and then position at a distance of 18 px from the center of the active drawing area’s top edge.

Creating the chat icon - step 1

Step 2

Open up the path of the shape that we’ve just created by first selecting its bottom anchor point using the Direct Selection Tool (A), and then using the Cut paths at selected anchor points function, making sure to push the right resulting path segment to the bottom by a distance of 4 px. Once you’re done, close the path using the Control-J keyboard shortcut.

Creating the chat icon - step 2

Step 3

Give the resulting shape a 4 px thick outline (#1C202D) with a Round Join, making sure to select and group (Control-G) the two together before moving on to the next step.

Creating the chat icon - step 3

Step 4

Start working on the inner details by creating a 20 x 20 px circle, which we will color using #FFD527 and then position to the center of the chat bubble.

Creating the chat icon - step 4

Step 5

Finish off the icon, by adding the little type-in-progress bubbles, using three smaller 4 x 4 px circles (#1C202D), which we will position as seen in the reference image. Take your time, and once you’re done, make sure you select and group (Control-G) all of the chat bubble’s composing shapes, doing the same for the entire icon afterwards.

Creating the chat icon - step 5

8. Create the Driver Profile Icon

Assuming you’ve finished working on the first row of icons, position yourself onto the bottom one, where we will start working on our fourth one.

Step 1

Create the main shapes for the profile card’s body using a 40 x 32 px rounded rectangle (#FFFFFF) with a 4 px Corner Radius and a 4 px thick outline (#1C202D), which we will group (Control-G) and then position at a distance of 16 px from the center of the active drawing area’s bottom edge.

Creating the driver profile icon - step 1

Step 2

Add the main shape for the avatar placeholder using a 16 x 16 px square, which we will color using #FFD527 and then position onto the right side of the card.

Creating the driver profile icon - step 2

Step 3

Create the little avatar’s head using an 8 x 8 px circle (#1C202D), followed by its body using a 16 x 8 px ellipse (#1C202D), which we will adjust by removing its bottom half. Position the two shapes as seen in the reference image, making sure to select and group them and the placeholder using the Control-G keyboard shortcut.

Creating the driver profile icon - step 3

Step 4

Add the dummy text lines using two 8 x 4 px rectangles (#1C202D), which we will horizontally stack at 4 px from one another, grouping (Control-G) and then positioning them onto the card’s left side. Once you’re done, make sure you select and group (Control-G) all of the card’s composing shapes before moving on to the next step.

Creating the driver profile icon - step 4

Step 5

Finish off the current icon, by adding the little string segment using a 12 x 12 px square with a 4 px thick Stroke (#1C202D), which we will adjust by opening up the Transform panel and then setting the Radius of its top corners to 6 px. Position the resulting shape on top of the card, making sure to select and group (Control-G) the two together, doing the same for the entire icon afterwards.

Creating the driver profile icon - step 5

9. Create the Car Class Icon

As soon as you’ve finished working on the previous icon, we can position ourselves onto the next Artboard, where we will quickly create the little car class selection icon.

Step 1

Start by creating the car’s wheels using two 8 x 4 px rectangles (#1C202D) with a 2 px bottom Corner Radius and a 4 px thick outline (#1C202D), which we will individually group (Control-G) and then position as seen in the reference image.

Creating the car class icon - step 1

Step 2

Add the main shapes for the front bumper using a 40 x 6 px rounded rectangle (#FFFFFF) with a 3 px Corner Radius and a 4 px thick outline (#1C202D), which we will group (Control-G) and then position on top of the wheels so that their paths overlap.

Creating the car class icon - step 2

Step 3

Create the bumper’s vertical details using two 4 x 6 px rectangles, which we will color using #1C202D and then position as seen in the reference image, making sure to select and group (Control-G) all of the current section’s composing shapes before moving on to the next one.

Creating the car class icon - step 3

Step 4

Add the main shapes for the car’s lower body using a 40 x 12 px rounded rectangle (#FFFFFF) with a 4 px Corner Radius and a 4 px thick outline (#1C202D), which we will group (Control-G) and then position above the bumper so that their paths end up overlapping.

Creating the car class icon - step 4

Step 5

Quickly create the headlights using two 4 x 4 px circles (#1C202D), followed by the radiator grill using a 16 x 4 px rounded rectangle (#1C202D) with a 2 px Corner Radius, which we will position as seen in the reference image. Once you have the objects in place, make sure you select and group (Control-G) all of the current section’s composing shapes before moving on to the next one.

Creating the car class icon - step 5

Step 6

Add the car’s upper body using a 32 x 16 px rectangle with a 4 px thick Stroke (#1C202D) with a Round Join, which we will adjust by individually selecting each of its top anchor points using the Direct Selection Tool (A) and then pushing them to the inside by a distance of 2 px using the directional arrow keys. Once you’re done, position the resulting shape on top of the previous section so that their paths overlap.

Creating the car class icon - step 6

Step 7

Create the seats using two 10 x 8 px rectangles (#1C202D) with a 2 px top Corner Radius, which we will distance at 4 px from one another, grouping (Control-G) and then positioning them on top of the previous shape’s bottom path.

Creating the car class icon - step 7

Step 8

Finish off the current icon, by adding the little taxi plate using a 12 x 6 px rectangle (#FFFFFF) with a 4 px thick outline (#1C202D), which we will group (Control-G) and then position on top of the car’s upper body. Once you’re done, make sure you select and group (Control-G) all of the vehicle’s composing shapes, doing the same for the entire icon afterwards.

Creating the car class icon - step 8

10. Create the Estimated Time of Arrival Icon

We are now down to our sixth and last icon, so assuming you’ve already positioned yourself onto the remaining Artboard let’s wrap things up!

Step 1

Start by creating the main shapes for the timer’s body using a 44 x 44 px circle (#FFFFFF) with a 4 px thick outline (#1C202D), which we will group (Control-G) and then position to the center of the larger underlying background.

Creating the time of arrival icon - step 1

Step 2

Add in the inner detail plate using a 20 x 20 px circle, which we will color using #FFD527 and then center align to the shapes that we’ve just grouped.

Creating the time of arrival icon - step 2

Step 3

Finish off the icon, and with it the project itself, by selecting the Pen Tool (P) and then using it to draw the two tongues, using a 4 px thick Stroke line (#1C202D) with a Round Cap and Join using the reference image as your main guide. Take your time, and once you’re done, make sure you select and group (Control-G) all of the timer’s composing shapes, doing the same for the entire icon before finally hitting that save button.

Creating the time of arrival icon - step 4

Great Job!

As always, I really hope you had fun working on the project, and if you have any questions feel free to post them within the comments section and I’ll get back to you as soon as I can!

Finished product - set of taxi icons