5 web icon best practices + 5 tools for finding
Want to make your website and graphics easier for customers to access? Then use website icons and these most effective practices to help make your logos shine.
Iconography, or infographic icons, is the process of using or making icons. Icons are pictures which represent an act or concept.
Today icons are everywhere on the internet. Indeed, some of the web icons that you may encounter (and are using) all day long include:
A "X" located at the top of a webpage to represent closing a window or the page
A downward facing arrow to downloading something
The bird on Twitter will go to the brand's Twitter channel
Small batteries for your device's power level
If you're wondering what the reasons icons are so extensively employed, it's because they create a better user interface (UI) so the visitors to your website can experience a an improved customer experience (UX).
Before we go too user- or acronym-happy, though, let's clarify the difference between these two terms:
"UI" is the term used to describe the screens and dashboards users use, when visiting a website or app. As an example, your smartphone's home screen can be described as a UI you probably use every throughout the day.
UX refers to the experience your customers have when accessing your site or application for a specific purpose, like finding information or purchasing something.
What can you do to help make your website's UI as well as the user experience as fluid as it is possible?
One reason is that icons help you save the space on your site, which is especially helpful if many of your visitors are using small devices such as smartphones and smartwatches, to visit your site.
Second, icons cut through the walls of text. This allows your customers to process the information on your website much faster. They act as visual shortcuts. This means that your visitors can find what they need on your site and not have to search through long paragraphs.
This quickened absorption makes perfect sense, too, considering the human brain are able to process images within 0.013 seconds .
There's one major benefit to saving space and making your content easier to consume: easy navigation.
It's so important that an astounding 94% of users believe that website navigation are one of the most important website feature.
In addition an easy navigation experience could bring more sales later on. In the end, those who can find what they are looking for more quickly stay on your site longer and will be more inclined to browse your offers that are paid for.
So, here's the takeaway:
They are visual symbols that make it easier for visitors to navigate on your site. They improve their impact on the UI and UX of your site by simplifying your website's content and also increasing your ease of navigation.
It's okay. The last time we talked about icons, we covered how they are utilized in website design. Let's take a quick trip to look at the way icons can be used in graphics since they're just as useful there.
Iconography is a method of representation used for graphics?
Just like on your site A powerful method by which iconography is used in graphics is for streamlining the visual information and making it easier to digest.
Much like your site's contents, icons break up portions of text on your graphics This helps to draw the attention of your visitors. The breaking up of 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 reading this infographic if the authors hadn't included several icons.
It is evident that icons separate the stats and copy and make it easier for eyes.
The use of icons can be utilized to present or highlight a subject before going into details.
In particular, this infographic employs icons for a visual representation of what is described in the next paragraph.
The use of icons, such as the cigarette for a smoker's cough, and the inhaler to treat asthmatic coughs, in the previous graphic, helps readers absorb the gist of the message even though they don't know the words below.
It's as simple as that:
Use icons in your graphics to separate text allow your material to be easily consumed, and introduce or emphasize an issue.
Now that we discussed the how and why of using icons, let's walk through six icons that every creator should understand.
Five guidelines for using icons on websites and graphic designs.
Rule #1: Use familiar icons
The first rule of iconography is to use familiar icons that are recognized across your business and in the nations where you serve clients.
There are a few icons that truly universal. It's not often that everyone who live from Nebraska to Nigeria can recognize certain symbols with the same meaning and purpose. Additionally, studies have found that the users' recognition rates differ based upon how well-acquainted they are to certain symbols.
However, there are widely used icons in certain industries and countries and those are the icons that you should incorporate into your designs.
For instance, the printing icon is typically utilized to symbolize printing. Gmail utilizes the icon of a printer on their dashboard to symbolize printing emails.
If Gmail had used another icon for the function of printing like a "P" or an icon of a paper sheet that would've made it more difficult to comprehend.
The image of a person using a wheelchair is often used to represent different accessibility requirements.
As an example, Zoya uses this icon on their site to make the website experience more accessible if required.
Apart from using the familiar icons, it's also wise to be wary of using different versions of the same icons. In particular, avoid using two or three versions of your "home" icon for buttons on different pages of your website. Instead make use of the same icons for home on every webpage.
The use of familiar icons can be the difference between visitors getting what they want on your site and abandoning it out of frustration.
To summarize:
Use intuitive, familiar icons on your site for a consistent visual experience and ensure that your pages are easy to navigate.
There's a certain something called over common, but it is not the same as being too. Read on to find out why you should avoid too-common icons with multiple definitions.
Rule 2: Be mindful of icons that can have different meanings
Our first principle is to use common icons, our next rule is to search for icons that are too well-known and possess multiple definitions.
A few icons, however, are truly universal.
For instance, a gift icon.
The icon on Harry or David David, the gift icon is a representation of customers' gift lists.
Uncommon Goods employs the gift icon to represent their gift finder tool.
In a different way, Slack once used the icon of gifts to symbolize updates and software notifications.
While this may not seem as a big issue on the surface, using a multipurpose icon can poorly impact the user experience by causing confusion.
When users don't know an icon's meaning the meaning of an icon, they use visual cues and guess at what the icons mean.
Naturally, this can lead to a lot of wasted clicking around your website and, eventually, abandonment because of discontent.
So, does that mean you're relegated to using only a few unambiguous icons?
Not quite. It is helpful to label your icons so that your customers understand the icon's purpose and its significance (more on this later).
It is also possible to utilize more specific icons or icons that represent things concretely.
In fact, research has revealed that people are more correctly interpret an image's significance regardless of cultural background, if it contains more specific information or is specific.
Of course, you'll want to test icons in front of your customers to find out how much detail or concreteness suffices (we'll discuss more about that in the next paragraph, as well).
In general, it's better to use icons that don't look like other icons.
In the event that you do, you might get flack for it, like Slack changed the logo of their company. A lot of people commented on that it was similar to other businesses, Google's Photos app is a good example.
In general, avoid making use of icons that have multiple significance to protect your viewers from being confused.
If you've got the perfect balance between typical and too common icons, it's time to add a third component that is simplicity.
Rule #3: Make use of simple icons
Our next iconography rule is to select simple, rather than intricate, icons.
This is due to the fact that intricate icons may be harder to spot on small screens.
In case you see an attractive and intricate icon design you want to utilize, you might be tempted to consider switching to go with a simple one.
For the most part, we prefer icons that present concepts or activities in an simple, familiar, (picture-like), and simple way .
What exactly is a "simple" icon appear to you?
Simple icons are simple and have a only a few lines of text and some details.
Take, for example the icon that is used to show YouTube the "create videos or publish" features, which has only two colors and it's a basic image of a camera, with a plus sign above it.
Another approach to making your design "simple" is to use icons belonging to the same family, meaning each icon has the same style of illustration, color scheme, et the list goes on.
For instance, it's easy to tell that these icons come from the same family because they're all colored in orange. Every icon is also rounded instead of sharp edges.
This infographic about content marketing also uses icons from that same category. Each of the icons has the same color scheme (white with purple and navy accents) as well as the exact angular style.
Simple and tidy, doesn't it?
Another tip for using simple icons is to make sure you show enough contrast between your icons and your background.
In particular, stay clear of light colors unless you have backgrounds that are dark on your site. Dark colors for icons tend to be more appealing since they are more easily on light or white backgrounds. This is common on the majority of websites.
Multi-colored icons with multiple details like the icon packs available on Flaticon may not be the most user-friendly to show on your website and doesn't make for the highest contrast.
If you're debating whether to use an outline or a filled-in icon then either is the best option (no joke intended).
One study discovered no difference regarding speed or accuracy when selecting among these icons.
What does make a difference, though, is the distance between icons. A study has discovered that altering the spacing of icons improves searching times and can cause a problem with the UX and may lead to visitors abandoning your website.
The whole picture:
Go with simple icons from the same family, use high color contrast between your backgrounds and your icons equally spaced out your icons.
To make your icons' purpose more clear Consider the addition of labels.
Rule #4 Rule #4: Make sure you label your icons
Another rule of iconography is labeling the icons you use to provide clarity.
Although icons are designed to save space and declutter your layout, adding text labels to your icons can help to clarify your icon's meaning.
Look up the labels for the labels on Publix 's site navigation such as.
The navigation of their devices is clear and direct.
You can also place labels under icons, much like Canva does on their design dashboard.
It doesn't matter if it's beneath or next to your icons. Adding labels can also provide your visitors with a better on-website experience.
In one study in one research study, in one study, a UI with icons with labels was deemed more user-friendly and more useful in comparison to other formats.
Labels may help clarify the purpose of icons across different gadgets, as well.
This is crucial considering that consumers averaged eight networked devices per person in North America in 2017. They're also projected to reach an alarming 13.4 by 2022.
If you do not label your icons, the best guideline to follow is to not use icons to represent the idea . They are designed to enhance the visual appeal of an idea written in text but not serve as secret codes.
The majority of icons are not used to signify the same concept all over the world and decoding only complicates your message.
For a wrap:
By labelling icons, you can make their meaning clearer to visitors and provides them with the most enjoyable and productive experience.
The most explicit icons in the world, however, won't provide much value for your target audience in the absence of our 5th principle.
Rule #5: Make your icons large (enough)
Our fifth rule of iconography is to display your icons at a big enough dimension.
This is particularly important especially for mobile viewers of which there are many.
In 2019, a whopping 51.51% of website traffic was generated by mobile devices.
So, make sure your icons are large enough to display on phones of any size.
One study recommended that icons should be no less than 0.7 centimeters in size when seen from an average distance of 40 centimeters (around 15.7 inches).
This study recommends spacing between icons to be about the same size in the same way as icons themselves.
Regardless of how you size of your images, the point here is straightforward: Make your icons large enough to comfortably touch and view when using a smartphone.
This is particularly important when you're using detailed icons. In the absence of this, their purpose could be unclear , and you could risk persuading your audience to leave -- in terms of both comprehending your content as well as abandoning the site.
If you're ready to utilize icons in your designs correctly Here are some useful resources for icon libraries.
5 icon libraries for finding and creating icons
There are a lot of free- or low-cost icon sites that offer top-quality icons for your site as well as graphic designs.
The most popular websites to check out include:
#1. Flaticon
Icons: Over 2,386,000 icons
Pricing: $11.99 per month (or $8.25 per month, paid per year)
Who is it best to use it for:
Designers seeking a huge selection of graphic design iconography or UX or UI icons
People who wish to design and edit icons for their site
#2. Noun Project Noun Project
Number of icons: Over 2 million
Price: $39.99 per year
Who's it's most suitable to use it for:
Makers who want access to 2 million icons
Anyone who wants the ability to drop and drag icons into several common apps
#3: Roundicons
Icons: Over 42,000 icons
Prices: One time payment of $99
Who's it's most suitable to be used for:
Those who want access to icons packs that contain hundreds to thousands of icons
Creators who want to pay an all-in one fee for unlimited access
#4: Streamline
Number of icons: Over 30,000
Prices: Free for the Icon Pack, Free Icon Pack, $194 for the Essential Pack, $274 for the Ultimate Pack
Who's it's most suitable to use it for:
Makers looking specifically for an library (rather than market) that have great UX and UI icons
Creators willing to pay a little more to access a collection of icons
#5: Iconmonstr
The number of icons: Over 4,486
Price: Free for commercial usage
Who is it best for:
For those who favor minimalist black and white icons
Individuals who require free icons for web design which are free for commercial use
Utilize icons to make your website an enjoyable experience to visit
The appropriate icons will direct your clients to the appropriate websites and pages, so that they'll be more engaged or complete an purchase.
A few best practices to observe when making use of icons on your site are:
#1. Utilize icons that are that are familiar to your target audience
#2. Use caution when you use icons that have multiple meanings
#3. Select simple, not intricate icons
#4. Label your icons for clarity
#5. Your icons should be sufficient in size to be able to detect and click from any device
By utilizing these top practices and icons tools available We're sure you'll create an easy-to-use site within a matter of minutes.