Icons are like the road signs of the internet: They provide instant, universally understandable cues for your website’s visitors. Icons play a crucial role in a website’s overall aesthetic while serving to organize and filter information into easily distinguishable categories. They’re also tantalizingly clickable, and great for use on mobile devices when your fingers can’t quite manage to get to a text-based hyperlink. In this blog post, we’ll deconstruct the world of icons, from when to use them to how to find them.

When to Use Icons

Design is about communication; if the information on your website is difficult to follow or too densely worded, visitors aren’t likely to stick around for long. Icons fill this gap in understanding by bridging the gap between visual and textual content.

Here are 3 ideas for where to use icons on your site:

Use Icons As a Replacement for Bullet Points

Why use an ambiguous dot when you can use a context-specific icon instead? If you need to make lists on your website, trying prompting each point with its own icon, one that will provide a hint as to what visitors are in store for. Icons can be especially helpful in this case if your list is rather long and needs to be broken up into bite-size pieces.

…Or to List Product Features and Values

Breaking down the key features of a product can be tricky; oftentimes, it’s difficult to explain in a sentence or two a project you’ve poured your heart into for months or years. Icons help to simplify this challenge by providing visual markers, easily separating all the different key features you want to showcase.

…Or For Headings and Sections

Icons are also helpful when it comes to smooth navigation, instantly indicating to viewers the path they need to take to find the info they’re looking for, while visually separating diverse content.

Where to Find Icons

We just added a few batches of icons to IM Free. The icons are 100% free to use and can be found as PNG files or PSD files so all you web designers can edit them as you wish.

The web is awash in free and reasonably-priced icon sets ready and waiting for you to use. Here are just a few of our favourites:

DefaultIcon is a 100% free set with 653 minimal and stylishly-designed black & white icons to choose from. Files can be downloaded either in .png or in .eps form, the latter of which makes it easy to scale the icon to the right size. DefaultIcon is licensed under Creative Commons, so if you are using their icons for commercial purposes, they ask you to credit them.

IconSweets is a free (yet fairly limited) set of nicely design icons by the interface and icon designers YummyGum. More recently, they came out with IconSweets2, a more complete set of icons with plenty of different styles to choose from. Icons are offered in a number of different formats to suit your needs, from “pre-styled” .png’s to free .psd files. IconSweets2 isn’t free, but at $10 for unlimited use of 1000+ icons, it certainly is a bargain.

Iconic touts itself as the “first and only icon system created for the modern web”, and their service doesn’t disappoint. The newest icon service on the block, Iconic offers a range of gorgeously designed icons that are fully customizable, responsive, and simple to use. You can change an icon’s colour, its direction or angle, and even individual parts of a single icon. Iconic’s icons are “SVG” or “scaleable vector graphics”, meaning that they transform effortlessly depending on the size and resolution of a user’s screen. Here’s the catch to this impressive service: it doesn’t come cheap. Non-professional access to Iconic costs $49 for unlimited use.

Glyphish offers a similarly beautiful set of icons, this time for free. As long as you provide a note and a link back to them, Glyphish is happy to provide you with a .zip file containing 200 free icons to play with, no questions asked. Glyphish icons are in vector format, meaning that they can be scaled to the right size using photo-editing software. They are also optimized for Retina screens and IOS7 too, meaning that their icons will look fabulous on almost any device.

Tips on Using Icons

• Be Consistent: You wouldn’t use a dozen different typefaces on your website, so don’t do the same with icons. When you find a set of icons that appeals to you and fits your site’s aesthetic, try not to stray far away. This also goes for icon sizes and colours: make sure to consistently use icons so as not to visually confuse your visitors.

• Pay Attention to Scaling: You may have noticed that an awful lot of emphasis in this post was put onto the kinds of files icons come in. Even if they are small or have a simple design, icons can easily fall prey to skewed sizes for pixelation. If the icon you’re using isn’t the right size for your design, make sure to scale it properly in Photoshop or a similar photo editing programme.

Image Credits

16x16px-capable, black and white icons uploaded by qubodup on openclipart.org