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 features would be very difficult to describe in words, so that the label does not take up too much space.

Similarly, we could not imagine a web browser that, for example, has navigation buttons ( "Previous", "Next"), refresh buttons or buttons that control window behavior would be replaced with text only.

I mean, icons have "taken over" our lives and we can't function effectively without them.

Icons on websites, social networks, in all applications for smartphones, 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 bring variety to the content

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

Icons, since they are elements other than text, are part of this diversity. When used skillfully, they make a positive contribution to the attractiveness of a website.

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

Icons on websites are multi-colored shapes. They are usually accompanied by text or large, evenly colored areas.

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

This aspect can be used successfully on websites by directing users look at 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 an 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

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

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

Remember that using too many of these fonts will slow down your site, so it's best to rely on 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 talk almost non-stop about the fact that the site should serve its users first.

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

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

So use symbols that which are clear to everyone from the very beginning.

3. Set a single style

It is also important that the icons on a given site belong to the same "family". This is 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 here.

4. Try to use vectors

Icons on websites are increasingly being used as vectors (SVG format) rather than bitmap graphics.

The advantage of vectors is that they scale according to space which they should 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 SEO-optimization of images.

5. Mix Icon Colors Cleverly

This tip is one of the most obvious, but it shouldn't be overlooked.

Make sure your icon colors work well with other elements on your site.

Again, it's all about consistency throughout the 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 shapes familiar to us from childhood.

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

I say this to draw your attention to the context. This word is extremely important when it comes to icons.

It happens that icons can function on their own. 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 above image is from text I posted on our blog in 2015 (handy site). As you can see, this custom related to UX (user experience) is still relevant today.

The label adds context and most simply explains to us what this action is for.

7. You can also always look at how your competitors are doing

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

It's good practice to study how others solve certain issues.

Look at the sites of your competitors. Perhaps you will find some inspiration there that you can use when you change the style of your own site.

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

Why are icons on websites 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.