Icons are widely used in web design — they can draw attention to important parts of a web page, act as a shorthand where the text doesn't fit, reinforce a brand, and inform visitors with language barriers.
But to be truly inclusive, your website should use accessible icons. In this post, we'll cover what you need to know to create web-accessible icons, including:
What are accessible icons?
Accessible icons are icons that can be understood by all website visitors, regardless of any impairments, disabilities, or limitations they may have. Accessible icons ensure that every visitor can understand and access the icons on the page and their associated information or functionality.
Over one billion people live with some form of disability, and we’ll bet that these users account for a significant portion of your user base. Following accessibility guidelines in all aspects of your site’s design — including icons — ensures that those with disabilities, impairments, and limitations are not denied the same experience as the rest of your visitors.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
How to Make Accessible Icons
To make your icons accessible to visitors on your website or app, you’ll want to follow a handful of accessibility principles. Here are some tips to keep in mind when designing or implementing an icon set.
Make icons clearly visible on the page.
To be accessible, icons should be clearly visible on the web page. If an icon first requires interaction from the user to be seen (e.g. a click or a mouse hover), it may be missed, meaning not all users will get the same information from the page.
Here's an example from Google Maps. Using the icon menu (pictured below), a visitor can search for grocery stores, restaurants, takeout options, hotels, and gas stations in the area by clicking an icon. For instance, clicking on the restaurant icon will show a list of local restaurants, which are marked on the map with the knife and fork icon.
-Jul-12-2022-03-11-14-87-PM.webp?width=650&height=67&name=2%20accessibility%20icons%20(update%20722)-Jul-12-2022-03-11-14-87-PM.webp)
These options appear at the top of the page even before you conduct a search, and are designed to contrast with the background well enough to be visible.
Use accompanying text to reduce ambiguity.
In the Google Maps example above, also notice the text next to each icon. You might wonder why including text is necessary — after all, isn’t the point of icons to replace text?
The reason this is important is because universally understood icons are rare. A magnifying glass, which means "search" is one of the few that's truly widely recognized. For most icons, however, it’s necessary to accompany the image with a text label to avoid ambiguity.
Even the ubiquitous hamburger icon on mobile menus can be overlooked by users. In fact, an A/B test showed better engagement and conversions when the word “Menu” was added to the icon.
Adding text labels has the added benefit of making the hit area for the link bigger, so it’s easier to click or tap and reduces interaction cost.
Use sufficient color contrast.
You should also consider color for icon accessibility. If an icon's color contrast is too low relative to its background color, some users with limited vision may not be able to see or use it.
Consider the icon set below:
-Jul-12-2022-03-11-15-39-PM.webp?width=650&height=215&name=3%20accessibility%20icons%20(update%20722)-Jul-12-2022-03-11-15-39-PM.webp)
Most visitors would be able to see these social media icons. However, due to low color contrast, those with low vision or color blindness might not be able to. Also, these icons would be challenging for anyone to see when shrunk down on a smaller screen.
The Web Content Accessibility Guidelines recommend a contrast ratio for images of at least 4.5:1 (with the exception of decorative images and images that are part of an inactive interface component). If you don’t know exactly what that means, that’s okay. You can easily check the color contrast of your icons with an online contrast checker like this one.
Write concise, effective alt text.
Alternative text (or alt text for short) is a must for accessible images, as it describes the image to visitors using screen readers. In the case of icons, use alt text that describes the function of the icon when clicked. For example, this icon:
-Jul-12-2022-03-11-14-62-PM.webp?width=80&height=80&name=4%20accessibility%20icons%20(update%20722)-Jul-12-2022-03-11-14-62-PM.webp)
… might have the following alt text:
Additionally, decorative icons do not need alt text because they don’t provide information to visitors. For example, four icons are used to illustrate items in the following Airbnb listing, but telling a blind person that there's a house icon or a key icon is superfluous — what they need to know is in the accompanying text:
-Jul-12-2022-03-11-15-19-PM.webp?width=624&height=288&name=5%20accessibility%20icons%20(update%20722)-Jul-12-2022-03-11-15-19-PM.webp)
For these decorative icons, you should still include the alt attribute in the image tag, but leave the value blank, like so:
Make icons large enough to see and interact with.
Icon size is also important, particularly for icon links. A good size to remember is 44 x 44 pixels, since an icon any smaller will be hard for some users to see or to tap on their mobile device. Check the size of your icon and adjust it if necessary before you export it.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Ready-Made Icon Sets
If you’re not confident with design tools or are pressed for time, you can download pre-drawn icons individually or as icon sets. (Here are 15 free icon sets to get you started.)
Make sure you check the licensing for any icons you download. It’s particularly important if you plan to use them commercially. Some icons have attribution requirements which you should follow.
One of the best-known icon sets is Font Awesome, which contains thousands of icons. Let’s take a closer look at it.
Accessible Icons Using Font Awesome
Font Awesome is an open-source icon set that's popular among web designers. While Font Awesome’s free icons can be used commercially, some icons represent brands that may be trademarked — so, make sure you have the right to use them.
Font Awesome’s powerful search makes it simple to find the right icon for your project. You can filter your search by Free or Pro, icon style, icon type, and more.
-Jul-12-2022-03-11-15-70-PM.webp?width=650&height=282&name=6%20accessibility%20icons%20(update%20722)-Jul-12-2022-03-11-15-70-PM.webp)
Font Awesome icons can be used in two ways. First, there are icon fonts, which use symbols instead of the letters and numbers of regular fonts. Font Awesome also provides SVG icons, which are best for accessibility because it’s easier to add the accessible code that screen readers need to SVGs as opposed to icon fonts.
Some advantages of using Font Awesome are the wide range of icons available, many of which have variants. You can resize icons without losing sharpness, make them any color, and rotate, animate, or flip them.
If you can’t find the icons you need in Font Awesome or anywhere else, creating your own icons may be the best solution — let’s look at what this process entails next.
Start making your web icons accessible.
Incorporating accessibility into your icons is vital for helping your visitors understand your website. They should be easy to see, big enough to interact with, and be able to be understood either in their own right or with accompanying text. For the chance of better engagement, it’s worth taking the extra time to get it right.
Editor's note: This post was originally published in April 2020 and has been updated for comprehensiveness.
