Using Icon finder for free website UI social icons

This lesson is exclusive to members

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Oh, in this video what we're gonna do is we are going  to get these images, these icons, these social icons,  and we're gonna get them for free, okay. From a place called Icon Finder. Then we're gonna go off and change the colors  to match our design. Let's go. Okay. First up, we need to use Icon Finder, uh, to go off  and find our icons.

I love Icon Finder. Um, there is a lot of uh, free icons online. Okay? But there's so much real bad stuff out there  that it's hard to sift through. Uh, the people at I Icon Finder haven't done that for us. Okay?

And so we're gonna type in say social,  this could be your home, it could be products, any sort  of icon that you're looking to do. Um, and what you need to make sure is, it depends like the,  I've got mine on free and commercial use. Okay? No backlink. Okay? That just means that I don't have to pay for it.

I don't have to add a link thinking them. Okay? Uh, that's totally up to you on how you wanna work. I wanna make sure mine's vector as well. Okay? 'cause I don't want any pixelation.

I want it to scale nicely. Um, so, um, but the prices are pretty cheap. Like if I look at any, like the icons are  buy for a dollar, okay? So they're not gonna break the bank If there's not one you,  you know, you can't find one in the free option, go off  and pay for it and kind of support this site as well. Um, so, uh, what I'm looking  for is factor free, no backlink. Okay?

So I can go off and use it  and yeah, the cool thing about is not only does it have lots  of icons when you click on one of them,  it has often the part of a larger group. And that's what's really handy is getting them all kind  of looking the same  and having a similar kind of look and feel to them all. So I love that about this site here. So this is a test for you. We're gonna download, say a group of these ones. Uh, which version should I get?

The SVG, the P and g, the AI or the uh, CSH. Okay, the Adobe shape. Which one do I want? Okay. Either of the SVG AI will be perfect for us. This Photoshop version kind of works as well, but the p  and g one is not scalable.

Okay? So we wanna be one that can stretch inside and out  and these SVG and AI ones is gonna allow us to recolor them. 'cause this mustard color is not doing it for me. Neither is this blue. It's not matching our colors. So what you can do is you can go through  and download all the ones you want.

Okay? I've downloaded some for us for our course. They're in your exercise files  and we're gonna go bring them in now  and go and change the colors. Thank you. Icon finder. You are awesome.

Okay, so what I'm gonna do is, first of all,  I'm gonna turn my guides on and I want a little line  that runs across the bottom here. It's just part of my design. I'm holding shift, okay? To get it to go straight. Okay? And this one has no fill, no stroke.

And I'm going to use maybe that green that we've been using. Where is the green? Okay. Or maybe a dark gray or light gray. There you go. Guides off.

Okay,  so now I want my social icons to be down here. So let's bring in all of our shapes. So let's go to file and go  to place On your desktop. You should have your exercise files. Okay? And here's all the social ones I wanna bring in.

Okay? And they're SVGs that I've decided to use. It doesn't matter. AI or SVG. I'm gonna go click, click, click, click, click, click,  click all on top of each other just so  that when I select them all I can hold down shift K  and resize them all. Now a cool little shortcut is if you're holding shift,  it can change the height and width.

Perfect. We already know that. But if you hold down your alt key on a Mac, on a PC  or option key on a Mac, it does it from the center. And quite often that's quite a useful, okay, instead  of trying to, yeah, you might like it, you might not. How big are they gonna be? Not sure about that yet.

Okay. But that's about it. So what we'll do is we'll just kind  of like unpick them all  'cause I wanna change the colors of them first. Okay? This is a nice quick way to do it. So what we're gonna do is these are all grouped together at  the moment, but let's say I wanna change a  match with some of my colors.

What I can do is first let zoom in. So we'll do this Facebook one first. And what, there's a couple of ways of doing it. The easiest way is we could ungroup all of these guys. 'cause at the moment they're all kind of locked together. So I wanna change this blue background,  but I'd be changing them all at this stage.

So little trick is we've been  using a black arrow quite a bit. We're gonna use the white arrow, okay? The black arrow moves things around physically, okay? And the white arrow moves  around little pieces within that little group. So watch this. I'm gonna click off in the background  and then I'm gonna click just on this corner here  and you can see I can start kind of playing around  with them even though that,  that group using this white arrow.

So click off on the background, click once on the circle,  you'll see it's picked here. And what I can do is I can do  something quite cool and illustrate. I can say I, 'cause I want all of these colors  to change rather than doing them all individually. So I can go to select same fill color. Okay? So I wanna pick everything on this document  that has the same fill color as him.

And you can see it's picked all of these guys. Okay? It means I can quickly and easily go and change the colors. Okay? Pick the color from your colors, okay? Um, and if this was a multicolored icon,  you could just use the white arrow  and click on different parts of it.

Okay? And, you know, decide and go and change them all. The only trouble would be is say if I wanted  to change the color of the white, um,  the T Twitter logo here. If I click on white  and go select same, it's gonna pick white  that I've used anywhere else in the document. I don't think I've used white. I've used that off white.

Okay? But it'll go and change it all in one big go. So it has some limitations when you start using  that select same. Alright, so we've got these guys, uh, we'll order them. In the next video we'll look at, uh, aligning  and distributing our icons in Illustrator.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025