Using Icons on Your Website

When viewing a website, most users will first scan the page for visually interesting content. Most users will begin reading only after something grabs their attention. Icons are simple, effective way to draw users into the content of your website.

In this article, we will look at the benefits of using icons as well as the different ways to use icons on your website.

Using Icons on Your Website

What is an icon?

Icons were first developed in the 1970s by the Xerox Alto as a means of making computers easier for beginners to use – it is used to communicate meaning in the simplest, most user-friendly way.

On a web page, an icon is a graphical image that represents a topic or information.

Using Icons on Your Website

Benefits of using icons

There are a number of uses for icons in web design:

  1. Icons are powerful visual tools.

    When was the last time you read through a plain text article on the Internet? (an example of a plain text article is a website’s Privacy Policy).

    Icons add and enhance the visual and aesthetic appeal on your web page. Icons are relatively small so they add just enough of visual appeal to draw attention to your web page without taking the attention from your main/core message.

    In addition, icons can act as page breakers, visually breaking up your content, making it more accessible, less intimidating and easier to read.

  2. Icons convey standardized ideas with no language barriers.

    Icons are easy to recognize and easy to understand because of their familiarity, universality and convention usage. Because of the familiarity and universality, icons allow the user to quickly browse through a web page and get a better idea of the content, even if it’s in a different language.

    For example, some icons you can easily recognize, a shopping cart for an online shopping cart, a magnifying glass for “search” and an envelop for “email” or “contact.”

    Take a look at this example. Just by looking at the icons, can you guess what is the text content?

    The actual WordPress web page is here. You’re probably not that far off because the icons are recognizable and easy to understand.

    Now, take a look at this example.

    Unless you can read Russian, you won’t be able to understand the text on this menu. But, because it uses some standard icons, you might be able to make educated guesses. For example, you could easily recognize the icons for news, messages and calendar.

  3. Icons support the notion of a product family or suite.

    Have you noticed the icon for Photoshop, Illustrator, Flash, Dreamweaver and Lightroom have very similar icon styles? They are all products of Adobe.

    By using the same icon style, users can easily link all these products into a product family or suite. In addition to creating a unified look, they help build a strong brand recognition.

Using Icons on Your Website

Ways to use icons on your website

The rule of thumb is, icons should be used to draw attention to your content, and not to diminish or replace it.

  1. Icons in Lists

    The most common way to use icons on a website is in lists. Lists are a practical way to highlight your content: products, services, features, etc. But lists are inherently bland and boring. Using icons in your lists can make them more accessible and engaging.

    Take a look at the Features list from WordPress and from Joomla, which one looks easier to read?

  2. Icons to represents frequently accessed items

    You can also use icons to represent frequently accessed items.

    Take a look at Gap.com. When you arrive at the website, immediately you will see three icons: Favorites, Shopping Cart and Search. These are the most common used, as well as most frequently accessed icons on ecommerce websites.

    The use of icons allows the website visitor to easily scan and locate what they want.

  3. Icons to dress up text labels

    Some would argue that it’s the other way around, that some icons need a text label alongside to overcome any ambiguities of the icon.

    Let’s take a look at the icons used on Twitter’s website:

    Or the icons on Google Play’s website:

    In both cases, a simple text label would suffice. In fact, in these cases, the icons cannot replace the text – because the meaning of the icons are not 100% clear to everyone.

    But we can’t deny the fact that the icons do make the look of a text label more pleasing.

  4. Icons for space constraints

    Icons take up less space, and because our devices and screens are getting smaller and smaller, designers might choose to use icons rather than text.

    If you use Google’s email service, login to your Gmail account click on any email message and take a look at the action bar:

    Icons are smaller than text-labels and the uniform size can make the fit easier and cleaner in the available space.

  5. Icons in headings and sections

    Icons can be used to provide a visual separation between different sections of text.

    Example: Midori’s website:

Using Icons on Your Website

Choosing the best icons for your website

Icons are used to enhance your content and design, so it’s important to pay attention to how your icons match the rest of your website.

When choosing the best icons for your website:

  1. Make sure all of your icons match. It doesn’t matter how cool the icons look individually, grouping mismatched icons will make your website look unprofessional. Remember the Adobe icons we mentioned earlier, when the icons share the same style, they create a unified look and help build a strong brand recognition.
  2. Icons should be visually appealing.
  3. Icons should be universal. Choose icons that are easily understood or instantly recognizable by people. Unless you are using the icons with text labels, stay away from icons that are confusing or ambiguous.

What about favicons?

When you open a website on your browser, you will see the small images on the window tabs:

These little images are called favicons. Favicons also appear in the list of bookmarked URLs in your browser.

Favicons are also known as site icons. It is the small image that is associated with a particular website. In other words, it’s an icon for the website.

What about favicons?

Do I need a favicon for my website?

While it is not essential to have a favicon on a website, having one could improve the overall quality of your website.

A favicon will:

  1. differentiate your website from your competitors
  2. make your website standout in a favorites or bookmark list, browser tab or history list
  3. help build brand recognition
  4. make your website look more professional and credible

Take a look at the following example. Say you are planning your next vacation and you need to buy flight tickets online.

You opened up your browser, typed in ”cheap flights and hotels” and you found these travel websites. Which website are you most likely to buy from?

It is very common for users to judge online retailers based on how professionally built the site is. When you don’t have a favicon, the browser will display the default blank document icon. It certainly doesn’t look professional, especially when being shown alongside competitors who have a favicon.

What about favicons?

How do I create a favicon?

Creating a favicon is easy. You can use almost any image editing program, including Photoshop, GIMP, etc.

The size for your favicon should be 16x16 pixels or 32x32 pixels. If you don’t want to create a tiny image, you can certainly resize an existing photo. But keep in mind, when you resize a larger image to be this small, you might end up losing a lot of details on the image.

Once you have designed your favicon you can use one of the many favicon generators found on the Internet to convert your image into a favicon:

Once you’re happy with your favicon, you will need to save it in an .ICO extension.

How do I add a clickable Facebook or Twitter icon on my website?

Facebook and Twitter icons are called social media icons. Social media icons are some of the most commonly used icons on websites, especially blogs. Other social media icons include Pinterest, Google+, Instagram, LinkedIn, YouTube and more.

How do I add a clickable Facebook or Twitter icon on my website?

Social media icons, toolbars and widgets in Website Builders

Many website builders come with built-in social media icons that you can use and customize for your website.

The major benefit of using the built-in social media icons is that the icons are ready-to-go. You don’t need to copy and paste any codes – all you need is select the icons you want to display and enter in your user ID or profile name on the respective social media sites. Your website builder will then link the icon to your social media profile(s).

Note: In addition to the built-in social media icons, Wix also offers many 3rd party social icon apps, both free and premium in their App Market.

If you are using the self-hosted WordPress platform (ie. installing WordPress on your website), you can easily find numerous social media widgets and plug-ins that you can install on your WordPress website. Like the built-in social media icons in website builders, these plug-ins allow you to easily integrate social media functionality on your website.

How do I add a clickable Facebook or Twitter icon on my website?

Where to place social media icons on your website

When deciding where to place your social media icons, the best advice is to pick a prominent position. The more visible the button is, the more people will click on it to share your content.

Aenean dignissim arcu sed varius imperdiet.

  1. Top of page
    Keeping social media buttons near the top of your webpage saves your visitors from scrolling to find your sharing buttons. While it’s also common practice to have social media buttons on the bottom (or footer) of your page, but visitors will find it easier at the top – it’s right there in front of them when they arrive at your website
  2. Next to content
    Place the social media buttons in close proximity to the content being shared, especially if you are adding buttons to blog posts and articles. This way, visitors understand clearly what they are sharing.
  3. Website sidebar
    Another place that visitors will most likely look for your social media icons is your sidebar. Placing your icons there will provide a familiar reference point.
  4. About Me and Contact Us page
    Be sure to include social media icons on your About Me page.