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.

<svg class="icon icon--24" height="24" width="24">
  <use href="#icon-information-24" />
</svg>

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.

<div hidden>
  <svg>
    <symbol id="icon-information-24" viewBox="0 0 24 24">
      <path
        d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10Zm-1-11a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6Zm1-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
      />
    </symbol>
  </svg>
</div>

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.

<svg class="icon icon--24" height="24" width="24" aria-hidden="true">
  <use href="#icon-information-24" />
</svg>

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.

<svg
  class="icon icon--24"
  height="24"
  width="24"
  role="img"
  aria-label="Information"
>
  <use href="#icon-information-24" />
</svg>

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

<svg class="icon icon--24 icon--disabled" height="24" width="24">
  <use href="#icon-chevron-right-24" />
</svg>

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.

<svg class="icon icon--16 icon--confirmation-filled" height="16" width="16">
  <use href="#icon-confirmation-filled-16" />
</svg>
<svg class="icon icon--16 icon--attention-filled" height="16" width="16">
  <use href="#icon-attention-filled-16" />
</svg>
<svg class="icon icon--16 icon--information-filled" height="16" width="16">
  <use href="#icon-information-filled-16" />
</svg>

Complex Icons

Icons that are more complex and have multiple colors with a suffix of -colored are grayscaled with an opacity.

<svg class="icon icon--24-colored icon--disabled" height="24" width="24">
  <use href="#icon-mastercard-24-colored" />
</svg>