How Icons Can Be Used in Website Design

The strategic and technical methods for adding icons into your web designs

Contact icons
Contact icons.

Icons play an important role in modern website design. In fact, you would be hard pressed to find a website that doesn’t use icons in one form or another, even if it is just by using social media icons in the footer. Icons can serve a number of purposes on your website, including:

Replace Text Content

The most widespread use of icons in web design is to replace text content. Oftentimes this is done for buttons or links of some kind.

The aforementioned social media icon is an example of this practice. Instead of text that reads something like “Visit our Facebook page”, an icon with the Facebook logo is used. This text replacement can also be done in navigation menus. Using icons in place of buttons with lengthier text is a common design treatment, especially in application design and for responsive websites.

When using icons to replace text, you must be mindful of clarity and careful not to overdo it. Using icons in place of text can be extremely helpful as you look to create a cleaner overall design and a streamlined user experience, but if the meaning behind your icons is unclear or if you go overboard in how you use those icons, any benefits you hoped to realize will quickly be undone.

Save Space

When replacing text content with icons, you will inevitably save space in your design. This is a very attractive option for the small screen versions of responsive websites.

When space is at a premium on those small screens, the use of a small icon for menu items or to illustrate other actions is one way that you can maximize the space that you do have available to you.

Communicate Despite Language Differences

In the physical world, we see icons used all the time. From road signs to the signage used for restrooms, icons can break down language barriers and communicate meaning despite differences in language.

This same benefit can apply to digital interfaces, but once again, you must ensure that your icons are clear and that the meaning behind them is apparent. Not all analogies work for every language, so you should be careful which icons you use, especially if they are for key actions on the site.

Accentuate the Text

In some cases icons are not used to replace text, but are actually intended to add meaning to the text of a site. This can be especially helpful when illustrating a multi-step process or as a highlight to certain features or functionality. A simple example of this can be seen here on About.com. On the main page of this web design segment, you will see a large picture that is used for the featured article. At the bottom of that picture you will find the word “Share” along with an arrow icon. This button allows you to share that article on social media, and the functionality is presented as both a text label and an accompanying icon. Elsewhere on that page, you will see the icon used on its own, which is an example of  the “replace text content” point covered earlier in this article.

Add Some Fun

Another way that icons can be used is to add some fun to a site’s design. Illustrated elements can add a sense of whimsy to an interface, depending on how they are used.

Of course, not every design will allow for “fun” to be added, but you’d be surprised where a sense of fun and delight can be used – and the benefits of taking this approach are significant. After all, a delightful experience is often a memorable one, and creating memorable experiences is something all websites are eager to do.

How To Add Icons

There are a number of ways that icons can be added to your website. These include:

  • Inline Images – image files including JPG, GIF, and PNG can be added directly to your site’s HTML code.
  • CSS – you can also use CSS background images to add icons to HTML elements such as links. You can even use CSS image replacement techniques to “wipe out” the HTML text and only leave the icon in place. You can also use image sprites to get all the icons you need for your design into one file, thereby reducing the number of HTTP requests your site needs to make to load those icons.
  • SVGScalable Vector Graphics can also be added as inline images, and SVG have the benefit of being scalable for different devices and screen sizes. Icons are perfectly suited to be executed as SVG files and the file size of those images is often very small, which helps to improve the overall performance of a website.
  • Icon Fonts – in certain cases, font files that are comprised of icons can also be used on a website. Like other font files, these characters will be scalable for a variety of sizes, but requiring visitors to download an entire font file for only one or two icon glyphs is often an unnecessary request. If you need to use a number of icons in a font, they are a possible option, but otherwise, an SVG file or other image is likely a better choice.

Edited by Jeremy Girard on 1/24/17