Using Icons the Right Way


Every designer knows that when a webpage is getting a little boring and text-heavy, it’s time to pull out some icons. But knowing you need them is only the first step in a long thought process. Are the images you’ve chosen conveying the right concepts? Are they similar enough in style? Should you get creative and risk confusion, or stick to the basics and invite boredom?

Icons are a tricky topic, because there are so many ways you can go about them. But there are a few things that are true of every good icon design. Follow the guidelines you find below to make sure that your icons are as effective as possible.

Icons should be universally understandable

Most icons are needed to portray concepts rather than actual items, so you will usually need to use a visual metaphor. And while some more complex concepts can be difficult to express in a simple pictogram, you should make sure that they’re at least not outright confusing.

For example, the icon on the bottom left in this list of features is a lightning bolt within a cloud, which is obviously not the literal meaning it’s trying to convey. Instead, the picture is meant to represent lightning-fast results, a concept that almost anyone would immediately associate with the picture, when it’s put into context.

Icons should be eye-catching, but not just eye candy

Icons can be effectively used in a variety of ways, the major ones being:

  • Summarizing content
  • Increasing readability
  • Listing links
  • Adding visual interest

Although it’s preferable to have beautiful but useless icons over logical yet hideous icons, the best ones combine functionality with visual enhancement. This can be achieved in many different ways, but a good example to look at it is with customized social media icons. In this portfolio website, the icons have been tailored to fit the style of the page as a whole, but they retain their functionality as links.

Icons should feel like they’re part of a cohesive set

The most obvious failing in any set of bad icons is when they don’t even look like they were made by the same designer. Make sure yours are strictly styled so they don’t end up being a mish-mash of half-realized ideas. Take into account:

  • The lighting: if your icons feature anything like drop shadows, inner glows, or gradients, make sure the angle, color, and intensities are consistent throughout.
  • The angles: whether they’re head-on, to the side, or from the top, show every icon from the same angle. If they’re 3D, this is even more important.
  • The rest of your website: don’t get carried away by a unique idea. If the style doesn’t fit the site, it’s not a good choice.

Icons don’t always have to be small and simple

Traditional icon design focuses on the flexibility and simplicity of the set; shapes are scaleable and abstracted and can work in many applications and colors. This is a solid choice for many projects, such as this invoicing guide the icons are all simple, classic shapes that can be recycled throughout the company’s website for a consistent look.

But if your icons are only going to be used in a specialized context, you might consider more elaborate and striking images. This works well for headings on a webpage that has just a few categories. The large, illustrative icons in this website are both attractive and interactive, making them worth the space they take up.

Simple designs don’t have to default to ordinary designs

Even if the rest of your design doesn’t lend itself to fancy, exciting icons, you can still make unique sets that are just as effective. The category icons in this website are just small line drawings. But the consistent yet diverse designs, in combination with the drama of the surrounding white space, makes this set look special. There are many good resources for finding icon inspiration, such as these sites:

  • IconFactory
  • IconFinder
  • Iconspedia
  • IconArchive
  • DryIcons

Multiple sets of icons should look like integrated parts of the whole

Most webpages need a few different sets of icons that work with each other. When it comes to designing them, a combination of unity with discord is what creates an interesting result. In this website’s design, the simple round icons ranged along the top are very different from the more ornate icons above the categories. But the combination works because they’re different enough to create interest, but similar enough (with the textural overlay and monochromatic palette) to be harmonious. The right mix of these elements changes with every design, but a sensitivity to these proportions the last essential component to the making of great icons.

About Luke Clum

Luke Clum is a Seattle based designer, web developer and outdoorsman. If he’s not geeking out about UI design, you’ll most likely find him climbing something in the mountains. Follow him on Twitter @lukeclum

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>