Oct 06 2009

55 Adobe Illustrator Icon Design Tutorials

Advertisement

Every graphic designer will end up, at some point, with a client who needs an icon designed. Going into the project, your first idea would be to use your experience, training and creativity and dive straight into the project gung-ho. In some occasions, doing this could be disastrous. Ideally, you should learn the basic principles of icon design first, the importance and functions of icons on web sites and in user interfaces, the difference between icon and logo designs, and most importantly, how to use your imagination and creativity to reflect the characteristics of the icon effectively.

In this article we have compiled a comprehensive list of Adobe Illustrator icon tutorials, the graphic editor of choice for many graphic designers. The tutorials range from the basic, for anyone taking their first steps with Illustrator, to using advanced techniques for professional and advanced designers.

Adobe Illustrator Icon Design Tutorials

How To Make an Icy Cocktail
This tutorial explains how to draw a refreshing cocktail drink in Adobe Illustrator.

Illustrator Icon Design Tutorials

How to Create a Yellow Submarine Icon with Gradient Meshes
“While spaceships, rockets and UFOs are all the rage in the icon world these days, submarines have been inexcusably neglected. Let’s correct this situation immediately by drawing a fun submarine using gradient meshes, pattern brushes, opacity masks and blending modes.”

Illustrator Icon Design Tutorials

How To Create An Academy Icon From Simple Shapes
In this tutorial you will learn how to construct a cool academy icon by putting together simple shapes in Illustrator and then applying layer effects on them in Photoshop.

Illustrator Icon Design Tutorials

Icon Design Tutorial: Drawing A Pencil Icon
This tutorial presents some good design practices that will help you master icon design. It will help you, particularly if you have just started to learn, or want to learn more about icon design in Illustrator.

Illustrator Icon Design Tutorials

How to Create a Magic Wand Icon
This tutorial will utilize gradient feathering and some simple shapes. These techniques are easily translated to other icons, illustrations, and logos.

Illustrator Icon Design Tutorials

How to Create a Golden, Vector Compass in Illustrator
This tutorial will take you through the steps and techniques of creating a golden compass.

Illustrator Icon Design Tutorials

How to Bake a Cake in Illustrator
This tutorial shows you how to design a basic birthday cake in Adobe Illustrator.

Illustrator Icon Design Tutorials

3D Yet Flat Looking Shopping Basket Icons
In this advanced tutorial you will learn how to create a custom shopping basket icon by combining 3D qualities with a flat look. Cool effect.

Illustrator Icon Design Tutorials

Translucent IM Style Icon
Use this tutorial to help you create a scalable vector Instant Messaging style icon with the impression of a glossy and semi-translucent surface.

Illustrator Icon Design Tutorials

Aperture Style Camera Lens Icon
In this tricky tutorial, you’ll create a detailed camera lens similar to the one used as the logo for Apple’s Aperture photo-editing software.

Illustrator Icon Design Tutorials

Design A Coffee Mug Icon
In this easy to follow tutorial you will create a basic coffee mug icon.

Illustrator Icon Design Tutorials

Turn Glasses into a Great Geek Icon
In this advanced tutorial, you’ll learn how make a cool,and geeky, glasses icon.

Illustrator Icon Design Tutorials

Detailed Camera with Photo Icon
This tutorial will show the intermediate Adobe Illustrator artist how to make a sleek web 2.0 style icon.

Illustrator Icon Design Tutorials

CD Icon Using Illustrator in 5 minutes
In this basic Illustrator CS3 tutorial, you will create a CD icon, in only 5 minutes!

Illustrator Icon Design Tutorials

Vector Film Slate Icon
The tutorial uses some basic shapes, some gradients, and even a blend, to create this marvellous Film Slate icon.

Illustrator Icon Design Tutorials

Shiny, Vector Dice
In this tutorial, you will learn to create a set of vector dice using Illustrator and the tricky and underused Gradient Mesh Tool.

Illustrator Icon Design Tutorials

Vector Safari Compass
Use this Adobe Illustrator tutorial to draw up your own vector Safari inspired compass in Adobe Illustrator, and icon that works well in small formats while also displaying quite a lot of intricate details when viewed in large format.

Illustrator Icon Design Tutorials

Multicolored Buddy Icons
This tutorial uses some basic shapes, gradients, Feather, and Illustrator’s powerful Live Color feature, to create these excellent Buddy Icons.

Illustrator Icon Design Tutorials

Pie Charts in Illustrator
An older tutorial that teaches how to add some soft and stylish effects to pie charts in Illustrator.

Illustrator Icon Design Tutorials

Delicious Chinese Food Icon
In this advanced Illustrator tutorial, you will craft a Delicious Chinese food icon set, using numerous vector illustration techniques.

Illustrator Icon Design Tutorials

iTune Icon
The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon, it is a good exercise to help you master your Blend techniques.

Illustrator Icon Design Tutorials

Gearbox Settings Icon
Utilizing only simple, predefined shapes, as well as tools like the Pathfinder and transformations, entire illustrations can be created from scratch. In this tutorial, we’ll create an icon suitable for portraying options, settings, preferences, etc., similar to OS X’s system preferences icon.

Illustrator Icon Design Tutorials

Tropical Colored Compass
In this tutorial you’ll be creating a stylized Vector Compass Icon Design, applying some modern Web 2.0 effects and bright colors you will bring this icon to life.

Illustrator Icon Design Tutorials

Hourglass Icon
With simple shapes, gradients, and vector textures, this simple tutorial will show beginning illustrators how to create an hourglass icon.

Illustrator Icon Design Tutorials

Adobe Bridge Icon
This tutorial will show you how to replicate the Adobe Bridge icon in Illustrator CS2.

Illustrator Icon Design Tutorials

Magic Hat Icon
For this tutorial you will use the pen tool, pathfinder palette, and other tools to create this magic hat icon with a cute bunny inside.

Illustrator Icon Design Tutorials

Vector Audio Speaker Icon
Create a vector speaker icon using some ellipses with gradients, the Grid Tool, and the Mesh Tool.

Illustrator Icon Design Tutorials

Vector Smiley Icon
You will use some basic Illustrator tecniques to create this happy Smiley icon.

Illustrator Icon Design Tutorials

Magnify Zoom Icon
You’ll work primarily with the pathfinder and basic shape tools to cut out the shapes for this illustration, though the pen tool will also be used, and color the elements using various gradients.

Illustrator Icon Design Tutorials

Vector Military Cap Icon
In this advanced tutorial, you will learn how to create a realistic military style cap icon using gradients, blends, and the Gradient Mesh Tool, and using a photo reference to base this illustration on.

Illustrator Icon Design Tutorials

Transparent Battery Icon
In this tutorial, you’ll create a detailed icon of a battery similar to the one used for the iPhone touch. The battery “fuel” color can be changed as well as the “fuel” level, allowing the icon to be used to create a battery or power meter for applications

Illustrator Icon Design Tutorials

3D Vector Film Roll Icon
In this tutorial, you will learn how to draw a realistic film roll, drawn in perspective, using the Pen Tool, Ellipses and Gradients.

Illustrator Icon Design Tutorials

Stylized GPS Icon
In this beginner/intermediate Illustrator tutorial, you will learn how to create a stylized GPS icon using simple shapes and gradients.

Illustrator Icon Design Tutorials

Stack of Poker Chips
This tutorial will teach you how to create a simple stack of poker chips.

Illustrator Icon Design Tutorials

Television Icon
In this easy to follow step by step tutorial, you will be shown how to create this cool retro television icon, by using some basic shapes and gradients.

Illustrator Icon Design Tutorials

Textured Journal Icon
In this tutorial, you will create a textured, rather than glossy, textured Journal icon.

Illustrator Icon Design Tutorials

Designing a Stumbleupon Icon
In this tutorial you will cover the basics that will give you an idea how the icon is rendered, you will learn how they appear in smaller sizes and the constraints you can find when using Vector (Illustrator) instead of Pixel (Photoshop) based image software. Great starter tutorial.

Illustrator Icon Design Tutorials

Alarm Clock Icon
With simple shapes and gradients, this easy to follow tutorial will show you how to create an alarm clock icon.

Illustrator Icon Design Tutorials

Calendar Icon
A great tutorial explaining the full process of designing an icon, from an initial hand drawn illustration, to using Illustrator to flesh out the glossy and modern icon.

Illustrator Icon Design Tutorials

Envelpe Icon with a Satin Feel
In this tutorial, you will be shown how to create a simple envelope/mail icon, using the basic tools of illustrator , ie gradient , rectangle and pathfinder.

Illustrator Icon Design Tutorials

Drawing A Pencil Icon
This tutorial is very detailed and in-depth, and it explains the process of designing a simple pencil icon.

Illustrator Icon Design Tutorials

Windows Vista Icon
Create a Windows Vista Computer Display using the Pen Tool and the Ellipse Tool.

Illustrator Icon Design Tutorials

Designing a Sleek Pencil Icon
In this basic tutorial, you will create this Pencil Icon, using Illustrator CS3.

Illustrator Icon Design Tutorials

Design Float Circle Icon

Illustrator Icon Design Tutorials

Icon “about company” in Illustrator

Illustrator Icon Design Tutorials

Flag Icon

Illustrator Icon Design Tutorials

Administrator Icon
In this tutorial you will create an administrator icon with a Clean Web 2.0 style.

Illustrator Icon Design Tutorials

3d Isometric Vector Icon
Three dimensional shapes are less complicated to create in Illustrator than you may think. The 3D Extrude and Bevel effect can be used to create interesting designs. In this tutorial you’ll learn how.

Illustrator Icon Design Tutorials

Animated 3D Poker Chip

Illustrator Icon Design Tutorials

Illustaror Folder Icons Tutorials

Apple Leopard Folder
Learn how to create the Apple Leopard sleek and cool folders, using Illustrator.

Illustrator Icon Design Tutorials

Shiney Folder
In this simple tutorial, you will learn how to create a basic Folder icon.

Illustrator Icon Design Tutorials

Create XP-style Icons
In this tutorial, you’ll learn how to make your own Windows XP-style artwork.

Illustrator Icon Design Tutorials

Illustrator Vector Folder Reflections

Illustrator Icon Design Tutorials

Windows XP Folder Icon

Illustrator Icon Design Tutorials

Folder Icon

Illustrator Icon Design Tutorials

Inspirational and Creative Icon Designers

Sebastien de With
Sebastiaan de With is a 21 year old freelance designer, who specializes in icon and visual interface design, and logotyes.

Illustrator Icon Design Tutorials

Jonas Rask
View the online icon portfolio of Danish designer, Jonas Rask.

Illustrator Icon Design Tutorials

Marcelo Marfil
Marcelo Marfil is a graphic and interface designer from Sao Paulo in Brazil.

Illustrator Icon Design Tutorials

Artua Design Studios
Artua Design Studios are a team of graphic designers and illustrators, who specialize in icon and GUI design.

Illustrator Icon Design Tutorials

Stefan Dziallas
View the custom icon & pictogram design portfolio of Stefan Dziallas, from IconWerk.

Illustrator Icon Design Tutorials

William Wilkinson – Little Pixels
William Wilkinson is an icon designer living in Victoria, Canada.

Illustrator Icon Design Tutorials

Medard Konopík – IconBakery
View the delicious icons and interfaces from Medard Konopík, a 21 year old from Prague, Czech Republic.

Illustrator Icon Design Tutorials

Icon Design Video Tutorials

How to Create a Vector RSS Icon

iPhone icon Design Tutorial

Web 2.0 Style Box / Icon

Create a Windows Vista Icon

Create a Prize Icon

Create Enevelope Icon in Illustrator

Custom Icon Leopard Folders

How to create Icons, by Fasticon.com

Icon Set Design in Photoshop and Illustrator

Icon Design Video Tutorials

Further Reading

50 Excellent Icon Design Tutorials
from SixRevisions by Jacob Gube.
30+ Amazing Tutorials for Creating Icons in Photoshop
from Naldzgraphics by Ronald Bien.
What icons are for
from turbomilk.com by Yegor Gilyov.
10 Mistakes in Icon Design
from turbomilk.com by Denis Kortunov.
10 Outstanding Metaphors in Icon Design
from turbomilk.com by Denis Kortunov.
10 Tips for Effective Icon Design
from vector.tutsplus.com by Chris Spooner.
7 Principles of Effective Icon Design
from psd.tutsplus.com by Sean Hodge.
Icon Design: Basic principles explained
from softfacade.com.

    About the author

    Paul Andrew is a freelance web designer. He is admin for Speckyboy – Design Magazine, a web design, web development and graphic design resource blog.
    Follow him on Twitter here: twitter.com/speckyboy.

    About the Author

    Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy - Design Magazine, a Web design, Web development and graphic design resource blog.

    Comments and Discussions
    • Bharath, 06 October 2009

      Nice round-up… :)

    • James Gill, 06 October 2009

      Hey guys thanks for featuring not one but TWO of our tutorials – really glad we made an impression! Some great icon designers to look into here.

    • Amin, 06 October 2009

      Good collection.

    • Logo Bliss, 06 October 2009

      Jeee..! What a collection..

    • joyoge bookmark, 06 October 2009

      very nice ai icon tutorials, thank you so much..

    • Jack, 06 October 2009

      Superb list of tutorials, really cool and useful. Thanks for sharing

    • WpthemesMall, 07 October 2009

      Very nice collection

    • bogdan, 07 October 2009

      indeed, these are awesome !

    • Belinda, 07 October 2009

      This is fabulous! I’ve been using PhotoShop for years but am only just getting into the swing of Illustrator. There are some great tutorials listed for beginners – its just what I need to get myself started. Thanks for compiling such a well rounded list :-)

    • Logo Bliss, 07 October 2009

      Well, what a great collection of icons and tut’s !

    • PelFusion, 07 October 2009

      enough to become illustrator expert :)

    • Shane, 07 October 2009

      Nice collection and helpful tutorials.
      Thanks for sharing.

    • Adrian, 09 October 2009

      “Illustaror”?

    • Garry, 09 October 2009

      Just my type of information

    • Mark Carter, 11 October 2009

      I think one of the most interesting and challenging aspects of icon design is to create versions of the icon at different sizes. That usually requires recreating the icon at progressively smaller sizes with simplified content (and an awareness of where exactly lines and shapes fall on the available pixels within a design).

      Some of the presented icons seem incredibly elaborate and are perhaps not intended to be used as 32×32 icons, etc?

    • @danielmd, 12 October 2009

      Very nice collection, thanks. I see many new tutorials for me :)

    • Andrew Gerber, 13 October 2009

      Thanks for sharing these helpful tutorials with us. I am a beginning web designer and that’s why I find all of them very useful for myself. Hope that they will make a huge contribution to my studying process. Good job, thanks.

    • SweetOpium, 14 October 2009

      Nice pac of tutorials =)

    • clippingimages, 17 October 2009

      WoW :) Awesome collection of tutorials. I was searching few of those. Thanks for sharing this nice list of tutorials.

    • A.D.K., 18 October 2009

      Thanks for this sharing this, I know some of them but some of them are new for me. I’ll try some of them for fun in my free time.

    • Bene, 20 October 2009

      Really useful tutorials. Keep them coming!

    • IVAN, 06 November 2009

      very useful ? :)

    • Jamie Johnson, 13 December 2009

      Hey, does anyone know where i can find an illustrator tutorial to make a color swatch (similar to the kind you would find in a paint store). I have seen it before, but I can’t find it again for the life of me!

      Thanks.

    • Logan Waletzko, 29 March 2010

      While I’m not 100% comfortable with “hacking”, this poker list at least gives me some options.

    • Jonny, 02 May 2010

      Cheers, good collection, pretty useful tuts for 3D style logos too, not just for icons!

    • buenas noches. como te va lo cierto es que yo no estaba buscando acerca de lo que escribiste y es que la verdad este tema no me entretiene en lo mas minimo, pero te felicito porque la manera en que escribiste me fascino. Por primera vez he encontrado contenido digno en la red. Un saludo.

    • PSDMaterial, 29 June 2010

      Thanks for this roundup

    • Lionel Freeberg, 12 October 2010

      Excellent style is often excellent by some, but to some, it’s trash. Trust us, we have suffered our share of differing ideas on our own design work…

    • Jeff Gillan Logo Design, 23 November 2010

      Some lovely vector work there – the wand is magic!

    • Mimi, 09 February 2011

      Brilliant, just completed the coffee mug and now, as it looks so real am going to have to move and go an make a cuppa. Thanks for the great tutorials.

    • Yesta @Graphic Design, 05 January 2012

      great collections! thanks

    • wiki1221, 14 May 2012

      Nice works, Can we see some more variants?

    • SJL, 20 June 2012

      Thanks Paul, these Illustrator tutorials will keep me busy for the day!

    search form
     
    image description image description