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
afterpay-12-colored
afterpay-24-colored
ai-16
add-12
afterpay-18-colored
afterpay-32-colored
add-image-24
ai-filled-20
ai-24
add-24
ai-filled-16
ai-filled-24
ai-20
ai-spectrum-20-colored
ai-spectrum-24-colored
ai-spectrum-filled-20-colored
ai-tools-16
ai-spectrum-thin-16-colored
ai-spectrum-filled-16-colored
ai-spectrum-16-colored
ai-thin-16
alipay-cn-12-colored
ai-tools-20
alipay-cn-18-colored
ai-tools-24
ai-spectrum-filled-24-colored
alipay-cn-24-colored
alipay-cn-32-colored
alipay-hk-12-colored
alipay-hk-24-colored
amex-18-colored
alipay-hk-18-colored
alipay-hk-32-colored
apple-24
apple-pay-18-colored
amex-24-colored
amex-32-colored
apple-pay-24-colored
archive-16
apple-pay-32-colored
apple-pay-12-colored
archive-24
arrow-left-20
arrow-left-16
amex-12-colored
arrow-right-16
arrow-right-12
arrow-left-24
arrows-3d-24
arrow-right-20
arrows-3d-filled-64-colored
arrows-expand-16
arrow-right-24
article-24
article-16
arrows-3d-16
attention-16
arrow-left-12
attention-filled-24
attention-filled-16
arrows-expand-24
audio-high-16
atv-24
attention-64
audio-low-16
authenticity-guarantee-24
authenticity-guarantee-16
attention-24
atv-16
audio-off-16
auto-adjust-24
authenticity-guarantee-filled-24-colored
background-removal-24
authenticity-guarantee-filled-16-colored
bancontact-12-colored
bancontact-18-colored
bancontact-24-colored
bank-16
background-removal-16
bancontact-32-colored
bank-account-24-colored
bank-64
bank-account-12-colored
bank-account-32-colored
bids-16
bar-chart-24
bank-account-18-colored
bids-64
boat-24
bank-24
bar-chart-16
book-24
book-16
bookmark-24
bookmark-16
boat-16
bookmark-filled-16
brightness-24
bids-24
brightness-16
bookmark-filled-24
brightness-20
camera-16
brand-authorized-seller-24
calendar-64
calendar-24
brand-authorized-seller-16
camera-24
camera-64
car-brake-16
car-16
carnet-12-colored
calendar-16
car-brake-24
car-24
carnet-18-colored
carnet-24-colored
cart-64
cart-16
cart-24
carryon-24
carnet-32-colored
cart-20
cashapp-18-colored
cashapp-12-colored
cashapp-24-colored
categories-24
categories-16
cashapp-32-colored
cb-12-colored
cb-18-colored
cb-32-colored
cb-24-colored
ccd-charger-included
ccd-charger-not-included
ccd-top
certified-recycled-16
certified-recycled-24
chat-16
chair-16
chair-24
chat-24
check-in-24
chat-64
checkbox-mixed-24
checkmark-24
chevron-down-12
chevron-down-16
chevron-down-20
chevron-down-24
chevron-left-20
chevron-left-16
chevron-left-12
chevron-right-16
chevron-right-24
chevron-right-12
chevron-left-24
chinese-coin-16
chinese-coin-24
chevron-right-20
chevron-up-16
chevron-up-24
clear-20
chevron-up-20
chevron-up-12
click-to-call-16
clear-24
clear-16
click-to-call-24
clock-16
close-16
clock-64
close-12
close-24
clock-24
closed-caption-16
collections-16
collections-24
coin-battery-48
close-20
coin-24
closed-caption-filled-16
condensed-grid-24
confirmation-16
confirmation-24
confirmation-64
confirmation-filled-16
contract-16
contrast-24
confirmation-filled-24
copy-16
credit-card-16
copy-24
credit-card-64
credit-card-24
confirmation-filled-12
customize-24
customize-16
crop-24
delete-16
density-compact-16
density-default-24
condensed-grid-filled-24
density-relaxed-16
delete-20
density-default-16
density-relaxed-24
diamond-24
diners-12-colored
density-compact-24
diners-24-colored
diners-32-colored
diamond-16
diners-18-colored
direct-debit-12-colored
direct-debit-32-colored
direct-from-brand-16
direct-debit-18-colored
delete-24
direct-debit-24-colored
discord-24
discover-12-colored
direct-from-brand-24
discount-16
discover-18-colored
discover-24-colored
discover-32-colored
dollar-24
download-16
dollar-16
download-20
discount-24
download-24
ebay-balance-12-colored
drag-drop-16
drag-drop-24
ebay-balance-24-colored
ebay-balance-18-colored
ebay-for-charity-24
ebay-international-shipping-16
ebay-mastercard-12-colored
ebay-live-16
ebay-mastercard-18-colored
ebay-bucks-logo-16-colored
ebay-international-shipping-24
ebay-mastercard-24-colored
ebay-balance-32-colored
ebay-live-24
ebay-for-charity-16
ebay-plus-logo-16-colored
ebay-money-back-guarantee-logo-16-colored
ebay-mastercard-32-colored
ebay-plus-24
ebay-plus-16
ebay-preloved-16
ebay-refurbished-16
eftpos-12-colored
ebay-preloved-24
ebay-refurbished-24
eftpos-32-colored
eftpos-18-colored
elo-24-colored
elo-12-colored
eftpos-24-colored
elo-32-colored
ebay-international-shipping-64
escrow-card-12-colored
escrow-card-24-colored
escrow-card-18-colored
escrow-card-32-colored
euro-16
elo-18-colored
euro-24
exclude-16
expand-16
explore-16
exclude-24
external-link-16
explore-24
european-conformity-48
face-happiest-24
face-happy-24
face-happy-16
external-link-24
face-neutral-24
face-sad-24
fall-leaf-16
fall-leaf-24
face-saddest-24
facebook-messenger-24
external-link-20
feedback-24
facebook-24
feedback-16
feedback-received-16
feedback-received-24
file-16
feedback-20
flag-filled-16
file-24
fingerprint-64
filter-16
flag-16
flag-24
folder-16
filter-24
flash-auto-24
flag-filled-24
flash-24
folder-24
folder-add-16
forklift-16
folder-add-24
franc-16
fingerprint-24
franc-24
forklift-24
full-view-16
free-warranty-24
full-view-filled-16
free-warranty-16
full-view-24
flash-off-24
gallery-24
gallery-16
general-card-18-colored
general-card-24-colored
general-card-12-colored
general-card-32-colored
generic-card-18-colored
generic-card-32-colored
gift-16
gift-24
generic-card-24-colored
generic-card-12-colored
full-view-filled-24
girocard-12-colored
gift-64
gift-card-12-colored
gift-card-18-colored
gift-card-24-colored
girocard-18-colored
girocard-24-colored
glasses-24
girocard-32-colored
glasses-64
google-pay-12-colored
google-pay-18-colored
google-pay-24-colored
gift-card-32-colored
google-24
google-pay-32-colored
graph-16
grid-view-16
graph-dynamic-16
graph-64
graph-dynamic-24
grid-view-filled-16
grid-view-24
graph-24
handbag-16
headlight-16
hanger-16
hanger-24
grid-view-filled-24
headlight-24
heart-20
handbag-24
headphone-16
heart-filled-16
heart-24
heart-16
heart-filled-24
heart-filled-20
help-16
help-24
help-20
help-outline-16
hide-16
history-16
headphone-24
history-24
help-outline-24
image-16
image-24
home-filled-24
history-64
home-24
help-outline-20
hide-24
inbox-16
inbox-24
image-64
information-filled-16
inspect-24
information-24
information-16
inspect-16
inspect-64
information-filled-24
interac-18-colored
instagram-24
interac-32-colored
item-list-16
interac-24-colored
item-list-20
interac-12-colored
item-list-24
jet-ski-24
jcb-18-colored
jcb-24-colored
kakao-pay-12-colored
jcb-32-colored
jet-ski-16
key-24
kakao-pay-18-colored
jcb-12-colored
key-16
kakao-pay-24-colored
keyboard-16
keyboard-24
klarna-black-24-colored
klarna-black-12-colored
klarna-black-18-colored
klarna-black-32-colored
klarna-pink-12-colored
klarna-pink-32-colored
klarna-pink-24-colored
kakao-pay-32-colored
klarna-white-18-colored
klarna-white-24-colored
krona-16
klarna-white-12-colored
lamp-24
krona-24
lamp-16
klarna-pink-18-colored
large-box-16
large-box-24
legacy-escrow-48-colored
legacy-money-back-guarantee-eu-48-colored
legacy-authenticity-guarantee-48-colored
legacy-money-back-guarantee-chf-48-colored
legacy-money-back-guarantee-uk-48-colored
legacy-click-to-call-48-colored
lightbulb-24
legacy-money-back-guarantee-zl-48-colored
legacy-money-back-guarantee-us-48-colored
lightbulb-16
link-24
lightning-bolt-16
lightning-bolt-24
list-view-16
linkedin-24
list-view-24
legacy-free-warranty-48-colored
klarna-white-32-colored
live-eye-16
location-16
live-eye-24
legacy-top-rated-seller-48-colored
lock-16
location-64
location-24
list-view-filled-16
lock-filled-20
list-view-filled-24
lock-filled-24
lock-filled-16
maestro-12-colored
lock-24
mail-24
maestro-32-colored
mail-20
mail-16
maestro-18-colored
maestro-24-colored
mail-open-16
mail-64
mail-unread-16
mail-open-24
map-16
mail-move-24
map-24
map-20
mail-move-16
masonry-view-filled-16
masonry-view-filled-24
masonry-view-16
mail-unread-24
mastercard-12-colored
masonry-view-24
mastercard-18-colored
mastercard-32-colored
medium-box-16
mastercard-24-colored
megaphone-24
megaphone-16
medium-box-24
menu-16
menu-20
mercado-pago-12-colored
microphone-24
mobile-24
mercado-pago-24-colored
menu-24
mercado-pago-18-colored
microphone-16
money-back-guarantee-16
money-back-guarantee-filled-24-colored
money-back-guarantee-24
mercado-pago-32-colored
money-stack-16
mobile-signal-24
money-back-guarantee-filled-16-colored
monthly-invoice-18-colored
monthly-invoice-24-colored
money-stack-24
moon-16
moon-20
monthly-invoice-12-colored
motorcycle-16
mountain-16
motorcycle-24
moon-24
mountain-24
move-16
negative-filled-16
move-24
monthly-invoice-32-colored
neutral-16
negative-filled-24
nfc-16
neutral-24
nfc-card-12-colored
nectar-logo-24-colored
nfc-card-24-colored
nfc-card-32-colored
nfc-24
no-children-zero-three-48
notification-20
notification-24
notification-filled-24
notification-64
out-of-reach-48
overflow-horizontal-16
notification-16
overflow-horizontal-20
nfc-card-18-colored
overflow-horizontal-24
overflow-vertical-24
overflow-vertical-16
package-16
overflow-vertical-20
package-24
panel-20
panel-16
panel-24
panel-close-16
panel-close-24
package-64
panel-close-20
panel-close-vertical-20
panel-close-vertical-24
panel-open-16
panel-open-24
panel-open-20
panel-open-vertical-16
passkey-16
panel-open-vertical-20
panel-open-vertical-24
passkey-24
passkey-64
pause-16
panel-close-vertical-16
pause-filled-64-colored
payoneer-18-colored
payoneer-32-colored
pause-24
payoneer-12-colored
paypal-18-colored
paypal-credit-12-colored
paypal-12-colored
paypal-24-colored
payoneer-24-colored
paypal-disabled-12-colored
paypal-credit-24-colored
paypal-credit-32-colored
paypal-32-colored
paypal-disabled-24-colored
paypal-disabled-32-colored
paypay-18-colored
paypay-12-colored
paypay-24-colored
paypay-32-colored
pencil-24
paypal-credit-18-colored
peso-16
pencil-16
pencil-20
phone-16
pin-24
pin-filled-24
play-16
pinterest-24
play-filled-16-colored
play-24
phone-24
play-filled-64-colored
play-filled-24-colored
peso-24
postepay-12-colored
postepay-18-colored
postepay-32-colored
potted-plant-16
postepay-24-colored
potted-plant-24
print-24
profile-24
pound-24
pound-16
paypal-disabled-18-colored
profile-filled-24
profile-20
profile-16
promotion-16
progress-upcoming-24
progress-current-24
qr-code-16
psa-vault-16-colored
qr-code-24
print-16
recovery-code-24
promotion-24
refresh-16
psa-vault-16
reddit-24
relaxed-grid-24
relaxed-grid-filled-24
recovery-code-16
remove-16
remove-24
remove-12
reply-16
reply-24
refresh-24
ribbon-16
ribbon-24
return-24
ringgit-16
rim-24
rim-16
return-16
ringgit-24
rotate-24
rotate-landscape-right-24
rotate-landscape-left-24
rotate-portrait-right-24
rotate-portrait-left-24
ruler-16
ruler-24
rupee-24
satchel-24
satchel-16
scan-16
search-20
scan-24
search-24
rupee-16
search-16
search-filled-24
search-similar-16
search-similar-20
seasons-16
search-similar-24
search-64
selling-16
security-key-24
select-all-24
selling-filled-24
send-24
selling-24
settings-20
settings-16
settings-24
selling-20
seasons-24
share-android-20
share-android-24
share-ios-16
ship-and-local-16
sharpen-24
share-ios-24
shirt-16
share-ios-20
share-android-16
shovel-16
shirt-24
shoe-box-24
show-24
show-16
small-box-16
small-letter-24
sneaker-24
sneaker-16
snowflake-16
shovel-24
snowflake-24
snowmobile-24
sort-16
snowmobile-16
ship-and-local-24
sort-24
sort-down-12
sparkline-down-20
sort-up-12
small-box-24
sparkline-down-16
sparkline-up-16
sparkline-up-20
sparkline-down-24
sparkline-up-24
speedometer-24
speedometer-16
sparkline-up-filled-24
split-payment-16
split-payment-24
split-view-filled-24
split-view-24
sort-12
star-empty-16
star-empty-24
star-empty-40
star-filled-16
spring-leaf-24
spring-leaf-16
star-filled-40
star-filled-24
star-half-24-colored
star-half-16-colored
stepper-attention-24
stepper-upcoming-24
stepper-confirmation-24
stepper-current-24
store-16
store-24
star-half-dark-16-colored
star-half-dark-24-colored
store-64
store-filled-24
support-24
target-16
switch-camera-24
suitcase-24
swap-16
text-messaging-24
text-messaging-20
swap-24
text-messaging-16
text-messaging-64
the-ebay-vault-16
thumb-down-20
target-24
the-ebay-vault-24
thumb-down-16
thumb-down-filled-24
thumb-down-filled-16
thumb-up-20
thumb-up-16
thumb-up-24
thumb-down-filled-20
thumb-up-64
thumb-up-filled-16
thumb-up-filled-24
thumb-up-filled-20
toggle-mode-top-24
tick-16
tiktok-24
toggle-mode-bottom-24
top-service-16
top-rated-seller-24
top-rated-seller-16
tick-24
trading-card-grade-16
trading-card-grade-24
top-service-24
trading-card-24
transaction-24
translate-16
trading-card-16
translate-20
trend-up-16-fit
trend-down-16-fit
truck-16
trophy-24
truck-24
trophy-16
translate-24
truck-shipped-24
truck-64
truck-shipped-16
twitter-24
undo-16
unionpay-12-colored
undo-24
unionpay-18-colored
unlock-16
unionpay-32-colored
unlock-24
upload-24
upload-16
thumb-down-24
unselect-all-24
venmo-12-colored
venmo-24-colored
venmo-32-colored
venmo-18-colored
verified-condition-24
video-24
verified-condition-16
unionpay-24-colored
visa-12-colored
visa-18-colored
visa-32-colored
wallet-balance-12-colored
wallet-24
wallet-balance-18-colored
wallet-balance-24-colored
watch-16
wallet-balance-32-colored
wallet-64
visa-24-colored
watch-24
won-16
wrench-16
wrench-24
whatsapp-24
yuan-24
youtube-24
yuan-16
won-24
zoom-in-16
zoom-out-16
zloty-16
zoom-out-24
zoom-in-24
zloty-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.
