Icon Design with Sketch

Lesson 1/11 - What Is an Icon and What We'll Learn Together


Icon Design with Sketch


Lesson Info

What Is an Icon and What We'll Learn Together

So let's just start with the question, what is an icon? An icon is a symbol. It's a pictogram. It can be just about any kind of graphic. The fact is there's really no official definition of what an icon is because they take so many forms. But there are a lot of characteristics that are common for icons. For example, they're often really small in size. And we've been using them for signage for about as long as written and drawn communication has existed. This is taken at the San Francisco Airport. And icons are increasingly used in user interfaces, on websites. They're really everywhere in our world. Some of them stand on their own, some of them are guiding us places, some of them are telling us what to do. And in the software that we're using, they're so pervasive we almost don't notice them anymore. Like here in these four apps, here are all of the icons that we're talking about. And none of these are the same. They're really everywhere and some of them have become ubiquitous. Some of...

them have become just part of what we expect when we're using a software. So here's, for example, the iOS Share icon. And the thing about an icon is that it generally exists within a defined amount of space. And that's often a square. That's often a small square. So in the case of a digital icon, it would be, say, like 32 by 32. But again, sometimes, they come in all different sizes and it can totally stand on their own. Sometimes they are supplemental, so they're just kind of reinforcing a meaning. In the Settings app on iOS, all of these icons on the side, those aren't telling you anything. They're just reinforcing what that text label says. What I love about these, what I love about icons is that they really embody so many design characteristics and design principles in this small package. And they can take very utilitarian forms, they can be delightful, they can be animating, they can be dynamic. We'll get in to all of the possibilities later. So in this class, we're fist going to talk about the design principles, some of the fundamentals about how to create a great icon, things to consider while you're in that design process. We're going to use the vector design tool Sketch to actually build our icons. It's a very similar process to Adobe Illustrator. And we're going to learn a lot about SVG graphics. SVG is perfect for icons, and we'll go over all of the capabilities and how you can practically start using SVG on your own website. And then we're going to take a couple of our icons that we've made together. And if you know a little bit of HTML and CSS, a little bit of front-end web development, we'll be able to take those into CodePen, into the web, and animate them and create some beautiful icons that are animating of our own. In the last little segment, for those of you who are really, really eager to continue diving into this topic, we're going to go over some more advanced SVG techniques and talk about all of the ways you can animate something and what the future looks like. The things that we go over in this class are really about icons but they're also applicable beyond icons. Think about a user interface element like On/Off switch. This might as well be an icon. And the animation techniques that we're going to learn are going to show you this as well. Things like graphs and charts, they work the exact same way. And the design principles and the vector design techniques, all of this stuff is really applicable. You could be designing a logo. Here's a logo I designed and animated. Its animation is perfect for logos and all sorts of other user interface elements. So for example, Slack has this really fun little spinner while you're waiting for it to load. By the end of this class, you'll be able to create something like this and it's essentially an icon. Now, before we dive in to the design principles, I wanted to just take a quick pause to talk about icon sets. So there are a lot of icon sets out there. And some of them have hundreds of icons. And so why would you ever need to design your own icon? Everything's already been designed. Well, the fact is although some icon sets are great, most of these were designed by somebody who had no knowledge of your context, of your situation. And design is really about creating something that fits perfectly in your context, that solves your problem. So whether it's the exact style of the icon to match the rest of your app or website or sign, or maybe simply just the size that it was created at. And we're going to go over pixel perfection in the next section and why it's so important to create icons that are really clear at exactly the size that you're going to be using them. Now, icon sets are super useful for wireframing, they're a great resource and sometimes just for getting inspiration. But I'm pretty confident that after this class, you'll be able to make something even better than you'd find in almost any icon set. So let's get started.

Class Description

Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 

Software Used: Sketch 2016


Michael Oeser

I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.


Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

Aris K

I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on medium.com beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.