Iconography For UI / UX Designers | Aleksandar Cucukovic | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (46m)
    • 1. Class Intro

      1:48
    • 2. What Are Icons

      1:32
    • 3. Different Types Of Icons

      5:21
    • 4. Icon Libraries, Packs And File Formats

      20:21
    • 5. Free VS Premium Icons

      8:45
    • 6. Tips For Best Results

      5:30
    • 7. Your Class Project

      1:51
    • 8. Conclusion And Resources

      1:08
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

39

Students

--

Projects

About This Class

967bac98.jpg

Icons are one of the most crucial elements you can use for any project, and choosing the right icons in the style that fits your project and brand, can really make or brake your design. 

.

Hey designer, my name is Alex and in this class we are going to cover: 

  • What are icons
  • Different types of icons
  • Icon libraries and packs
  • Which file formats to use and export
  • Free VS Premium icons
  • Tips for best results 

Icons are really important because they can help tell the story much better and help to remove unnecessary text and images to achieve better consistency and clean design.

.

I look forward to see you in class and, let's explore some icons!

.

Have a creative day!

Alex

Meet Your Teacher

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Teacher

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

 

Thank you for reading and have a creative day!

 Alex

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Intro: Icons are really important part of every design out there because they really helped to tell a story that really helped to facilitate the design in a best way possible by removing the text in explaining the story much better than you can with text or images. They're also there to help your users navigate your design around and really dare to help them decide on where they want to purchase to sign up, or do whatever you want them to do. Hey, designer and my name is Alex, welcome to this Skillshare class about iconography in UI UX design under products creator. And so far I have created modern 500 different products. I'm also a course creator and so forth, created more than 30 different courses and have more than 40000 students. In this class, we're going to talk about iconography for UI UX designers. We are going to cover what our icons, differences between types of icons. Icon libraries, packs in file formats, free versus premium icons. And what is the difference? Finally, we're going to cover tips for best results. Your class project for this class is to create this tab bar. It's explained much better in the class project video. And you can do that or create a different kind of process just using the same style of icons, which I mentioned in that class project video. So make sure to check it out and I'm really excited to see your class projects. Icons are extremely important parts of her redesign process out there and getting it right is extremely important. It's going to make or break your project. So I'm really excited to see you in this class and to explore some icons together. So let's get started. 2. What Are Icons: Icons are graphic elements which are used in your designs to help your users understand your designs better. They are there just to correspond with the text or images better, make sure when you're using icons not to overdo it, because the whole point of icons is to help your other content not all overwhelmed. What that means basically is when you're using icons, make sure that you are using them in specific places where it does make sense. Make sure that when you have multiple bases in your designs and a huge space in your designs, not to use icons because that way images are going to look much better in your designs. Icons are also used to explain to a users what they have to do a little bit better. What I mean by that is if you just cannot use images, if you just cannot find images which are going to explain complex situations. Well, if we cannot use video in certain places, then icons are a much better way to do it, because you can always include multiple icons to explain multiple topics in a single space. And that's why icons are a great approach and a great way to use in your designs. Icons can be simple or complex. They can be colored or black and white. And we're going to talk about all of the classifications in the next videos, where to find them differences between different icons and how to use your icons properly. 3. Different Types Of Icons: There are many different types of icons and depending of why you're using them, you're going to use a certain type of icon where that, that outline filled in with colors. And there are multiple ways to use icons, which we are going to discuss later in this class. But also there are multiple categories. So here I have material icons and you can see in debt, right here on the top we have outlined. And you can see all of these outlined icons. You can see that the basic premise of outline icons, but not for all icons, especially for this hard you can see right here is to have empty space inside of them and then just have the outline outside of the icon. If we switch it back to filled, you can see how all of them look like. But once again, you can see with a search, for example, it just doesn't make sense for some icons to be filled completely. Because if we feel this search icon completely, then it's going to lose its purpose. It's going to disappear. This whitespace in-between for this logout, the same for this face, the same for this favorite border. The same. If we go with the rounded, basically it's just going to show you the rounded corners of these icons. If we go with sharp, it's going to show you the sharp edges. And it's going to basically be, all of these icons are pixel perfect because majority of them are SVG. And we're going to discuss that a little bit later in Adobe XD part of this class. When I'm going to explain different file formats and how can you work with different file formats. And finally, we have to turn right here. To turn, as the name suggests, has all of these outlines, all of this filled in colors, but as well also shows you these two tone design, basically one color, one tone is for the outline in this case, and one tone and one color is for the inline off. This case. Once again, depending on which icons you're using, for which purpose It's going to show differently. And if a show you right here in this example, this is the premium pack from Envato elements, but you can see right here are the colored icons. So if I click right here to enlarge this image and show you the difference. So these are the colored icons and these are the outline icons. So you can see straight away the difference between these icons basically in the outline seem like I showed you right here on this free back from Google material icons. And by the way, all of these resources which are mentioning are going to be linked in a PDF. Make sure to download that PDF and to explore all of these links and to access them yourself, simply click the link you want and it's going to take you there in your browser. If we go back to here, as I said, we have these outline icons and we have these outlined icons right here. Difference between these two is obviously the thickness and the style. So if I take you back right here to the material icons, you can see they are extremely simple. There are really simple to use. But if they take you right here to these travel icons, you can see that they are much more complex. They have and richer elements inside. They have multiple complex. They have different strokes even so, they're really complex. If you want to do stuff like that, once again, depending of the project in question, you are going to use either these simple icons or these complex icons. And finally, if I take you to these colored icons, you can see that we still have all of these strokes, but now we have color and with colored icons, you're going to notice sometimes that they're using one color or like in this case, they're using multiple colors. So you can see we have green, red, we have this dark gray, we have this light gray, and we have this almost white color. We also have this teal color, we have this yellow color, red color. So depending of the project in question and what you're doing with your icons, you're going to either choose one of these styles, either once a, which I showed you right here with the material icons. So really simple styles. Or if you're after these complex styles once again, then you can choose either outline or with color. And of course, because I am using Envato Elements for years now, I know that all of these icons are really high-quality, so you can adjust all of these colors. So for example, I want to use a my brand colors. Let's say that your client has two colors, for example, blue and red. Then if we go back to these ones, you can adjust all of these colors. So instead of yellow instead of green instead of all of these, let's say that you are using blue and red. You can easily achieve that result by simply adjusting these colors in your tool of choice. And for this class we're using Adobe XD. I'm also going to show that a little bit later and how you can adjust some of these icons to match your brand. But that's the whole premise of these colored icons. So once again, depending on what you are doing, what kind of a project you're working on is your project complex? What are you trying to describe to her visitors into users? Is it something really simple? Daniel going to use these free material icons can even use premium icons which are as simple as those material icons. Or on the other hand, you're going to use something much more complex, like these premium icons which I showed you from Envato Elements. 4. Icon Libraries, Packs And File Formats: Depending on what you are going to be using your icons, you're either going to choose icon library or icon pack. Difference is in libraries there are sometimes thousands of different icons, like the material icons I showed you. And it's not really feasible for you to download the entire library because as he said, sometimes those libraries can have up to 10 thousand or 15 or 20 thousand different icons. So to download and to sort through all of those icons is really difficult. Then you can use something called Icon jar, which sadly doesn't work on Windows, muddy does work on Mac. So if you're using Mac, then you can use icon jar really easily to navigate your way around these different packs. Majority of these bags are premium so you will have to pay for them. But if you're using something like material icons that you can get away with using it for free. And we are going to touch on free versus premium a little bit later in this class. But for now, let me quickly explain these different file types and file formats. So if I take you right here to Adobe X d, This is my chatty. You wake it and you can get it links going to be down in the PDF if you want to, but it's not mandatory. I'm just showing you here as an example. So what do we have right here is a UI kit, but you can just imagine it to be like a project you are going to be working on for your client. And let's just imagine that you are going to be using some icons. Then where can you find these icons? Well, like I showed you, you can find them online on these premium resources and premium websites like Envato Elements. And I'm actually going to open up this back in a second just to show you. But if I go back to XD, you can also find this plugin menu right here, and you can use something called icons for design. For example, there are many different plugins out there, and you can click right here to access the plugins menu. And then you can simply search icons here, press Enter or Return. And it's going to show you all of these different icon packs be born dead. Majority of these have free versions, so not all of the icons are free. They are just having some free versions and so free icons that you can use, because majority of these are icon libraries, as I mentioned. So they're giving you the option to use a free icons. So if you install one of these plugins, just be warned that it's going to show you all of these icons in. You're going to think that, yes, all of these are free, that's great. But they're actually not, they're just giving you some free options, but for a majority of icons you are going to have to pay. So if we go back to here, if you install this icons for a design plugin, it does work at the moment of recording of Desk class, but just make sure to understand that. It's not in my ability to make sure that all of these plug-ins work all of the time. Because just like the software, just like everything in life to just come and go. So make sure to browse these plugins if you're using Adobe XD, make sure to check on user voice and to checkout Adobe XD official blog just to see when they update these things, especially for the icons. Because as I said, sometimes these plugins just come and go. Developers get bored and they don't update them for months, so they don't work properly. And just make sure to understand if you are going down this route using these plugins in Adobe XD makes sure to familiarize yourself if the plug-in actually works. And if you have the option to use these icons in your premium or your free projects, which is really important because sometimes these icons can be used for pre free projects, but sometimes they can be used for pre and premium projects as well. So just make sure to familiarize yourself with the option they are offering you. If you're using a tool such as Envato Elements for example, they're giving you the option to use these assets however you want. And if we go back to Envato elements right here, you get the option to use all of these. So from stock video or music, sound effects, graphic templates, UI kits, photos, web templates, 3D models and icons, for example, you have the option to use them all however you want, whenever you want in whichever, whichever project you want. But of course, it's premium so you will have to pay for it. Just make sure to understand if you're using free software, free plug-in, free icon. Make sure to see the license on their website. Or if the plugin has a website, make sure to familiarize yourself because the last thing you want to do and to have in your life is the lawsuit from somebody else who created that acid. You're just thinking, oh great, that's all free. But in majority of cases, vast majority of cases, it's not free. You will have to pay for at least some like those plugins which I showed you that have free version, but they are not free entirely. So once again, before we move on, make sure to whatever you're using to familiarize yourself. If you're just using material, that's fine because that's open-source, created by Google, same like Google Fonts. It's free and you can use it however you want. So if we go back to here, as I said, we have this icon for design and if we have something like heart typed in right here, but you can see right here is all of these are icon libraries, so it's pulling free icons from dislike icon libraries. So this is the problem straight away. This is the problem which I mentioned in the first video of this class about constant changing of styles. Because this is the key problem I am seeing with being in designers out there. They just don't understand. They're using one icon from one backward library, other icon from other backward library. And they just don't have the consistency and their designs or look not polished, not professional to just look amateur. And you can really tell not just as a designer, but as a client as well, who is not a designer themselves. So once again, make sure if you're using these, make sure to familiarize yourself and to use all of these from the same style and from the same look and feel. Because once again, it will just make your designs look not professional and not polished. As you can see from this feather icon pack, for example, we just have one icon. But from this awesome icons back, we have multiple icons, but once again, not, not in the same style. For example, I want to outline icons because they will work well with my project. But you cannot find that style right here. For iconic, you can find different styles. But what if you're searching from other icon and you don't have it in iconic. For example, I want to use this iOS heart empty. For example, let's, I don't know, delivery. Maybe I'm working on a delivery site. You can see that there is not a single icon from that back. So that's a problem straight away if you want to achieve consistency and to make your designs look professional and polished. So what can you do in that case is you can either locate a library that has majority of these icons and use them for free if you're getting started. But if you're already got started and you have some traction, I really truly cannot recommend enough a service which are going to pay and have all of these icons available to you at your fingertips at any time. I'm now going to show you the premium pack. This is the big constant which I got from UA. It's a premium back. But if I zoom in a little bit closer, you can see that all of these icons are in this style. So outline style, there is no filled-in style, there is no anything else, just outlined style, which is great if you are using this style throughout your project. So because this has, I think, something like 240 or 2400 actually, if we zoom a little bit, yeah, I think it's to 2400 because we have all of these different packs and I simply ungroup them like this, but I can browse through online and see, but I think it's 2400 different icons. So you can just imagine that they have the icon for every single possible occasion. And if you are using this exact style, then you can use it throughout your project, throughout your design. Just make sure to use this exact style to achieve that consistency and that professional look. And you can do that because all of these icons look the same, because they are created by the same team of people. You can see that all of them look the same. They look like they belong to each other in this back. And you can easily customize them. You can change the color, you can change this outline, do whatever you want with them. You can see, for example, change this color and you can change the thickness of the border if you open it up in Adobe Illustrator file format. And I think this is the great time to talk about file formats. So basically, file formats are really important depending of the project you are working with. If you're working with JPEG images, you don't have the transparency option. What that means basically is whatever background color of your JPEG image it's going to show, and you cannot use that icon. You cannot change its color without changing the overall kernel of the image. So basically it's just the baked in image. It's a bitmap image. So when you zoom in really closely, it's going to lose its quality dramatically. So you cannot really use it for web page projects, for app page projects where you need to achieve scalability, you certainly cannot use it for print, because as soon as you start printing, especially on larger prints, you're going to see the loss of quality. There is also a PNG, which is basically just a bitmap image like a JPEG, but with the transparency. So with JPEG you have the baked in background image and you don't have any transparency. With PNG, you do have transparency. But once again, because it's a bitmap image, we still run into this issue of loss of quality. So as soon as you start zooming in, you're going to see that loss of quality. So for something like big prints, it's really a no-go to use a PNG. So what can you do in this case is I really truly recommend for all of your projects to work with SVG images. What that basically means, if I go back to here, if we zoom in extremely closely on this icon, you cannot see any pixels. So if we take you back one more time to this back because I downloaded for this particular example. So if I go back to Adobe XD shit right here on your computer, open up BSD or AI because Adobe XD is Adobe's product. And because adobe Illustrator and Adobe Photoshop, which this thing is, are basically products of Adobe. So you can easily open up any one of these file formats. And it's going to keep the consistency is going to keep the quality. Because once again, it's the product from the same company. So if we go back to here, BSD or AI is going to open up into folder with these particular icons from Envato elements. So these are travel icons. And what we have right here is AI for Adobe Illustrator, EPS, which is also one other file format which keeps the consistency. And it's a vector file format like Adobe Illustrator, like SVG, so it's going to keep the quality. But sadly, EPS is not supported by Adobe XD. So all of these icons are exactly the same, but in these different file formats, what we have below that is ICANN jar, which I mentioned previously. So if you're using Mac, you can always open up icon jar and add them to your collection. We have the PNG and I'm not dead against B and G. You can still use PNG icons and you can use JPEG images if you want to, for example, on social media posts because they don't require that great of a resolution. So you can still get away with using PNG images if that's the only thing that you have. But for anything bigger, for example, print or especially for something which people can zoom in really closely, like webpages, web projects and mobile apps are really truly recommend that you go with something like SVG. And if we go back here, we have the SVG. No difference between these. And you're going to see this in majority of other icon packs and icon types. Is this. When you're using SVG, it's going to separate these SVG in majority of cases and is going to show separate icons. So if we go back to here, you can see we have explained and unexplained, which is basically the amount of details. So if we go to here, we have color and we have outlined like I showed you. And it doesn't show anything because you have to open up SVG directly from folder, but they are there. It's going to show them basically as these PNGs. So hopefully it's going to show up here. So let me see if I can switch this. Now because we opened up this as a PSD and AI, but it doesn't matter. I can show that if I opened them up in a folder like this or expand color. So these are the SVG icons. This is what I was mentioning, is going to show them individually. So you can still drag and drop these SVG icons from here, which I'm going to show in just a second. But going back to this, what I would do in these cases is used AI, because AI or Adobe Illustrator is vector file format and it's not going to lose quality ever. You can use it for whatever type of project you're working on. You can use it for small sizes, big sizes. It's always going to keep the consistency of the quality and of the details in those icons. So if we go back to here what we have, we have color and color expand, which in this particular case of this particular back, is just the amount of details in richness of the details. But in some other facts you're not going to see that. And we have travel and travel expand. So basically travel is without color, traveled color is with color. So let's open up, for example, travel color because I want to show how you can change those colors. And while this opens up, let me minimize this and bring back this. Because I just want to show that you can still, these are SVG. You can click, drag and drop them into your Adobe XD file. And if we zoom in really closely, extremely closely, you can see that we don't have any loss of detail. We have all of these details contained inside of this icon. And if I go back to this icon pack that I just opened, you can see how it looks like. So let me actually delete this one. I can go back to here. Let me quickly show this one just so that you can see how it looks like. So if I open it up and hit Control 0 to snap into place, zoom in really closely on this. So you can see all of these different shadows. You can see the quality is really top-notch. So if we go back and select, for example, I don't know, let's go with this one. Hit Control C. Go back to here. Control V is going to paste in to wherever our board you have selected and you can simply move it into place. Now, because I already have some colors pre-prepared right here. If I want to fit this icon to work with my style, what I would do is simply, for example, select this. You can call control and click inside. And we have the border right here. If we select this border, you can see that it changed and updated this to this color. And for example, I want to do the same with this one. Maybe I can do here. And we have this right here so you can see and get the idea of how you are going to adapt these to work with your project. For example, this is going to be this light blue. And I'm going to use this color to work with this. And perhaps I have this orange, maybe I want to use it. And right here for these, perhaps I want to use this to be an or no white as well. We have the border so. Let's go with this one. And for this red one, Let's go with this one so you can get the idea of how easy this is to adjust and would just couple of clicks. You can easily adjust these icons to work with your style. Of course, this is with the colored icons, so you can see how it is now. So if we take you back to how it was before and how it is now. So you can see a complete change. And if we take you right here to the layers, you can see all of these layers. Now, what I wanted to show you as well is this. So if you are using those icons as the outlines. So if I go back to here, expand color, we have outline. And let's go with the elevator, which is the same icon. If we zoom all the way close, you can see we don't have any color inside. We just have this outline. So if we want to change this, what I would do is simply click right here and you can see that it update in real time according to my colors, which I need. So that's the option you have when you're using these premium icons. And finally, what I wanted to share with you is the actual export for the icons themselves. So sometimes you're going to export these icons for developers. If they're not using plugins, if they're not using Bridge options, like for example, Zeplin, and they're not using those there. And want to, for you to export icons manually, for them to use them in certain cases. So you can do that in Adobe XD as well. And to give you these export options, Let's go back to here, and let's actually select the icon already have right here. So I have these multiple icons right here. So if I select this one, click on it and go to the Layers panel, you can see it's Profile icon. So if I just want to select an export, this one, what I would do is hit Control or Command E. It will show me this dialogue. So once again, just remember what we talked about a minute ago about these file formats. So if I go back to here, we have is B and G. So as I said, PNG is great for social media and in my opinion, honest opinion, really nothing else. You can click right here to choose SVG, which is great. Once again, if you want to export it for anything with high-quality which requires quality. So make sure to do that. We also have PDF. So PDF is great to export if you have, for example, style guide with multiple icons inside and you just want to export that style guide for your client to check out and to see if that's something that they want. It's great for mood boards, for example, so they can take that PDF printed out and then make some notes, perhaps scan it, send it back to you. So depending of the use case, PDF can really be useful. And finally, we have JPEG. Jpeg is really useful if you just want to send it to your client for review just to see if that icon is what they really need. If that icon is something that they like. So perhaps you are going to use that JPEG, but for developers, for development, for development purposes, I would always, always, always recommend SVG icons. So that's basically it for icons are really hope you get the idea and you hope hopefully get the picture about how to use them. Differences between packs, premium packs, free packs. We're going to discuss that in a moment in a separate video in this class. Because I think it's really important, especially for beginner and designers, what to use and where to use it for which type of project. Just make sure to use it in according to license. So if you can use them for pre projects and majority of icons out there or can be used for pre projects, especially if you're working just for yourself, just for presentation purposes on Behance, Dribble for example, that's almost always fine. But just to be sure, make sure to check with the creator on their website just to see if you have appropriate license. 5. Free VS Premium Icons: Apart from the price, obviously difference between free and premium icons is in variety and enjoys. So with free icons, as I showed you in that plug-in in the previous video, sometimes you're just going to have variety of two, maybe three icons, but with premium icons, in light of the cases, you're going to have hundreds of different choices to choose from. So depending of your project, sometimes those three icons might not work properly. And more importantly, if you are keep using free icons, which is fine at the start if you're just getting started in this business. But as soon as you got some money, as soon as you've got some traction, I will always recommend for you to use premium icons because that's going to different th, you from beginners. And it's going to show to your clients that you care because you're going to give your designs this professional note and you're going to give it a distinction between all of these other designs at the market. As I mentioned, are really like to use Envato elements. Because on Envato elements you have all of these different options. And I just showed you the tip of the iceberg. And if I show you, for example, views these icons and they are from just icon, which is a great option on Envato Elements. You can see that this person created these icons and you can simply click right here to find exactly the same style of the icons we were just using. So if we go right here, you can see that they have over 100 different assets. So if we click to graphic templates and scroll down to here, no, if we go back to graphic, sorry, and scroll down, you can see that we have these icons in the exact same style. So if the consistency is something that you like, you can always browse through these different packs right here on Envato elements from the exactly the same Creator and majority of these creators are simply breaking down these bags from one huge, gigantic back, just so it's much easier for you as a consumer to access these bags. And once again, you don't have to use Envato elements are really like it because they are all of these things on Envato Elements which I mentioned from graphics to photos, to videos, to fonts, to music, to whatever else you might require. But this class is all about the icon, so that's what I'm mentioning right here. So you can just imagine that for example, I was using, I remember something like two years ago or something like that. And I'm using this for over five years now. This Envato elements are, when I was using icons from one Creator. It was not this creator, it was either creator, but it does matter. I was using one icons for a hotel project I was having. And then I had a car rental shop project. And I used the same creators icon from Envato elements for that particular project as well, which enabled me to browse much more simply because I was working on two projects at the same time. So I was looking at a one Creator icons and the fit said both of the projects. So both of the projects I was working on at the same time had the icons from the same creator, but they looked completely different because on one website I was using colored icons. On one website I was using outline icons, but they were from the same creator, so it was much simpler for me to access them. Once again, you don't have to use Envato elements just because service that you want, there are thousands of different services are there are really like to use them because as I mentioned multiple times, I really like how you have all of these things right here because there is not a project out there that it's not going to require it to use photos, to use different fonts. And speaking of fonts, It's the same story with fonts, with images as with icons, when you are using premium things. So premium icons, fonts and images, it's going to really make your design look polished and professional. And it's going to really make it stand out from the crowd. And it's really going to hopefully attract clicks or binds or sign-ups for your clients as well because it's going to look much more polished and professional then the competition, because majority of competition as especially for smaller businesses out there, are using websites like Unsplash or using websites like material icons for icons. And they all basically look the same. So all of the designers which are working on these websites are looking exactly the same. So this is your key benefit and point of differentiation. Makes sure if you can, as soon as you can to start using these premium icons and premium services, premium packs, just to differentiate yourself from the crowd, it's going to bring your design much more professional and polished look. And not to mention, you are not going to get in trouble because as I mentioned in previous examples, if you're using these free assets online, you are going to get in trouble if you're not using them correctly. So make sure you always to check with the licensing. So if we scroll all the way down here and we can exploit the license, click right here. So you can see one simple commercial license, so you can use it for whatever you want. You can register items each time you use them. Clear guidelines for what's not allowed. So you cannot resell, you cannot put them on on-demand services like, I don't know, for example. Create a market UI. So basically you cannot take whatever you find here and sell it as your own and future-proof licensing, which means even down the line, if you unsubscribe from their service, you are still covered by that license, which I really like. So for example, your client discovered you are covered and you still have the access to all of these icons previously. What that means basically is later down the line, if you're using one of these free softwares in free tools, chances are a debt, especially with the plugins, which I mentioned in one of the previous videos, that they're just going to get bored with that project. They're going to kill it and disappear. So later down the line, for example, your client calls, you, worked on a website and you use icons from that particular plug-in, for example. But that plugin is not existing anymore. So you cannot find icons which you used in the project at that particular time. You cannot find those icons anymore. So what can you do? You're basically stuck. You have to find other icons which are not the same as those icons. In turn, your design is not going to look professional, polished, and coherent like you did before, to have to find other ways to make that project work. That's why I like Envato elements because as it says right here, you can always go back, you can download, you can take a look at your previous projects and you can always download and these icons more. So once again, if your client wants you to work on future pages, future screens for their mobile app, future presentation, slides, whatever you're working on in the future. For example, they're just launching. You can always go back to Envato Elements, always go back to that particular category, that particular project that you're working on, take those icons as still continue in the same style, it using the same migrans, using the same service, using the same licensing as you did before, just continue working on that project. As I said, that's what I really like about these premium services. And with free services, you don't get it. Gary at right here is with the material icons, you do get that. So because they are free, open-source icons, you can use them all the time. But we all know how Google is with their products. So nobody guarantees you that they are not just going to kill Material Design icons at some point. So what can you do at that point? Once again, I'm not using this video and this class to pressure you to purchase anything. It's completely up to you. You can do whatever you want with your career. I'm not really pushing my opinion or new even. I'm just telling you how your designs are watched and looked at from somebody who is doing this for almost two decades. I hired and fired many designers in my career for both companies and for my own business. And I really truly can tell really easily if somebody was using free resources, especially with icons, but also with fonts, with images, or if they were using premium resources and you can really tell the difference between polished and amateur designs. So just keep that in mind once again, I'm not pressuring you to buy anything. You can do whatever you want with your career, with your life. So once again, no pressure for me. I'm just saying that it's going to look much more professional and polished if you're using premium, then free resources. 6. Tips For Best Results: In this video, I'm going to give you some tips for best results in my opinion. And these are really going to differentiate you from your competition, from other designers. And it's going to really differentiate your designs from other non-professional designers. So number one is, I'm reading right here from the list. It's much more simple for me. Use unique icons. So these unique icons are which I mentioned right here on Envato Elements or I'm not going to go back to it one more time, but use unique icons because that's going to differentiate you as a designer and your design is going to differentiate your client from the crowd. And it's going to really help you tell a better story. Because when you're using unique icons, It's really going to help your clients brand stand out because it's really going to associate those icons with that brand much more clearly. And it's going to make it stand out from the crowd much more clearly. Number 2 is make sure it makes sense. So whenever you are using these icons, make sure that they make sense. So don't just put icons some random page on, on some random place on the page and just expect your users to understand it and to see what you are seeing as a designer, nobody is a designer but yourself. Make sure that you know that. Make sure to understand that your client is not a designer, otherwise they will not hire you to be a designer. So just make sure to understand where you are placing these icons mixture. It makes sense. Make sure not to overwhelm them. Make sure that you are placing these icons in places where it does make sense. So just remember once again, icons are there to help facilitate the texts. So not to use too much text, but instead use an icon. Or if there is not enough space for the image, maybe you can use icon. If you're using sets of icons, if you're using rows of icons, make sure it makes sense, especially if you're telling the process or a story. Then in those cases make sure to use icons, but once again, make sure to use them when it does make sense. Next step is be consistent. So we talked about this in this class. If you're using icon from one library or one back, make sure it's consistent. So if it is outlined, mixture of all of your icons are outlined. If it is filled in mixture, that is the style you go for. If you're using colored icons like I showed you in Adobe XD, in that particular case, mixture to use colors which correspond well with that particular brand. Don't stray too far from those colors. Red and green are fine in some cases, especially for alerts, for danger, for job well done for correct execution, stuff like that. So you can use a red and green colors, also, maybe blue color if that's the corresponding color. And I'm planning to create a color class later this year. So make sure to check back and to see that. But in the icons case, make sure to keep it on brand. Make sure to see where you can use certain colors in your icons. Be moderate, so don't overdo it. You can use icons in some places, but don't go crazy and use them all over the place because clients are just going to be confused. Also, when you're being moderate mixture to explain your icons if that's necessary. So if we take it back to Adobe XD, let me take you back right here. So what we have right here is this tab bar and it doesn't have any text below it, but I can easily add the text for these icons. For example, here where it says, Maybe, it says, say profile, maybe this can be France, this is chat, this is setting, so Use the texts, explainers, but it does make sense and just be moderate is you can see I just have four icons right here. So I don't have 60 different icons that I have two rows of icons, I have four because that's really plenty enough. And I don't need to use more than that. I don't need to use less than that. It's just fine. And finally, one final tip is have fun because the process of design is to help solve your clients problems, but also for you as a designer to have fun. So if you are exploring these new icons that you just found out, maybe you are really excited to integrate them into your client's project. Make sure to have as much fun as you can, because that's going to allow you to be more creative, to be more evolving in the design itself, and to try new ideas, to try possible solutions that you taught, for example, are not possible just a few moments ago. It's all about making fun. It's all about having fun. So just make sure if you are using these icons to have as much fun as possible and to try to portray that fun. Did you have a onto usability of the design itself? So if you are, for example, creating a process, make sure to use these icons in a creative way, but just don't overdo it. Be moderate. Make sure to follow these tips which are mentioned in this video. Make sure to stay consistent. Make sure to use the same icon style. Make sure to use the same icon pack as much as possible and make sure to have fun. That's basically it, that those are all the tips for this video. And once again, just use your common sense when you're using these icons. Don't overdo it. Just make sure to use the same style and to be moderate and to have fun. 7. Your Class Project: Your class project for this class is to create something really simple. You can use any kind of icon that you want. But the only requirement for this class project is that they are in the same style. So just make sure to take a look at the class, especially in the first few lessons, to understand all about the styles. If you have, then make sure to pick a style, any style that you want, you can use outline color filled in whatever you want and to create something like this. So you can either create the entire screen if you want to, or you can just create this tab bar. To achieve this, you can simply go right here to the art board. You can create one of these artboards and it's going to show you as this. You can name it if you want to. It really doesn't matter. And then you can simply create this right here. What you can also do is you can have fun with your icons. You can create this artboard and create some sort of a process. For example, step number one is, let's say sign up. Step number two is create your account. Step number three is have fun for example. So just use three or four different icons for those steps. Create an art board like this one. And just when it comes to exporting, hit, select your art board, hit controller command E. Then you can explore your airport as a JPEG because it really doesn't matter. It's just an image and then simply uploaded to your class projects. And I'm really excited to see what you guys can come up with. It's not really all this difficult. You can do this in two minutes, three minutes really doesn't matter. I just want to see if you get the oral picture of this class as I intended. So just make sure to use the same style. Make sure to have fun, make sure to be consistent, make sure not to overdo it and make sure to, as I said, export it as a JPEG and simply uploaded to your class project for me and all the other students to see. I can't wait to see your class projects. 8. Conclusion And Resources: Thank you for watching this class. I really hope you found some value in it, and I really hope you understood how important icons are in your designs and how easy it is to get it right and to get it wrong when you don't know what you need to do or when you don't know what you need to do. Once again, make sure as I keep banging on about in this class, to be consistent, to have fun, to use one style of icons. Make sure to use if you can, these premium resources, you don't have to do that. But once again, it's going to make your life a lot more simpler, a lot more faster, because you are going to have a much bigger resources at your fingertips and much greater choice of overall icons that you can choose from. Once again, make sure to check out the PDF is going to be attached. You can click those links if you want to access everything which I mentioned in this class. And finally, don't forget to have fun because that's all it matters when you are designing. Yes, you have to solve client's problems. But if you have one, what is the point? Thank you once again for watching and I really hope to see you in one of my other classes. Take care.