Fri

29

May

2015

How to Find and Use Free Website Icons

We’ve said it before and we’ll say it again: to build a beautiful website, you don’t have to be a skilled coder or an expert graphic designer. There are many tools and resources available online to help you create a site that will leave your friends, family, and customers thinking you hired a pro.

 

how-to-find-the-best-icons-for-your-website-small
And here’s one more resource that will help your website go from good to great: icons. Icons can add tremendous value to your overall design. So in this post I’ll go over how to find and easily add icons to your website.
 

Why are website icons important to your design?

One word: communication. Icons help to communicate the main messages of your site by drawing a visitor’s eye to the most important content. They are like street signs guiding visitors to where they need to go.

 

A simple icon of a telephone can make it faster and easier for a customer to find the number to call your business. An icon of a map can help someone quickly find where your shop is located. And an icon of a shopping cart will get customers to checkout and make a purchase even faster.

 

Icons are also beneficial to your website because:
  • They are easy to recognize. If a new visitor comes to your site, icons will allow them to quickly scan and absorb the content.
  • They’re universally understood. It’s easy to create a multilingual website, but icons are also a great way to communicate the main messages of your site by using images that are understood regardless of language.

Example of website without icons Without icons, this portion of the website can look a bit text-heavy.

This is an example of a website with icons In the example above you can see how a few simple icons improve the entire look and messaging of your site.

 

How do you choose the right website icons?

First of all, don’t try and be too creative when you select icons for your site. If you’re looking for an icon to represent “search,” use the magnify glass icon. If you’re looking for an icon to direct people back to your homepage, use an icon of a house. Stick with the tried-and-true icons that are in common usage, rather than creating your own.

 

Not every piece of content on your site will have an obvious icon to match. Choose an image that is the closest to the meaning of the content it is representing. It’s also a good practice to accompany an icon with text if there could be any ambiguity. The most important thing to remember about icons is that they are meant to complement your content, not replace it.

 

Another thing to consider when choosing an icon is relevancy. Sadly a typewriter, record player, or tape cassette might be outdated representations for some of your younger audience.

 

If you’re unsure if your icon is an accurate representation of your content, run a usability test. This will tell you if people are understanding your signposts correctly.

 

This is another example of the importance of icon placement This Jimdo site successfully uses icons to complement text. It also makes a section of the site that would typically be very text heavy more visually appealing.

 

Tips for using icons correctly

There are four key factors to remember when using icons:

 

Size: You’ll have to play Goldilocks while configuring the size of your icons. Make sure that the icons are not so small that they are hard to see, but not so large that they overpower everything else.

 

Placement: Using columns is an organized and powerful way to arrange icons with text. Depending on the layout of your site, you’ll find icons might look best to the left of text, on top of text, or below text. Whichever you decide, put all your icons in the same location in relation to the text.

 

This is an example of the importance of creating icons that have a consistent look This is an example of the importance the placement of icons in relation to text.

Color: Try to stick to one color to keep a strong and bold look. A good place to start is to use a color that’s in your logo or other branding. Also keep in mind that color can be a very powerful tool and enhance a call to action. Follow this guide discussing the psychology of color to choose the best color for your icons.

 

Consistency: Choose icons that all have a similar look and feel. Take a look at how mixing the style of icons can interfere with the nice design effect.

 

This is an example of the importance of creating icons that have a consistent look It's best to use icons that are a consistent style and color.

 

Where to find free website icons

There are tons of icon libraries out there, many of which allow you to use well-designed icons for free or with attribution. I’ve listed a few favorites below.

 

Note: Many of these sites allow you to download the icon in many different file versions. For best results and to maintain fast load times for your website, we recommend PNG.


Iconmonstr

Iconmonstr has close to 3,000 website icons to choose from.
 
iconmonstr has close to 3,000 icons to choose from for your website Iconmonstr has close to 3,000 icons to choose from for your website.

What’s so great about it?
  • It’s free.
  • You can customize the size and color of the icon.
  • You can search for icons by category.
What isn’t great about it?
  • You can’t save the custom size and color. If you create an icon and adjust the size and color, be sure to make a note of the size and HTML color code that you used in order to apply to future icons.

 

Flaticon.com

Flaticon.com has a huge marketplace of free website icons.
 
Flaticon.com has a huge marketplace of icons for your website. Flaticon.com has a huge marketplace of free website icons.

What’s good about it?
  • You can search for icons by category.
  • On the site, you can save icons under “My Icons.” This is helpful during the selection process and makes it easy to go back and find icons you like or have already used on your site.
  • You can download icons by size.
What isn’t great about it?
  • Flaticon.com is free but there is one caveat; you must attribute the author. If you want your site free of attributes, you must purchase a monthly package.
  • All icons are black. To change the color, you will have to edit the icon yourself using PhotoShop or another design program.

Flaticons.net

Flaticons.net is another great source for finding and customizing icons.
 
flaticons.net is another great source for finding and customizing icons. Flaticons.net is a great resource that lets you customize the size and color of icons.

What’s good about it?
  • It’s free.
  • You can customize the size and color of the icon.
  • You can create a two-toned icon by customizing the background and icon colors.
  • You can search for an icon or browse by category.
What isn’t great about it?
  • Like iconmonstr, you can’t save the custom size and color.

 

Note: You can duplicate a color exactly by finding its “hex code”—this is a numeric value that identifies a color and makes sure you get a perfect match. To find a hex code, use a plugin like ColorZilla or EyeDropper. These tools can match the colors on any website, including your own.


Other resources

Looking for something a little more unique? Try searching for "free vector icons" on sites like freepik.com or Behance, where many artists share free icon sets. ("Vector" means you'll be getting the icon in a high-quality format that can easily be scaled up or down. It's the standard for web design.)

 

If you want icons that fit your brand, you can always turn to 99designs, where you can get custom-made icons to fit the exact look you’re going for.
 

How to add an icon to your Jimdo website

Adding an icon is just like adding a photo to a Jimdo site: use a Photo element. Add a Photo element where you want the icon to be, then upload the .PNG file of the icon. You can resize and adjust the position of the icon in the settings below. If you want the icon to link to another page on or off your site, click the link icon and select Internal Link or External Link.

 

This is how to add an icon to a Jimdo website You can easily add an icon to your Jimdo website using the Photo element.

 

Adding social media icons

With Jimdo, there are two kinds of social media elements.

 

1. Sharing: You can let people share your content on their own social media accounts using the Share Buttons element. Learn more about how to do this over at our Support Center.
This is how to add social share buttons to your Jimdo website
2. Following: You can encourage people to follow you by linking directly to your own social media profiles. To do this, you can use the built-in Facebook, Twitter, and Google+ elements. Or you can find your own social media icons and upload them as Photo elements per the instructions above. Set the link for each icon to your corresponding account (i.e. link the Facebook icon to your Facebook account).

 

This is how to add social media icons to your Jimdo website
Alternatively, you can add follow buttons to your site by installing a widget like AddThis or POWr.io.
 

Conclusion: use icons to improve the design and readability of your site

SEO expert Neil Patel suggests that one of the most important factors to keeping visitors on your site is readability. Icons are a simple yet effective way to make your website more readable. Just remember to choose an icon that clearly communicates and complements the text and follow the four main factors: size, color, placement, and consistency.
 

Melissa

Melissa Myers

Content Marketing and PR at Jimdo

 

Melissa joined Jimdo in August 2014 to support social media, public relations, and the blog. She has experience in marketing ranging from event management to content marketing. When Melissa isn’t drafting a blog post, you can find her watching stand-up comedy, attending a concert, or rooting for the Oregon Ducks.