How to use icons on your website.

Adding simple but visually interesting content can help readers navigate and enjoy your website.

Icons are the unsung heroes of web design. They first appeared on our computer screens in the 1970s as an alternative to imposing lines of code that could intimidate novice users.

They proved a simple way of communicating ideas – even though floppy discs have been out of regular use for decades, we know that if we see one in icon form that it’s where we click to save! Humans can process images for as little as 0.013 seconds, far more quickly than they can words.

Icons are a visual tool.

If you click on a link and are greeted by a solid block of plain text, you (and most others) will likely hit the back button.

Reading huge chunks of copy on the internet isn’t pleasant so most people won’t bother.

Introducing icon designs to act as page breaks can make your information more accessible and easier to read.

They can direct your users around your site without providing too much of a distraction or slowing you down.

how to use icons on your website

Icons don’t have language barriers.

The internet is a truly international space, and icons are one of our common languages.

Even if you can’t read the copy on a web page – Google Translate does its best but doesn’t always get it right – icons can help you navigate visually. Some icons remain universal across the internet:

  • A shopping trolley or basket to view your purchases
  • A magnifying glass for the search function
  • An envelope for emails
  • A cog for settings
  • A bar graph for statistics

These are just a few of the icons that we all see on the internet every day.

example icon designs

Icons can help to build your brand.

An icon series that shares visual characteristics can form part of your visual identity. Using similar colour palettes, line weights and illustration styles helps to create memorable icon sets.

Icons should remain consistent across your website – don’t be tempted to use 2 or 3 different versions of the home icon, it gets confusing!

icons designs

Get a custom set of icons

What are favicons?

You might not be familiar with their name, but favicons are the tiny images that appear next to the website title on browser window tabs.

Google displays its signature G, and Facebook has a white F in a blue square… it’s an icon for your website.

Having a favicon on a website is not essential, but having one could improve the overall quality of your website.

Favicons are very tiny – either 16×16 pixels or 32×32 pixels. Bear this in mind when choosing yours, as you won’t see much detail.

icon designs

We can create your perfect custom icon set.

If you use a set of icons as part of your corporate identity, do you want to use the same icons as hundreds of other businesses? Probably not.

Stock icons have their uses, but we tend to work with clients that want their site of unique icons to form part of their brand.

A custom-designed set of icons won’t be seen anywhere else, so they strengthen rather than dilute your branding.

We are also so used to seeing stock icons now that they’ve almost become invisible – custom icons can help you to stand out.

Bonus: We can also turn your unique set of icons into a font. This means your entire team can easily use the icons in any app!

website icons
Kelly Dudley

Kelly Dudley

Kelly looks after copy and content at Toast. She's a professional copywriter with a Degree in Journalism and over 15 years experience producing effective copy for a wide range of clients.