5 website icon best practices + 5 tools for finding
Are you looking to make your site and your graphics simpler for users to use? Make use of website icons. Follow these six most effective practices to help make your logos shine.
Iconography, also known as informational icons, is the process of using and making icons. And icons are images that represent an action or concept.
These days icons are everywhere on the internet. In fact, some website icons that you may see (and use) each day include:
An "X" on the top of a webpage for closing a window or the page
A downward facing arrow for downloading some thing
The bird on Twitter will go to a brand's Twitter channel
Small batteries for your device's power levels
If you're asking why icons are so widely employed, it's because they help create a more appealing UX (UI) so your website visitors can have the best user experience (UX).
Before we get excessively obsessed with acronyms or users, though, let's clarify the meaning of these terms:
The term "UI" refers to the webpages and dashboards people access, when visiting a website or app. As an example, your smartphone's home screen is a UI you probably use every throughout the day.
UX refers to the user experience that your clients have while making use of your app or website to meet a need, like finding information or buying something.
How can icons make your site's UI and visitors's UX as smooth as is humanly possible?
First, icons help you save web space This is particularly beneficial for websites where a lot of visitors are using small devices such as smartphones and smartwatches, to visit your site.
Secondly, icons break up blocks of text. This allows your customers to process your site's info much quicker. They act as visual shortcuts. This means that users can locate what they need on your site and not have to search through paragraphs of copy.
Absorption that is faster makes great sense, too, considering human beings can take in images for as little as 0.013 minutes .
There's one major benefit to the reduction of space and making content more easy to digest -- easy navigation.
It's important enough that it's so important that 94% of users believe that website navigation is the most crucial feature on a website.
Additionally the ease of navigation can lead to greater sales in the future. After all, visitors who can find what they are looking for more quickly stay more on your site and are more likely to look through your paid offers.
So, here's the takeaway:
They are visual symbols that make it easier for your customers to find information about your website. They improve their impact on the UI and UX of your site through streamlining your content and increasing the ease of navigation.
It's okay. The last time we talked about icons, we covered how they are used for website design. We'll go on a brief trip to look at how you can use icons for your graphic designs, as they're as effective in other areas.
How is iconography used in graphics?
Like on your site The way that iconography is used in graphics is for streamlining your content visually and making it simpler to take in.
Much like your site's contents Similar to your site's content, icons cut up large chunks of text on your graphics This helps to draw and maintain your audience's interest. The breaking up of blocks of text can also make your graphic simple to glance over for users who don't read it word-for-word.
Think about how difficult it might be to read this infographic in the event that the designers didn't included multiple icons.
You can see that icons split up statistics and copies and make it much easier on the eyes.
They can also be used to present or emphasize a topic prior to getting into specifics.
As an example, this infographic uses icons to provide an image of what the following text describes.
Utilizing icons, such as the cigarette for a smoker's cough and inhaler for asthmatic coughs, in the previous graphic, helps readers absorb what the main message is even if they didn't read the text below it.
It's as simple as that:
Use icons in your graphics to break up text, allow your material to be easily consumed, and introduce or emphasize the topic.
After we've have covered the why and what of using icons, let's look at the six iconography rules that each creator must know.
Five guidelines for using icons for websites and graphics
Rule #1: Use familiar icons
The first rule of iconography is to choose common icons that are recognizable in your field and the countries where you serve customers.
Few icons are truly universal. It's unlikely that everybody who live from Nebraska to Nigeria are able to recognize specific icons for their significance and meaning. Furthermore, research has revealed that people's recognition rates differ based the degree of familiarity they have to certain symbols.
But, there are widespread icons used in certain industries and countries these are the icons you want to incorporate into your design.
In particular, the printer icon is commonly used to represent printing something. Gmail utilizes the icon of a printer on their dashboard to symbolize printing an email.
If Gmail could have used a different icon to signify printing for printing, like the letter "P" or an icon of a paper sheet it would have been less intuitive.
Likewise, the icon of a person using wheelchairs is frequently employed to signify the various accessibility requirements.
Like, Zoya uses this icon on their site to make the website experience more accessible if needed.
In addition to using icons that are familiar, it's also wise to be wary of using different versions of the same icons. As an example, you shouldn't be having three or two versions of the "home" button icon on different pages of your website, instead utilize the identical icons for home on every page.
Utilizing familiar icons can be the difference between visitors being able to find what they require in your site, and leaving it out of frustration.
To summarize:
Make use of familiar, intuitive icons on your site for an unifying visual experience. create pages that are simple to navigate.
There's a certain something called over familiar, however. Learn more about the reasons why you shouldn't use too common icons that have many meanings.
Rule 2: Be mindful of icons with multiple implications
Our first principle is to use familiar icons, our second one is to watch out for icons that may be too common and that have many definitions.
A few icons, however, have a universal appeal.
Consider, for instance, a gift icon.
The icon on Harry and David , the symbol for gifts represents the customer gift list.
Uncommon Goods utilizes the gift icon to symbolize their gift-finding tool.
On yet another hand, Slack previously used the icon of gifts to symbolize software notifications and updates.
Although it may not appear as a big issue on the surface, using icons that are multipurpose could negatively affect your users' experience because it can cause confusion.
If users aren't sure of what an icon's purpose is when they don't know what an icon means, they use visual cues and guess at the meaning of icons that aren't familiar.
Naturally, this can lead to a lot of time spent on your site and, in turn, abandonment from frustration.
What does this mean? Does it suggest that you're only allowed to use only a few clear icons?
Not quite. It is helpful to label your icons so that your clients understand the icons' usage and meaning (more on that later).
You can also utilize more specific icons or icons that show things with concreteity.
Indeed, studies have discovered that individuals are able to more correctly interpret an image's significance regardless of cultural background, when it contains more specific information as well as being more concrete.
Of course, you'll want to test icons with your audience to see how much detail or concreteness suffices (we'll go into more detail about this in the next paragraph, as well).
As a general rule It's best to select icons that don't look like the other icons.
Otherwise, you may receive some criticism, just like Slack changed their logo. Many people pointed out the similarity like other companies, with Google's Photos application being a prime example.
Simply, stay clear of making use of icons that have multiple meanings to save your audience from a confusing experience.
If you've got a fine balance between common and over-common images, we can add a third component that is simplicity.
Rule #3: Use simple icons
Our next iconography rule is to pick simple, rather than intricate, icons.
This is due to the fact that complex icons are more difficult to recognize on smaller screens.
So, if you find an intricate and snazzy icon design you want to apply, you might want to reconsider and opt for a more simple design instead.
In the end, most people prefer icons that present concepts or activities in an common, visual (picture-like) easy manner .
What exactly is an "simple" icon appear like?
Simple icons are simple and have a few lines and details.
For instance the icon that is used to show YouTube 's "create an account or upload" feature, which is just two colors, and is an unassuming representation of a camera with a plus sign on top.
Another way to achieve "simple" is to use icons belonging to the same family. This means that each icon is based on the same design style and color scheme, et the list goes on.
It's also easy to recognize that the icons are from the same family since they're all colored in orange. Each icon also has round edges instead of sharp ones.
This infographic regarding content marketing employs icons of this same group of icons. Each icon has the same design and color scheme (white with purple and navy accents) and have the same angular style.
Simple and neat, isn't it?
A different tip to use simple iconography is to make sure you display enough color contrast between the icons and the background.
Particularly, you should avoid using lighter colors unless there is a backgrounds that are dark on your site. Icons in dark colors generally work better because they will be viewed more easily when compared to light or white backgrounds, which are common for most sites.
Multi-colored icons with multiple details for example, like this pack of icons available on Flaticon , probably isn't the most user-friendly to show on your site , and they don't provide the best contrast.
If you're trying to decide whether to use an outline or a filled-in icon, either pick is the best option (no joke intended).
One research study found no significant difference in terms of speed or accuracy when selecting from these icons.
What will make a difference however, is the spacing between icons. A study has discovered that altering the spacing of icons improves search times and can cause a problem with the UX and may cause users to leave your website.
In the end:
Go with simple icons from the same family, use the highest contrast of colors between your backgrounds and your icons equally spaced out your icons.
In order to make the icons' significance more obvious, consider adding labels.
Rule #4 Rule #4: Make sure you label your icons
Another tip for iconography is to label your icons to add extra clarity.
Although icons are designed to help you save space and simplify your designs, adding text labels to your icons can help to clarify your icon's meaning.
Take a look at the labels available for the labels on Publix the navigation on their website, for example.
Their navigation is precise and clear.
It is also possible to place labels below icons, just like Canva does in its design dashboard.
Whether it's below or next to your icons, having labels will also give your users an improved experience on your website.
In one study one study, an UI that included labels on icons was perceived to be simpler to use and more useful than other formats measured.
Labels can help to clarify the purpose of icons across different gadgets, as well.
This is crucial considering that consumers averaged eight connected devices per household in North America in 2017. And they're projected to have an alarming 13.4 in 2022.
If you do not label the icons you use, an important rule to follow is to avoid make use of icons to represent an idea . Icons are intended to enhance the visual appeal of the textual content, not to serve as a code to keep secret.
The majority of icons are not used to convey the same meaning in all parts of the world, and decoding can be a hassle message.
In conclusion:
Labeling icons makes their meaning more explicit to your visitors and provides them with an enjoyable and effective experience.
The most explicit icons in the world However, they won't be of much help for your target audience unless you follow our fifth principle.
Rule #5 Rule #5: Make your icons big (enough)
Our 5th rule of iconography is to show your icons in a large enough area.
This is particularly important especially for mobile viewers of which there are plenty.
The year 2019 saw a staggering 51.51 percent of the web traffic resulted from mobile devices.
Also, ensure that your icons are large enough for them to be seen by gadgets of all sizes.
One research study recommends that icons should be no less than 0.7 centimeters when viewed at an average distance 40 centimeters (around 15.7 inches).
This study recommends spacing between icons that is approximately the same that the icons themselves.
No matter how big your icons, the point is simple: make your icons large enough to comfortably touch and view on a mobile device.
It's especially crucial if you're using elaborate icons. In the absence of this, their purpose could be unclear and you risk losing your viewers -- in terms of both comprehending your content as well as abandoning the site.
So, now that you're ready to use icons for your designs in properly Here are some useful icons libraries that can be found.
Five icon libraries to help you find and designing icons
There are a lot of icons for free or at a low cost websites that provide top-quality icons for your site and graphic designs.
The most popular websites to check out include:
#1. Flaticon
Icons: Over 2,386,000 icons
Price: $11.99 per month (or $8.25 per month, paid annually)
Who's it's most suitable for:
Creators looking for a massive library of graphic design icons as well UX as well as UI icons
Anyone who wants to design and edit icons for their website
#2. It is the Noun Project
Number of icons: Over 2 million
Pricing: $39.99 per year
Who is it best to use it for:
Designers and developers who need access to 2 million icons
Anyone looking for the capability of dragging and dropping icons in several common apps
#3: Roundicons
Icons: Over 42,000 icons
Pricing: One time payment of $99
Who is it best to use it for:
People who would like access to icon packs of hundreds of thousands to millions of icons
Creators who want to pay an annual fee to have lifelong access
#4: Streamline
The number of icons: Over 30,000
Pricing: Free for the Free Icon Pack, $194 for the Essential Pack The Ultimate Pack costs $274. Ultimate Pack
Who it's best for:
Designers seeking an library (rather rather than market) which has excellent UX and UI icons
Creators willing to pay a little more to access a collection of icons
#5: Iconmonstr
Number of icons: Over 4,486
Pricing: Free for commercial use
Who it's best for:
People who like minimalist black and white icons
Individuals who require no cost icons for web design that are available for commercial use
Utilize icons to make your website a joy to explore
The right icons can direct your customers to the correct webpages and contents, ensuring they remain longer on your site or even make an purchase.
Some best practices to follow when making use of icons on your site include:
#1. Make use of icons that are familiar to your audience
#2. Use caution when you use icons that have multiple interpretations
#3. Opt for simple over intricate icons
#4. Label your icons for more clarity
#5. Make your icons large enough to recognize and click anywhere on any device.
With these best practices and tools for icon design available, we're confident you'll design a user-friendly website quickly.