Skip to main content

Where To Get Free Icons For Figma

Lesson 17 from: Figma UI UX Design Essentials

Daniel Walter Scott

Where To Get Free Icons For Figma

Lesson 17 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

17. Where To Get Free Icons For Figma

<b>In this lesson we will discuss where you can get free icons for Figma and what to look for when downloading icons for Figma. We will also give examples of websites to download free icons.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

Where To Get Free Icons For Figma

Hi, everyone. Let's talk about where to get free icons. I'm not gonna 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 fig file. So I'm using icon finder.com. I like it. Um, 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. Ok. So, uh what you're looking for is, let's say I want the shopping cart icon. Ok. 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 stalling that thing to gauges the load anyway. So there's a couple of things on most of the sites. The main thing is all to do with how free it is. Ok, because it's free and then there's properly free. So free, all licenses. And I'm gonna use the one that's for commercial use. Ok. And this one here requires you though to use it for commercially, but you have to link b...

ack to them, which is totally fine. You might find good free stuff in there. Um This one here requires commercial use, but it doesn't require a back link. So I don't actually have to acknowledge the people that made it. So in here, pick anything I say, pick anything. I'm gonna find a shopping cart that looks like a shopping cart. Here is one, pick something quickly. Dan, people are watching. All right. This one. All right. So this one here, I'm gonna 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 the PNG is probably the one you already know SVG. You may or may not know already. So I'm just gonna pick a um a smaller icon version of this PNG and I'll show you the difference. I'm gonna download both of them, stick them on my desktop and this SVG, let's compare both of them and how FIG A deals with both of them. So um 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. OK. So let's bring in a file. I'm gonna do this way, place image. OK? And let's bring in both of them. You can bring in more than one image at a time. OK? But holding shift and clicking both of them, let's click open. Can you see? I got like a number two there, you can even see my little icon look a little trolley. OK? So I'm going to click hold shift so that when I drag them out, they are not going all wonky like that. OK? 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. OK? On here in here, you can download like the really big version. Let's download that and it will look fine. Um So let's bring in another one command shift K OK? We've got this other PNG. The difference is, can you see that size of that one? OK. So I can get a good quality PNG. But my SPG is one kilobyte. This is 100 and 12 kilobytes. That's the reason we don't, you know, we prefer to use SVGS. Uh So it looks good but it's ginormous. So can't use UPNG. Uh 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 SPGS into fig A. What they do is we kind of looked at this earlier. Can you see they came in as a frame? OK? Inside of that frame is a group inside of that group is a vector. That's all we really want. So I'm just gonna copy it. OK? Come out of that frame and have paste. I didn't actually come out of that frame. You can drag it out of the frame. So it's just sitting there, no man's land. So I'm gonna 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 wanna 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. OK? 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. OK? But obviously SVG is scalable. That's what the S and SVG is W OK. And yeah, we can go into object editing mode which you know about already. OK? If you like, I love this, but I really want a double click, start going in. I really want a Spiky Hindo then OK? It's 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 uh free stuff is part of the fig A community. So if you go back to your like little house along the top here, there'll be an option uh somewhere around here called FIG A community. It's kind of new. It's better at mine 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. OK? So in here, you can do things like icons, OK? 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 icon finder. 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 fig A. OK? So let's have a look, let's have a look at the fig pic. OK. Uh fig I just means fig A has decided this is awesome and everyone should look at it. So what we can do is when we are dealing with the community for fig A, you end up downloading things. OK? 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. OK? So let's click on duplicate and basically you get your own copy saved to your fig a kind of flow. So now let's have a look, have a look around here. There's two different pages. Oh Lots of good icons. OK? 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. Ok, 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. Ok. Um I was like, have I done something wrong? It eventually loaded? OK. 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 grow something out of it, but now it's part of your flow. OK? You can right click it and delete it. OK? But everything you open or duplicate in fig A 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 fig A does. OK? It's not saved your hard drive. It's part of your cloud kind of online login stuff. It also means that after a little while you're gonna have a ton of things open in here and it's gonna 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. OK? So we've got a couple of files open. We've got the one we're working on. Plus our little unicorns unicon. Is that unicorns? Anyway. Uh So let's go and have a look. Now, it would depend on how these things have been created. These things are being created as what's going to be called a component later in this course. So this can be a little bit tricky for us at this level. OK. So let's just do it anyway. Let's go copy. I really need this. I like it from my wireframe. I'm gonna 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. OK? 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 gonna 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 un grouping, OK? We're gonna see 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 or 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, ha ha. And that is the community. I kind of introduced it earlier on. OK. Getting into the community because there's so much good stuff in there. You can find good wire frames and good kind of like layouts and lockups and cards and icons. And we're gonna be used to copying and pasting them and sticking them into our document and seeing what happens they come through as components, sometimes, sometimes as frames, sometimes they're just groups and they're real easy. But for the moment I'm just gonna 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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES