50 Icon Design Tutorials for Designers

Designers are visual creatures which judge a book by its cover. It’s no secret that icons have a huge impact in website design as well as application design. A good icon should stand out and be easy to remember. It should easily convey a message to the users and present the brand.

Designing icons is a challenging task which requires a lot of time and creativity. To help you out with this hard task we have put together 50 amazing and free tutorials to learn icon design from A to Z.

In this collection you’ll find icon tutorials for Photoshop, Illustrator and Sketch. You’ll see tutorials to replicate food, music, weather, business icons and many many more. Just go to the primary source and follow step-by-step guide to achieve great results.

Compass Icon with Long Shadow – PhotoshopIn this tutorial you’ll get to know how to design a nice flat compass icon in Photoshop using the tools such as Pen Tool, Rounded Rectangle Tool, and Rectangle Tool.

draw-a-compass-icon-with-a-long-shadow

Create an Icon Design Workflow – SketchCreate an awesome moon app icon using Sketch App 3, as well as with add-on functionality from the Sketch Toolbox.

icon-design-sketch

Create a To-Do List App Icon – IllustratorIn this guide you’ll see a quick way to create an organizer app icon with 3D effect. It combines radial gradients, blends, and a sense of lighting.

to-do-list-app-icon

Stylish Flat Space Icons – PhotoshopUsing simple shapes and path operations you can create an awesome set of 6 space icons in trendy flat style in Photoshop.

space-icons

Calendar App Icon – PhotoshopHere is a Photoshop tutorial on how to create beautiful calendar app icon in a few easy steps.

calendar-app-icon-photoshop

Create an Address Book Icon – PhotoshopCreate a detailed address book icon using Photoshop. You’ll learn how to set up a simple grid, and how to take full advantage of the Snap to Grid feature.

address-book-icon

Create flat icons – PhotoshopThis tutorial will walk you through the process of creating a simple app icon with a house on it using Photoshop CS6.

create-flat-icons

Create a Mobile App Icon – PhotoshopThis tutorial is a part of three-part series of articles explaining how to design UI elements for mobile applications. The icon you’re going to create will be perfect for any drawing app.

mobile-app-icon

Weather Icon – PhotoshopIn this tutorial you’ll see how to create a simple weather icon using Photoshop. No special techniques or Photoshop skills required to make your own weather icon.

create-weather-icons-photoshop

Detailed Lighthouse Flat Icon – Affinity DesignerCheck out the process of creating a lighthouse icon in a flat style using Affinity Designer. You’ll be using simple shapes and manipulating them to transform.

lighthouse-flat-icon

Create A Notes App Icon – PhotoshopDoes this Notes app icon look like the real thing? In the tutorial, you’ll be using simple shapes, gradients and textures to achieve this stunning icon design.

create-notes-app-icon-photoshop

Create a 3D Starfish Icon – PhotoshopIn this tutorial, you’ll see how to create a starfish and other objects in 3D then combine them with textures in Photoshop to create this stunning icon.

starfish-icon

How to Create a Map Icon Using – PhotoshopWith this Photoshop tutorial you’ll learn to create a beautiful three-dimensional icon with a map on it.

map-icon

Productivity Icons – IllustratorIn this easy Illustrator tutorial you’ll see the process of creating a set of nine flat productivity icons that may come in handy for future projects.

productivity-icons

Simple Notebook Icon – IllustratorThis simple Ilustrator tutorial will help you to create a nice notebook app icon. It will be useful for beginners as you will learn how to setup a simple grid and create pixel perfect shapes.

simple-notebook

Mailbox Alert Icons – IllustratorIn the following Illustrator tutorial you will learn how to create a simple mail icon with two types of notifications: a red circle and a ribbon.

mailbox-alert

Create Flat Vector Forrst Icon – PhotoshopIn just half an hour you will be able to create the Forrst icon in vector object.

forrst-icon

Set of Graffiti-Inspired Line Icons – IllustratorLearn how to create a set of smooth graffiti-inspired line icons using basic shapes and the Direct Selection Tool.

graffiti-icons

Create a Mouthwatering Donut Icon – IllustratorThis step-by-step tutorial will teach you how to draw a mouthwatering donut icon in Adobe Illustrator using basic shapes and filters.

donut-icon

Create Flat Weather Icons – PhotoshopA set of April weather flat icons, using basic shapes, vibrant colors and texturing with artistic brushes.

flat-weather-icons

Vibrant Cloud Icon – PhotoshopThis step-by-step Photoshop tutorial follow you through the process of creating a colourful and vibrant cloud icon using gradients and lighting effects.

cloud-icon

Shiny Gold Star Coin – PhotoshopIn this Photoshop Tutorial you can learn how to create a shiny gold coin in Photoshop that you can use as an icon or for any other purposes.

shiny-gold-star-coin

Stylised, Textured Flat Camera – IllustratorFollow this tutorial to learn how to create a stylish retro-looking camera, mastering the gradients for lights and shadows.

flat-camera

Solar System Planets Icon Pack – IllustratorYou will be recreating the planets from our Solar System in the form of an icon pack, using Illustrator. Pluto not included.

planets-icon

4 Ways to Create Long Shadow – PhotoshopHere you’ll get to know four different ways to create a trendy flat long shadow effect. You can add it to your icons, text or any other design elements.

long-shadow-effects

How to Create an App Icon – IllustratorIn this Photoshop tutorial you will be creating an icon for a message/chat application with a "postman" stork on it. The guide gives you a insight in the steps to take from a initial sketch to a vectorized icon.

create-app-icon-illustrator

Create an App Icon in 20 Easy Steps – PhotoshopCreate a billiard app icon with a billiard ball and billiards table.

an-app-icon

Delicious Toast Icons – IllustratorHere is an amazing Illustrator tutorial showing you how to create mouthwatering toasts with butter, fried egg and chocolate with banana.

toast-icons

Create a Gradient Icon – IllustratorThis Illustrator tutorial will walk you through the process of creating a simple mail app icon inspired by new Instagram logo.

gradient-icon

Design a Realistic Takeout Coffee Icon – PhotoshopHere’s a realistic-looking coffee cup that you can make as an icon in Photoshop.

coffee-icon

Create a Detailed Camera Icon – PhotoshopIt’s challenging to create detailed realistic icons but you can pick up some tips from doing this tutorial.

camera-icon

Flat Design Wedding Icon – IllustratorIn this Illustrator tutorial you’ll see the process of creating nice flat icons for a wedding icon. They can be used for Save-the-Date cards.

wedding-icon

Retro High School Icon Pack – IllustratorThis Illustrator tutorial will teach you to create cool retro high-school-related objects from the 50s. The icon pack contains six flat icons.

retro-high-school-icon

Bagel Sandwich Icon – IllustratorFollow this tutorial and learn how to create a bagel sandwich icon in Illustrator. It looks almost delicious enough to bite into.

sandwich-icon

Create a Stylised Strawberry Icon – IllustratorThis quick Illustrator tutorial will show you how to create an awesome squared strawberry dipped in chocolate app icon.

strawberry-icon

Animated Vector Icons – Illustrator & PhotoshopHere you’re going to create three animated icons and explore a couple of techniques for creating smooth, easy animations.

animated-vector-icons

A Set of Food Icons – IllustratorHere is a super-easy Illustrator tutorial on how to create a set of food icons: a cup of tea, sandwich and a bowl of soup.

set-of-food-icons

Flat Animal Icons – IllustratorThis tutorial will help you to create six different animal portrait icons with a circle background.

animal-icons

Create Sticker-like Music Icons – IllustratorIn this tutorial you’ll see the process of creating musical note sticker icons in three different colors.

music-icons

Donut Icons – IllustratorIn this tutorial you will learn how to create four types of donuts in Illustrator: chocolate sprinkles, icing with chocolate chips, plain sugar, and strawberry frosted.

donut-icons

How to Use the Blend Tool – CorelDRAWThis CorelDRAW tutorial shows how to create a nice notebook icon with long shadow.

notebook-icon

Flat Precious Gems Icons – IllustratorIn this tutorial you’ll learn how to create a set of simple and trendy flat-style gem icons in Illustrator.

gems-icons

How to Create a Beautiful Flip Flop Icon – IllustratorLearn how to create these flip-flop icons in Illustrator.

flip-flop-icon

Captain America Shield Icon – IllustratorIf you’ve seen this shield "lying around" and want to learn how to make it, this is the tutorial for you.

captain-america

Delicious Cupcake Icons – IllustratorIn this tutorial you will see the process of creating a cupcake icon in Illustrator, and you’ll be able to create other delicious variations just by making a few changes.

cupcake-icons

Don’t be shy to share your icons made following these tutorials in the comment field below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail