Icons for Your Website

Icons, on the web, are little images that provide information.   Some common places where we see them:
Social media icons are clickable buttons that take you to the site owner’s social media accounts. Here we see Twitter, Facebook, and LinkedIn icons in colors that complement the website’s overall design:

Clickable icons can also be used for calls to action. Here we see custom icons for a variety of actions the site owner wants website visitors to take:

Icons can also be used to draw attention to and clarify information, as in infographics. While infographics like the one below are the most obvious case, icons can be part of a graphic strategy for a web site.

So where do icons come from? One popular new option is to use an icon font like Modern Pictograms, the one we used to create the icons  in the screenshot below:

Your designer might make icons just for you, but usually they’re bought or shared just as stock photos are. Here are a few — as you can see, there’s an incredible variety available.

One of the best sources of icons for your website is www.istockphoto.com; they have hundreds of thousands of inexpensive icon sets designed for social media buttons, infographics, website actions, and all sorts of other purposes. You need hand-drawn utility icons for an e-commerce site in .ai format? No problem.

If you have more time than money, you can find lots of free icon sets online — artists will often share an icon set in order to get visibility, so many designers will allow free downloads. As always with free downloads, be careful! First, a free download is a popular way to spread a virus. Second, there are often additional download buttons near the one that gives you the icon set — intentionally confusing buttons that take you to ads or download free trial software onto your computer.

When using free icons, you must also pay attention to the rules set by the artist. Some require a link back to their website, some do not allow their icons to be used on commercial websites, many forbid any changes to the icons.

Here are some good sources for free icons:

• Iconfinder collects free icons from all over the internet.
• Icon Archive has a very nice user interface — it’ll show you the latest sets or let you browse by category and clearly states the allowed usage.
• Iconspedia has a cluttered and irritating website, but lots of icons, easily downloaded from the site — you don’t have to go back to an artist’s website to download.
• Deviant Art has unusual icons. Deviant Art is one of our favorite free image sources, but you should be warned that there is no search query so innocent that you won’t be shown nudity and gore. Search for “icons,” “utility icons,” etc.
• Smashing Magazine has a curated collection of free icon links. You may or may not find just what you want, but they’re all beautiful.

Choose icons that not only have the meaning you want (like “here is where you can upload your files” or “click to follow us on Twitter”) but also the color, mood, and style that best suits your company and your website.

When you send icons to your designer, be sure to send them in .png format (unless you’re asked for something different). If you just save an image of an icon from the web rather than downloading it, you’ll generally end up with a picture of an icon with white bits around it. It won’t work for your website.