Have you ever noticed just how many icons you see on websites and apps these days? Just about every website uses at least a handful, while desktop programs and mobile apps over use dozens or even hundreds to allow users to select options and navigate the app.

If you’re in the process of building your own website, you may wonder why you should use icons at all, and how to choose icons or know where to put them.

What are Icons?

Most people have no trouble differentiating between icons and photos, but aren’t quite as sure about how to tell the difference between illustrations and icons. While there is certainly quite a bit of overlap, I think it is safe to state that illustrations tend to be more detailed and complex, while icons are either made up of symbols or of extremely simple illustrations. 

While icons and illustrations can both serve a similar purpose of quickly and succinctly communicating an option or idea, icons are typically more geared toward this than illustrations are. Icons typically maintain their legibility at smaller screen sizes, and can therefore be used in navigation menus and other places where illustrations would be too small or complex to be instantly understood by visitors.

Helpful for Desktop

While icons are more prominent on mobile apps and websites, using them on desktop or laptop sized screens still has benefits. 

For one, it promotes a more consistent experience which makes it easier for visitors to swap from one device to another. 

Using icons next to important information also makes it easier for the visitors to scan for and jump to what they’re looking for, without having to read every single word of content on your site. 

Finally, icons can add visual interest and focal points to your website. On websites which already have a lot of photos or other media, icons can help signify content which the visitor can interact with — and on websites with few photos, icons can also serve to keep the website from feeling like a wall of text.

Crucial for Mobile

On phones and tablets, icons play an even more important role. 

The limited screen size found on these devices means that text-based information may take up too much valuable space, particularly when it comes to navigation areas which need to remain visible or easily accessible. Simple and recognizable icons are often easier to understand at a glance than their text counterparts, and they take up far less room.

Besides that, icons are often easier to tap on than text-based links. Most text-based hyperlinks are wide but not tall, and when the text is small or the links are clustered together it can be tough to tap the correct option. Icons are typically square or circular in shape, roughly mimicking the size and shape of an average tap on the screen.

Universally Recognized Icons

Over the years, icons have been used by virtually every mobile and desktop app, as well as by a huge number of websites. And as time goes by, certain icons have gradually become so widely used that they are instantly understood by most people.

Websites typically use icons in one of two ways: to help the visitor use the website with ease; or to help convey information to the visitor about the organization. The former category is the one which most of the following icons belong to:

Not surprisingly, these are only a few of the many icons which are instantly recognized. And there are even more icons if you venture outside of the narrow scope of frequently-used website icons: three arrows arranged in a triangular symbol mean “recycle”, while a heart stands for love, and the simple line drawing of a fish is used to convey Christianity. Road signs regularly use icons to convey information at a glance. And hazards such as fire, poison, electricity, and radiation all have their own recognizable symbols. Word processors have their own set of common icons, as do photo or graphic editing apps. Most of the above are not commonly used on websites, but in the event that one of those topics is addressed on your site, it can be helpful to keep in mind just how many symbols are available to use.

Final Tips for Icon Use

• Use a consistent style for icons throughout your website. Similar colors, shapes, and line weights will help your icons look well-planned rather than haphazard. 
• Small icons should have a simple style — reserve the complex or detailed icons for use in areas where they are large enough to view properly.
• Pay attention to color. Brand colors are often fine to use, but remember that some colors may end up being misunderstood due to their meanings elsewhere. Light gray, for instance, is often used to indicate an invalid or unavailable option, while red is frequently used to convey a warning or error message.
• Use recognizable symbols in your icons. It’s fine to be creative in choosing the styles of the icon, but swapping out commonly recognized symbols for more unique choices is likely going to lead to confusion for your visitors.