5 website icon best practices + 5 tools for finding icon

Iconography, or informational icons, refers to using and designing icons. And icons are images that represent an action or idea. 

These days, icons are used all over the internet. In fact, some website icons you probably see (and use) every day are:

• An “X” at the top of a page to represent closing a window or page

• A downward facing arrow for downloading something

• The Twitter bird to go to a brand’s Twitter channel 

• A small battery for your device’s power level 

If you’re wondering why icons are so widely used, it’s because they create a better user interface (UI) so your website visitors can have a better user experience (UX). 

Before we get too user- or acronym-happy, though, let’s clarify what these two terms mean: 

• UI refers to the pages and dashboards that people use, when visiting a website or app. For instance, your smartphone’s home screen is a UI you probably use every day. 

• UX refers to the experience your customers have when using your website or app to meet a need, like finding information or buying something. 

So, how do icons make your site’s UI and visitors’s UX as smooth as possible? 

For one, icons save space on your website, which is especially helpful if many of your visitors use small devices, like smartphones or smartwatches to access your site.   

Secondly, icons break up walls of text, which helps your users process your site’s info much quicker. They serve as visual shortcuts, so your visitors can find what they need on your site without having to rummage through paragraphs of copy. 

This quickened absorption makes perfect sense, too, considering humans can process images for as little as 0.013 seconds . 

There’s one major benefit to saving space and making your content easier to digest -- easy navigation.

It’s so important that a staggering 94% of people claim website navigation is the most important website feature. 

On top of that, easy navigation could lead to more sales later on. After all, visitors who find what they want more quickly stay on your site longer and are more likely to peruse your paid offers. 

(By the way, if you want more tips on building pages that convert your customers, check out these 5 UI tweaks to boost trust on sales pages .)  

So, here’s the takeaway:

Icons are graphic symbols that make it easier for your customers to find information on your website. They increase the UI and UX of your site by streamlining your content and increasing your navigation ease. 

OK. We’ve covered how icons are used for website design. Let’s take a quick detour and cover how icons are used in your graphics, since they’re just as useful there. 

How is iconography used in graphics?

Just like on your site, a powerful way iconography is used in graphics is for streamlining your visual content and making it easier to digest. 

Similar to your site’s content, icons break up chunks of text on your graphics, which helps capture and maintain your audience’s interest. Breaking up blocks of text can also make your graphic easy to scan for people who don’t read it word-for-word. 

Consider how difficult it would be to read this infographic if the authors hadn’t included multiple icons. 

As you can see, the icons break up the stats and copy and make it much easier on the eyes.

Icons are also used to introduce or emphasize a topic before getting into the details. 

For instance, this infographic uses icons to provide a visual representation of what the following text describes. 

Using icons, like the cigarette for a smoker’s cough and inhaler for asthmatic coughs in the above graphic, helps readers absorb the gist of the message even if they didn’t read the text below it.  

Plus, easy-to-understand content with visual elements makes your graphics more shareable , so it’s worth incorporating icons into your designs and digital download ideas . 

In a nutshell: 

Use icons in your graphics to break up text, make your content easily consumable, and introduce or emphasize a topic.

Now that we covered the what and why of using icons, let’s walk through six rules of iconography every creator should know. 

5 rules for using icons for websites and graphics

Rule #1: Use familiar icons

The first rule of iconography is to use common icons that are recognizable within your industry and countries where you serve clients. 

Few icons are truly universal. It’s rare that all people from Nebraska to Nigeria will understand certain icons as having the same meaning and purpose. Plus, research has found that users’ recognition rates vary based on how familiar they are with certain icons. 

However, there are widely used icons in certain countries and industries, and those are the icons you want to incorporate into your designs. 

For instance, the printer icon is commonly used to represent printing something. Gmail uses the printer icon on their dashboard to symbolize printing an email. 

If Gmail had used another icon to represent the printing function, such as a “P” or an icon of a sheet of paper, this would’ve been much less intuitive. 

Likewise, the icon of a person using a wheelchair is often used to represent different accessibility requirements. 

For example, Zoya uses this icon on their website so visitors can make their website experience more accessible if needed. 

Aside from using familiar icons, it’s also wise to avoid using variations of them. For instance, refrain from using two or three versions of the “home” button icon on different pages of your site, but rather, use the same home icons on every page.  

Using familiar icons could be the difference between visitors finding what they need on your site and abandoning it out of frustration. 

To recap: 

Use intuitive, familiar icons on your site to give your content a consistent visual experience and make your pages simple to navigate.  

There is such a thing as too familiar, however. Read on to find out why you should avoid too-common icons with multiple meanings. 

Rule #2: Be aware of icons with multiple meanings

While our first rule is to use familiar icons, our second one is to look out for icons that are too familiar and have multiple meanings. 

Again, few icons are truly universal. 

Take, for example, a gift icon. 

On Harry and David , the gift icon represents customers’ gift lists.

Uncommon Goods uses the gift icon to represent their gift finder tool. 

On yet another hand, Slack once used the gift icon to represent software notifications and updates. 

While this may not seem like a major concern on the surface, using a multipurpose icon can poorly affect your users’ experience by causing confusion. 

When users don’t know an icon’s meaning, they use visual cues and simply guess what unfamiliar icons do. 

This, of course, can lead to a lot of wasted clicking around your website and, in turn, abandonment from frustration. 

So, does that mean you’re relegated to using a handful of unambiguous icons?

Not quite. Labeling your icons can help your users understand the icon’s usage and meaning (more on that later). 

You can also use more detailed icons and icons that represent things concretely. 

In fact, research has found that people can more correctly interpret an icon's meaning, regardless of their cultural background, if it has more details and is more concrete. 

Of course, you’ll want to test icons with your audience to see how much detail or concreteness is enough (we’ll cover more on that in a bit, too). 

As a general rule, it’s better to use icons that don’t look like other icons. 

Otherwise, you may receive flack for it, like Slack did after changing their logo icon. Many people pointed out how similar it looked to other businesses, Google’s Photos app being one example. 

Basically, steer clear of using icons with multiple meanings to save your audience from a confusing experience.

Now that you have a fine balance between common and too-common icons, let’s toss in a third element -- simplicity.

Rule #3: Use simple icons

Our next iconography rule is to choose simple, rather than intricate, icons.

The reason is intricate icons may be harder to recognize on smaller screens. 

They may also have unclear or ambiguous meanings for users from different areas, which, of course, affects your visitors’ user experience and shrinks the time they spend on your site.

So, if you find a snazzy and elaborate icon design you want to use, you may want to reconsider and opt for a simpler one instead.  

After all, people generally prefer icons that present ideas or actions in a familiar, pictorial (picture-like), and simple way . 

So, what exactly does a “simple” icon look like?

Simple icons have few lines and details. 

Take, for example, this icon for YouTube ’s “create a video or post” features, which has only two colors and a simple representation of a camera with a plus sign over it. 

Another way to achieve “simple” is to use icons from the same family, meaning each icon has the same illustration style, color scheme, et cetera. 

For instance, it’s easy to tell that these icons are from the same family since they all have orange backgrounds. Each icon also has rounded instead of sharp edges. 

This infographic about content marketing also uses icons from the same family. Each of the icons has the same color scheme (white with navy and purple accents) and have the same angular style. 

Makes it look simple and clean, right?

Another tip for using simple iconography is to make sure you display enough color contrast between your icons and background. 

More specifically, avoid using light colors unless you have a dark background on your site. Icons in dark colors are usually better since they can be seen more easily against white or light backgrounds, which are common for most sites. 

Multi-colored icons with multiple details, such as this icon pack on Flaticon , probably isn’t the easiest to see on your site and won’t make for the highest contrast.

If you’re debating between an outlined or filled-in icon, either pick is a solid choice (no pun intended). 

One research study found no significant difference in terms of speed or accuracy when selecting between these icon styles. 

What does make a difference, though, is the spacing between icons. One research study found that changing icon spacing increases users’ search times , which complicated the UX and may lead to visitors abandoning your site. 

All in all:

Go with simple icons from the same family, use high color contrast between your icons and background, and evenly space out your icons.

To make your icons’ meaning more explicit, consider adding labels.

Rule #4: Label your icons 

Another iconography rule is to label your icons to add extra clarity.

While icons are meant to help you save space and declutter your design, adding text labels to your icons can help to clarify your icon’s meaning. 

Check out the labels on Publix ’s website navigation, for example. 

This makes their navigation very clear and direct.

You can also place labels below icons, just like Canva does in its design dashboard. 

Whether it's below or next to your icons, adding labels also gives your customers a better on-website experience. 

In one study, a UI with icons with labels was perceived to be easier to use and more useful than other formats measured. 

Labels can help to clarify an icon’s purpose across various devices, too. 

Which is important considering consumers averaged eight networked devices per person in North America in 2017. And they’re projected to have an alarming 13.4 by 2022.  

Even if you don’t label your icons, a good rule to follow is to not use icons to stand in for an idea . Icons are meant to visually enhance or emphasize something written in text, not to serve as a secret code. 

Very few icons are used to mean the same thing all over the world and decoding only complicates your messaging.

To wrap it up:

Labeling icons makes their meaning more explicit to your visitors, which gives them a more enjoyable and efficient experience. 

The most explicit icons in the world, however, won’t be of much help to your audience -- unless you follow our fifth rule. 

Rule #5: Make your icons large (enough)

Our fifth rule of iconography is to display your icons in a large enough size. 

This is especially important for your mobile viewers, of which there are many.

In 2019, a whopping 51.51% of web traffic came from mobile devices. 

So, make sure your icons are large enough to be recognized on devices of any size.  

One research study recommends that icons be at least 0.7 centimeters in size when viewed at a distance of 40 centimeters (around 15.7 inches). 

The same study also recommends spacing between icons to be about the same size as the icons themselves. 

Regardless of how you size your icons, the point here is straightforward: Make your icons large enough to easily see and touch on a mobile device. 

This is especially important if you’re using detailed icons. Otherwise, their meaning may be unclear and you risk losing your viewers -- in terms of both understanding your content and abandoning your site.

So, now that you’re ready to use icons in your designs the right way, here are some resources for icon libraries.

5 icon libraries for finding and designing icons

There are plenty of free- or low-cost icon websites where you can find professional-quality icons for your website and graphic designs. 

Some icon websites worth checking out are:

#1. Flaticon

Number of icons: Over 2,386,000 icons

Pricing: $11.99 per month (or $8.25 per month paid annually)

Who it’s best for:

• Creators looking for a massive library of graphic design icons and UX and UI icons

• Those who want to edit and design icons for their site

#2. The Noun Project

Number of icons: Over 2 million

Pricing: $39.99 per year

Who it’s best for:

• Makers who want access to over 2 million icons  

• Anyone who wants the ability to drag and drop icons into several common apps 

#3: Roundicons

Number of icons: Over 42,000 icons

Pricing: One time payment of $99

Who it’s best for:

• Those who want access to icon packs of hundreds to thousands of icons

• Creators who prefer paying a one-time fee for lifetime access 

#4: Streamline

Number of icons: Over 30,000

Pricing: Free for the Free Icon Pack, $194 for the Essential Pack, $274 for the Ultimate Pack 

Who it’s best for:

• Makers looking specifically for a library (rather than a marketplace) with excellent UX and UI icon sets

• Creators willing to pay a bit more for a robust library of icons

#5: Iconmonstr

Number of icons: Over 4,486

Pricing: Free for commercial use

Who it’s best for:

• Those who prefer minimalistic black and white icons

• People who want free icons for web design that are available for commercial use

Use icons to make your website a joy to explore

The right icons can direct your customers to the right pages and content so they’ll stay around longer or make a purchase. 

Some best practices to follow when using icons on your website are:

• #1. Use icons familiar to your audience

• #2. Be cautious when using icons with multiple meanings

• #3. Opt for simple over intricate icons

• #4. Label your icons to add clarity

• #5. Make your icons large enough to recognize and click on any device

With these best practices and icon tools at your fingertips, we’re confident you’ll design a user-friendly website in no time. 

Need somewhere to build that website? Look no further than Podia. Get started today with our ultra-user-friendly website builder for free .