50 Wonderful Icon Design Tutorials

Apr 11 2010 by Ibrahim Cheurfa | 39 Comments

50 Useful and Educational Icon Design Tutorials

Icon design is an essential element in web and interface design. In this massive round up, you will find top notch Photoshop and Illustrator icon design tutorials that will show you how to make amazing and highly detailed icons.

You should also see our previous collection of icon design tutorials.

Design a Vintage Radio Icon in Photoshop

Design a Vintage Radio Icon in Photoshop

In this Photoshop tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures.

Create a Magnifying Glass Icon in Photoshop CS4

Create a Magnifying Glass Icon in Photoshop CS4

Combine simple vector shapes, layer styles and generous amounts of shininess to create the perfect magnifying glass for all your search icon needs.

Design a Stylish Chevrolet Icon in Photoshop

Design a Stylish Chevrolet Icon in Photoshop

In this Adobe Photoshop tutorial, you’ll be shown how to transform an old style Chevrolet from vector file format into a stylish shiny icon.

Simple Coffee Cup Icon Photoshop Tutorial

Simple Coffee Cup Icon Photoshop Tutorial

Create a semi-photo realistic coffee cup with some nice, frothy coffee.

How To Create A Vintage Camera in Photoshop

How To Create A Vintage Camera in Photoshop

In this Photoshop tutorial, you’ll reproduce a fairly old camera: a Halina Super 35X.

How to Make a Professional Buddy Icon in Photoshop

How to Make a Professional Buddy Icon in Photoshop

Make an awesome professional buddy icon from scratch using Photoshop.

Design a Stylish Mail Icon in Photoshop

Design a Stylish Mail Icon in Photoshop

In this tutorial, you will learn how to create a glossy mail icon that can be used for your apps or websites.

Create a Cute Panda Bear Face Icon

Create a Cute Panda Bear Face Icon

This tutorial showcases how to create a cute panda bear face icon using simple shapes.

Creating a Set of Digital Painting Icons

Creating a Set of Digital Painting Icons

Design five icons that depict common tools associated with digital painting: a sketchbook with pencil, a camera for taking reference pictures, a paintbrush, a pen tablet and a large screen with a complete matte painting displayed on it.

How To Design a 3D Glass Icon in Photoshop

How To Design a 3D Glass Icon in Photoshop

Discover how to design a translucent 3D frosted glass box based on the Safari icon using Adobe Photoshop.

Create a Stylized First Aid Icon in Illustrator

Create a Stylized First Aid Icon in Illustrator

In this tutorial, you’ll use a combination of craft and Illustrator’s 3D tools to create a first aid icon.

Create a Shiny Psdtuts+ Folder Icon in Photoshop

Create a Shiny Psdtuts+ Folder Icon in Photoshop

This Photoshop tutorial will demonstrate some easy steps to help you produce your own shiny folder icon in Photoshop.

How To Create a Detailed Apple iPad Icon in Photoshop

How To Create a Detailed Apple iPad Icon in Photoshop

Create your very own detailed Apple iPad icon graphic in Photoshop. You can also check out another iPad tutorial on Circlebox Blog.

How To Design a 3D Wooden Box in Photoshop

How To Design a 3D Wooden Box in Photoshop

In this Photoshop tutorial, you’ll learn to make a wooden box with a realistic touch.

Creating a Modern, Glossy Mouse Icon in Photoshop

Creating a Modern, Glossy Mouse Icon in Photoshop

This tutorial is about creating the Apple Magic Mouse in Photoshop.

Make a 3D Pencil and Paper Icon in Photoshop

Make a 3D Pencil and Paper Icon in Photoshop

In this Adobe Photoshop icon creation tutorial, you will learn how to create a high-quality three-dimensional pen and paper icon from scratch.

How to Create a Clean 3D Notepad in Photoshop

How to Create a Clean 3D Notepad in Photoshop

Create a realistic notepad icon using Layer effects and Photoshop’s Pen Tool.

How to Create a Magician’s Hat in Photoshop

How to Create a Magician's Hat in Photoshop

In this tutorial, you’ll learn how to make a magician’s hat icon that can be designed in Photoshop.

How to Create a Realistic Fountain Pen

How to Create a Realistic Fountain Pen

In this tutorial, you’ll learn to design a realistic calligraphy pen from scratch.

How to Create an Envelope Icon in Photoshop

How to Create an Envelope Icon in Photoshop

In this tutorial, you’ll go through easy steps for creating a nice envelope icon.

How to Design a Beautiful Google Calendar Icon

How to Design a Beautiful Google Calendar Icon

How to make your very own desktop icon for Google Calendar.

Create A Stylish And Sleek PlayStation Portable Icon

Create A Stylish And Sleek PlayStation Portable Icon

See a way to make a stylish and sleek-looking PlayStation Portable (PSP).

Create a Leather-Textured, Realistic Briefcase Icon

Create a Leather-Textured, Realistic Briefcase Icon

The goal of this tutorial is to draw a realistic leather briefcase entirely from scratch.

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Learn how to create the popular Mac OS X Leopard Folder icon using Photoshop in just ten easy steps.

Photoshop Laser Printer Model

Photoshop Laser Printer Model

Learn how to create a Photoshop laser printer model.

Design a 3D Box Icon in Photoshop

Design a 3D Box Icon in Photoshop

This tutorial teaches you how to create a sleek box icon in Adobe Photoshop for use in apps or websites.

Create a Glossy High Tech 3D Speaker Icon

The tutorial is based on teaching some simple ways of using the Layer Styles to create a great 3D speaker.

Monitor Icon Design

Monitor Icon Design

This tutorial shows you how to make a sleek monitor icon.

How to Create a Basic House Icon in Photoshop

How to Create a Basic House Icon in Photoshop

In this tutorial, you’ll go through easy steps and techniques to design a simple yet attractive house icon.

Sleek Icon Design

Sleek Icon Design

Create a colorful image icon from scratch; the icon features a colorful design in a shiny metal-like border and uses a Bokeh effect.

Compact Disc Icon

How To Create A Vintage Camera in Photoshop

The making of a compact disc icon from scratch.

New Quicktime Icon in Photoshop

New Quicktime Icon in Photoshop

Learn how to reproduce the new Quicktime icon in Photoshop.

Share This Icon

Share This Icon

How to make a simple stylish “share this” icon that is perfect for weblogs and content-centered websites.

Create a Glossy Volt Icon in Photoshop

Create a Glossy Volt Icon in Photoshop

In this tutorial, you will create a glossy thunder logo using a few layers and some white shapes that will make the thunder more interesting and glossy.

Render a Realistic CD in Photoshop

Render a Realistic CD in Photoshop

Learn how to create a realistic CD using shapes and layer style.

How to Create a Stylish Pair of Headphones

How to Create a Stylish Pair of Headphones

In this tutorial, you’ll see how to create a sleek pair of headphones, mainly using the Pen Tool and Blending Options.

How To Build a Vector Clock Graphic in Illustrator

How To Build a Vector Clock Graphic in Illustrator

Follow this walkthrough to see the how adding layer after layer of vector shapes, along with a range of gradients and a spot of texture can quickly create a great looking icon-style clock graphic.

How to Create a Photorealistic iMac and Magic Mouse

How to Create a Photorealistic iMac and Magic Mouse

This tutorial is about using Adobe Illustrator’s Mesh Tool (U) and several basic techniques to create a vector style monitor and mouse.

Draw a Classy 3D Poker Chip in Photoshop

Draw a Classy 3D Poker Chip in Photoshop

Illustrate a 3D poker chip in Adobe Photoshop starting from scratch.

Halloween Pumpkin

Halloween Pumpkin

Learn how to draw a realistic Halloween pumpkin in Illustrator.

How to Create an Energy Saving Bulb in Illustrator

How to Create an Energy Saving Bulb in Illustrator

Use Illustrator’s Mesh Tool to create a light bulb. At the beginning it could be quiet hard to work with, but if you get used to it, it’s fairly simple.

How to create a Television Icon

How to create a Television Icon

How to create a retro television icon just with some basic shapes and gradients.

Create a Stylized GPS Icon

Create a Stylized GPS Icon

This tutorial shows you how to create a GPS icon using simple shapes and gradients.

Create A Briefcase Icon

Create A Briefcase Icon

This icon tutorial illustrates how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces.

How to Create a Recycling Paper Bag Icon

How to Create a Recycling Paper Bag Icon

In this tutorial, see how to create an eco-friendly paper icon with simple shapes and gradients. This tutorial is great for beginners to get started with icon design.

Create a Fun Icon of Frozen People on Ice

Create a Fun Icon of Frozen People on Ice

In this tutorial, you’ll learn how to create a fun, vector icon of a people symbol, frozen in an ice cube, from scratch. Part1 | Part2

How to Create Vintage Vector Bottle Caps In Illustrator CS4

How to Create Vintage Vector Bottle Caps In Illustrator CS4

This icon design tutorial covers how to make a vector bottle cap in Illustrator CS4 using some basic shapes, gradients, and effects.

How to Create Semi-Realistic Scissors in Illustrator

How to Create Semi-Realistic Scissors in Illustrator

This Adobe Illustrator icon designing tutorial walks the readers through the method of creating scissors.

PC Mouse Tutorial

PC Mouse Tutorial

How to create a PC mouse from scratch using Photoshop.

How to Create a Golden, Vector Compass in Illustrator

How to Create a Golden, Vector Compass in Illustrator

By following along this Illustrator tutorial, you will witness the steps in creating a beautiful gold compass.

Related Content

About the Author

Ibrahim Cheurfa is a young graphic and web designer (he’s only 16) based in Algeria. He’s a self-taught Photoshop artist. You can get in touch with him on Facebook, LinkedIn, or follow him on Twitter: @berhouma.

39 Comments

FredoFrench

April 11th, 2010

Dude, 16 ?

Get a girlfriend!

lava360blog

April 11th, 2010

really great and useful tutorials. going to design my first icon :)

Honey Singh

April 11th, 2010

Thanks Ibrahim for this list.
Though i have already used some of the above tips and few others from tutsplus but this list of 50 resources is worth a bookmark. :)
Cheers !

Torniquetes

April 11th, 2010

Thanks for your tips, realy i like

FAQPAL

April 11th, 2010

Excellent roundup, thanks for the share.

skyje

April 11th, 2010

Excellent icon design tutorials, that really inspire designers

Richie

April 11th, 2010

16 and already writing guest articles for SR… great way to start your career… :) and btw.. nice roundup. How about this one? Create a slick hard disk icon : http://bit.ly/cNDTKl

Ibrahim Cheurfa

April 11th, 2010

Thank’s everyone, I just wanted to help the design community to design high quality icons using these tutorials.

Schrumpfschläuche

April 11th, 2010

Wow, 50ty design tips and tutorials, how to do design nice and beauty icons. Thx for the work and the sharing.

inspirationfeed

April 11th, 2010

Wonderful resources, i really like the Professional Buddy Icon .

Christian Markley

April 11th, 2010

Awesome set of tuts; nice job! 16…wow, keep up the good work.

Franco

April 11th, 2010

Great list of TUts!!! Thanks for the share!

Matthew Heidenreich

April 11th, 2010

outstanding collection! Thanks for this list.

Blogging Tips

April 11th, 2010

Thanks for sharing this.Out of all I like the stylish mail icon tutorial.

Rob

April 11th, 2010

Give me Google and a day and I’ll give you thousands of links every designer needs…right now!

Sahan

April 11th, 2010

Whooa ! Many Thanks …

JC

April 12th, 2010

very nice collection. thanks for the post

Regards.

Saud

April 12th, 2010

Nice icons, I like (Bottle Caps).
Thanks alot!

Mohammad Radwan

April 12th, 2010

Great Collection of tutorials
thanks for sharing :))

Jordan Walker

April 12th, 2010

nice round up for icon design.

electrofikr

April 12th, 2010

Thanks for sharing Ibrahim, i visited your blog great blog keep up the good work.

Neil Dennis

April 12th, 2010

Great article Ibrahim – we are going to be designing a set of custom icons for our new website, so these tutorials will be very useful! Thanks.

Jae Xavier

April 12th, 2010

Some nice trendy designs here. Tweet it!

Kaushik

April 13th, 2010

I’m always impressed at the stuff designers are able to create with Photoshop. Amazing!

HD Guy

April 13th, 2010

Great round-up! SOme of these tutorials are awesome

Dennis

April 15th, 2010

great! really awesome you have talent!

Billy

April 15th, 2010

Awesome roundup man, I’ve made the iPad and the office worker so far, I’ll make the computer mouse tomorrow. I’m 17 and design website, and jealous of you. You’re really starting a good career man, props.

Michelle

April 19th, 2010

Great article Ibrahim – we are going to be designing a set of custom icons for our new website, so these tutorials will be very useful! Thanks.

TripleCrown

July 24th, 2010

Great stuff.. very inspiring…. keep up the good work…..

Tori

August 26th, 2010

Why are folks so nasty? (Rob and Fredo)You guys wish you were this industrious at 16!!!
Nice roundup, great work.
I am liking these for more practice with gradient mesh.

Ravi

August 27th, 2010

Excellent collection Ibrahim.
Thank you for sharing :)

raybak

November 27th, 2010

very nice tutorials collection

Adam

December 10th, 2010

Excellent Collection! Thanks

Asher

January 6th, 2011

thanks for featuring my tutorials :)

san

July 29th, 2011

Fantastic tutorials,thanks.could you please give some idea about creating 3d plain human characters?

Darren Roberts

August 15th, 2011

Great work Ibrahim,

Nice tutorials, and I’m sure you have a bright future ahead of you in graphic design.

Good luck and all the best,
Darren.

Kiki

November 25th, 2011

I’m so lucky to find this page. They are very useful!!! It helps me a lot!

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify