Learning icon design is challenging but shouldn’t feel impossible. The key is having the right learning materials to work with.
In a past article I curated a list of online classes & courses for learning icon design. Those are worth the money if you have a budget to spend on education.
But few designers have the extra scratch and that’s where free tutorials help.
This guide offers 30 awesome(and free) tutorials that anyone can follow to teach themselves icon design. Whether you’re a complete design newbie or just moving into icon work for the first time, this list will have something for you.
1. Vector Donut
It’s time to make the donuts with this Inkscape tutorial. It’s a free 15 minute guided lesson on working with vectors in the Inkscape software.
You may not have a huge need for donut icons but this tutorial can teach you a lot of fundamental tools necessary for basic icon designs.
2. Simple Folder Icon
Now for something a little more practical we have this manila folder icon also designed using Inkscape.
If you’re familiar with open source software then you should know how useful Inkscape can be. It’s one of the best alternatives to Illustrator for anyone looking to save money.
And this tutorial will set you on the right track with a practical icon you can use in your web projects.
3. Flat Battery
There’s a big need for battery icons in mobile apps and even for simple UI mockups.
If you want to learn how to design a simple battery shape then this tutorial will prove useful. It’s pretty short totaling about 8 minutes long but the end result is fantastic.
And while this does come as a single color you can also edit the styles to suit your liking.
4. 3D Gradient Battery
I’m partial to flat design but I also love design aesthetics that jump off the page.
The classic iOS battery icon used to have 3D effects and it looked really cool. That’s what you’ll learn to design in this video created by designer Nick Saporito.
Again this runs in Inkscape so it’s a fantastic way to pick up vector techniques without the hassle.
5. Mountain in Illustrator
So you want to design a landscape for your page header. That’ll take a bit of practice but it’s far from impossible.
Have a look at this tutorial if you want to see what you can do with simple vector shapes.
If you have the time you can even follow this tutorial to extrapolate other ideas for your work. That means you can easily copy similar elements into your own landscape designs using the exact same techniques. Pretty cool!
6. Vector Dropper Icon
While this may not have a practical use in everyday UI design work, I still think this dropper tutorial is a great way to learn basic vector icon design.
We all know about this dropper icon from Photoshop’s color picker so it’s a common interface element.
But very few websites actually rely on the dropper so it’s not something you’ll need to master. Treat this more like a practice project to jumpstart your skills with Inkscape.
7. Bicycle Icon
Designer Nick Saporito has dozens of incredible tutorials on his YouTube channel. But one of my favorites is this bicycle tutorial showing you how to design an outline shape for a bike icon.
It’s incredibly easy to follow and the process will show off everything Inkscape has to offer.
Not to mention the end result can look pretty nice in a sample mockup or practice design.
8. Colored Pencil Graphic
I’ll be the first to say this tutorial is definitely experimental. I can’t imagine where you’d need this type of colored pencil icon in your work, but let it be known this video is really awesome.
You’ll learn your way through more advanced techniques in Inkscape while designing a pretty creative icon.
It goes to show you don’t always have to follow the norm to create a brilliant product.
9. Playstation Controller
Now we’re getting into the more technical tutorials like this 20-minute video on designing a PlayStation controller.
It also works with Inkscape and shows you how to design a flat icon from scratch using basic shapes and manipulation tools.
The cool thing is that you can follow these same steps with Illustrator, Photoshop, or practically any vector program. Most tools are similar so it’s just a matter of applying what you learn into the right software.
10. Payment Credit Card
Credit card icons are perhaps the most pragmatic graphics you can make.
You’ll learn how to design all the intricate details of a realistic credit card icon while learning the tools necessary to create variations on your own.
11. Vector iPhone
While the iPhone 6 may be a few years old now and (arguably) outdated, this icon tutorial is just as fresh as ever before.
If you follow along with this 18-minute video you’ll learn how to design an iPhone 6 icon from start to finish.
Realistically this isn’t a difficult project but it will take practice to get everything just the way you want it.
12. Ice Cream Icon Logo
You scream for ice cream and I scream for this brilliant Illustrator video. It’ll teach you how to design a full ice cream cone icon from scratch with the Illustrator CC software.
It’s actually a very quick tutorial with only 6 minutes of runtime.
But what you’ll learn in those 6 minutes should be enough to pick up some of the absolute basics of AI design work, specifically icon designs.
13. Google Font Logo
Google wears many hats across their many projects and one that designers love is Google Webfonts.
If you check out this icon design tutorial you can learn how to redesign the Google Webfonts logo from scratch. It’s a slightly different take on the existing design, although it doesn’t change too much.
But this tutorial offers a nice balance between logo design work and icon design work.
14. Flat Rocket Ship
The free design software Gravit is exceptional. It’s perfect for UI/UX designers and even for icon designers too.
While it doesn’t have as many features as Illustrator it does have plenty of tools to design some great stuff. Like this tutorial showing you how to create a rocket ship icon from scratch.
A very nice introduction to the Gravit software and to open source icon design in general.
15. Impossible Square Icon
This impossible square reminds me of the mobius strip we’re all familiar with.
But while this icon may not help as much on your web projects, this icon will help you learn the ropes with vector icon design. And just like most similar icon videos in this category you can apply the lessons to almost any software and still learn a lot.
16. Simple Box Icon
So you want to design a cardboard box icon. Peculiar, sure, but could be fun.
In this video tutorial you can follow along with infamous designer Nick Saporito who I’ve mentioned plenty of times in this post.
He shows you the basic steps for designing the icon with Inkscape but you can also replicate these techniques in any program you like.
17. Flat Alarm Clock
You’ve been waiting this long for a Photoshop icon tutorial and I’m happy to deliver one in the style of a flat alarm clock icon.
The video has excellent recording quality and you can follow along in real time as you create an alarm clock from scratch.
It totals about 14 minutes long and best of all this is perfect for beginners just learning to design in Photoshop.
18. Music/Video Player App Icon
If you’re more of a mobile designer try this app icon tutorial made for Photoshop CC.
Anyone can design basic mobile apps but it’s always the process that’s confusing.
Thankfully this video is pretty simple to follow, although it helps if you have a dual monitor setup to run the video on one screen & follow the steps on another.
19. Fitness App Icon
Adobe Illustrator works just as well for app icon design work. But the flow is very different from Photoshop CC.
That’s why this fitness icon tutorial can help you learn the other side of icon design using the Illustrator GUI.
It’s the perfect companion tutorial for any app designer or mobile UI/UX designer who wants to create app icons too.
20. Flat Workspace Icon Tutorial
This is one of the longest video tutorials in my entire guide but I genuinely think it’s worth watching if you can.
If you want to design a full illustrated vector “scene” this workspace icon tutorial is perfect.
Just keep in mind this can get very technical so it really helps if you know your way around the pen tool before diving into this video.
I actually recommend this awesome guide from TutsPlus if you’re trying to learn the pen tool as a newbie. It covers Photoshop but that’s how I learned and it applies to Illustrator too.
21. Google Now Background Tutorial
Remember the mountain landscape video I mentioned earlier in this post?
Well this tutorial puts it to shame with almost an hour of total runtime. You’ll learn how to design a full vector landscape inside Adobe Illustrator with the goal of creating a Google Now background.
Very cool for designers who want to show off their skills.
22. Letter & Clock Icons
In this multipart Illustrator tutorial designer Jay Dzananovic teaches you how to design a small set of flat icons.
Specifically you’ll design an envelope and a small clock icon from scratch. Both work as a pair but you can follow one part of the tutorial and pause before picking up the rest.
With only 12 minutes in total this can run pretty quick offering a swift overview of icon design in Illustrator.
23. Wireless Signal Icon
You’d think the simple three-bar wireless icon would be a no brainer. Yet when you’re a complete beginner to icon design even this can be frustrating.
Thankfully we have this free tutorial showing you how to design a wireless icon signal from scratch with Illustrator.
It’s probably the single best icon design tutorial on the web for absolute newbies. The steps are easy to follow and it’ll make a huge difference in your workflow as you practice.
24. Airbnb Icon
Here’s a mixed tutorial combining logo/branding design with simple iconography.
I think it’s a fantastic tutorial for anyone but you will need a copy of Sketch before you can move forward.
25. Dynamic Icons in Sketch
If you already have Sketch and want to try something a little more detailed this tutorial will be right up your alley.
It’ll cover dynamic icon styles in Sketch without the fuss. Even a beginner can get started here but it will take some patience to work through the video.
26. Chrome Icon
While this tutorial doesn’t have any guiding voiceover audio, it does have some text on screen to help you work through each step.
I know many designers prefer voice overs so this may not be the perfect tutorial for everyone.
But if you’ve ever wanted to design a simple Chrome icon inside Sketch this is your best choice. The tutorial barely totals over 4 minutes and it’s one of the better guides for Sketch.
27. Z Camera App Icon
It’ll teach you the ins & outs of Sketch along with the fundamental points of working with Sketch to design such a clean camera icon.
No this isn’t the perfect tutorial and no it won’t make you a masterful icon designer. But it will cover almost everything you could ever want to know for making a simple Android app icon.
28. Cog Settings Icon
The simple “settings” icon is universally known across all interfaces. It’s also one of the best icons to practice as a beginner.
Check out this simple tutorial by Dansky teaching you how to design a cog settings app icon from scratch using Illustrator.
It’s nothing too complex but the process can feel intimidating for anyone who’s never done this before.
29. Sunshine Icon With Photoshop
While this is technically called a “weather icon” it features the sun and some pretty bright colors in the design.
That’s why I consider this tutorial a great intro to designing any type of sunshine or weather icon from scratch.
Also a fun way to practice icon work inside Photoshop CC for anyone who’s new to that software.
30. Alien iOS App Icon
Last but certainly not least is this crazy iOS app icon tutorial featuring something a little out of this world.
The green alien head is a nice touch and it certainly stands out from all the other tutorials in this list. Not to mention it’s a phenomenal icon and the teaching style is great.
Follow along with this 20 minute video guide if you want to design pixel-perfect iOS app icons inside Photoshop.
This Content is Generated from RSS Feeds, if your content is featured and you would like to be removed, please Contact Us With your website address and name of site you wish to be removed from.
You can control what content is distributed in your RSS Feed by using your Website Editor.