Hi everyone, let's talk about where to get free icons. I'm not going to talk specifically about websites, even though I'll give you a couple, it's more about what you're looking for, when you are downloading icons for our Figma file.
So I'm using iconfinder.com, I like it, there's lots of free stuff on here, good paid stuff as well, but if this website's not here, when you go visit the internet, there's plenty of free icons. So what you're looking for is, let's say I want the shopping cart icon, that's what I need for my mock-up here, what you're looking for is a particular file format, it's called an svg, I'm installing, that thing took ages to load. Anyway, there's a couple of things on most of the sites.
The main thing is all to do with how free it is, because it's free, and then there's properly free, so free or licenses, I'm going to use the one that's for commercial use. This one here requires you though to use it commercially, but you have to link back to them, which is totally fine. You might find good free stuff in there, and this one here requires commercial use, but doesn't require a backlink, so I don't actually have to acknowledge the people that made it.
So in here, pick anything, I say pick anything, I'm going to find a shopping cart, that looks like a shopping cart, where is one? "Pick something quickly, Dan, people are watching," all right, this one. So this one here, I'm going to open it up, and what you'll find in most of these sites is, there's a png version and an svg version, let's look at both of them.
The png's probably the one you already know, svg, you may or may not know already. So I'm just going to pick a smaller icon version of this png, and I'll show you the difference. I'm going to download both of them, stick them on my desktop, and there's svg, let's compare both of them, and how Figma deals with both of them.
So, is there a right one and a wrong one? Yes, svg is better, but more complicated, but now that we know what frames are and groups are, it's actually not that bad. So let's bring in a file, I'm going to do this way, 'Place Image', and let's bring in both of them. You can bring in more than one image at a time, by holding 'Shift' and clicking both of them, let's click 'Open', can you see, I've got like a number, little 2 there, you can even see my little icon, look, a little trolley.
So I'm going to click hold 'Shift, so that when I drag them out, they are not going all wonky, like that. So hold 'Shift' on your keyboard, that's the reason we have a svg rather than a png. I acknowledge that I downloaded a very small version, in here you can download like the really big version, let's download that, and it will look fine.
So let's bring in another one, 'Command-Shift-K', we've got this other png. The difference is, can you see that, size of that one, so I can get a good quality png, but my svg is 1 kilobyte, this is 112 Kilobytes, that's the reason we don't-- we prefer to use svgs. So it looks good, but it's ginormous, so can't use your png, it's transparent, which is awesome. This svg is transparent, kind of, you're like, "Well, that's not transparent," it's got a white background. svgs into Figma, what they do is, we kind of looked at this earlier, can you see, they come in as a frame, inside of that frame is a group, inside of that group is a vector, that's all we really want.
So I'm just going to copy it, come out of that frame and hit 'Paste'. It didn't actually come out of that frame. You can drag it out of the frame so it's just sitting there, in no man's land. So I'm going to click on this thing, I kind of like, that's what I do, I don't want it in a frame at the moment, I just want to kind of yank it out and delete the original frame, just so I've got the vector sitting, lying around, happy days.
Now it's transparent, and it is colored, so I can go through, use my Eyedropper tool, and actually start using these now, whereas the png, we can't change the color, we could, we can go to Photoshop, change it, but obviously, svg is scalable, that's what the "s" in the svg is. Yeah, we can go into object editing mode, which you know about already. If you're like, "I love this, but I really want a…" - double click, start going in, - "I really want a spiky handle, Dan." Looks like a digger, anyway you get the idea, svgs are better. So whenever you are looking for icons, free or not free, make sure you get the svg.
All right, another great place to get free stuff, is part of the Figma community. So if you go back to your, like a little house along the top here, there'll be an option somewhere around here called Figma Community, it's kind of new, it's better in mind, depending on how long in the future, it'll get more and more robust, there is just amazing stuff in here, and most of it's free.
So in here you can do things like icons, and you will find loads of great icon sets, created by people that we're allowed to use. It's not as searchable as something like iconfinder, if you just want to, like a, "Hey, I need a sharing icon, or a social media icon," you have to kind of do a little bit more searching through this, but there is great stuff, and it's kind of already in Figma. So let's have a look, let's have a look at the Fig Pick, Fig Pick just means, Figma's decided this is awesome, and everyone should look at it.
So what we can do is, when we are dealing with the community for Figma, you end up downloading things, so let's have a little look. Let's kind of-- you can go into it to preview it, but eventually at some stage, to get all the stuff out of it, you need to do something called duplicating. So let's click on 'Duplicate', and basically you get your own copy, saved to your Figma kind of flow, so now let's have a look. Have a look around here, there's two different pages, ooh, lots of good icons, and before we actually copy and paste them out, let me show you what happens to these community files, or at least anything you've duplicated.
Let's go back to 'Home', what you'll notice now, in my Home-- I'm kind of lost, so I'm going to go to my little drop down here, my blurry email address, and I'm going to say, pick my name. Let me get back to kind of home base, where we were before, that took a while. Yours might do the same, so I'll leave it in there, I was like, "Have I done something wrong?" It eventually loaded.
What happens is, it duplicates into your drafts, you'll notice that now I have unicorns, I'm like, you kind of opened it, just to grab something out of it, but now it's part of your flow, you can right click it and delete it, but everything you open or duplicate in Figma ends in this, like, it's part of your world now. That's the kind of benefit, I guess, of working in the Cloud, which Figma does, it's not saved to your hard drive, it's part of your Cloud kind of online login stuff. It also means that after a little while, you're going to have a ton of things open in here, and it's going to be hard to know which is yours.
So we'll look at searching and finding the files you want later on, and you might be really tidy, and actually go, delete the ones you don't want anymore. So we've got a couple of files open, we've got the one we're working on, plus our little unicorns; unicorns? say unicorns, anyway, so let's go have a look.
Now, it would depend on how these things have been created. These things have been created as, what's going to be called a component, later in this course. This can be a little bit tricky for us at this level, so let's just do it anyway. Let's go copy, I really need this, I like it for my wireframe, I'm going to go back to this document, and I'm going to paste it, and what will end up happening is, this weird file turns up with a weird icon, it ends up in our Assets folder, used in this file, there it is there.
It's a special thing that we're going to learn later on, for the moment though, what we're going to do is, select it, right click it, and say, 'Detach Instance', you're like, "I don't know why I'm doing that." Don't worry, we'll learn about it later on, but it means you can just say it's kind of like ungrouping, we're going to say, detach the instance, you can see, it kind of goes back to that frame, and you might decide, actually, like we did before, you can keep the frame, that works fine, or you might go, like we did before, and like get it out of that frame, drag it out, so it's kind of just hanging out by himself, where is he, there.
Let's rename it, let's call it "File", and in my case it's on the, where is it on? It's ended up on a weird page, so let's say that I want it on the Checkout page, it's currently not on the Checkout page, there we go. That is the community, I kind of introduced it earlier on, getting into the community, because there's so much good stuff in there. You can find good wireframes, and good kind of like layouts, and lock-ups, and cards, and icons, and we're going to get used to copying and pasting them, and sticking into our document, and seeing what happens. They come through as components sometimes, sometimes as frames, sometimes they're just groups, and they're really easy, but for the moment I'm just going to tidy up, I don't need these guys, a kind of an example of what to go get and find, and I will see you in the next video.
Now we know what we need when we're getting these free icons, let's get some icons onto the page, ready for our wireframe.