Using icons

Consistently using iconography and pairing with our other foundations like typography can greatly improve usability, recognition, and perception. These guidelines outline how we craft, interact with, and use iconography.

Overview

Icons should be utilized to enhance user experience by providing intuitive visual cues, aiding in navigation, and improving usability, especially for commonly understood actions or concepts. They shouldn't be overused or substituted for clear text in scenarios where it might cause ambiguity or confusion. Icons should be avoided when they introduce unnecessary complexity or ambiguity, especially if they don't clearly represent associated actions or concepts, hinder accessibility for text-dependent users, or carry meanings that may vary across different cultural or demographic contexts, potentially leading to misunderstandings or user frustration.

Three phone screens showcasing iconography in use. The first is a home page with icons used in the top navigation, category filter pills, and bottom navigation. The second is a My eBay landing page with a list of navigation items each with an icon. The third is a search results page with item tiles and icons being used for programs.

Grid

Iconography should be used when it enhances the user experience by providing intuitive visual cues, aiding in navigation, and improving usability, especially for commonly understood actions or concepts. However, it shouldn't be used excessively or in place of clear text when it risks ambiguity or confusion, particularly for complex or less familiar functionalities where text labels may be more informative.

Icons and text

Color

Fills

Alignment

Best practices

Resources

To discuss icon needs, reach out to the OneExperience (OX) team or sign up for office hours.

Change log

DateNotes
Jun, 2024
  • Updated to eBay Evo
Feb, 2023
  • Updated icons and buttons on page
Aug, 2022
  • Added section for “Icon buttons”