50 Excellent Icon Design Tutorials

Finger pressing a push button to start playing a tutorial.

10 min. read
William Craig

CEO & Co-Founder
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.

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

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

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

Adobe Bridge Icon - screen shot.

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

Design a Detailed Compass Icon - screen shot.

27. Safety Icon Design

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

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

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

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

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

47. Fast Folder Icon Making

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.

Summary

Icon sets can be an important part of web design, whether you’re designing for a hotel or a car dealership. Using images that both fit the theme of the design and the type of business is important to keep in mind when designing icon sets. Often you don’t have to design these sets though- look below for a number of free icon sets to ensure a professional look and to save yourself time!