Using Icon finder for free website UI social icons
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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.
Hello! In this video, what we're going to do is, we're going to get these images, these icons, these social icons, and we're going to get them for free, from a place called Iconfinder, then we're going to go off and change the colors to match our design. Let's go.
First up, we need to use Iconfinder, to go off and find our icons. I love Iconfinder. There is a lot of free icons online, but there's so much real bad stuff out there that it is hard to sift through. People at Iconfinder have done that for us, and so, we're going to type in, say, 'Social'. This could be your Home, it could be products, any sort of icon you're looking to do-- What you need to make sure is, it depends. I've got mine on free, and commercial use, no back link. That just means that I have to pay for it, I don't have to add a link thanking them, that's totally up to you on how you want to work. I want to make sure mine's a vector as well, as I don't want any pixelation, I want it to scale nicely. But the prices are pretty cheap. So if I look at 'Any', the icons are, buy for a dollar, so I'm not going to break the bank. If there's not one you can find on the free option, you often pay for it, and it kind of supports this site as well.
So, what I'm looking for is vector free, no back link, so I can go off and use it. The cool thing about this is, not only does it have lots of icons. When you click on one of them, it has, often a part of a larger group, and that's what's really handy. It's 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 going to download, say a group of these ones. Which version should I get? The SVG, the PNG, the AI, or the CSH? Which one do I want? Either SVG, or AI would be perfect for us. This Photoshop version kind of works as well, but the PNG one is not scalable. So we want one that stretch inside and out, and these SVG, and AI one is going to allow us to recolor them, because this master color's 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. I've downloaded some for us for our course, they're in your exercise files, and we're going to go bring them in now, and go and change the colors. Thank you, Iconfinder, you're awesome.
So what I’m going to do is, first of all I'm going to 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' to get it to go straight. And this one has no fill, no stroke, and I'm going to use, maybe that green that we've been using, or maybe a dark gray, or light gray. Here you go. Guides off.
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', 'Place'. On your 'Desktop', you should have your 'Exercise Files', and here's all the social ones I want to bring in, and there’re SVGs that I've decided to use. It doesn't matter, AI or SVG. I'm going to go click, click, click... all on top of each other, just so that when I select them all, I can hold down 'Shift' and resize them all. Now, cool little shortcut is, if you're holding 'Shift', it can strain the height and width, perfect, we already know that, but if you hold down your 'Alt' key on a PC, or 'Option' key on a Mac, it does it from the center, and quite often that's quite useful, instead of trying to-- You might like it, you might not.
How big are they going to be? Not sure about that yet, but that's about it. So what we'll do is, we'll just kind of like unpick them all, because I want to change the colors of them first. This is a nice quick way to do it. So what we're going to do is, these are all grouped together at the moment, but let's say I want to change and match some of my colors. What I can do is, first if all I’ll zoom in. So we'll do this Facebook one first. There's a couple of ways of doing it, the easiest way is, we could ungroup all of these guys, because at the moment they're all kind of locked together, so I want to change this blue background, but I'd be changing them all at this stage.
So, little trick is, we'll be using our black arrow quite a bit, we're going to use the white arrow. The black arrow moves things around physically, and the white arrow moves around little pieces within that little group, so watch this. I'm going to click off in the background, and then I click just on the corner here, and you can see I can start kind of playing around with them even though they're grouped, using this white arrow, so click off in 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 in Illustrator. Because I want all of these colors to change rather than doing them all individually, so I can go to 'Select', 'Same', 'Fill Color', so I want to pick everything on this document that has the same fill color as him, and you can see it's picked all of these guys. That means I can quickly, and easily go and change the colors. Pick the color from your colors. And if this was a multicolored icon, you can just use the white arrow, and click on different parts of it, and decide, and go and change them all.
The only trouble with these, say if I wanted to change the color of the white, the Twitter logo here, if I click on white and go 'Select', 'Same', it's going to 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, but it will 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, we'll order them in the next video, we'll look at aligning and distributing our icons in Illustrator.