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