# How to Create a Pack of Android Launcher Icons in Adobe Illustrator

In today’s tutorial we’re going to make some little changes to our regular program, and tackle a subject that I've wanted to do for a long time. If you haven’t figured it out from the title, well, we’re going to create five simple icons that you could turn into Android launcher icons for any future apps that you might create or be involved in creating.

As for the process, we’ll be using your basic selection of geometric shapes combined with the Align panel and some other tools that you probably already work with every day.

That being said, grab a fresh batch of coffee and let’s get started.

Oh, and don’t forget you can always expand the project by heading over to GraphicRiver, where you’ll find tons of awesome Android designed icon packs, just waiting to be clicked on.

Would you prefer to learn via video format? Check out the video tutorial over on the Envato Tuts+ YouTube channel:

## 1. How to Set Up a New Document

Since I’m guessing that you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:

• Number of Artboards: 1
• Width: 800 px
• Height: 600 px
• Units: Pixels

• Color Mode: RGB
• Raster Effects: Screen (72ppi)
• Preview Mode: Default

Quick tip: some of you might have noticed that the Align New Objects to Pixel Grid option is missing, which is because I’m running the new CC 2017 version of the software, where great changes have been made to the way Illustrator handles the way shapes snap to the underlying Pixel Grid.

## 2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little Grid so that we can have full control over our shapes—that is if we’re running the older version of the software.

### Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

• Gridline every: 1 px
• Subdivisions: 1

### Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills in no time.

## 3. How to Set Up the Layers

With the New Document created, it would be a good idea to structure our project using a couple of layers, since this way we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of six layers, which we will rename as follows:

• layer 1: reference grids
• layer 2: battery
• layer 3: settings
• layer 4: messaging
• layer 5: alarm
• layer 6: photos

## 4. How to Create the Reference Grids

The Reference Grids (or Base Grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make on you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, since we’re going to be creating the icons with the intent of having them used within the actual Android OS, we’ll have to follow their recommended Size and Format guideline, and set up a custom grid of 96 x 96 px with an all-around 4 px padding.

### Step 1

Start by locking all but the reference grid layer, and then grab the Rectangle Tool (M) and create a 96 x 96 px orange (#F15A24) square, which will help define the overall size of our icons.

### Step 2

Add another smaller 88 x 88 px one (#FFFFFF) which will act as our active drawing area, thus giving us that all-around 4 px padding.

### Step 3

Group the two squares composing the reference grid using the Control-G keyboard shortcut, and then create three copies at a distance of 24 px from one another, making sure to align them to the center of the Artboard.

Once you’re done, lock the current layer and move on to the next one where we’ll start working on our first icon.

## 5. How to Create the Battery Icon

We’re going to kick off the project by creating the battery icon, which could be used for a power saving app, or even a status indicator one since it’s pretty basic.

That being said, make sure you’re on the right layer (that would be the second one) and then zoom in on the first reference grid so that we can get started.

### Step 1

Start by creating the icon’s background using an 88 x 88 px circle, which we will color using #00C853, center aligning it to the underlying active drawing area afterwards.

Quick tip: since Google was nice enough to put out a Material Design guideline for colors, I’ve ended up mixing and matching a couple of the values, which I’ve used for the backgrounds.

### Step 2

Create the battery’s main body using a 24 x 40 px rectangle, which we will color using white (#FFFFFF) and then center align to the larger circle, at a distance of 20 px from its bottom edge.

### Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke (Shift-X), and then setting its Weight to 4 px and its Corner to Round Join, all from within the Stroke panel.

### Step 4

Create the first state indicator bar, using either a 12 x 4 px rectangle (#FFFFFF) or a 12 px wide stroke (#FFFFFF) with a 4 px Weight, which we will center align to the battery’s body, leaving a 4 px gap around it.

### Step 5

Add two more indicator bars, which we will vertically stack at a distance of 4 px from one another, grouping them together (Control-G) afterwards.

### Step 6

Finish off the icon by adding the top cap, which we will create using a smaller 8 x 4 px rectangle (#FFFFFF) that we will center align to the battery’s body, at a distance of 6 px (4 px for the padding + 2 px for the top half of the stroke).

Once you’re done, don’t forget to select and group (Control-G) all the battery’s composing shapes, doing the same thing for all of the icon’s composing sections as well.

## 6. How to Create the Settings Icon

Assuming you’ve managed to finish the first icon, lock its layer and then move on up to the next one (that would be the third one) and let’s start working on the settings one.

### Step 1

As we did with the previous icon, start by creating its background using an 88 x 88 px circle, which we will color using #2196F3, center aligning it to the underlying active drawing area afterwards.

### Step 2

Start working on the center slider by creating a 4 x 32 px rectangle or a 32 px tall stroke with a 4 px thick Weight, which we will color using white (#FFFFFF) and then center align to the larger circle, at a distance of 18 px from its top edge.

### Step 3

Create the slider’s state indicator using a 12 x 4 px rectangle (#FFFFFF) which we will center align to the previously created shape, at a distance of 4 px from its bottom edge.

### Step 4

Add the lower section of the slider using 4 x 12 px rectangle (#FFFFFF) which we will position just under the state indicator bar, selecting and grouping (Control-G) all three shapes together afterwards.

### Step 5

Create the top section for the left slider using a smaller 4 x 12 px rectangle (#FFFFFF), which we will align to the top edge of the center slider, positioning it at a distance of 12 px from it.

### Step 6

Add the slider’s state indicator by creating a 12 x 4 px rectangle (#FFFFFF) which we will vertically stack to the previously created shape, at a distance of 4 px from its bottom edge.

### Step 7

Finish off the left slider by adding the bottom section which we will create using a 4 x 32 px rectangle (#FFFFFF) that we will position underneath the indicator.

Once you’re done, select all three shapes and group them together (Control-G) as we did with the center slider.

### Step 8

Finish off the icon by creating a copy (Control-C > Control-F) of its left slider, which we will position onto the right side of the circle, at a distance of 4 px from the center slider.

Once you’re done, don’t forget to select and group (Control-G) all its composing sections so that they won’t get separated by accident.

## 7. How to Create the Messaging Icon

Assuming you’ve already moved on up to the next layer (that would be the fourth one), zoom in on the third reference grid and let’s get started.

### Step 1

Create the icon’s background using an 88 x 88 px circle, which we will color using #7C4DFF and then center align to the underlying active drawing area.

### Step 2

Create the main shape for the left messaging box using a 32 x 24 px rectangle, which we will color using white (#FFFFFF) and then position at a distance of 20 px from the active drawing area’s both left and top edge.

### Step 3

Start adjusting the shape that we’ve just created, by first turning on the Pixel Preview mode (Alt-Control-Y) and then adding a new anchor point to its bottom edge, at a distance of 10 px from its left one by left clicking with the help of the Add Anchor Point Tool.

Once you’re done, don’t forget to exit Pixel Preview mode by using the Alt-Control-Y keyboard shortcut.

### Step 4

Continue adjusting the rectangle by selecting its bottom-left anchor point with the Direct Selection Tool (A), and then pushing it to the bottom by 8 px with the help of the Move tool (right click > Transform > Move > Vertical > 8 px).

### Step 5

Turn the resulting shape into an outline, by flipping its Fill with its Stroke (Shift-X) and then setting its Weight to 4 px and its Corner to Round Join.

### Step 6

Add the smaller text line by creating a 10 x 4 px rectangle, which we will color using white (#FFFFFF) and then position inside of the little message box, aligning it towards its top-left corner, making sure to leave a 4 px gap around it.

### Step 7

Add the wider text line using a 20 x 4 px rectangle (#FFFFFF) which we will left-align to the previously created one, at a distance of 4 px from its bottom edge.

Once you’re done, don’t forget to select and group all of the text box’s shapes together using the Control-G keyboard shortcut.

### Step 8

Create a copy (Control-C > Control-F) of the little text box’s outline, and then reflect (right click > Transform > Reflect > Vertical) and position it onto the right side of the circle, at a distance of 18 px from the active drawing area’s both right and bottom edge.

### Step 9

Finish off the icon, by removing the text box’s overlapping section (highlighted with red) so that you end up having a 4 px gap between it and the left one’s outline. To do this, simply add a new anchor point to its top and left edge, and then remove all the other ones.

Once you’re done, select all of the icon’s composing sections and group them together using the Control-G keyboard shortcut.

## 8. How to Create the Alarm Icon

Since by now you probably already know the drill, lock the layer and move on up the next layer (that would be the fifth one) and let’s start working on our alarm icon.

### Step 1

Create an 88 x 88 px circle, which we will then color using #FFC107, center aligning it to the underlying active drawing area.

### Step 2

Create the alarm clock’s main body using a 40 x 40 px circle, which we will color using white (#FFFFFF) and then center align to the active drawing area, at a distance of 20 px from its bottom edge.

### Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke, and then setting its Weight to 4 px from within the Stroke panel.

### Step 4

Select the Pen Tool (P) and draw in the clock’s hands using a 4 px thick Stroke with the color set to white (#FFFFFF) and the Corner to Round Join, making sure to leave a 4 px gap between the ending anchor points and the larger circle.

### Step 5

Move a few pixels towards the top, and create an 8 x 6 px rectangle (#FFFFFF) which we will center align to the upper section of the larger circle, positioning it so that it ends up overlapping the Stroke’s top half.

### Step 6

Add a 16 x 4 px rectangle (#FFFFFF) on top of the one that we’ve just created, selecting and grouping (Control-G) them together afterwards.

### Step 7

Finish off the icon by drawing in the two little diagonal line segments using a 4 px Stroke with the color set to white (#FFFFFF). Once you’re done select and group (Control-G) all of the alarm clock’s composing shapes together, doing the same for the entire icon afterwards.

## 9. How to Create the Photos Icon

Make your way to the sixth and last layer, and let’s finish the project by creating the photos icon.

### Step 1

Using an 88 x 88 px circle (#FF6F00) create the icon’s background which we will center align to the underlying active drawing area.

### Step 2

Create the photo’s main body using a 36 x 36 px rectangle, which we will color using white (#FFFFFF) and then center align to the underlying active drawing area, at a distance of 20 px from its top edge.

### Step 3

Turn the shape that we’ve just created into an outline, by flipping its Fill with its Stroke (Shift-X), and then setting its Weight to 4 px and its Corner to Round Join from within the Stroke panel.

### Step 4

Using the Pen Tool (P) draw in the horizontal divider line using a 4 px thick Stroke (#FFFFFF) which we will position inside of the previously created shape, at a distance of 4 px from its bottom edge.

### Step 5

Using the same 4 px thick Stroke (#FFFFFF) with a Round Join, start drawing the first mountain by positioning your first anchor point onto the left edge of the photo, at a distance of 10 px from the horizontal divider line that we’ve just created.

Add the second anchor at a distance of 10 px both horizontal and vertical from the first one. Finish off the mountain by adding the third and last anchor onto the horizontal divider line, while holding down the Shift key to draw in a perfect diagonal line.

### Step 6

Draw in the second smaller mountain, using the same 4 px thick Stroke (#FFFFFF), and then once you’re done, select and group all of the photo’s composing shapes together using the Control-G keyboard shortcut.

### Step 7

Create the icon’s bottom section using a 28 x 6 px rectangle, which we will color using white (#FFFFFF) and then center align to the lower section of the photo’s outline, at a distance of 4 px.

### Step 8

Finish off the icon, by turning the shape that we’ve just created into a 4 px thick outline (#FFFFFF) with a Round Join, and then adjusting it by adding a new anchor point to the center of its top edge, which we will then remove in order to open the path (highlighted with red).

Select the resulting shape and the rest of the photo’s composing elements and group them (Control-G) doing the same for the icon’s composing sections afterwards.

## It’s a Wrap!

I hope that you’ve managed to keep up with each and every step, and most importantly learned something new and useful during the process. That being said, I’ll see you in the next one!