Menu

50 Excellent Icon Design Tutorials

Advertisement

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

This was published on Feb 11, 2009

58 Comments

Kayla Feb 11 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 Feb 11 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 Feb 11 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 Feb 11 2009

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

armando Feb 11 2009

Yay, another great icon collections.. bookmarked!

Branson Feb 11 2009

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

insic Feb 12 2009

wow! awesome icons tutorial. very inspiring list.

iDevelopThings Feb 12 2009

Weee, those are really cool.. Thanks.

Sajal Dutta Feb 12 2009

Wow!

Gio Borje Feb 12 2009

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

Martin Leblanc Feb 12 2009

I love icons! Great list!

Great post. Will be very handy. Thank you.

Jacob Gube Feb 12 2009

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

corina Feb 12 2009

love the icons. perrrfect.

Lost Guy Feb 12 2009

great post just added to my delicous

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 Feb 12 2009

Nice list. Should come in handy. Thanks!

Webdesigner Depot Feb 12 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 Feb 12 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/

Slick, will bookmark!

Webdesigner Depot Feb 12 2009

Nice collection Jacob!

Pure Roon Feb 13 2009

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

Anton Feb 13 2009

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

Prakash jayaseelan Feb 14 2009

great works i love it bookmark this page

Webdesigner Feb 15 2009

amazing list… very nice collection

thanks a lot

Chris Wallace Feb 15 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 Feb 16 2009

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

Aaron Feb 17 2009

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

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

Deepali Feb 18 2009

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

RK Nair Feb 21 2009

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

Anubis From Memphis Feb 22 2009

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

annamarie Mar 02 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 Mar 04 2009

Lots of great, quality examples here! Thank you.

cagwait Mar 10 2009

Great list. Thanks for putting this together

Cindy Lee Mar 20 2009

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

Chand Patel Jul 19 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

Lots of great, quality examples here! Thank you.

Biju Subhash Oct 10 2009

Great article…..
Thank you for sharing….

Jorge Dec 04 2009

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

Carmen Karma Dec 25 2009

This is a awesome list!!! Kudo!

e-okul Jan 02 2010

thanks , will bookmark

Great and extremely helpful.
Thanks for sharing :)

EL-GAMAH Apr 01 2010

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

vitaliy Apr 25 2010

bookmarks… wow!

Luís Soares May 20 2010

Great article. Just one reference article missing:
http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

Scott Corgan May 21 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 Jul 22 2010

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

plz make icon for website it’ required for me

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

Andrew Nov 01 2010

This is a great collection.Kudos!

Sunita Dec 17 2010

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

Cgbaran Jan 19 2011

Great collection thanks

almekhlafi Jan 25 2011

Very nice and smart idea
thankyyou

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

web India Jul 09 2011

This is really nice. Very impressive.

Laurie Katona Jul 16 2011

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

zahirul Sep 01 2011

These information is effective for all designer.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners