Program badges

Program badges are icon and text lockups that highlight and reinforce existing programs and services at eBay related to trust, authentication, and guarantees.

Overview

Anatomy

A program badge is a lockup featuring a program-specific icon and the name of the program. For the approved set of program icons, see the Icon library.

Icon
Text
Lockup

Size

Program badges come in both 24px and 16px icon lockups and use regular-weight text.

Orientation

Single line

This single line lockup is the primary version that is used across applications.

Double line

This double line lockup is a secondary treatment that may be used when space is limited in marketing materials.

Color framework

Program badges help visualize and convey trust. To create visual hierarchy, we use different badge colors based on quantity of badges in a viewable area and level of importance.

If a program badge is meant to be one of the most important elements on a page, it can stand out by using our blue accent color. Blue is not a requirement, but simply an option. Alternately, if there are many program badges on a page, they may cause too much visual noise and should instead use black to decrease the visual hierarchy. Learn more by visiting Color tokens.

Number of badges

View Item (1 badge)

On the View Item page, a single program badge can appear at the very top of the page above the item’s title. This location provides high-level trust through our blue accent color.

Checkout (1 badge)

A program badge like eBay Money Back Guarantee is common during the checkout process when all items are eligible for the program. This uses our blue accent color to ensure high-level trust during the final step before purchase.

Shop with confidence (1 badge)

On the View Item page, program badges can appear further down in the “shop with confidence” module. It’s common to find program badges with other trust signals and icons in this section. This is a color exception because one program badge is surrounded by other icons and black is used instead of our blue accent color.

Search Results Page (3+ badges)

Throughout the SRP, program badges appear consistently at the bottom of item tiles. Badges only appear on item tiles that match the program’s criteria, and only one badge appears at a time. Since there are many program badges on a page like this, it’s okay to use black to allow them to visually sit back within the design.

Alignment

Text wrapping

Some moments require a program name to wrap onto a second line of text. This can occur for longer program names or as a result of localizing text for another language. When wrapping text, anchor the icon in the upper left, center-aligned with the first line of text.

Rows and cells

Within sections like the “shop with confidence” module on View Item pages, the alignment of program icons and text depends on the amount of lines of text that are present.

Vertically center-align program icon and text when there are 2 lines or less. With 3 or more lines, top-align icon and text. The icon can be placed within a circle background to provide better visual anchoring.

Large badge multi-line

Vertically center-align program icon and text when there are 2 lines or less. With 3 or more lines, top-align icon and text. This treatment provides increased visual attention.

Small badge multi-line

Left-align sub copy underneath small program badge lockups when there is a clean edge line down the page. Keeping an edge will help with scannability.

In marketing

There are a variety of treatments that are used when using program badges throughout marketing materials. Learn more in the UI graphics expression and banner component.

Outlined

Every program has an outlined icon that is associated with it. These icons will be used across the majority of applications.

Filled

The eBay Guaranteed Fit program should only be represented with a filled icon; do not use an outlined version. Authenticity Guarantee on the other hand has both filled and outlined variants. The filled variant is only used when placing on top of photography and to draw more attention to the program. If there are two or more icons in a layout and one of them is filled, the others should also be filled.

Icon and text separated

It is possible to separate the program badge icon and text if the program name is being used as the headline. These layouts are more nuanced and should be developed in partnership with the brand team.

Overline

One of the common use cases for using program badges will be found in the overline of a banner. The overline sits above the banner’s title. The color matches the color scheme of the banner text and button.

Tone-on-tone

When program badges are used in a layout that has a specific color scheme, the color should match the type and other UI elements.

Product

Do use program icons to represent their programs.

Don’t use program icons for anything other than their programs.

Do use a single program badge on item tiles.

Don’t stack multiple program badges in item tiles. Use only the most significant program badge.

Do left-align sub copy underneath program badges to maintain a clean edge line for better scannability.

Don’t indent sub copy to the program name—resulting in an uncomfortable edge line and disrupting scannability.

Do use outlined program badges in product. The main exception is Guaranteed Fit.

Don’t use filled program badges in product. Filled badges are primarily used over photography in marketing. The main exception is Guaranteed Fit.

Don’t use tooltips with program badges. This treatment is often redundant and inaccessible without other visual indicators.

Don’t place other icons or links in close proximity to program badges. These badges are meant to be simple visual indicators.

Don’t create your own color combinations for program badges.

Don’t use bold weight for program badge text.

Marketing

Do use filled icons for all program badges in a layout if there is at least one icon that is filled.

Don’t mix outlined and filled icons for program badges in the same layout.

Do follow the color scheme of the layout. For tone-on-tone, the program badge should match the text and button color.

Don’t use a blue program badge over a colored background.

Do use outlined program badges when they are not placed over photography. The main exception is Guaranteed Fit.

Don’t use filled program badges when they are not placed over photography. The main exception is Guaranteed Fit.

Do use the filled Authenticity Guarantee and eBay Money Back Guarantee icons on top of imagery when needed.

Don’t use the outlined Authenticity Guarantee and eBay Money Back Guarantee icons on top of imagery.

Do follow the provided spec for a double line program lockup.

Don’t text wrap the single line program lockup to two lines to create the double line lockup.

Do place program badges in the text overline when referencing programs in product banners.

Don’t randomly place a program badge lockup in a product banner. This creates unclear content hierarchy.

Specs

These specs apply to all program badges.

Single line 24px

Single line 16px

The double line lockup is built by scaling the 24px icon to 32px. Once the lockup is built to these specs, it can be scaled proportionally to any size needed.

Resources

Strategy and stakeholders must vet a program before it becomes official. Our program badges are a finite set that will grow over time as we expand our program offerings.

To discuss icon needs, reach out to the OneExperience (OX) team or sign up for office hours. Please do not create new program badge icons without consulting OX. Do not alter or edit program badge icons.

Change log

Date	Notes
Jul, 2025	Updated specs for 16px single line spacing from 6px to 4px
Feb, 2025	Updated grid of 21 program badges with the latest guidance
Oct, 2024	Added more best practices to describe outlined/filled usage
Jun, 2024	Updated to eBay Evo Updated overview Added anatomy, marketing, specs, and resources sections
Apr, 2023	Updated icons on page
Dec, 2022	Updated visual examples with latest program badges
Oct, 2022	This page replaces the old “Understanding badges” page Updated overview at the top Added “Sizes” section Added “Color” section Added “Alignment” section Added “Marketing” section Added best practice examples Updated “Resources” section