npm - @ebay/skin - Versions diffs - 15.5.1 → 16.0.0-0 - Mend

@ebay/skin 15.5.1 → 16.0.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (948) hide show

package/src/less/icon/icon.less CHANGED Viewed

@@ -10,80 +10,54 @@ svg {
         .color-token(color-foreground-disabled);
         fill: currentColor;
     }
-    &.icon--attention-filled {
+    &.icon--attention-filled-16,
+    &.icon--attention-filled-24 {
         .color-token(color-foreground-attention);
     }
-    &.icon--confirmation-filled {
+    &.icon--confirmation-filled-16,
+    &.icon--confirmation-filled-24 {
         .color-token(color-foreground-confirmation);
     }
-    &.icon--information-filled {
+    &.icon--information-filled-16,
+    &.icon--information-filled-24 {
         .color-token(color-foreground-information);
     }
     &.icon--star-empty {
         .color-token(color-foreground-disabled);
     }
-    &.icon--attention-filled-small {
-        .color-token(color-foreground-attention);
-    }
-    &.icon--confirmation-filled-small {
-        .color-token(color-foreground-confirmation);
-    }
-    &.icon--information-filled-small {
-        .color-token(color-foreground-information);
-    }
     &.icon--star-empty-small {
         .color-token(color-foreground-disabled);
     }
     // todo: these should be .color-token(icon-foreground-color, color-foreground-primary) ?
-    &.icon--social-link {
+    &.icon--social-link-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-discord {
+    &.icon--social-discord-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-facebook {
+    &.icon--social-facebook-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-messenger {
+    &.icon--social-messenger-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-pinterest {
+    &.icon--social-pinterest-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-reddit {
+    &.icon--social-reddit-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-twitter {
+    &.icon--social-twitter-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-whatsapp {
+    &.icon--social-whatsapp-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--social-linkedin {
+    &.icon--social-linkedin-24 {
         .color-token(color-social-icons-background);
     }
-    &.icon--spinner-large {
+    &.icon--spinner-30 {
         .icon-image-mixin("spinner-large");
     }
-    &.icon--dropdown {
-        height: 8px;
-        width: 8px;
-    }
-    &.icon--breadcrumb {
-        height: 8px;
-        width: 8px;
-    }
-}
-[dir="rtl"] svg {
-    &.icon--back,
-    &.icon--breadcrumb,
-    &.icon--carousel-next,
-    &.icon--carousel-prev,
-    &.icon--chevron-left,
-    &.icon--chevron-right,
-    &.icon--cta,
-    &.icon--pagination-next,
-    &.icon--pagination-prev {
-        transform: rotate(180deg);
-    }
 }

package/src/less/icon/stories/icon.stories.js CHANGED Viewed

@@ -2,8 +2,8 @@ export default { title: 'Icon' };
 export const insideHeading = () => `
 <h2>
-    <svg class="icon icon--information">
-        <use href="#icon-information"></use>
+    <svg class="icon icon--information-24">
+        <use href="#icon-information-24"></use>
     </svg>
     <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
 </h2>
@@ -12,8 +12,8 @@ export const insideHeading = () => `
 export const RTLInsideHeading = () => `
 <div dir="rtl">
     <h2>
-        <svg class="icon icon--information">
-            <use href="#icon-information"></use>
+        <svg class="icon icon--information-24">
+            <use href="#icon-information-24"></use>
         </svg>
         <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
     </h2>
@@ -22,8 +22,8 @@ export const RTLInsideHeading = () => `
 export const insideParagraph = () => `
 <p>
-    <svg class="icon icon--information">
-        <use href="#icon-information"></use>
+    <svg class="icon icon--information-24">
+        <use href="#icon-information-24"></use>
     </svg>
     <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>
 </p>
@@ -31,16 +31,16 @@ export const insideParagraph = () => `
 export const insideLink = () => `
 <a href="http://www.ebay.com">
-    <svg class="icon icon--window">
-        <use href="#icon-window"></use>
+    <svg class="icon icon--external-link-24">
+        <use href="#icon-external-link-24"></use>
     </svg>
     <span>There was an error with your payment. Please try again.</span>
 </a>
 `;
 export const beforeLink = () => `
-<svg class="icon icon--window">
-    <use href="#icon-window"></use>
+<svg class="icon icon--external-link-24">
+    <use href="#icon-external-link-24"></use>
 </svg>
 <a href="http://www.ebay.com">
     <span style="vertical-align: middle;">There was an error with your payment. Please try again.</span>

package/src/less/icon-button/icon-button.less CHANGED Viewed

@@ -113,30 +113,30 @@ a.icon-link--badged {
 }
 // color-filled icons need to be filled with their color at this specificity level, because of other fill rules above
-button.icon-btn > svg.icon--confirmation-filled,
-button.icon-btn > svg.icon--confirmation-filled-small,
-a.icon-link > svg.icon--confirmation-filled,
-a.icon-link > svg.icon--confirmation-filled-small {
+button.icon-btn > svg.icon--confirmation-filled-24,
+button.icon-btn > svg.icon--confirmation-filled-16,
+a.icon-link > svg.icon--confirmation-filled-24,
+a.icon-link > svg.icon--confirmation-filled-16 {
     .fill-token(color-foreground-confirmation);
     &:hover {
         .fill-token(color-foreground-confirmation);
     }
 }
-button.icon-btn > svg.icon--attention-filled,
-button.icon-btn > svg.icon--attention-filled-small,
-a.icon-link > svg.icon--attention-filled,
-a.icon-link > svg.icon--attention-filled-small {
+button.icon-btn > svg.icon--attention-filled-24,
+button.icon-btn > svg.icon--attention-filled-16,
+a.icon-link > svg.icon--attention-filled-24,
+a.icon-link > svg.icon--attention-filled-16 {
     .fill-token(color-foreground-attention);
     &:hover {
         .fill-token(color-foreground-attention);
     }
 }
-button.icon-btn > svg.icon--information-filled,
-button.icon-btn > svg.icon--information-filled-small,
-a.icon-link > svg.icon--information-filled,
-a.icon-link > svg.icon--information-filled-small {
+button.icon-btn > svg.icon--information-filled-24,
+button.icon-btn > svg.icon--information-filled-16,
+a.icon-link > svg.icon--information-filled-24,
+a.icon-link > svg.icon--information-filled-16 {
     .fill-token(color-foreground-information);
     &:hover {
         .fill-token(color-foreground-information);

package/src/less/icon-button/stories/alignment.stories.js CHANGED Viewed

@@ -2,27 +2,27 @@ export default { title: 'Icon Button/Alignment' };
 export const menu = () => `
 <button aria-label="menu" type="button" class="icon-btn">
-    <svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu"></use></svg>
+    <svg class="icon icon--menu-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu-16"></use></svg>
 </button>
 <a aria-label="menu" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--menu" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu"></use></svg>
+     <svg class="icon icon--menu-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu-16"></use></svg>
 </a>
 `;
 export const settings = () => `
 <button aria-label="settings" type="button" class="icon-btn">
-    <svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings"></use></svg>
+    <svg class="icon icon--settings-24" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings-24"></use></svg>
 </button>
 <a aria-label="settings" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--settings" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings"></use></svg>
+     <svg class="icon icon--settings-24" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings-24"></use></svg>
 </a>
 `;
 export const close = () => `
 <button aria-label="close" type="button" class="icon-btn">
-    <svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close"></use></svg>
+    <svg class="icon icon--close-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close-16"></use></svg>
 </button>
 <a aria-label="close" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--close" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close"></use></svg>
+     <svg class="icon icon--close-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close-16"></use></svg>
 </a>
 `;

package/src/less/infotip/stories/infotip.stories.js CHANGED Viewed

@@ -3,8 +3,8 @@ export default { title: 'Infotip' };
 export const collapsed = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-        <svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-information-small"></use>
+        <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-information-16"></use>
         </svg>
     </button>
     <div class="infotip__overlay">
@@ -16,8 +16,8 @@ export const collapsed = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -28,8 +28,8 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-        <svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-information-small"></use>
+        <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-information-16"></use>
         </svg>
     </button>
     <div class="infotip__overlay">
@@ -41,8 +41,8 @@ export const expanded = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                        <use href="#icon-close"></use>
+                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -55,8 +55,8 @@ export const paragraphCollapsed = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
-                <use href="#icon-information-small"></use>
+            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+                <use href="#icon-information-16"></use>
             </svg>
         </button>
         <span class="infotip__overlay">
@@ -68,8 +68,8 @@ export const paragraphCollapsed = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                            <use href="#icon-close"></use>
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
                         </svg>
                     </button>
                 </span>
@@ -83,8 +83,8 @@ export const paragraphExpanded = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-            <svg class="icon icon--information-small" focusable="false" width="16" height="16" aria-hidden="true">
-                <use href="#icon-information-small"></use>
+            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+                <use href="#icon-information-16"></use>
             </svg>
         </button>
         <span class="infotip__overlay">
@@ -96,8 +96,8 @@ export const paragraphExpanded = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
-                            <use href="#icon-close"></use>
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
                         </svg>
                     </button>
                 </span>

package/src/less/inline-notice/inline-notice.less CHANGED Viewed

@@ -29,7 +29,7 @@ span.inline-notice {
 }
 [dir="rtl"] {
-    .inline-notice__header .icon.icon--confirmation-filled-small {
+    .inline-notice__header .icon.icon--confirmation-filled-16 {
         margin-left: @spacing-100;
     }
 }

package/src/less/inline-notice/stories/inline.stories.js CHANGED Viewed

@@ -3,8 +3,8 @@ export default { title: 'Inline Notice' };
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -17,8 +17,8 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>
         <span class="inline-notice__main">
@@ -31,8 +31,8 @@ export const RTL = () => `
 export const attention = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -44,8 +44,8 @@ export const attention = () => `
 export const information = () => `
 <div class="inline-notice inline-notice--information">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--information-filled-small" role="img">
-            <use href="#icon-information-filled-small"></use>
+        <svg focusable="false" class="icon icon--information-filled-16" role="img">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -65,8 +65,8 @@ export const general = () => `
 export const paragraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -79,8 +79,8 @@ export const paragraphAndLink = () => `
 export const longParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -92,8 +92,8 @@ export const longParagraph = () => `
 export const longParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header" role="img">
-        <svg focusable="false" class="icon icon--attention-filled-small">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -106,8 +106,8 @@ export const longParagraphAndLink = () => `
 export const multiParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -120,8 +120,8 @@ export const multiParagraph = () => `
 export const multiParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-small" role="img">
-            <use href="#icon-attention-filled-small"></use>
+        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
     <span class="inline-notice__main">
@@ -136,8 +136,8 @@ export const longWordInConstrainedWidth = () => `
 <div style="width:300px;">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled-small" role="img">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>
         <span class="inline-notice__main">

package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js CHANGED Viewed

@@ -6,8 +6,8 @@ export const base = () => `
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-small" aria-hidden="true">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -29,8 +29,8 @@ export const baseWithFooter = () => `
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-small" aria-hidden="true">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -58,8 +58,8 @@ export const baseRTL = () => `
             <div class="lightbox-dialog__header">
                 <h2 id="lightbox-dialog-title">Dialog Lightbox</h2>
                 <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--close-small" aria-hidden="true">
-                        <use href="#icon-close-small"></use>
+                    <svg class="icon icon--close-16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>
@@ -82,8 +82,8 @@ export const baseWithLongHeader = () => `
         <div class="lightbox-dialog__header">
             <h2 id="lightbox-dialog-title">Dialog Lightbox with a very long header that should wrap to the next line, but is actually cut off</h2>
             <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-small" aria-hidden="true">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>

package/src/less/listbox/stories/cascade.stories.js CHANGED Viewed

@@ -5,20 +5,20 @@ export const RTL = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
     </div>
@@ -30,20 +30,20 @@ export const color = () => `
     <div class="listbox__options" role="listbox" style="color: red" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
     </div>
@@ -55,20 +55,20 @@ export const fontSize = () => `
     <div class="listbox__options" role="listbox" style="font-size: 200%" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+                <use href="#icon-tick-16"></use>
             </svg>
         </div>
     </div>