Tutorial: Creating Simple Line Icons in Adobe Illustrator
In the last couple of years, icons got really simplified, especially after the mobile apps became so popular. I actually do love icons as an icon is the best way to present information quickly and very simply. Icons are beautiful; they can be colourful, simple and artistic. Do a search in Google for a camera icon, you will see so many versions which are just great.
Because of my love for icons, I have decided to create a quick tutorial on how to create simple line icons in Adobe Illustrator. I am going to show you how with simple shapes and various techniques and tools, you can achieve a great line icon design. You can even create a set if you have time.
Have a look at what we are creating today:
All these icons are created with simple shapes and the pathfinder tool. But let’s get to business.
Comment / Chat icon
The chat icon is created by using two shapes: a circle and a triangle. We are using a rectangle to make a triangle as this is done by using the pen tool to remove one of the anchor points, no matter which one.
You now should have a nice triangle shape that will be used to create the comment icon.
The next step is to scale down the triangle a little bit and reflect it vertically so we will have a nice shape for the speech bubble.
We also need to change a little bit the circle shape so to have a nice ellipse. To do so, use the Direct Selection Tool (Click A to use it right away). Select the top anchor point of the circle and move down with two steps (Hold Shift and Down Arrow to do bigger steps). Repeat the same for the bottom anchor point. Doing it correctly, you should have something like this.
Now you should position the triangle shape into the ellipse one to create the main comment icon shape. You can rotate a little bit the triangular shape to have a nice angle of it.
Ta da! We have a nice shape of a comment icon. Here comes the Pathfinder. In order to have a whole shape we need to use the Pathfinder Tool. If you do not see, you have to go to Window > Pathfinder or just hit Shift+Ctrl+F9.
Now with the Pathfinder visible click on the Merge to make a shape from the ellipse and the triangle.
Now you should have a whole comment icon shape.
To create a line icon, we need to remove the fill of the shape and add a stroke. For this tutorial, I am using 5pt Round brush with 1.5 pt stroke.
To finish it up, we should expand the appearance to create a nice looking shape that will look good in different sizes. To do so, with the selected shape, go to Object > Expand Appearance and it will create a shape from the stroke. This also can be done with Object>Path>Outline Stroke. It is up to you, which one you will choose. Make sure that you click on Merge again in the Pathfinder option to get rid of any small shapes created after expanding or outlining the stroke.
Now, you should have a great looking comment or chat icon that can be used for anything. You also can use it as SVG icon in a web project. Just save the icon as an SVG file and you will be able to use it in any web document.
This icon is very easy to be done. You need a circle and a line.
You have to remove again the background from the circle and add a stroke to it. Also, select the line and rotate it to -45 °.
The next step is to position the rotated line wherever you want but in a way that a search is clearly recognizable.
To finish it off, you need again to expand the appearance of the strokes. To do it, go to Object > Expand Appearance and in the Pathfinder options click on the merge.
Save as png or svg and you can use it in your projects.
The email icon is a bit complicated. You will need three shapes to create it.
You need a rectangular shape and two squares rotated to 45 degrees. Pay attention that the width of the rotated squares should be equal to the width of the rectangle. You need the same width to create the envelope.
The next step is to remove the remove the fill and add a stroke to the shapes. Then position the shapes as shown on the picture below. The squares should be put on the top and bottom lines of the rectangle.
As you can see, we are starting to have the envelope shape. Now, you should expand the appearance of the shapes to remove the strokes and have nice shapes to combine together.
With all the shapes selected, click on Divide in the Pathfinder options.
When you do this, you will notice that you have a group of different shapes combined together. You should Ungroup these shapes, so you can clean up the shapes you do not need. To do it, go to Object > Ungroup or just click Ctrl + G while the shapes are selected.
Select all the shapes you do not need and delete them.
Now, we have the shape we wanted. To finish the icon, we need to do some adjustments. After, cleaning up the unwanted shapes. Select the envelope icon and click on Merge in the Pathfinder. Here we go, our third icon is ready.
Desktop computer icon
I thought that this one is interesting as it used all over the internet and it is fun to be created. Draw a two rectangles (small and big) and a line. The rectangle should be a rounded one. To do it, click on the Rectangle Tool (Shortcut is “M”) and choose Rounded Rectangle. When you click on the artboard, a nice box will appear and you have the options to add width, height and corner radius. Choose your size and radius and click OK. The smaller rectangle can be one without rounded corners. The line should be the same width as the rectangle.
Now, you should know the steps. Remove the fill and add a stroke. Make sure that all strokes are equal.
The next step is to position the elements as shown below. Add the line in your rectangle to have an iMac look and put the small rectangle below the big one but still touching. Position the two stroke on one another.
Now, we are going to play with the Direct Selection Tool (A) or also called the ” white arrow”. Select the tool and select the small rectangle. This tool gives you the opportunity to play with the anchor points that are making the shape.
You can select to move just one anchor point, two or all of them. In our case, we want to move the bottom two anchors a little bit up and actually make a trapezoid shape.
Using the Direct Selection Tool (A), select the bottom anchor points an move them up with the arrows. Using Shift and the arrows will give bigger step.
As you can see I moved it a little bit. Now, the trapezoid shape. Select only the left or right bottom anchor point and move away. Do it for both of the points. Remember with how many steps you are moving the anchors away, so you have an equal trapezoid shape.
Here we go. You should have something similarly looking. Let’s finish it by expanding the strokes (Object>Expand Appearance) and merging (Pathfinder>Merge) everything.
Now, you should have 4 line icons that can be used in different web or graphic design projects. Just save your icons as PNG or SVG.
I hope you like this tutorial. If you have any issue while doing it, leave a comment below. If you like it, please share it with friends and colleagues. .