50 Excellent Icon Design Tutorials

Feb 11 2009 by Jacob Gube | 58 Comments

Icons are essential in any graphical user interface. They are effective visual cues for performing tasks or navigating to a certain location. There are many resources online that can help and inspire you in your own icon designs and – in this collection – we share some of the best tutorials on the topic.

In this article, you’ll find a wide selection of tutorials and resources to help you learn about designing icons.

General Tutorials

1. The Making of an Icon

The Making of an Icon - screen shot.

2. How To Make An Icon

How To Make An Icon - screen shot.

3. 10 Mistakes in Icon Design

10 Mistakes in Icon Design - screen shot.

4. Icon Design: Bitmap vs Vector

Icon Design: Bitmap vs Vector - screen shot.

5. Professional technique for creating icons

Professional technique for creating icons - screen shot.

6. 7 Principles of Effective Icon Design

7 Principles of Effective Icon Design - screen shot.

7. 10 Tips for Effective Icon Design

10 Tips for Effective Icon Design - screen shot.

8. Icon Design Explained (Quickly)

Icon Design Explained (Quickly) - screen shot.

9. How to Design Mini Icons

Design Mini Icons - screen shot.

Illustrator Tutorials

10. Make a Handy 3D Vector Calendar Icon

Make a Handy 3D Vector Calendar Icon - screen shot.

11. Vector Film Slate Icon

Vector Film Slate Icon - screen shot.

12. How to Turn Glasses into a Great Geek Icon

How to Turn Glasses into a Great Geek Icon - screen shot.

13. Detailed Camera with Photo Icon

Detailed Camera with Photo Icon - screen shot.,

14. How to Design a Set of Multicolored Buddy Icons

How to Design a Set of Multicolored Buddy Icons - screen shot.

15. Adobe Bridge Icon

Adobe Bridge Icon - screen shot.

16. How to Create a Vector Safari Compass in Illustrator

How to Create a Vector Safari Compass in Illustrator - screen shot.

17. Translucent IM Style Illustrator Icon Tutorial

Translucent IM Style Illustrator Icon Tutorial - screen shot.

18. Create a Vector RSS Icon with Illustrator

Create a Vector RSS Icon with Illustrator - screen shot.

19. Juicy RSS Feed Icon

Juicy RSS Feed Icon - screen shot.

20. How to Make a Vector Military Cap Icon

How to Make a Vector Military Cap Icon - screen shot.

21. Delicious Chinese Food Icon

Delicious Chinese Food Icon - screen shot.

22. Transparent Battery Icon

Transparent Battery Icon - screen shot.

23. Vector Lock Icon Design

Vector Lock Icon Design - screen shot.

Photoshop Tutorials

24. Custom Hard Drive Icon

Custom Hard Drive Icon - screen shot.

25. Create a Speed Gauge and Watch Icon

Create a Speed Gauge and Watch Icon - screen shot.

26. Design a Detailed Compass Icon

Design a Detailed Compass Icon - screen shot.

27. Safety Icon Design

Safety Icon Design - screen shot.

28. Design a Glossy Download Icon

Design a Glossy Download Icon - screen shot.

29. Creating a Cool Yellow Helmet Icon

Creating a Cool Yellow Helmet Icon - screen shot.

30. Create a Jaguar Style Folder Icon

Create a Jaguar Style Folder Icon - screen shot.

31. Vista Error Icon

Vista Error Icon - screen shot.

32. Vista Folder Icon Tutorial

Vista Folder Icon Tutorial - screen shot.

33. Design The iTunes Icon For The iPhone

Design The iTunes Icon For The iPhone - screen shot.

34. XP Style Money Icon

XP Style Money Icon - screen shot.

35. Angry Emoticon

Angry Emoticon - screen shot.

36. XP Style iPod Icon

XP Style iPod Icon - screen shot.

37. LG LCD Monitor Icon

LG LCD Monitor Icon - screen shot.

38. Adobe Photoshop CS3 Style Icons

Adobe Photoshop CS3 Style Icons - screen shot.

39. Clock Icon

Clock Icon - screen shot.

40. World Icon Tutorial

World Icon Tutorial - screen shot.

41. How to Make a Folder Icon

How to Make a Folder Icon - screen shot.

42. Glossy RSS icon

Glossy RSS icon - screen shot.

43. Recreate the Famous Yahoo! Smiley

Recreate the Famous Yahoo! Smiley - screen shot.

44. Skype Buddy Icon

Skype Buddy Icon - screen shot.

45. Create A Mockingly Smiley

Create A Mockingly Smiley - screen shot.

46. iTune Icon

iTune Icon - screen shot.

47. Fast Folder Icon Making

Fast Folder Icon Making - screen shot.

48. Stylish Search Icon

Stylish Search Icon - screen shot.

49. Creating a clock icon

Creating a clock icon - screen shot.

50. Computer Icon Tutorial

Computer Icon Tutorial - screen shot.

Related content

58 Comments

Kayla

February 11th, 2009

Great list! I was actually looking for good icon tutorials the other day, as I need to get more experienced with the Adobe software I just received a month ago. There seems to be way too many pencil or RSS feed icon tutorials out there…thanks for adding this list with some variety!

Raymond Selda

February 11th, 2009

In my opinion, designing icons is time consuming but very rewarding once you’ve finished it. I know that sooner or later I’m going to design one but for now I’m very thankful to the designers that give away their amazing icons for free.

Thank you for this comprehensive post. This will be my first stop whenever I need to learn how to design an icon.

Big Slick Design

February 11th, 2009

I’ve been pondering about creating my own unique RSS icon. Nothing that takes away from the traditional RSS feel or anything, but one that just adds some more uniqueness to my blog.

These tutorials are going to be bookmarked for that, and other icon designs I do in the future.

Thanks.

Lori Cappozzi

February 11th, 2009

Great job, thanks for the cool collection. I’ve just digg for later design use.

armando

February 11th, 2009

Yay, another great icon collections.. bookmarked!

Branson

February 11th, 2009

Very nice collection! Its not really a talked about topic much and I like how you shed some light on it. Thanks!

insic

February 12th, 2009

wow! awesome icons tutorial. very inspiring list.

iDevelopThings

February 12th, 2009

Weee, those are really cool.. Thanks.

Sajal Dutta

February 12th, 2009

Wow!

Gio Borje

February 12th, 2009

Link #6 brings you to PSDTUTS’ Valentine’s Day tut

Martin Leblanc

February 12th, 2009

I love icons! Great list!

Umut

February 12th, 2009

Great post. Will be very handy. Thank you.

Jacob Gube

February 12th, 2009

@Gio Borje: Somehow there was an extra “v” on the link, which redirected you to another post. Thanks for catching that.

corina

February 12th, 2009

love the icons. perrrfect.

Lost Guy

February 12th, 2009

great post just added to my delicous

Gary

February 12th, 2009

Icons were used by the ignorant (illiterate) populations of very early peoples to communicate. Long ago, a much better visual communication method was developed, written LANGUAGE! Repeated tests have shown that icons are much harder to locate than words. Maybe it is developer’s condescending opinion of users that perpetuates icons. How is a bitty trashcan icon easier to locate than the word “delete”?

Timothy

February 12th, 2009

Nice list. Should come in handy. Thanks!

Webdesigner Depot

February 12th, 2009

Thanks for the great list! I already tagged it, because I know this is something I will be referring to multiple times in the future.

Vasily

February 12th, 2009

great post, really nice list!

another great tut i recently came across:
http://dryicons.com/blog/2009/02/09/icon-design-tutorial-how-to-make-a-calendar-icon/

John

February 12th, 2009

Slick, will bookmark!

Webdesigner Depot

February 12th, 2009

Nice collection Jacob!

Pure Roon

February 13th, 2009

Great list, love some of the RSS ideas, gonna give a few a spin at work today!

Anton

February 13th, 2009

Please also check the icon design tutorials at http://www.softfacade.com

Prakash jayaseelan

February 14th, 2009

great works i love it bookmark this page

Webdesigner

February 15th, 2009

amazing list… very nice collection

thanks a lot

Chris Wallace

February 15th, 2009

These are great Jacob. You know I suck at icon design so I’ll be running through most of these at some point.

Dietmar

February 16th, 2009

Great list of tutorials, can’t wait to get my hands on it!

Aaron

February 17th, 2009

Very nice list, should be really useful. Saved to my Delicious. :)

Eli

February 18th, 2009

Thanks for the roundup! Will come in handy very soon :)

Deepali

February 18th, 2009

Very good collection… your tutorials very helpful to make good quality icon.

RK Nair

February 21st, 2009

It gives versatality for designers multiple talents. Thanks for giving optional icon designs inputs.

Anubis From Memphis

February 22nd, 2009

Thank you so much for sharing!
These tutorials will certainly become handy!

annamarie

March 2nd, 2009

Hi Jacob
Nice collection.Thanks for sharing
Would benefit and will also serve as great reference for upcoming designers and who are aspiring to become one.
In all great collection keep up the good work.
Thanks.
Anna.

Writer Dave

March 4th, 2009

Lots of great, quality examples here! Thank you.

cagwait

March 10th, 2009

Great list. Thanks for putting this together

Cindy Lee

March 20th, 2009

Great list, I will check all tutorial and learn.
Thanks.

Chand Patel

July 19th, 2009

I love to have this wonderful site and its features
Defiantly promote and will also endow with as great orientation for upcoming learners.

Thanks

Chand Patel

Marc

September 14th, 2009

Lots of great, quality examples here! Thank you.

Biju Subhash

October 10th, 2009

Great article…..
Thank you for sharing….

Jorge

December 4th, 2009

Great Collection of icon tutorials these will come in handy the next time I want to create a logo :)

Carmen Karma

December 25th, 2009

This is a awesome list!!! Kudo!

e-okul

January 2nd, 2010

thanks , will bookmark

Nina

February 24th, 2010

Great and extremely helpful.
Thanks for sharing :)

EL-GAMAH

April 1st, 2010

It’s a great list. I know most of their items in website http://www.vectortutsplus.com.
Thanks for sharing them!

vitaliy

April 25th, 2010

bookmarks… wow!

Scott Corgan

May 21st, 2010

Icons are those little things that you don’t know matter more than those big things that you think matter more than those little things. Makes sense?

Thanks for the references! Bookmarked so that I can go through them all throughout today!

Richard A. Lewis

July 22nd, 2010

I enjoyed the 10 Mistakes of Icon Design the most. Thank you for posting all of this.

ajay

August 28th, 2010

plz make icon for website it’ required for me

Peg

October 12th, 2010

very good collection. Nicely presented with all the pictures, too. Saves me lots of research time! Thanks!

Andrew

November 1st, 2010

This is a great collection.Kudos!

Sunita

December 17th, 2010

ITS JUST “WOW” .. too good collection..thankssss

Cgbaran

January 19th, 2011

Great collection thanks

almekhlafi

January 25th, 2011

Very nice and smart idea
thankyyou

Stan

July 6th, 2011

Great selection of articles and advice. I appreciate the tutorials and ideas listed here as well. Thanks!

web India

July 9th, 2011

This is really nice. Very impressive.

Laurie Katona

July 16th, 2011

FABULOUS RESOURCES AND IDEAS. THANK YOU FOR ALL THIS GREAT INFORMATION.

zahirul

September 1st, 2011

These information is effective for all designer.

Leave a Comment

Subscribe to the comments on this article.

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

Mobify