How to find great FREE Icons for your Website using Icon Finder

Here’s a great way to find a free icon to liven up your website.

Let’s say you are looking for an RSS icon. (Not sure what RSS is? Just check out this video…)

First, go to IconFinder.net (this links opens a new window)

Here’s what the home page looks like…

Now, type rss into the Search box and click on the Search button. (There are some handy dandy search tips here.)

You’ll get a page of search results something like this…

It’s best to narrow down the results to icons that are allowed to be used for commercial use. So, select ‘Allowed for commercial use’ from the drop-down menu I’ve circled in red in the above screenshot. Up close it looks like this:

Note that this doesn’t mean you’re necessarily completely allowed to use these icons – some designers require you to link to their websites and credit them (in your footer, for example). But we’ll cover that shortly…

You have other options in the menu that can help you find the right icon faster. Let’s take a look at them now…

ICONS PER PAGE

I like to click the third icon here (with the triangle-arrow under it) to see a lot of icons on the screen at once. I have a large screen and a fast internet connection. If you have a smaller monitor and/or a slow connection, then I’d recommend setting it to show fewer icons on the search result pages.

ICON SIZE

This doesn’t change the size of the icons. It narrows down your  search results to icons within the size range you specify. If you have the slider dragged all the way across, it will show all icons from 0 pixels wide/tall (pixels being a unit of measurement) to 128 pixels wide/tall.

In this example below, you’re narrowing down the results to icons under 32px wide/tall…

And in this one, you’ve narrowed down the results to icons between 16px and 48px…

BACKGROUND COLOR

You have three option – white, transparent and black. This doesn’t actually change the color of the icon’s background – it just helps you to preview how it would look on different backgrounds.

All properly-designed icons have a transparent background so that they’ll work with any background you have on your website.

If you’re putting the icon on a part of your website with a white (or light) background, you can check it will look good.

If you’re putting it on a dark background, preview it using the black option. Check that the edges around the icon is smooth.

Notice how the shadow under this icon has disappeared on the black background?

The transparent option shows a gray checker-board pattern behind the icon. Somewhere in history this checker-board pattern began being used to represent a clear or see-through background. You should be able to see the tiny squares go all the way to the edges of the icon, to show that the icon has a cleanly cut out outline.

You can also see if any parts of the icon itself are transparent. See how you can see the pattern through the shadow under this icon? That’s why it disappeared on the black background. But on a white or light-colored background, the transparent shadow will look great.

What to watch out for

So, what does a poorly-designed icon look like?

Here’s an icon that looks fine on a white background…

But if you were to put it on a dark background, look at how untidy the edges are…

In comparison, there are no ugly white bits on the corners of this well-designed icon…

I’ve found a good icon.. what’s next?

Now it’s time to check the usage conditions (the license) to see if you need to give credit to the icon creator or if you can just use it with no attribution. Just click on the INFO link on the icon you like…

Some of the less obvious licenses give a link to a full explanation of how you can use the icon. I tend to avoid icons that make you give credit to the creator, unless the icon is really worth the trouble.

In this INFO box you can also see if the icon is part of a matching set. It can be worthwhile to check this out, because you may need other icons and it’s nice to have them all from a matching set in the same style.

I agree with the license… how do I get the icon?

If you haven’t already, just click on the icon you like, and you’ll get a page like this…

Make sure you have the best size for your project. If it comes it other sizes, they’ll be shown on this page.

PNG or ICO format?

You’ll want to download the icon as a PNG file if you plan to use it on your website. Just click the PNG download link and save the image onto your computer.

If you use WordPress and you want to use the icon in a Post or Page, you can now go ahead and upload it.

Any questions? Do you know a better way to do this? Please leave a comment and we’ll discuss it.