The evolution of icons usage on websites
An icon is a small picture or symbol that acts as a visual representation of an entity or a concept.
In apps and on websites, icons are used to effectively convey information and explain concepts in a visual and memorable way.
Just like images, icons can greatly improve the website's aesthetics and capture the website viewers' attention.
Nowadays, the usage of icons on websites has become a standard and an integral part of UI design. You will hardly see a website that doesn't have icons.
For instance, this web page consists of several icons eg. search (lens) icon, menu icon, social media icons, etc.
You are also likely to want to add icons to your website or web application (if you haven't already).
If you are new and don't know how you can add icons to your website, then this article is for you.
In this article, you will learn about adding Font Awesome library to your website and using its icons. But before then, let me take you through a brief website icon history.
A brief history of website icons
Use of images as icons
Traditionally, developers had to rely on just image formats in place of icons. These were just normal images (eg .jpg, .jpeg, .png, etc) only that they happened to be much smaller, which they styled and placed very strategically on the website using the <img> tags.
<img src="phone-icon.png" alt="phone">
Using images as icons would most commonly result in poor performance in terms of render quality and resolution. Upscaling or downscaling images would lower their quality.
Also, if you had to include many icons on a web page, you had to add them all as images which meant the page would make multiple HTTP requests for each image when loading thus degrading its performance.
It would also be challenging when you had to make some hover effects such as a change of color, which meant for each icon you had to have more than one image that would require to be loaded separately using Javascript.
Though this practice has been passed by time, some developers still use it. It is a terrible practice and developers should avoid it.
Use of image sprites
In the early 2000s, image sprites were introduced. An image sprite is a collection of separate images combined to form a single image. In an image sprite, icons are arranged in a single GIF or PNG file, which is then loaded as a CSS background image. The background property is then adjusted to have only the required icon displayed and the others are hidden from view.
The usage of image sprites greatly improved websites' performance as multiple icons would be loaded as a single image file thus reducing the number of HTTP requests. This reduced bandwidth and increased the website loading speed.
Same to the usage of images, sprites also had the challenge of degrading and losing visual quality upon scaling to different resolutions. Changing the color of hover effects also meant adding an entirely new image.
Icon fonts
Icon fonts were introduced in 2012. Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers.
This was a major improvement that solved the issues occurring from using images and image sprites. Icon fonts are in essence just simple texts and unlike the former, these can be scaled up or down perfectly to any resolution without degradation or loss of visual quality.
They are very popular among web designers since they can be styled with CSS the same way as regular text such as change of color, size, shadow effects, animations, transitions, etc.
Examples of popular icon font libraries include:
Icon fonts are by far the most used solution for adding icons to websites.
Scalable Vector Graphics (SVG) icons
SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
SVG icons are slowly gaining popularity among designers and developers.
As opposed to images and fonts, SVG is basically a block of XML code directly served to a browser, which in turn renders it in a graphical manner.
SVG offers the ability to scale to any size/resolution without losing any quality. You can also easily edit the color, and size, and animate the whole or portion of an SVG icon.
