Our icons

Our icons are the visual shorthand that make the eBay experience smooth and seamless. They help people find their way, highlight important information, and reinforce our brand’s foundational aspects of being modern, friendly, and universally understood.

Considerations

Metaphorical

We represent tools and topics as simply as possible throughout our product. To achieve this, we leverage existing metaphors for our icons. Some icons are more abstract by nature, but objects like a cart, heart, pencil, image, and magnifying glass are as universal as they come. Metaphors stay consistent across operating systems and remain clear and additive to the experience.

Two rows of icons. The top row includes cart, save, pencil, image. Cart is represented by a shopping cart, save by a heart, pencil by a pencil, and image by a nature landscape graphic in a square. The bottom row includes profile, search, show, mail. Profile is represented by an avatar, search by a magnifying glass, show by an open eye, and mail by an envelope.

Platform specific

While icons should look and feel consistent across the eBay experience, some icons apply only to certain platforms. In these cases, icons should follow a system’s established patterns. For example, the share, back, and overflow buttons look different between iOS and Android.

Two columns of icons for IOS and Android. IOS includes a share, chevron, and overflow icon. The share is a box with an upward arrow, the chevron is an arrow without the tail, and the overflow is made of three dots in a horizontal orientation. Android includes a share, arrow, and overflow icon. The share icon is 3 dots in an arrow-like formation with a line attaching them, the arrow is a standard arrow with a tail, and the overflow icon is three dots in a vertical orientation.

Categories

Core library

We designed our core library of icons to help quickly direct user attention. Think of the home or settings icons—they’re hyper-functional guideposts for users. We’ve organized these icons into common categories for ease of use. View our suite of available icons on the Icon library page.

Two rows of icons. The top row includes thumb up, lamp, cart, trash, and dollar. The bottom row includes location, selling, watch, text message, and home.

Program badges

Our program badges express a service offer or guarantee. You can find these in the “Program badges” category of the core library. These icons support programs such as eBay’s Authenticity Guarantee, Money Back Guarantee, PSA Vault, Direct from Brand, eBay Plus, and more. Learn more about using these badges in product and marketing application on the Program badges page.

Three program badge lockups. From top to bottom is Authenticity Guarantee with a rosette shape and a checkmark inside. Next is eBay Money Back Guarantee with a shield shape and a checkmark inside. Last is eBay Pre-loved with an icon that represents the combination of a heart and a ribbon.

Confirmation indicators

Confirmation indicators express confirmation, verification, and fitment throughout eBay. Learn more about using these indicators on the Confirmation indicators page.

Three confirmation indicator lockups all with green filled checkmarks. From top to bottom is Fits your vehicle, Delivered, and Added to cart.

Characteristics

We use icons to support our customers. While each icon can stand on its own, the icons also work together as a harmonious set. Our icons are free of unnecessary detail, highly legible at smaller sizes, and easy to understand.

Four quadrants of large illustrative icon pairs with grid lines on a vibrant blue background. Upper left is cart 24 and 16px. Upper right is authenticity guarantee 24 and 16px. Lower left is headphone 24 and 16px. Lower right is sneaker 24 and 16px.

Simple shapes

Icons are designed to embody simplicity and clarity, principles that extend to their creation. The process begins with foundational common shapes, which serve as the blueprint. These shapes are then enhanced with rounded corners and refined details, resulting in a polished final asset.

Two rows of graphics describing how to use simple shapes to create icons. The top row shows 2 circles, a rectangle, a square, and a line. The bottom row shows the shapes assembled to create a rigid gift box icon in step 1. The next step shows how the corners are rounded and the circles are adjusted. The final step shows the final constructed gift icon.

Stroke weight

We maintain a consistent stroke weight of 2px for icons sized at 24px, 20px, and 16px, which constitute the bulk of our icon library. Exceptions to this standard are the 12px and 64px icons, which feature stroke weights of 1.25px and 5px, respectively.

A detailed spec diagram of a selling icon in 24 and 16px highlighting stroke weight in black. The 24 and 16px icons both are labeled with a 2px stroke weight.

Radius

The corner radius is determined by icon size and a centered stroke line: 24px and 20px icons feature a 2px radius, while 16px icons have a 1.5px radius. Please note that using an inside- or outside-aligned stroke line will result in an incorrect corner radius. When using these alternative alignments, the corner radius must be adjusted to match the centered stroke specifications.

A detailed spec diagram of a mail icon in 24 and 16px highlighting corner radius. The 24px icon is labeled with a 2px corner radius, while the 16px icon is labeled with a 1.5px corner radius.

Endpoints

To enhance the playful and welcoming nature of our icon style, we use rounded terminals for all endpoints.

Two icons “search similar” and “euro” with black highlights on their end points. The endpoints have rounded terminals.

Safe space

The safe space around our icons is consistently maintained at a minimum of 1px for all sizes. However, circles and various shapes are sometimes allowed to enter this space to aid in optical alignment, particularly for icons with pronounced vertical or horizontal elements.

Three enlarged 24px icons with a pixel grid overlapping on each. There is a safe space of 1px highlighted in gray. From left to right is dollar, image gallery, and car.

Scale

Our icons exhibit close attention to detail, following strict rules to achieve precise clarity and consistency. You can access these icons in 3 primary sizes for optimal legibility and usability, plus additional extra-small and extra-large sizes to use sparingly. As a general rule, do not alter or edit icons.

An illustrative graphic of a large square with nested squares inside. The squares are staggered overlapping in a diagonal pattern from bottom left to upper right. The squares increase in size with the text 12, 16, 20, 24, 64.

Extra small (12)

A select few icons have extra-small 12px versions, ideal for table-sorting controls, chevrons, and arrows—situations where the icon must be functional yet secondary to the main content. These icons feature a 1.25px stroke weight and are enclosed within a 12px bounding box.

A collection of extra small 12px icons. They include the “check” found inside of a checkbox, sort, sort up, and chevron down.

Navigation (20)

A specialized set of 20px icons is designed to support the top navigation area of the product, ensuring optimal optical balance. These icons feature a 2px stroke weight and are exclusively used within 40px circular buttons.

A collection of 20px navigation icons. They are placed in a top navigation bar holding shape. From left to right is chevron left, share ios, save, overflow horizontal, and cart.

Main (24, 16)

Throughout the eBay experience, we predominantly utilize two icon sizes: 16px and 24px, both with a 2px stroke weight. These are the sizes you will most frequently use in your designs.





Two rows of icons. The top row contains 16px icons. From left to right is filter, search, edit, settings. The bottom row contains 24px icons. The icons are in a bottom nav bar. From left to right are home, my ebay, search, notification, selling.

Extra large (64)

Extra-large icons, contained within a 64px bounding box and featuring a 5px stroke weight, are reserved for empty-state screens. Typically, there is 2px to 3px of safe space around the perimeter of the artwork.

A 64px extra large icon representing an empty state. The icon is a magnifying glass with the text “No items found” beneath it.

Drawing size variations

Icons are meticulously crafted at every size. It's crucial to keep in mind that as icons decrease in size, details are often pared down and simplified for optimal clarity. An icon's identity should remain consistent and easily recognizable across all sizes.

A feedback icon drawn at three sizes. From left to right is 24, 20, and 16px. The level of detail is simplified as the icon becomes smaller and the spacing of elements gets tighter.

Icon button sizes

Choose icons that visually align well within buttons. A useful guideline is to select an icon size that is half the size of the button. For instance, opt for a 16px icon when paired with a 32px button.

Three icon buttons in a row with a heart inside. Far left is a 24px icon inside of a 48px circle. Middle is a 20px icon inside of a 40px circle. Far right is a 16px icon inside of a 32px circle.

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 on page
Oct, 2022
  • Updated “Icon style” section
  • Added “Characteristics” section
  • Replaced “Icon types” section with “Core library” and “Sub categories”
  • Moved “Examples” to “Showcase” page
  • Updated “Resources” section