The icon module is a bundle that provides full access to the entire range of eBay iconography via the <svg> and <use> tags.
Base Icons Only
Only base icons should be used. No state-based icons, such as disabled icons or even possibly an icon relaying an error state (likely red), should be used. Those state modifications on icons should be handled downstream using css modifiers to allow for those variations.
General Markup Approach
To avoid gigantic icons when in a non-CSS state, we use the SVG width and height attributes to override the browser's default 300x150 size.
NOTE: Skin removes all pointer events on icons (via pointer-events: none ) due to a bug in IE. To add events to these icons you should wrap them in another element and attach your events there.
Including an Icon
An icon symbol declaration can be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of an SVG block.
We also provide individual icons as SVGs located in this directory . You can include these on your page as raw SVGs as needed.
NOTE: the SVG tag does not support the hidden attribute, hence a hidden wrapper element is needed.
Presentational Icons
A presentational icon provides no additional content, context or affordance to a page, section or widget.
Presentational icons require aria-hidden="true" , in order to hide them from assistive technology.
Non-Presentational Icons
A non-presentational icon provides essential content, context or affordance to a page, section or widget.
Non-presentational icons require both role="img" and an aria-label for assistive technology.
Icon Classes
Each icon can have a class that corresponds to its width. For example, icon--24 corresponds to the 24px width icon. These correspond with the size associated with each icon.
For colored icons use icon--24-colored These will set the height, and the width will align with the aspect ratio
Icons have a name postfix that corresponds to the width of the icon. For example, "icon-information-24" corresponds to the information icon of the 24px width. Heights may differ depending on the icon.
add-16
add-12
add-image-24
add-24
afterpay-12-colored
afterpay-18-colored
afterpay-32-colored
ai-16
ai-20
ai-24
ai-spectrum-16-colored
ai-filled-20
ai-filled-24
ai-filled-16
ai-spectrum-20-colored
ai-spectrum-24-colored
ai-spectrum-filled-16-colored
afterpay-24-colored
ai-spectrum-filled-20-colored
ai-spectrum-filled-24-colored
ai-spectrum-thin-16-colored
ai-tools-16
ai-tools-20
alipay-cn-12-colored
alipay-cn-24-colored
ai-tools-24
alipay-cn-18-colored
alipay-cn-32-colored
alipay-hk-12-colored
alipay-hk-18-colored
alipay-hk-24-colored
amex-18-colored
amex-12-colored
ai-thin-16
amex-24-colored
amex-32-colored
apple-24
apple-music-24-colored
apple-pay-24-colored
apple-pay-18-colored
apple-pay-32-colored
archive-16
archive-24
arrow-left-12
apple-pay-12-colored
arrow-left-24
arrow-left-16
arrow-right-12
arrow-left-20
arrow-right-16
arrows-3d-24
arrow-right-24
arrow-right-20
arrows-3d-16
arrows-expand-24
arrows-expand-16
attention-16
alipay-hk-32-colored
article-24
article-16
arrows-3d-filled-64-colored
attention-24
attention-filled-24
attention-filled-16
attention-64
atv-16
atv-24
audio-high-16
audio-high-24
audio-off-16
audio-low-16
audio-off-20
audio-off-24
authenticity-guarantee-filled-16-colored
authenticity-guarantee-24
authenticity-guarantee-filled-24-colored
audio-high-20
authenticity-guarantee-16
auto-adjust-24
background-removal-16
background-removal-24
bancontact-12-colored
bancontact-32-colored
bancontact-24-colored
bank-64
bank-24
bank-account-12-colored
bank-account-24-colored
bank-account-32-colored
bar-chart-16
bank-account-18-colored
bids-16
bids-24
bancontact-18-colored
bank-16
boat-24
boat-16
bar-chart-24
book-16
book-24
bids-64
bookmark-24
bookmark-filled-16
brand-authorized-seller-16
brand-authorized-seller-24
bookmark-filled-24
brightness-16
bookmark-16
brightness-20
calendar-64
calendar-16
brightness-24
calendar-24
camera-24
camera-16
camera-64
car-16
car-24
car-brake-16
car-brake-24
card-stack-64
carnet-32-colored
carnet-24-colored
carnet-12-colored
cart-16
cart-20
carryon-24
cart-add-16
cart-64
cart-24
cart-add-20
cart-add-24
cashapp-24-colored
cashapp-32-colored
cashapp-12-colored
carnet-18-colored
cashapp-18-colored
categories-24
cb-12-colored
cb-24-colored
cb-18-colored
cb-32-colored
ccd-top
ccd-charger-not-included
certified-recycled-24
certified-recycled-16
ccd-charger-included
chair-16
chat-64
chat-16
chat-24
check-in-24
chair-24
checkbox-mixed-24
categories-16
checkmark-24
chevron-down-12
chevron-down-16
chevron-down-20
chevron-left-12
chevron-left-16
chevron-down-24
chevron-left-20
chevron-left-24
chevron-right-16
chevron-right-20
chevron-right-24
chevron-up-12
chevron-up-20
chevron-up-16
chinese-coin-16
chevron-up-24
clear-16
chinese-coin-24
clear-20
clear-24
chevron-right-12
click-to-call-16
click-to-call-24
clock-64
clock-16
clock-24
clock-fast-16
close-12
close-16
clock-fast-24
close-20
closed-caption-16
closed-caption-filled-16
coin-24
close-24
collections-16
coin-battery-48
confirmation-16
collections-24
condensed-grid-24
condensed-grid-filled-24
confirmation-24
confirmation-64
confirmation-filled-12
confirmation-filled-16
contract-16
copy-16
confirmation-filled-24
credit-card-16
copy-24
credit-card-24
coupon-16
customize-16
coupon-24
crop-24
customize-24
delete-16
delete-24
delete-20
credit-card-64
density-default-16
density-compact-24
density-relaxed-16
density-default-24
density-relaxed-24
diamond-24
density-compact-16
diners-24-colored
diamond-16
direct-debit-24-colored
diners-32-colored
direct-debit-18-colored
direct-debit-32-colored
direct-from-brand-16
diners-12-colored
diners-18-colored
discount-16
discord-24
direct-from-brand-24
discount-24
discover-12-colored
direct-debit-12-colored
discount-auto-24
discover-24-colored
discover-18-colored
dollar-16
discover-32-colored
discount-auto-16
dollar-off-24
dollar-24
download-16
download-20
download-24
drag-drop-24
drag-drop-16
ebay-balance-32-colored
ebay-balance-12-colored
ebay-bucks-logo-16-colored
ebay-international-shipping-24
ebay-for-charity-16
ebay-balance-24-colored
ebay-international-shipping-16
ebay-international-shipping-64
ebay-balance-18-colored
ebay-for-charity-24
ebay-logo-16-colored
ebay-live-24
ebay-mastercard-12-colored
ebay-mastercard-24-colored
ebay-money-back-guarantee-logo-16-colored
ebay-plus-16
ebay-mastercard-32-colored
ebay-plus-24
ebay-live-16
ebay-plus-logo-16-colored
ebay-preloved-16
ebay-plus-logo-dark-16-colored
ebay-mastercard-18-colored
ebay-refurbished-16
ebay-refurbished-24
ebay-preloved-24
eftpos-18-colored
eftpos-12-colored
eftpos-32-colored
eftpos-24-colored
elo-18-colored
elo-32-colored
elo-12-colored
elo-24-colored
escrow-card-24-colored
escrow-card-12-colored
escrow-card-18-colored
escrow-card-32-colored
european-conformity-48
euro-16
euro-24
exclude-16
exclude-24
expand-16
explore-16
exclude-64
external-link-16
explore-24
external-link-24
external-link-20
face-happiest-24
eye-16
eye-24
face-happy-16
face-sad-24
face-happy-24
face-neutral-24
face-saddest-24
fall-leaf-16
facebook-24
facebook-messenger-24
fall-leaf-24
feedback-24
feedback-16
feedback-20
feedback-negative-16
feedback-neutral-16
feedback-error-16
feedback-error-24
feedback-positive-16
feedback-received-16
file-16
filter-16
fingerprint-64
fingerprint-24
file-24
flag-24
flag-16
flag-filled-16
feedback-received-24
flag-filled-24
flash-24
filter-24
folder-24
flash-off-24
folder-add-16
folder-add-24
forklift-16
flash-auto-24
folder-16
franc-16
franc-24
free-warranty-24
free-warranty-16
full-view-16
full-view-filled-24
forklift-24
full-view-24
full-view-filled-16
gallery-16
general-card-12-colored
gallery-24
general-card-24-colored
general-card-32-colored
generic-card-18-colored
generic-card-12-colored
general-card-18-colored
generic-card-32-colored
gift-24
generic-card-24-colored
gift-16
gift-64
gift-card-12-colored
gift-card-18-colored
gift-card-24-colored
girocard-18-colored
girocard-12-colored
gift-card-32-colored
girocard-24-colored
girocard-32-colored
glasses-24
google-pay-12-colored
google-pay-18-colored
google-pay-24-colored
google-24
google-pay-32-colored
graph-64
graph-16
graph-dynamic-16
graph-dynamic-24
grid-view-24
graph-24
hand-swipe-40
grid-view-16
grid-view-filled-24
handbag-16
glasses-64
handbag-24
hanger-16
hanger-24
grid-view-filled-16
headlight-16
contrast-24
headphone-16
heart-20
heart-16
heart-filled-16
heart-24
headlight-24
heart-filled-20
heart-filled-24
help-16
help-24
help-outline-20
help-outline-16
help-outline-24
hide-16
history-16
history-24
hide-24
home-filled-24
history-64
image-16
image-24
inbox-16
home-24
inbox-24
information-24
information-16
information-filled-16
instagram-24
information-filled-24
inspect-24
inspect-16
interac-18-colored
image-64
interac-24-colored
inspect-64
item-list-24
item-list-20
headphone-24
jcb-18-colored
help-20
interac-32-colored
item-list-16
interac-12-colored
jcb-12-colored
jcb-32-colored
jet-ski-24
kakao-pay-24-colored
kakao-pay-12-colored
jet-ski-16
keyboard-16
keyboard-24
kakao-pay-32-colored
kakao-pay-18-colored
jcb-24-colored
key-24
klarna-black-32-colored
key-16
klarna-black-24-colored
klarna-pink-12-colored
klarna-black-18-colored
klarna-pink-18-colored
klarna-pink-24-colored
klarna-white-18-colored
klarna-white-24-colored
klarna-pink-32-colored
klarna-black-12-colored
klarna-white-12-colored
krona-24
lamp-24
klarna-white-32-colored
lamp-16
large-box-24
large-box-16
legacy-authenticity-guarantee-48-colored
krona-16
legacy-escrow-48-colored
legacy-money-back-guarantee-eu-48-colored
legacy-money-back-guarantee-uk-48-colored
legacy-free-warranty-48-colored
legacy-money-back-guarantee-us-48-colored
legacy-click-to-call-48-colored
legacy-money-back-guarantee-zl-48-colored
legacy-top-rated-seller-48-colored
lightning-bolt-16
lightbulb-16
lightbulb-24
legacy-money-back-guarantee-chf-48-colored
list-view-24
linkedin-24
list-view-16
live-bag-16
list-view-filled-16
link-24
lightning-bolt-24
live-bag-24
live-bag-20
live-broadcast-20
live-broadcast-24
live-eye-24
live-broadcast-thin-16
location-24
location-64
live-eye-16
location-16
list-view-filled-24
location-arrow-24
lock-16
lock-24
lock-filled-16
lock-filled-20
lock-filled-24
location-arrow-16
maestro-12-colored
maestro-18-colored
maestro-24-colored
maestro-32-colored
mail-20
mail-64
mail-16
mail-move-16
mail-move-24
mail-open-24
mail-open-16
mail-unread-24
map-20
mail-24
map-16
masonry-view-16
mail-unread-16
masonry-view-24
masonry-view-filled-24
mastercard-12-colored
mastercard-18-colored
masonry-view-filled-16
mastercard-32-colored
live-bag-thin-16
map-24
medium-box-24
mastercard-24-colored
menu-20
megaphone-16
megaphone-24
menu-16
menu-24
mercado-pago-12-colored
mercado-pago-18-colored
microphone-16
medium-box-16
mercado-pago-24-colored
mercado-pago-32-colored
microphone-24
mobile-24
mobile-signal-24
money-back-guarantee-16
money-back-guarantee-24
money-back-guarantee-filled-24-colored
money-stack-16
money-stack-24
monthly-invoice-24-colored
monthly-invoice-12-colored
monthly-invoice-32-colored
monthly-invoice-18-colored
moon-20
money-back-guarantee-filled-16-colored
motorcycle-16
moon-16
moon-24
move-16
mountain-24
move-24
nectar-logo-24-colored
neutral-16
negative-filled-16
negative-filled-24
nfc-16
nfc-24
nfc-card-18-colored
motorcycle-24
neutral-24
nfc-card-32-colored
no-children-zero-three-48
notification-16
notification-64
notification-filled-24
notification-24
notification-20
nfc-card-24-colored
out-of-reach-48
overflow-horizontal-16
overflow-vertical-16
overflow-horizontal-24
overflow-vertical-24
package-16
overflow-vertical-20
package-24
panel-16
package-64
package-error-24
panel-24
panel-20
panel-close-20
nfc-card-12-colored
mountain-16
panel-close-16
panel-open-16
panel-open-24
panel-close-24
panel-open-20
panel-close-vertical-24
panel-open-vertical-16
panel-open-vertical-24
panel-close-vertical-16
panel-close-vertical-20
panel-open-vertical-20
passkey-16
pause-16
passkey-64
passkey-24
pause-24
payoneer-18-colored
pause-20
payoneer-24-colored
paypal-18-colored
pause-filled-64-colored
overflow-horizontal-20
payoneer-12-colored
paypal-32-colored
payoneer-32-colored
paypal-credit-24-colored
paypal-credit-12-colored
paypal-24-colored
paypal-disabled-12-colored
paypal-disabled-18-colored
paypal-disabled-24-colored
paypal-credit-32-colored
paypay-12-colored
paypay-18-colored
paypal-disabled-32-colored
paypal-credit-18-colored
paypay-32-colored
paypal-12-colored
pencil-24
paypay-24-colored
pencil-16
people-24
people-16
pencil-20
phone-24
peso-16
phone-16
pin-filled-24
pencil-signed-24
pin-24
pinterest-24
play-16
play-filled-16-colored
play-20
play-24
play-disabled-16
play-filled-24-colored
postepay-18-colored
peso-24
postepay-12-colored
play-filled-64-colored
potted-plant-16
pound-16
postepay-24-colored
pound-24
potted-plant-24
print-24
profile-20
profile-24
profile-filled-24
postepay-32-colored
profile-16
print-16
progress-upcoming-24
progress-current-24
promotion-16
promotion-24
psa-16-colored
psa-logo-color-16-colored
psa-logo-16
psa-vault-16-colored
psa-16
psa-vault-24
psa-vault-logo-16
psa-vault-logo-color-16-colored
qr-code-24
recovery-code-24
recovery-code-16
reddit-24
refresh-16
refresh-24
qr-code-16
refresh-20
relaxed-grid-24
remove-12
psa-vault-16
remove-16
remove-24
relaxed-grid-filled-24
reply-16
reply-24
return-16
ribbon-24
ringgit-16
rim-24
rotate-24
ribbon-16
rim-16
rotate-landscape-left-24
ringgit-24
return-24
ruler-16
rotate-portrait-right-24
ruler-24
rotate-portrait-left-24
rupee-16
rotate-landscape-right-24
rupee-24
satchel-24
search-16
satchel-16
scan-16
search-20
search-24
search-64
search-similar-16
scan-24
search-filled-24
search-similar-20
search-similar-24
security-key-24
select-all-24
selling-16
selling-filled-24
seasons-16
seasons-24
send-24
selling-24
selling-20
share-android-16
share-android-20
share-android-24
share-ios-16
settings-20
share-ios-20
sharpen-24
settings-16
share-ios-24
settings-24
ship-and-local-16
shirt-24
shirt-16
shovel-16
shoe-box-24
show-16
ship-and-local-24
show-24
shovel-24
small-box-16
sneaker-24
sneaker-16
small-letter-24
sort-12
snowflake-16
sort-16
snowmobile-16
snowmobile-24
small-box-24
sort-24
sort-down-12
sort-up-12
sparkline-down-16
sparkline-down-20
sparkline-down-24
sparkline-up-20
sparkline-up-24
snowflake-24
sparkline-up-filled-24
speedometer-16
speedometer-24
sparkline-up-16
split-view-24
split-payment-16
spring-leaf-16
star-empty-16
spring-leaf-24
star-empty-40
split-view-filled-24
star-filled-24
star-filled-40
star-filled-16
split-payment-24
star-empty-24
star-half-24-colored
star-half-dark-16-colored
star-half-dark-24-colored
stepper-attention-24
stepper-upcoming-24
store-24
store-16
stepper-confirmation-24
star-half-16-colored
store-filled-24
suitcase-24
support-24
swap-24
swap-16
store-64
text-messaging-16
stepper-current-24
target-16
text-messaging-20
text-messaging-24
text-messaging-64
target-24
the-ebay-vault-24
the-ebay-vault-16
text-size-16
text-size-24
thumb-down-filled-20
thumb-down-24
thumb-down-16
thumb-down-filled-16
thumb-down-filled-24
thumb-down-20
thumb-up-16
thumb-up-24
thumb-up-20
thumb-up-64
tick-16
thumb-up-filled-16
tiktok-24
thumb-up-filled-24
toggle-mode-bottom-24
thumb-up-filled-20
tick-24
toggle-mode-top-24
switch-camera-24
top-rated-plus-24
top-rated-seller-16
top-rated-seller-24
top-service-16
top-service-filled-16-colored
top-service-24
top-service-filled-24-colored
trading-card-24
top-rated-plus-16
trading-card-edition-24
trading-card-16
translate-16
trading-card-grade-24
translate-24
trend-down-16-fit
trend-up-16-fit
trophy-16
trophy-24
trading-card-grade-16
truck-16
truck-64
translate-20
truck-24
truck-shipped-16
twitter-24
undo-16
undo-24
unionpay-12-colored
unionpay-18-colored
unionpay-24-colored
transaction-24
unlock-24
unlock-16
truck-shipped-24
unselect-all-24
unionpay-32-colored
venmo-12-colored
upload-16
upload-24
venmo-24-colored
venmo-18-colored
verified-condition-16
video-24
visa-12-colored
wallet-24
venmo-32-colored
visa-18-colored
verified-condition-24
visa-24-colored
visa-32-colored
wallet-64
wallet-balance-12-colored
wallet-balance-32-colored
watch-16
wallet-balance-24-colored
watch-24
whatsapp-24
wrench-16
wallet-balance-18-colored
won-16
won-24
wrench-24
youtube-24
yuan-16
yuan-24
zloty-16
zloty-24
zoom-in-16
zoom-out-16
zoom-in-24
zoom-out-24
Disabled Icons
Most icons can be given a disabled appearance by adding the icon--disabled modifier.
Simple Icons
Icons that are simple and have only a stroke/fill of a single color simply inherit color and are disabled by inheriting that color as the stroke/fill.
Filled Icons
There are certain filled icons that show up black by default. In order to color these icons, apply the icon--{name}-filled modifier.
Complex Icons
Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.
