Using Icons in Web Development

Feb 27, 2023 · 8 min read

An icon is a visual symbol representing entities, concepts, or actions that enables web users to navigate the web easily. It is also a way to express the content of a web page, like buttons or functions. You can use them in various contexts, such as computer software, mobile apps, and websites.

Icon usage is one of the essential aspects of your user interface, although people tend to ignore them while undergoing their development projects. Your icons can represent what your brand speaks and guides users on your site. Therefore, it is necessary to create an outstanding one. You will learn what icons are and how to add them to your HTML page. You will also learn ways to make icons on your web pages accessible and tools for creating icons quickly.

Why icons?

Icons are essential on modern web pages and necessary to use on your web pages when building them. Here are some of the things icons can do on your web page:

They enable easy navigation on websites improving the user’s experience.
They attract attention to essential information by providing an appealing visual atmosphere for web users.
They communicate meaning effectively on the website.
You can improve the functionality of your web page with icons.
With icons, web users can easily interact with the web interface.
You can save visual space on your web page by using icons.
They enable the visibility of your brand’s identity.
Instead of lengthy descriptive texts on your web page, icons can be more engaging.

Creating Icons

Looking at what icons can do on our web pages, you need to go overboard with icon creation in your user interface to enhance web usage. Conversely, if icons are not created correctly on your web page, it could hinder web usage.

Let us look at several tricks for creating awesome icons for our web pages.

Meaningful symbolism: Ensure that the icons you add to your web pages communicate meaning to avoid confusing your users. You can achieve this by using icons directly related to your desired object or action. For example, an icon for a “bookmark” feature on a browser could be a symbol of a folded corner, like the one in Chrome.

Familiarity: Ensure you keep your web users from guessing what an icon is by assuming they are familiar with it, and this could prevent them from getting the value of what the icon is supposed to do. So use familiar icons on your web pages.

Simplicity: Try and make your icons as simple as possible because using complex icons can make users forget them easily. This will make them easily recognizable and memorable and won’t distract from the rest of the interface. For example, you can use a silhouette for a simple icon for a “home” button on your website.

Consistency: Ensure that all icons on your web page belong together by using a consistent style. This is for easy recognition and remembrance. Also, being consistent with the size and spacing of your icons can give an organized look. For example, you can use the same color scheme, shapes, and style for the icons. Also, icons in your navigation menu can be equal in size and have consistent spacing, like the one on the Amazon website.

Distinguishable: You should distinguish icons on your web page from one another with clear and distinct shapes, colors, and sizes.

Test icons: You need to test the icons you chose for your website with users to get feedback on what they think about them. For example, you can show them different icon versions and ask them to identify its meaning.

How to add icons to our Web Page

There are several ways we can add icons to our web pages. Let’s look at some of them:

Google Material Design Icons

We can add Google’s Material Design icons to our web page. Follow the following steps to add them to your web page:

First, add the Material Design Icons stylesheet on your webpage. To do this, add the code below to the <head> of your HTML document:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Next, you can add an icon to your webpage by using the i' or span` element with the class “material-icons”. Then add the desired icons from the Material Design Icons library with the appropriate icon name. Like this:

<i class="material-icons">icon name</i> | <span class="material-icons">icon name</span>

You can style the icon size using CSS on the i' or span` element. Let us demonstrate how to add icons with the Google Material Design Icons:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
      .icon-container {
        display: flex;
        justify-content: space-between;
        color: purple;
        padding: 100px;
      }
      .material-icons {
        transform: scale(5);
      }
    </style>
  </head>
  <body>
    <h1>Adding Icons With Google Material Design Icons</h1>
    <div class="icon-container">
      <span class="material-icons">home</span>
      <span class="material-icons">search</span>
      <span class="material-icons">favorite</span>
      <span class="material-icons">add_shopping_cart</span>
      <span class="material-icons">account_circle</span>
      <span class="material-icons">settings</span>
      <span class="material-icons">add</span>
    </div>
  </body>
</html>

Here are the icons we have added:

Note: These icons can be used anywhere on your HTML page, like in the body, a button, a link, or a form.

Font Awesome Icons

Font Awesome is an icon font library with various icons you can add to web pages. Let’s look at how to use Font Awesome icons to add fonts:

First, you add the Font Awesome CSS to your HTML document’s <head>. To do this, add the following link tag to your HTML code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>

The above link tag references the Font Awesome CSS file hosted on a Content Delivery Network (CDN) to import the icons.

Once you include the CSS, you can start using the icons on your web page.
To add an icon to your HTML, use the i' element with the fa` class and the specific icon class you want.

<i class="fa fa-home"></i>

You can add the icon to a specific location on your web page by adding the i' element to a container element such as a div, p, button, a’, etc. Like this;

<button>
 <i class="fa fa-home"></i>
 Home
</button>

You can also use CSS to style the icons as desired. Let us demonstrate how to use Font Awesome to add icons:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel= "stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
      crossorigin= "anonymous"
    />
    <style>
      i {
        font-size: 120px;
        padding: 40px;
        color: purple;
      }
    </style>
  </head>
  <body>
    <h1>Adding Icons With Font Awesome</h1>
    <div>
      <i class="fas fa-home"></i>
      <i class="fas fa-search"></i>
      <i class="fas fa-user"></i>
      <i class="fas fa-envelope"></i>
      <i class="fas fa-shopping-cart"></i>
      <i class="fas fa-cog"></i>
    </div>
  </body>
</html>

Here are the icons we have added:

There are other ways to add icons on our web pages, but the above are the ones we can cover in this article. However, we will use different methods of adding icons to explain the next section of this article.

Making Icons Accessible

Making icons accessible to all web users is essential, and we should use icons that people with disabilities such as visual impairment or color blindness can understand. Here are some considerations for making icons accessible to all:

Text labels: To ensure accessibility when using icons, add a text label with the icon. This approach will help individuals with a disability, like the visually impaired, to quickly understand what the icon is for and help them access it. Also, some people depend on hover to show text labels on their web pages, which is terrible for accessibility. This is because the user may not know about that, which can be difficult on a touch screen. In addition, those with visual impairment will also not access the information.
Clickable icons: When using clickable icons on your web page, it is better to ensure they are clickable on all devices. For example, the clickable icons should work with a mouse, keyboard touchscreen, or other input methods. In addition, the icon should be big enough for touchscreen users to work on all fingers for easy access.
Sizes of icons: It is better to use icons that can work in different sizes, and their clarity and recognition are still maintained. Also, ensure they are adequately sized so that users can access them. For example, ensure the icons can scale up or down and still possess clarity and recognition.
Color contrast: For users to use icons effectively, you should consider those with visual impairment when choosing colors. Ensure an excellent foreground-background color contrast for icons on your web page so visually impaired users can access them.
Use of ALT text: When you have linked icons on your page, ensure to add an ALT text for users to know the work and destination of the link. For example, you can add “Contact us” as the ALT text accompanying your contact icon.
Decorative icons: An icon is decorative if it does not convey specific information and has no functional purpose, meaning no action is assigned when clicked. Knowing whether an icon is decorative is necessary, so you can decide how to use it on your web page. For using accessible decorative icons on your web page, the best practice is to avoid using ALT text. There is no need for the ALT text to be read to screen readers, as it will confuse users.
- To use decorative icons properly, the role attribute should be set to “presentation” or “none”, and the ALT attribute should be left empty. This approach will prevent screen readers from reading the icon. You can also provide a text alternative for the icon for users who may need help understanding it.
- Let us see an example of how we can create a decorative icon with this icon from icons8 and ensure that it is accessible to users who rely on screen readers:

<!DOCTYPE html>
<html>
<head>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(100%);
    }
  </style>
</head>
<body>
  <h1>Decorative Icons for Accessibility</h1>
  <div>
    <img src="https://img.icons8.com/3d-fluency/94/null/heart-with-pulse.png" alt="" role="presentation" class="icon" />
    <span class="visually-hidden">Decorative Icon</span>
  </div>
</body>
</html>

The outcome:

From the example above, the decorative icon is displayed with the img element. The alt attribute is left empty, which tells screen readers to ignore the icon, and the role attribute is set to “presentation” to show further the icon is decorative.

The span element with the “visually-hidden” class provides a text alternative for the icon for users who may need help understanding it. This element is visually hidden, but screen readers will read it. You can style the icons as you desire.

Informative icons: Informative icons convey information or instructions to the user. They help users quickly understand the meaning or function of a particular element or feature. Informative icons include settings, search, navigation, and alerts icons. Let us look at ways we can use informative icons to improve accessibility:
- Use ALT text for informative icons to enable assistive technologies to read them. The alt text should clearly and concisely describe the icon’s meaning or function.
- Provide enough context around the icon to clarify the meaning or function to users. For example, let us use the setting icon in icons8 to demonstrate how to use the informative icon for accessibility.

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <h1>Informative Icons for Accessibility</h1>
    <h2>Use of clickable settings icon for accessibility</h2>

    <div>
      <a href="#settings" aria-label="Settings Icon">
        <img
          src="https://img.icons8.com/external-filled-outline-deni-mao/50/null/external-setting-user-interface-advertise-friendly-filled-outline-deni-mao.png"
          alt= "Settings Icon"
        />
      </a>
      <div id="settings" class="settings-menu"></div>
    </div>
  </body>
</html>

The outcome:

From the example above, the a tag creates a clickable element that links to the settings menu. In addition, the aria-label attribute is set to “Settings icon” to provide more information about the icon for screen readers and other assistive technologies.

The img tag displays the icon, and the div element with the id of “settings” is used to create the settings menu. The class settings-menu helps to style the settings menu.

You can style the icon as you desire.

Semantic icons: A semantic icon is a standalone icon with a specific meaning. Using these icons on your web pages improves page load times and makes it easier to change the appearance of the icons. To consider accessibility for web users, we need to use a well-defined semantic label. Some of the ways we can use semantic icons in making accessibility considerations include:

Use the aria-label or aria-labelledby attribute to provide a text description of the icon’s purpose for screen readers.
Use the role attribute to give an appropriate semantic role for the icon. For example, if you want to use an icon as an image, use `role= “img```.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

Tools for creating Icons

Here we will look at some tools available for creating icons, and they include the following:

Google Font Icons

Google Font Icons are open-source icon fonts you can add to web pages and other digital documents. The icons are simple, scalable, and customizable. To use Google Font Icons, add the link to the icon font to your HTML document’s <head> section and apply the appropriate CSS class to the element you want to style. Examples of some regular google font icons include the search, hamburger, and shopping cart icons.

Pros:

They are open-source and free to use.
You can easily use them to customize your web page, as you can embed them in a website using simple CSS.
They are in the form of a font file rather than an image file, making them lightweight and fast to load.
They are fully scalable due to their vector nature, and you can resize them without losing quality.
They are accessible, as screen readers and other assistive technologies can easily read them.

Cons:

Older browsers and devices may not support them.
They may need to offer the flexibility of using images, especially for more complex icons or those with multiple colors.
It may be challenging to achieve a highly detailed or specific design with them.
They may have a licensing issue in some countries.

Unicons

Unicons are a type of Unicode character to represent icons or symbols. You can use them for different purposes like depicting emotions, pointing to a location, showing time, weather, etc. Some examples of unicons include the Finger-crossed emoticon, Man and woman holding hands, Pair of hearts, Man and woman with heart, Family, etc.

Pros:

They can convey a lot of meaning in a single character.
They can add visual interest and express emotions.
You can use them to create visual designs and graphics, such as logos, infographics, and other materials.
You can use them to convey information like showing time, weather, location, etc.

Cons:

All devices or software do not support Unicons, as some older devices or systems may not display Unicons correctly.
Some users may not know how to use Unicons, which can make them less effective as a means of communication.

Feather

Feather is an open-source icon set comprising simple icons. Examples include a heart icon for a “like” or “favorite” button, a search icon for a search bar, a shopping cart icon for an e-commerce website or app, a calendar icon for use in a scheduling or event-planning application, etc.

Pros:

They are lightweight and straightforward, making them well-suited for websites, mobile apps, and other digital projects.
They can be customized using CSS to change their size, color, and other properties.
They are also fully open source, and you can use them for personal or commercial purposes.
They are available in multiple formats, including SVG, PNG, and JavaScript, making them easy to use in different projects.

Cons:

The icon set is relatively small, so you may not find the specific icon you need for your project.
Some icons are simple and may not be suitable for more complex designs.
Some people may find them too simplistic for their needs.

Icons8

Icons8 is a reliable platform that offers various high-quality icons and illustrations for several design projects. The icons are available in different styles, and you can download them in multiple formats, such as PNG, SVG, and AI. Icons in icons8 include icons for popular social media platforms such as Twitter, LinkedIn, Facebook, Instagram, etc., and icons related to business and finance, such as money bags, graphs, charts, etc.

Pros:

It provides a collection of high-quality icons that are visually appealing and well-designed.
The icons are available in various styles, such as flat, outlined, and line, which you can use to match the design style of a project.
It offers many icons, from simple symbols to more complex illustrations.
The icons can be easily downloaded and used in different types of software.

Cons:

Some icons are only available for purchase, so they may not be free to use.
Some users may need help customizing the icons to match their needs fully.
Icon8 has the right to change, update or remove specific icons, which can inconvenience the users.

Font Awesome

Font Awesome is an open-source icon library that provides scalable vector icons that you can customize. You can use icons on websites, graphic design, and mobile apps. The library includes icons covering multiple themes, such as social media, web applications, business, and more.

Pros:

Font Awesome is free to use, and it is open-source.
The icons are vector-based, which means you can scale them up or down without losing quality.
You can easily customize them using CSS.
The icons are available in different formats, such as SVG, JavaScript, and web fonts.
The icons are accessible, and you can use them with assistive technologies such as screen readers.
It has an extensive library of icons, so you will likely find an icon that fits your needs.

Cons:

Using Font Awesome icons may add additional requests to your website or app, slowing down page load times.
While Font Awesome icons are customizable, you may need more control over the icon’s design.
Using the library, whether it is locally hosted or via CDN, will increase the overall size of your website or app.
Although Font Awesome has an extensive library, it may include only some icons you need.

Animated icon library Animated icons library allows you to use animated icons in your application or website. It is a library of over 1000+ customizable, lightweight, and easy-to-use SVG animated icons.

Pros:

They are vector-based, which means they can be scaled up or down without losing quality.
You can easily customize them using CSS, allowing for a wide range of color, size, and style options.
They are accessible, and you can use them with assistive technologies such as screen readers.
The library offers various animations, such as hover effects, looping animations, and button state changes, that help to add visual interest and engagement to your user interface.
It has an extensive library of icons, so you’ll likely find an icon that fits your needs.

Cons:

Using Animated Icons may add additional requests to your website or app, slowing down page load times.
They may not support some older browsers.
Some of the icons may require payment or have specific license terms.
The library offers various animations, but they may have a different animation effect than you need.
There may be limited support options if you need help customizing or implementing the icons.

Conclusion

You need to be sure you need icons on your web page, and when you do, the various tricks and considerations to make for icons in this article will help you do an excellent job. You can now add icons to your HTML page with the several methods and tools explained in this article.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo

Using Icons in Web Development

Why icons?

Creating Icons

How to add icons to our Web Page

Google Material Design Icons

Font Awesome Icons

Making Icons Accessible

Session Replay for Developers

Tools for creating Icons

Google Font Icons

Unicons

Feather

Icons8

Font Awesome

Conclusion

Gain Debugging Superpowers

More articles from OpenReplay Blog

Exploring different approaches to styling Svelte applications

Exploring HTMX: building dynamic web apps without JavaScript