Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Icons

Icons are widely used in web design. They can draw attention to important parts of a web page, act as a shorthand where text doesn’t fit, reinforce a brand, and inform visitors with language barriers.

But to be truly inclusive, your website should use accessible icons.

What Are Accessible Icons?

Accessible icons are those that can be understood by all website visitors regardless of impairments or disabilities.

To be accessible, icons should be visible. If they first require interactions to be seen, they may be missed.

Here’s an example from Google Maps.

Using the menu below, a visitor can search for restaurants, hotels, bars, and coffee shops in their area by clicking on an icon. Clicking on the restaurant icon will show a list of local restaurants, which are marked on the map with the knife and fork icon.

https://blog.hubspot.com/hs-fs/hubfs/Accessible icons-6.png?width=1500&name=Accessible icons-6.png

What may be less obvious to visitors is the additional search criteria hidden behind the “More” icon. Only by clicking on the “More” icon can you search for banks, gas stations, parking lots, grocery stores, post offices, and hospitals.

The reason this is important to point out 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, it’s necessary to accompany the image with a text label to avoid ambiguity.

For example, 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.

You should also consider color for icon accessibility. If an icon’s color contrast is too low relative to its background, some users with vision loss may not be able to see or use it.

For example, most of us recognize the social media brand links from their icons alone:

But for a blind person who relies on a screen reader to understand content, they’ll need a label written in code to understand what the icon for Twitter is.

Additionally, any icon that’s decorative shouldn’t be read out to visitors because it doesn’t add to their understanding. 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:

Icon size is also important, particularly for icon links. A good size to remember is 44 x 44 pixels because an icon any smaller will be hard for some people to tap on their phone.

Finally, interactive accessible icons must be keyboard accessible and touch accessible as well as clickable via a mouse.

Ready to add accessible icons to your website? The simplest way to begin is to download ready-made icons.

Ready-Made Icon Sets

If you’re not confident with illustration or are pressed for time, you can download pre-drawn icons individually or as icon sets.

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.

Scroll to Top