Icons on websites - what do they do and how to choose the right ones?

Agree that such a remote control would look strange. Moreover, some of its functions would be very difficult to describe in words, so that the label does not take up too much space.

In the same way, we couldn't imagine a web browser where, for example, navigation buttons ("Back", "Next"), refresh buttons, or buttons that control window behavior were replaced entirely with text.

I want to say that icons have "taken over" our lives and we cannot function effectively without them.

Icons on websites, social networks, in all smartphone applications, yes - even on printed products (business cards, brochures). They are literally everywhere.

Why are we so eager to use icons? What are the benefits of using them? How to skillfully choose a set and style of icons for your own site? You will find answers to these questions later in this text.

Icons on websites - the benefits of using them

They add variety to content

Our eyes love it when they encounter diverse content. Smaller or larger text, images, division of content into paragraphs - all this allows us not to get bored while browsing a particular site.

Icons, because they are different elements from text, are part of this diversity. When used wisely, they make a positive contribution to the attractiveness of a website.

They attract attention by standing out from the background of the text.

Website icons are colorful shapes. They are usually accompanied by text or large, uniformly colored areas.

This makes them attractive as they stand out from other elements.

This aspect can be successfully used on websites, directing users' eyes to the right places.

Despite their small size, they express a lot

Some sweets "express more than a thousand words". This advertising slogan could just as well be used to describe the role of icons.

After all, an icon is a pictogram. On the other hand, a pictogram is a way of representing some object or concept with the help of graphics - so that words are not used.

Pictographic writing breaks down language barriers. On multilingual websites, despite switching between languages, the icons usually remain the same - no matter what language they are currently displayed in. Everyone understands them.

Easy to implement and style

Icons on websites are very easy to weave into content. Moreover, you can do it in various ways.

We have HTML entities and codes at our disposal. Using them directly in the page code leads to the display of icons: ✓ ☎ ★

You can also use the so-called icon fonts, that is, ready-made sets of icons in the form of fonts. Among the most popular are Font Awesome, IcoMoon or Ionicons.

It is always possible to use icons as images - in GIF, PNG or vector SVG formats.

How to skillfully choose icons for websites?

1. Start by looking at the possibilities

Earlier I mentioned that there are several ways to use icons.

I recommend turning to icon fonts like Ionicons. Installation is very easy - you only need to do it once to enjoy the icon set on your entire site.

Keep in mind that using too many of these fonts will slow down your site, so it's best to rely on just one set that has all the icons you need.

Then just use CSS to give the icons the right size and colors.

2. Choose icons in a way that users can understand

In our blog, we almost non-stop talking about the fact that the site should first of all serve its users.

When using icons on your site, make sure they are understandable to your visitors.

Yes, sometimes it's nice to use something innovative and different, but you should still keep in mind the audience of your content.

Therefore, use symbols that are clear to everyone from the very beginning.

3. Set a single style

It is also important that the icons on this site belong to the same "family". This is done to ensure that the style is uniform and consistent.

Let's take another look at Ionicons. This icon type has two sets inside. The first is inspired by iOS, while the second contains icons similar to those used in Material Design.

This will allow you to bet on the style that best suits your site.

The most important thing is to follow the sequence. Your site will only benefit from this, because the whole graphic concept becomes consistent and harmonious. Even one random character can "bite" and make you feel like something is wrong.

4. Try to use vectors

Website icons are increasingly being used as vectors (SVG format) rather than raster graphics.

The advantage of vectors is that they scale according to the space they need to occupy. In other words, they look good on both large screens and smaller devices like smartphones and tablets. By manipulating their size, they do not lose focus and clarity at all.

You can learn more about this in our text on image SEO.

5. Skillfully combine icon colors

This tip is one of the most obvious, but it should not be overlooked.

Make sure the colors of the icons are in harmony with other elements present on your site.

Again, it's all about the consistency of the whole design. If the colors of the icons are chosen correctly, then the whole site will simply be more beautiful.

6. If the context is unclear, use shortcuts

Some icons are obvious to us.They illustrate, for example, an airplane, a house, a computer screen. They reproduce forms familiar to us from childhood.

Others, such as the so-called hamburger (three dashes illustrating the mobile menu), refresh (circled arrow), close (cross) or the triangle pointing to the right ("play") do not represent real objects. They are simply conventional - their meaning had to be learned at some point in our lives.

I'm talking about this to draw your attention to the context. This word is extremely important when it comes to icons.

It happens that icons can function by themselves. The vast majority of users can recognize what they represent just by their shape. If an action is associated with an icon when clicked or tapped, we intuitively understand what function we are dealing with. However, it all makes sense when the context is clear to us. In many cases this is not the case.

The image above is from a text I posted on our blog in 2015 (handy site). As you can see, this custom associated with UX (user experience) is still relevant today.

The label adds context and explains in the simplest way what the action is for.

7. You can also always see how your competitors are doing it

Website icons are used so widely that your biggest competitors' websites are almost certainly full of them.

It is good practice to study how others solve certain issues.

Look at the websites of your competitors. You might find some inspiration there that you can use to restyle your own site.

I also recommend, by the way, one of our texts about what you can learn from your competitors.

Why are website icons so important?

First of all, because they add variety to the look of websites and convey in a concise form what would otherwise take a long time to explain.

There is a reason why the first script that was created was pictographic. Due to its versatility and reproduction of real objects, it quickly caused a stir.

That is why it is still used today. Not only on the Internet, but also - as I mentioned in the introduction to this text - in other areas of our daily, real life.