50 Excellent Icon Design Tutorials

February 11th, 2009 by Jacob Gube | 43 Comments | Stumble It! Delicious

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

2. How To Make An Icon

3. 10 Mistakes in Icon Design

4. Icon Design: Bitmap vs Vector

5. Professional technique for creating icons

6. 7 Principles of Effective Icon Design

7. 10 Tips for Effective Icon Design

8. Icon Design Explained (Quickly)

9. How to Design Mini Icons

Illustrator Tutorials

10. Make a Handy 3D Vector Calendar Icon

11. Vector Film Slate Icon

12. How to Turn Glasses into a Great Geek Icon

13. Detailed Camera with Photo Icon

14. How to Design a Set of Multicolored Buddy Icons

15. Adobe Bridge Icon

16. How to Create a Vector Safari Compass in Illustrator

17. Translucent IM Style Illustrator Icon Tutorial

18. Create a Vector RSS Icon with Illustrator

19. Juicy RSS Feed Icon

20. How to Make a Vector Military Cap Icon

21. Delicious Chinese Food Icon

22. Transparent Battery Icon

23. Vector Lock Icon Design

Photoshop Tutorials

24. Custom Hard Drive Icon

25. Create a Speed Gauge and Watch Icon

26. Design a Detailed Compass Icon

27. Safety Icon Design

28. Design a Glossy Download Icon

29. Creating a Cool Yellow Helmet Icon

30. Create a Jaguar Style Folder Icon

31. Vista Error Icon

32. Vista Folder Icon Tutorial

33. Design The iTunes Icon For The iPhone

34. XP Style Money Icon

35. Angry Emoticon

36. XP Style iPod Icon

37. LG LCD Monitor Icon

38. Adobe Photoshop CS3 Style Icons

39. Clock Icon

40. World Icon Tutorial

41. How to Make a Folder Icon

42. Glossy RSS icon

43. Recreate the Famous Yahoo! Smiley

44. Skype Buddy Icon

45. Create A Mockingly Smiley

46. iTune Icon

47. Fast Folder Icon Making

48. Stylish Search Icon

49. Creating a clock icon

50. Computer Icon Tutorial

43 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”?