```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2Fhow-to-design-an-icon-ep1-game-controller%2Fdd6485c2-2ab4-414e-828c-bdccc939f7ca.png?alt=media&token=776c0222-d566-4575-a124-69c3b27f7ef5","id":"dd6485c2-2ab4-414e-828c-bdccc939f7ca","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-002.png","type":"image/png","caption":"","border":false}]}
```

Welcome to the first episode of my icon design series! In this tutorial, we’ll walk through the process of creating a sleek Game Controller icon. Let’s dive in!

What you’ll need:

* an app for drawing icons, like [Figma](https://www.figma.com/) (my favourite), [Framer](https://www.framer.com/), [Sketch](https://www.sketch.com/), [Adobe Illustrator](https://www.adobe.com/products/illustrator.html) or [Glyphs](https://glyphsapp.com/),

* a **24px grid** and a **2px stroke** **width** set up in your design file

* and **a few minutes** of your time.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2F9cY3XDAQWvI6S9bZSErn%2F09596f65-bc69-4e5a-b70a-a8d147aa83f7.png?alt=media&token=3963d378-926c-4b62-a807-74938b4f49ee","id":"09596f65-bc69-4e5a-b70a-a8d147aa83f7","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-002-1.png","type":"image/png","caption":"","border":false}]}
```

### **Step 1: Start with a Rectangle Shape**

Begin by crafting a basic rectangle shape to serve as the foundation of your icon and its size.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2F9cY3XDAQWvI6S9bZSErn%2F2672b6af-2b4e-4b70-8ddc-6d0d1e2f6772.png?alt=media&token=3ede0644-7eae-41db-942d-68206f525324","id":"2672b6af-2b4e-4b70-8ddc-6d0d1e2f6772","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-003.png","type":"image/png","caption":"","border":false}]}
```

### **Step 2: Refine the Shape**

Gradually refine the rectangle to mimic the contours of a game controller.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2F9cY3XDAQWvI6S9bZSErn%2Fc2c88bd7-4c38-493b-bb44-794ca2e9d93f.png?alt=media&token=d5e7c52a-d8f8-4600-a709-bdeaeee1d89e","id":"c2c88bd7-4c38-493b-bb44-794ca2e9d93f","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-004.png","type":"image/png","caption":"","border":false}]}
```

### **Step 3: Soften the Edges**

Soften the edges by rounding the corners, giving your icon a friendly and approachable appeal.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2F9cY3XDAQWvI6S9bZSErn%2F10681804-dbe6-4808-b86f-e7b69bdf8ed3.png?alt=media&token=0aad012f-e74b-4b52-98e3-b941d698e15c","id":"10681804-dbe6-4808-b86f-e7b69bdf8ed3","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-005.png","type":"image/png","caption":"","border":false}]}
```

### **Step 4: Add Action Buttons**

Complete the design by incorporating the distinctive action buttons typically found on a game controller. Pay attention to their placement and size for balance and coherence.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2F9cY3XDAQWvI6S9bZSErn%2F482a1348-e89f-4298-8528-50721ae25222.png?alt=media&token=0018556e-179f-4979-80f1-a78ee749caa8","id":"482a1348-e89f-4298-8528-50721ae25222","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-001-006.png","type":"image/png","caption":"","border":false}]}
```

Congratulations! You’ve crafted your Game Controller icon. Take a moment to admire your creation.

---

I’d love to hear your thoughts on this tutorial! Reach out to me in messages. I hope time will allow me to enhance the tutorial experience by incorporating short videos to make following the steps even easier.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2Fhow-to-design-an-icon-ep1-game-controller%2F24b5cbac-6cfb-4413-8e77-f4d5d64c5ed0.png?alt=media&token=d633049c-b23f-485b-a4d4-e3ff260de3a8","id":"24b5cbac-6cfb-4413-8e77-f4d5d64c5ed0","width":3196,"height":2400,"filename":"cover.png","type":"image/png","caption":"","border":false}]}
```

In other exciting news, I’m thrilled to announce the launch of my very own icon library — **[Amicons](http://amicons.design/)**! Discover 500 meticulously crafted vector icons with a delightful and consistent aesthetic. Visit [amicons.design](http://amicons.design/) to explore the collection.

But don’t wait too long! The sooner you jump in, the better the price. Plus, with every purchase, you unlock **✨ lifetime updates ✨**.

How to design an icon, Ep. 1: Game Controller

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2Fhow-to-design-an-icon-ep-car%2Fee2734c5-e553-4bfd-84aa-937f46571fed.png?alt=media&token=1ac23d18-17c1-41f6-bbf4-8df341cbbacd","id":"ee2734c5-e553-4bfd-84aa-937f46571fed","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-cover.png","type":"image/png","caption":"","border":false}]}
```

Welcome to the second episode of my icon design series. In this tutorial, we’ll walk through the process of creating a Car icon. This is what you’ll need:

* an app for drawing icons, like [Figma](https://www.figma.com/) (my favourite), [Framer](https://www.framer.com/), [Sketch](https://www.sketch.com/), [Adobe Illustrator](https://www.adobe.com/products/illustrator.html) or [Glyphs](https://glyphsapp.com/),

* a **24px grid** and a **2px stroke** **width** set up in your design file

* and **a few minutes** of your time.

Let’s dive in!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F7254eca5-95a9-4bec-92be-e65a74d92735.png?alt=media&token=714f55e8-c192-4d33-97a1-d6a96206a6e3","id":"7254eca5-95a9-4bec-92be-e65a74d92735","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-001.png","type":"image/png","caption":"","border":false}]}
```

### **Step 1: Begin with the Guideline**

Start by creating a simple rectangle shape to serve as the guideline for the optical size of your car icon.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F729f9d86-0b4c-4aac-ae9f-95b56e4a2629.png?alt=media&token=6d95ce80-7f2d-4484-b786-46cd002279e0","id":"729f9d86-0b4c-4aac-ae9f-95b56e4a2629","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-002.png","type":"image/png","caption":"","border":false}]}
```

### **Step 2: Sketch the Car Body**

Sketch out the main body of the car.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2Feb379411-7203-4bc4-98cb-fc8f2066995c.png?alt=media&token=790f3884-10a4-46c0-9f6d-b12220985500","id":"eb379411-7203-4bc4-98cb-fc8f2066995c","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-003.png","type":"image/png","caption":"","border":false}]}
```

### **Step 3: Add Window**

Incorporate the window of the car, ensuring it aligns well with the overall shape.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2Ff0458219-b691-4ac6-a659-da50879187a1.png?alt=media&token=c8569439-7660-40ce-9dbf-7c0ec50443b1","id":"f0458219-b691-4ac6-a659-da50879187a1","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-004.png","type":"image/png","caption":"","border":false}]}
```

### **Step 4: Attach Wheels**

Add wheels to the car, making sure they are proportionate and aligned properly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F8fd9f03e-29fe-4eaf-bffe-3422da87b362.png?alt=media&token=a28342bc-dce9-4d2f-a3f2-3673cdd84849","id":"8fd9f03e-29fe-4eaf-bffe-3422da87b362","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-005.png","type":"image/png","caption":"","border":false}]}
```

### **Step 5: Round the Edges**

Soften the edges of the car by rounding the corners, giving it a more friendly appearance.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F69c7468b-4623-4341-b9fb-99696d525679.png?alt=media&token=cf82198d-01bd-4f1f-95cb-b1026c3eeefa","id":"69c7468b-4623-4341-b9fb-99696d525679","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-006.png","type":"image/png","caption":"","border":false}]}
```

### **Step 6: Detailing**

Include headlights, rear mirrors, and a license plate.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F7265bdbf-c585-4a48-bb1b-446839db5cf9.png?alt=media&token=79185906-6c77-4fd4-b619-7399e2e973ea","id":"7265bdbf-c585-4a48-bb1b-446839db5cf9","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-007.png","type":"image/png","caption":"","border":false}]}
```

### **Step 7: Round the Edges**

Once again, round the edges of the details for a cohesive look and feel.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2Ff7cb7e16-a690-480d-bd4e-bad69832d9d7.png?alt=media&token=badf7ec5-efe2-429a-9bf6-9076abdff630","id":"f7cb7e16-a690-480d-bd4e-bad69832d9d7","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-008.png","type":"image/png","caption":"","border":false}]}
```

### **Step 8: Merge Shapes**

Combine the main car shape into a single entity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F06c61fb8-98a5-45f7-a353-80e0f2e3546c.png?alt=media&token=2efd74f6-a653-4806-a038-9b1ecd2f2356","id":"06c61fb8-98a5-45f7-a353-80e0f2e3546c","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-009.png","type":"image/png","caption":"","border":false}]}
```

### **Step 9: Merge Shapes**

Combine the car details into a single entity as well.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F2c68b60f-9a35-4073-a860-2208495e262c.png?alt=media&token=fe8ce0c8-4a4f-43f5-ac75-d4ea4249de96","id":"2c68b60f-9a35-4073-a860-2208495e262c","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-010.png","type":"image/png","caption":"","border":false}]}
```

### **Step 10: Subtract and Outline**

Select both resulting shapes, subtract the detailing from the main shape, and outline the final result.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2FjK17403Jcm8IojFvbIKj%2F6521b847-6afa-4c36-a082-6357311f939b.png?alt=media&token=074ac0e9-f75b-47bc-99a5-c99a4db9cb67","id":"6521b847-6afa-4c36-a082-6357311f939b","width":2400,"height":1600,"filename":"howToDesignAnIcon-medium-002-011.png","type":"image/png","caption":"","border":false}]}
```

Congratulations! You’ve successfully crafted your Car icon. Take a moment to admire your creation.

---

I’d love to hear your thoughts on this tutorial! Feel free to leave your feedback in messages. In future episodes, I hope time will allow me to enhance the tutorial experience by incorporating short videos to make following the steps even easier.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F50F3fQbjhyPD68XcCBJBPsGTpWg1%2Fhow-to-design-an-icon-ep-car%2F901aaf4d-a334-4f14-832e-36fa57d00b63.png?alt=media&token=a0c5531a-8f4c-4768-973a-3008f83f8cb5","id":"901aaf4d-a334-4f14-832e-36fa57d00b63","width":3196,"height":2400,"filename":"cover.png","type":"image/png","caption":"","border":false}]}
```

In other exciting news, I’m thrilled to announce the launch of my very own icon library — **[Amicons](http://amicons.design/)**! Discover 500 meticulously crafted vector icons with a delightful and consistent aesthetic. Visit [amicons.design](http://amicons.design/) to explore the collection.

But don’t wait too long! The sooner you jump in, the better the price. Plus, with every purchase, you unlock **✨ lifetime updates ✨**.

How to design an icon, Ep. 2: Car

Just launched my first very own icon set – https://amicons.design ✨