eBay Skin

About

Skin is the official CSS framework of eBay. Skin represents the eBay brand and adheres to the following core principals:

Accessible

Skin leverages semantic HTML, SVG & ARIA to apply our styles wherever possible; thus enforcing correct, accessible markup.

Declarative

Skin follows the BEM methodology of "Block, Element and Modifier" to ensure our HTML class name and structure is human readable and understandable.

Decoupled

Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework.

Evergreen

As the eBay design system evolves, so too does Skin, meaning apps only need to keep their Skin package updated to ensure the latest look and feel.

Skin is a pure CSS framework and is bundled with zero JavaScript. This website uses makeup-js to add interactivity to examples where needed.

Install

Skin is distributed via NPM under the @ebay/skin package name.

To use Skin, the package should be added as a dependency in your project's package.json file.

Bundling

Skin supports Webpack and Lasso.js.

Webpack

Add @ebay/skin and @ebay/browserslist-config as dependencies to package.json.

The Skin webpack modules will import CSS so make sure to also have css-loader and style-loader as dev dependencies.

Webpack configuration:

Usage:

Lasso.js

Add the @ebay/skin module as a browser.json dependency to include the entire set of Skin modules.

Or, alternatively, by specifying modules on a per-need basis.

Token System

As of v14, Skin's token-based design system leverages CSS Custom Properties (previously it used LESS).

Tokens are grouped into three distinct sets, that cascade in the following order:

1. Primitive tokens
2. Semantic tokens for light mode
3. Semantic tokens for dark mode

In order for Skin to render correctly, values for core tokens and light tokens are required.

The easiest way to satisfy this requirement is to include one of the following bundles:

• @ebay/skin/tokens

It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.

NOTE: Primitive tokens are not intended to be used by the application; instead, they are utilized by the semantic tokens.

Themes

CSS Custom Properties allow various aspects of the design system language to be dynamically "themed". Typically these aspects are colors, font, border-radius, spacing and grids.

Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.

An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.

The markup requirements are very strictly: a heading, description and button.

Avatars are graphical assets that represent users’ identities across products.

Avatars can show a default image (the first letter of the user's name), custom image, or unknown image.

NOTE: Avatars can be considered as decorative or informative depending on their context and surroundings. Typically, an avatar is displayed adjacent to the user's name, or a sign-in link, therefore making it decorative.

Default Avatar

The default avatar displays the first letter of the user's name.

The default avatar can have a background color of teal, light-teal, green, lime, yellow, orange, magenta, or pink.

Custom Avatar

Avatars can be customized with an image.

NOTE: Sighted users can visually distinguish an avatar based on the image; for non-sighted users the equivalent experience is the name of the user (not a description of the image contents, e.g. "dog in car"!).

Signed-Out Avatar

The avatar-signed-out icon is used to a represent a user that is not signed in.

Avatar Sizes

Avatars can have a size of 32, 40, 48, 56, 64, 96 or 128 pixels.

A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.

The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the icon button and menu modules.

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.

If the last breadcrumb is not the current page, then that link must have a valid href.

Anchor tags can be replaced with buttons if the hierarchy is not intended to be deep linkable. This is a rare & unlikely scenario - therefore please exercise caution!

Long Breadcrumbs with Overflows

Long breadcrumbs can arise due to any combination of small screen sizes, large category names and language translations. In these situations the breadcrumbs will need to get an overflow treatment in the second node with an overflow button and menu items.

If there are 4 or more nodes for breadcrumbs, an overflow on node 2 should be used instead of various additional nodes between that node and the final one. The list of items in the overflow menu should include content from node 2 until last node minus 2 nodes so that there are always 4 nodes on screen including the overflow button node. You cannot show more than 3 breadcrumbs + overflow, or 4 breadcrumbs. The minimum amount to show is 1 leading item, overflow, and the current page you are on.

Additionally, to account for smaller screens, there is a maximum width limit on each node label. Please check the CSS for details (not specified here intentionally to avoid doc/code misalignment).

A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.

A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.

Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.

Default Button

Use the btn or fake-btn class respectively, to create a minimal, default button. This default button is the foundation for all other button types.

Use the large modifier to increase the size of the button.

Use the small modifier to decrease the size of the button.

Primary Button

Use the primary modifier to create a primary button style.

Secondary Button

Use the secondary modifier to create a secondary button style.

Tertiary Button

Use the tertiary modifier to create a tertiary button style.

Disabled Button

The disabled attribute is required to fully disable a button tag.

Remove the href attribute to fully disable an anchor tag.

Partially Disabled Button

Partially disabled buttons are programmatically disabled but retain keyboard focus when disabled. This helps prevent keyboard focus being moved back to the start of the page when focus is lost.

Destructive Button

Use the destructive modifier to create a destructive button style used for removing data.

Primary Destructive Button

Secondary Destructive Button

Tertiary Destructive Button

Adjacent Icon Button

Any SVG icon can be placed adjacent to the button text. To flip position of text and icon, simply swap the DOM order.

Busy State for Button

Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

Click the button below for an interactive example.

NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

Flexible Button

Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

Fixed Height Button

To ensure the same height as other controls, apply a fixed height to a button with btn--fixed-height or btn--large-fixed-height.

Fixed Width Button

Buttons naturally grow wider with their text. The text will wrap naturally once the button width grows to exceed its constrained width.

Fixed Width and Height Button

Of course, with a constrained width and a fixed height, the text will begin to overflow.

The solution is to apply truncation, via the btn--truncated or btn--large-truncated modifiers.

Expandable Buttons

Use the "chevron-down-12" icon to create an expandable button style. Use aria-expanded to convey state.

Use the borderless modifier to remove the border from the expandable button.

Use the form modifier to create an expandable button style that matches the look of form controls (e.g. textbox, select).

Use the btn--slim modifier, in conjunction with btn--form, if displaying an icon only.

For a floated "label", which will appear above the value, use the btn--floating-label and btn__floating-label classes.

In a resting state, with no value, the btn__floating-label--inline modifier is required. This should be added with JavaScript

The calendar module offers readonly and interactive calendar capabilities.

Both types of calendar are structured as data tables; each column representing a day of the week.

Readonly Calendar

A readonly calendar has cells containing static text or hypertext.

The current date is conveyed using calendar__cell--current and clipped text.

NOTE: for the eagle-eyed BEM afionados, we are saying each span has an implicit class of calendar__cell.

Read-Only Calendar with Inactive Dates

Inactive/unavailable dates are conveyed using calendar__cell--disabled and offscreen text.

Read-Only Calendar with Date Range

Date ranges are conveyed using calendar__cell--selected, calendar__range, calendar__range--start, calendar__range-end and clipped text.

Interactive Calendar

An interactive calendar uses toggle buttons to allow the input of single dates or date ranges.

NOTE: a fully functional and accessible interactive calendar requires JavaScript and is outside the scope of a CSS library such as eBay Skin. The examples below are NOT fully functional and serve to demonstrate the necessary HTML semantics and styling hooks only.

Interactive Calendar With Single Date Selection

A single date selection is conveyed using aria-pressed.

NOTE: in comparison to the readonly calendar, with buttons we can now leverage the disabled property and aria-current instead of clipped text.

Interactive Calendar With Date Range Selection

Date ranges are bookended by two buttons with the aria-pressed property. All buttons in between these dates leverage clipped text for assistive technology.

Calendar With Header Pagination

The calendar module allows an optional header section for pagination between months.

Multi-month Calendar with Header Pagination

Multiple instances of calendar__month can be rendered inside of the calendar__body.

Carousels display a list of similar items in a scrolling, horizontal viewport. Items may be entirely static (e.g. an image), entirely interactive (e.g. button) or contain a mix of static and interactive elements (e.g. a heading, image and link).

Items may be ungrouped and scrolled in a continuous manner, or grouped and scrolled via a discrete number of slides.

NOTE: No JavaScript behaviour has been implemented in the carousel examples (i.e. the left & right paddle controls are non-functional), we demonstrate the CSS aspect only. For detailed behaviour requirements, please visit the eBay MIND Pattern for Carousel.

Continuous Carousel

The default carousel is a continuous carousel. Continuous carousels have no concept of slides, only a continuous flow of items.

Continuous carousels cannot guarantee any kind of "peek", therefore a faded mask is applied to the viewport as visual affordance. To disable the mask, when the carousel has reached the end of the content, simply remove the carousel__viewport--mask modifier.

Slide Carousel

A slide carousel has a discrete number of items in the viewport. Each group of items constitutes a "slide".

For visual affordance, instead of a faded mask, slide carousels are always able to show a "peek" of more content.

A slide carousel requires an ARIA live-region (typically also a heading) to convey slide updates to assistive technology.

Slideshow Carousel

A slideshow carousel is a discrete carousel that shows exactly one item per slide; it requires no other visual affordance than a play/pause button.

A slideshow carousel can be set to autoplay, but must loop no more than once.

A representation of legend keys and their values on the plotted area of any chart or graph.

A checkbox is a form control that allows multiple selections from a group of choices.

The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.

The checkbox is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

Default Checkbox

Use the checkbox base class to create a checkbox.

NOTE: Skin uses SVG to give a custom checkbox appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default checkbox in a non-CSS state.

Mixed Checkbox

For a mixed checkbox, that is partially checked, or indeterminate, apply the aria-checked="mixed" state and use icon-checkbox-mixed-18 .

NOTE : JavaScript is required to toggle the aria-checked state.

Large Checkbox

For a larger checkbox, use the checkbox--large modifier plus the #icon-checkbox-unchecked-24 , #icon-checkbox-checked-24 and #icon-checkbox-unchecked-24 icons.

Disabled Checkbox

Use the disabled attribute to disable any checkbox input.

Grouped Checkboxes

A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of checkbox fields and labels.

TIP : For large checkboxes, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

A chip represents a descrete highlighted value.

Static Chip

A static chip simply for informational purposes.

Interactive Chip

An interactive chip has a delete button inside for chip removal.

Chip Containers

When chips appear next to each other in a set, spacing and positioning adjustments should be made on the container, and if necessary, margins adjusted as such. Please review design documentation and follow the guidance here for appropriate specifications.

Here is an example of a container constrained to 300px (for vertical spacing demo reasons) that uses flex with wrapping to remove the whitespace and provide a clean set of chips (whitespace-free) within a container using the appropriate spacing conventions.

Chips Combobox are creators and managers of chip components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.

Empty Chips Combobox

This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.

NOTE : For empty Chips Combobox implementations, to avoid layout issues, make sure .chips-combobox__items does NOT have any whitespace.

Fluid Chips Combobox

Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.

Prefilled Chips Combobox

This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.

Chips Combobox in Disabled State

When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.

To turn on this state, add aria-disabled="true" to the outer element of the module. Additonally, you'll need to add the disabled attribute to all the buttons inside as well as the input element for combobox.

Chips Combobox in Error State

When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.

To turn on the error state, add a class of chips-combobox--error to the outer element of the module. To turn off the error state, remove the class.

In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per a11y rules, color alone should not be used to indicate an error. For more information, please see the field error state docs .

A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal, or via selection from the listbox options, or a combination of both.

TIP : A combobox can be further enhanced with autocomplete behaviour .

Default Combobox

Selecting an option should simply fill the textbox with that value. Options may not have state or any other kind of secondary behaviour.

Disabled Combobox

Apply the disabled property to disable the combobox.

A confirm dialog is a specific type of lightbox-dialog that prompts a user to confirm or reject their action.

The markup requirements are very strictly: a heading, description and two buttons.

An action button takes users to another URL destination (i.e. it is always a hyperlink).

The date textbox offers a calendar based "date picker" as an alternative to manual text entry.

Single Select Date Textbox

The single select date textbox consists of a textbox plus icon button . The icon button launches an interactive calendar inside of a flyout.

The aria-label of the calendar button should be intuitive enough for users of speech recognition software to identify.

NOTE: a fully functional interactive calendar requires JavaScript and is outside the scope of a CSS library. The calendar in this example is a simple readonly version.

Disabled Date Textbox

The disabled date textbox is a disabled textbox input with a calendar icon button that's also disabled. Use the disabled attribute on the input as well as button .

Date Range Textbox

Selecting a date range requires two textboxes; one for the start date and one for the end date.

A details element is an interactive control used to expand and collapse content.

NOTE: The details-element-polyfill is required to polyfill older browsers.

Default Details

Opened Details

Apply the open attribute to change the state.

Centered Details

Apply the details__summary--center class to center the summary.

Small Details

Apply the details__summary--small class to use the smaller version of summary.

RTL Details

Works with right-to-left languages.

ALPHA: APIs are subject to change

The donut chart is a data visualization module designed to display comparative data in an easily digestible and visually appealing format. Our donut chart is composed of four sections: the title, metric, graph, and legend, each serving a distinct purpose to enhance the user's understanding of the data presented.

In practice, the .donut-chart__graph is where we will load in the third-party donut chart.

Small container

Variable width container

Education Notice

The education notice is meant to display a variety of informational content. By default it has a gray background color that has less prominence.

Education notice can use any large 24x24 program badge icon. The icon can be black or blue. They are black by default, but approved program badges can use blue. If the blue is too prominent or noisy, program badges can use black as well.

Education Notice with a Prominent Icon

Default educational notice (gray background) can use a blue icon by adding an icon--prominent modifier on the icon element.

Prominent Education Notice

The prominent education notice includes a background color that pops a bit more. It can be used with a education-notice--prominent modifier.

Dismissable Education Notice

A close button can be placed in a education-notice__header element.

Actionable Education Notice

Link or button actions can be placed in the education-notice__footer element.

Actionable Education Notice Using Link

Actionable Education Notice Using Fake Button

EEKs have two parts, a range, and a rating. The following ranges are available:

And for each range, making sure each rating exists within that given range, the EEK can have the following ratings:

Then each rating needs to have a different color. This depends on the distance it is from the upper range

The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).

Unstacked Field

The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.

Multiple fields can be laid out inline by using the span tag with field class, as per the example below.

Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.

For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.

Stacked Field

For a label stacked above the control, use the field__label--stacked element modifier.

Again, multiple fields can be laid out inline by using a span tag, as per the example below.

Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.

Field Font-Size

The field label will honour any font-size cascade. Wrap the label and control in a field__group element to maintain vertical alignment.

NOTE: form controls do not inherit the font-size cascade. This is default browser behaviour.

Disabled Field

The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.

TIP: Disabled controls are exempt from WCAG colour contrast requirements.

Readonly Field

A readonly control is conveyed using the readonly attribute. The value of a readonly control is passed to the server.

Required Field

A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.

Invalid Field

An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.

IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.

Field Description

A field may have nearby text to describe additional instructions, status or validation error of the control.

The field__description element defines some minimal styling, but does not dictate location or layout. This element has modifiers for confirmation, information and attention, depending on the type of descriptive text (or icon).

TIP: The description element can be designated as an ARIA live-region if client-side updates occur.

Text on Side of Field

A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.

To change the type of decription you would use field__description--confirmation, field__description--information, or field__description--attention.

Text Below Stacked Field

A description can be placed underneath a stacked field simply by using a block-level tag, such as div.

Text Above or Below Unstacked Field

A description can be added directly above and/or below the control by utlising CSS table-layout via the field--table modifier and field__row elements.

Text Below Floating label

When you use a floating label, you can have the description text below

Listbox Button with Label in Error State

You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.

Textbox in Error State

You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

Textbox in Error State

You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

Fluid Field

Form control elements (such as select and input) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.

For a stacked field the control must be set to 100% width (using the fluid utility class) to fill all available space.

The above example shows the fields in a flexbox layout. This layout is created using the field-group helper class. Notice that each field is also set to fluid, in order to fill all available flexbox space (flexbox layout takes care of dividing the space evenly between fluid fields).

If we set the form control width to 100% in an unstacked field, the control would flow to a new line below the label (effectively behaving like a stacked label). This behaviour can be avoided by adding an additional field__group element to create flex layout inside of the field.

TIP: You may want to experiment with sizes other than 100%, and also the flexbox justify-content property.

For a fluid control and description, those elements can be wrapped in a field__group container to create flex layout.

Field Character Count

A field may have a character count section typically under the input and aligned to the right.

In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, aria-live should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.

Field with Character Count Only

Character character can be added by utlising CSS grid via the field__description--group modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right

Field Description and Character Count

A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.

Field Description and Character Count with Text area

A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.

The file-input lets the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission , or manipulated using JavaScript code and the File API .

The entire element can function as a dropzone for drag and drop, however this functionality requires JavaScript and is outside the scope of a CSS library such as eBay Skin.

Base

The file-preview-card-group is a group of single or multiple file preview cards.

This component is an atomic piece file-preview-card which is the recommended piece to use. Using other components may result in unexpected results.

Base

Responsive Out of the Box

Similar to Toggle Button Group, this component is responsive out of the box. The cards will responsively shrink and stretch the specific type of cards inside and attempt to fit the cards nicely within the container at any and all screen sizes.

We use display: grid to create a predefined allotted number of card slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows cards to shrink/stretch the predefined number of cards at each breakpoint with a fallback to media queries for unsupported browsers.

The responsive rules around how many toggle cards appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive layout at various screen sizes.

In the demo below, drag the range to see the responsive rules in action.

The file-preview-card can be used to display file previews. A css grid layout is used to define the areas in which certain elements can be placed.

Uploading File Preview Card

Image File Preview Card

For image file types, the image is showcased in the body of the card.

Video File Preview Card

For video file types, a preview is shown within the body of the card.

Document File Preview Card

For document file types, such as documents, the card does not display a preview within its body.

See More File Preview Card

If the number of visual files exceeds the maximum display limit, a "See More" action button will appear at the center of the preview card, allowing you to view the additional files.

+15

Use the filter-button or filter-link classes, to create a button or link styled as a filter button. Group together multiple filter buttons inside of a filter-group container.

Unselected Filter Button

By default, a filter button is in a non-selected state.

Selected Filter Button

Apply the aria-pressed state to a button, or filter-link--selected modifier to a link.

Disabled Filter Button

Apply the disabled property or remove the href attribute to disable a button or link, respectively.

Truncated Filter Button

Long text will automatically become truncated when it reaches the maximum width.

A filter menu button opens a menu of options by which to filter a result set.

Non-Active Filter Menu Button

With no filters active, a filter menu button should be in a non-active state. Set the aria-pressed property to false.

Active Filter Menu Button

With one or more filters active, set the button's aria-pressed property to true.

Disabled Filter Menu Button

The button can be disabled using the disabled property.

Filter Menu Button with a Form

When a native form is required, wrap the menu items with a form and use the appropriate checkbox markup.

A filter menu forms the basis of the filter-menu-button module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).

Multi-Select Filter Menu

Single-Select Filter Menu

Filter Menu with Disabled Options

Filter Menu as Form

A form version is also available. It uses the checkbox and radio modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.

The flag module is a bundle that provides full access to all the country flags via the <svg> and <use> tags.

Including an Flag

A flag can be referenced from the flags svg file. We also provide individual flags 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.

• afAfghanistan
• axAland Islands
• alAlbania
• dzAlgeria
• asAmerican Samoa
• adAndorra
• aoAngola
• aiAnguilla
• aqAntarctica
• agAntigua and Barbuda
• arArgentina
• amArmenia
• awAruba
• acAscension Island
• auAustralia
• atAustria
• azAzerbaijan
• bsBahamas
• bhBahrain
• bdBangladesh
• bbBarbados
• es-pvBasque Country
• byBelarus
• beBelgium
• bzBelize
• bjBenin
• bmBermuda
• btBhutan
• boBolivia
• bqBonaire, Sint Eustatius and Saba
• baBosnia and Herzegovina
• bwBotswana
• bvBouvet Island
• brBrazil
• ioBritish Indian Ocean Territory
• bnBrunei Darussalam
• bgBulgaria
• bfBurkina Faso
• biBurundi
• cvCabo Verde
• khCambodia
• cmCameroon
• caCanada
• icCanary Islands
• es-ctCatalonia
• kyCayman Islands
• cfCentral African Republic
• ceftaCentral European Free Trade Agreement
• tdChad
• clChile
• cnChina
• cxChristmas Island
• cpClipperton Island
• ccCocos (Keeling) Islands
• coColombia
• kmComoros
• ckCook Islands
• crCosta Rica
• hrCroatia
• cuCuba
• cwCuraçao
• cyCyprus
• czCzech Republic
• ciCôte d'Ivoire
• cdDemocratic Republic of the Congo
• dkDenmark
• dgDiego Garcia
• djDjibouti
• dmDominica
• doDominican Republic
• ecEcuador
• egEgypt
• svEl Salvador
• gb-engEngland
• gqEquatorial Guinea
• erEritrea
• eeEstonia
• szEswatini
• etEthiopia
• euEurope
• fkFalkland Islands
• foFaroe Islands
• fmFederated States of Micronesia
• fjFiji
• fiFinland
• frFrance
• gfFrench Guiana
• pfFrench Polynesia
• tfFrench Southern Territories
• gaGabon
• es-gaGalicia
• gmGambia
• geGeorgia
• deGermany
• ghGhana
• giGibraltar
• grGreece
• glGreenland
• gdGrenada
• gpGuadeloupe
• guGuam
• gtGuatemala
• ggGuernsey
• gnGuinea
• gwGuinea-Bissau
• gyGuyana
• htHaiti
• hmHeard Island and McDonald Islands
• vaHoly See
• hnHonduras
• hkHong Kong
• huHungary
• isIceland
• inIndia
• idIndonesia
• irIran
• iqIraq
• ieIreland
• imIsle of Man
• ilIsrael
• itItaly
• jmJamaica
• jpJapan
• jeJersey
• joJordan
• kzKazakhstan
• keKenya
• kiKiribati
• xkKosovo
• kwKuwait
• kgKyrgyzstan
• laLaos
• lvLatvia
• lbLebanon
• lsLesotho
• lrLiberia
• lyLibya
• liLiechtenstein
• ltLithuania
• luLuxembourg
• moMacau
• mgMadagascar
• mwMalawi
• myMalaysia
• mvMaldives
• mlMali
• mtMalta
• mhMarshall Islands
• mqMartinique
• mrMauritania
• muMauritius
• ytMayotte
• mxMexico
• mdMoldova
• mcMonaco
• mnMongolia
• meMontenegro
• msMontserrat
• maMorocco
• mzMozambique
• mmMyanmar
• naNamibia
• nrNauru
• npNepal
• nlNetherlands
• ncNew Caledonia
• nzNew Zealand
• niNicaragua
• neNiger
• ngNigeria
• nuNiue
• nfNorfolk Island
• kpNorth Korea
• mkNorth Macedonia
• gb-nirNorthern Ireland
• mpNorthern Mariana Islands
• noNorway
• omOman
• pkPakistan
• pwPalau
• paPanama
• pgPapua New Guinea
• pyParaguay
• pePeru
• phPhilippines
• pnPitcairn
• plPoland
• ptPortugal
• prPuerto Rico
• qaQatar
• cgRepublic of the Congo
• roRomania
• ruRussia
• rwRwanda
• reRéunion
• blSaint Barthélemy
• shSaint Helena, Ascension and Tristan da Cunha
• knSaint Kitts and Nevis
• lcSaint Lucia
• mfSaint Martin
• pmSaint Pierre and Miquelon
• vcSaint Vincent and the Grenadines
• wsSamoa
• smSan Marino
• stSao Tome and Principe
• saSaudi Arabia
• gb-sctScotland
• snSenegal
• rsSerbia
• scSeychelles
• slSierra Leone
• sgSingapore
• sxSint Maarten
• skSlovakia
• siSlovenia
• sbSolomon Islands
• soSomalia
• zaSouth Africa
• gsSouth Georgia and the South Sandwich Islands
• krSouth Korea
• ssSouth Sudan
• esSpain
• lkSri Lanka
• psState of Palestine
• sdSudan
• srSuriname
• sjSvalbard and Jan Mayen
• seSweden
• chSwitzerland
• sySyria
• twTaiwan
• tjTajikistan
• tzTanzania
• thThailand
• tlTimor-Leste
• tgTogo
• tkTokelau
• toTonga
• ttTrinidad and Tobago
• taTristan da Cunha
• tnTunisia
• tmTurkmenistan
• tcTurks and Caicos Islands
• tvTuvalu
• trTürkiye
• ugUganda
• uaUkraine
• aeUnited Arab Emirates
• gbUnited Kingdom
• unUnited Nations
• umUnited States Minor Outlying Islands
• usUnited States of America
• xxUnknown
• uyUruguay
• uzUzbekistan
• vuVanuatu
• veVenezuela
• vnVietnam
• vgVirgin Islands (British)
• viVirgin Islands (U.S.)
• gb-wlsWales
• wfWallis and Futuna
• ehWestern Sahara
• yeYemen
• zmZambia
• zwZimbabwe

Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.

Floating Label with no Value

If the textbox has no value, the label can be positioned inside the textbox.

Floating Label with Value

If the textbox has a value, the label must be positioned above the textbox.

Large floating label

Floating Label with Disabled Textbox

Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.

Floating Label with Placeholder

The placeholder should only be shown when the textbox is focused and there is no text

Floating Label with Invalid Textbox

Set the aria-invalid property to true and add floating-label__label--invalid to the label to semantically and visually highlight the invalid state.

Floating Label with Textarea

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

In order to prevent overlap for floating label, use .floating-label--opaque class

Floating label with Combobox

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

Floating Label with long text

This example shows how the floating label will truncate with long text

Floating Label with select

Floating Label with large select

Floating Label with Phone input

For phone input, the label always remains in floating state above the input. This state ensures that the label does not obscure the phone number.

Floating Label Transitions

By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.

When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.

You will also need to add the floating-label__label--focus class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.

To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.

The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.

@ebay/skin/global

The global module defines the styles of any common page aspects, such as font family, font size, background color, text color and link states.

Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

To remove the background colour and hover states, apply the icon-btn--transparent modifier. This is typically needed if the icon button is placed on a non-default background colour or if the icon has a colour fill (as in the case below).

Badged Icon Button

An icon button can be badged using the badge module.

The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

Primary Icon Button

Use the primary modifier to create a primary icon button variant.

Secondary Icon Button

Use the secondary modifier to create a secondary icon button variant.

Tertiary Icon Button

Use the tertiary modifier to create a tertiary icon button variant.

Using with a Progress Spinner

You may use a progress spinner inside the icon button.

Using a Link

You may use an <a> to create a link icon button as well.

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

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