@ebay/skin 15.5.1 → 16.0.0-0

package/src/less/panel-dialog/stories/panel-dialog.stories.js

@@ -6,8 +6,8 @@ export const panelStart = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Left Panel</h2>
             <button class="icon-btn panel-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>
@@ -30,8 +30,8 @@ export const RTL = () => `
             <div class="panel-dialog__header">
                 <h2 id="panel-title">Left Panel</h2>
                 <button class="icon-btn panel-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>
@@ -54,8 +54,8 @@ export const panelEnd = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-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>
@@ -77,8 +77,8 @@ export const panelEndWithFooter = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-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>
@@ -123,8 +123,8 @@ export const panelScroll = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Scrolling Panel</h2>
             <button class="icon-btn panel-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>
@@ -164,8 +164,8 @@ export const panelScrollWithFooter = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Scrolling Panel with Footer</h2>
             <button class="icon-btn panel-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/progress-spinner/progress-spinner.less

@@ -20,9 +20,9 @@
 }
 
 // fixes wobble
-.progress-spinner > svg.icon.icon--spinner,
-.progress-spinner > svg.icon.icon--spinner-large,
-.progress-spinner > svg.icon.icon--spinner-small {
+.progress-spinner > svg.icon.icon--spinner-20,
+.progress-spinner > svg.icon.icon--spinner-24,
+.progress-spinner > svg.icon.icon--spinner-30 {
     height: inherit;
     margin: 0;
     max-height: inherit;

package/src/less/progress-spinner/stories/progress-spinner.stories.js

@@ -2,28 +2,28 @@ export default { title: 'Progress Spinner' };
 
 export const base = () =>
     `<span class="progress-spinner" aria-label="Busy animation" role="img">
-        <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
-            <use href="#icon-spinner"></use>
+        <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <use href="#icon-spinner-24"></use>
         </svg>
     </span>`;
 
 export const RTL = () =>
     `<div dir="rtl"><span class="progress-spinner" aria-label="Busy animation" role="img">
-        <svg class="icon icon--spinner" focusable="false" aria-hidden="true">
-            <use href="#icon-spinner"></use>
+        <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <use href="#icon-spinner-24"></use>
         </svg>
     </span></div>`;
 
 export const large = () =>
     `<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
-        <svg class="icon icon--spinner-large" focusable="false" aria-hidden="true">
-            <use href="#icon-spinner-large"></use>
+        <svg class="icon icon--spinner-30" focusable="false" aria-hidden="true">
+            <use href="#icon-spinner-30"></use>
         </svg>
     </span>`;
 
 export const small = () =>
     `<span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
-        <svg class="icon icon--spinner-small" focusable="false" aria-hidden="true">
-            <use href="#icon-spinner-small"></use>
+        <svg class="icon icon--spinner-20" focusable="false" aria-hidden="true">
+            <use href="#icon-spinner-20"></use>
         </svg>
     </span>`;

package/src/less/radio/stories/checked.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -20,10 +20,10 @@ export const RTL = () => `
         <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
         <span class="radio__icon" hidden>
             <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-                <use href="#icon-radio-unchecked"></use>
+                <use href="#icon-radio-unchecked-18"></use>
             </svg>
             <svg aria-hidden="true" class="radio__checked" focusable="false">
-                <use href="#icon-radio-checked"></use>
+                <use href="#icon-radio-checked-18"></use>
             </svg>
         </span>
     </span>
@@ -35,10 +35,10 @@ export const disabled = () => `
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r3" disabled checked type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -49,10 +49,10 @@ export const customColour = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r5" type="radio" checked />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -63,7 +63,7 @@ export const customIcon = () => `
 <input aria-label="Custom radio example" class="radio__control" name="r7" type="radio" checked />
 <span class="radio__icon" hidden>
     <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-        <use href="#icon-radio-unchecked"></use>
+        <use href="#icon-radio-unchecked-18"></use>
     </svg>
     <svg aria-hidden="true" class="radio__checked" focusable="false">
         <use href="#icon-confirmation"></use>
@@ -80,10 +80,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -94,10 +94,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>
@@ -108,10 +108,10 @@ export const multiLineLabel = () => `
             <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
             <span class="radio__icon" hidden>
                 <svg class="radio__unchecked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-unchecked"></use>
+                    <use href="#icon-radio-unchecked-18"></use>
                 </svg>
                 <svg class="radio__checked" focusable="false" height="18" width="18">
-                    <use href="#icon-radio-checked"></use>
+                    <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
         </span>

package/src/less/radio/stories/unchecked.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r2" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -19,10 +19,10 @@ export const disabled = () => `
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r4" type="radio" disabled />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -33,10 +33,10 @@ export const customColour = () => `
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r6" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
-            <use href="#icon-radio-checked"></use>
+            <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
 </span>
@@ -47,7 +47,7 @@ export const customIcon = () => `
     <input aria-label="Custom radio example" class="radio__control" name="r8" type="radio" />
     <span class="radio__icon" hidden>
         <svg aria-hidden="true" class="radio__unchecked" focusable="false">
-            <use href="#icon-radio-unchecked"></use>
+            <use href="#icon-radio-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="radio__checked" focusable="false">
             <use href="#icon-confirmation"></use>

package/src/less/section-notice/stories/rtl.stories.js

@@ -4,8 +4,8 @@ export const confirmationWithButton = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -22,8 +22,8 @@ export const dismissableWithTitle = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -33,8 +33,8 @@ export const dismissableWithTitle = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>
@@ -46,8 +46,8 @@ export const dismissableWithoutTitle = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -56,8 +56,8 @@ export const dismissableWithoutTitle = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>

package/src/less/section-notice/stories/section-notice.stories.js

@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithParagraph = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithParagraph = () => `
 export const confirmationWithButton = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -81,8 +81,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
-            <use href="#icon-attention-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
-            <use href="#icon-attention-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-16">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -113,8 +113,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
-            <use href="#icon-information-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -129,8 +129,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
-            <use href="#icon-information-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-16">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -145,8 +145,8 @@ export const informationWithLink = () => `
 export const dismissableWithTitle = () => `
 <section class="section-notice section-notice--information" role="region" aria-label="Information">
     <div class="section-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -156,8 +156,8 @@ export const dismissableWithTitle = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="section-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>
@@ -167,8 +167,8 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="section-notice section-notice--information" role="region" aria-label="Information">
     <div class="section-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -177,8 +177,8 @@ export const dismissableWithoutTitle = () => `
     <p class="section-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="section-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link section-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="10" width="10">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>

package/src/less/section-notice/stories/test.stories.js

@@ -4,8 +4,8 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="section-notice section-notice--confirmation" role="region">
         <div class="section-notice__header" role="region" aria-roledescription="Notice">
-            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="section-notice__main">
@@ -22,8 +22,8 @@ export const RTLDismissable = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--information" role="region" aria-label="Information">
         <div class="page-notice__header">
-            <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-                <use href="#icon-information-filled-small"></use>
+            <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+                <use href="#icon-information-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -33,8 +33,8 @@ export const RTLDismissable = () => `
         <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
         <div class="page-notice__footer">
             <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                    <use href="#icon-close-small"></use>
+                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </a>
         </div>
@@ -45,8 +45,8 @@ export const RTLDismissable = () => `
 export const longText = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -58,8 +58,8 @@ export const longText = () => `
 export const longTextWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -74,8 +74,8 @@ export const longTextWithCTA = () => `
 export const legacy = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -88,8 +88,8 @@ export const legacy = () => `
 export const legacyWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-16">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="section-notice__main">

package/src/less/section-title/stories/rtl.stories.js

@@ -53,8 +53,8 @@ export const overflow = () => `
         <div class="section-title__overflow">
             <span class="menu-button">
                 <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                    <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                        <use href="#icon-overflow"></use>
+                    <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
+                        <use href="#icon-overflow-vertical-24"></use>
                     </svg>
                 </button>
                 <div class="menu-button__menu menu-button__menu--reverse">
@@ -79,8 +79,8 @@ export const withFavorite = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                    <use href="#icon-save-small"></use>
+                <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                    <use href="#icon-save-16"></use>
                 </svg>
             </button>
         </div>
@@ -97,8 +97,8 @@ export const withFavoriteAndLink = () => `
         </div>
         <div class="section-title__info">
             <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-                <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                    <use href="#icon-save-small"></use>
+                <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                    <use href="#icon-save-16"></use>
                 </svg>
             </button>
         </div>

package/src/less/section-title/stories/section-title.stories.js

@@ -44,8 +44,8 @@ export const overflow = () => `
     <div class="section-title__overflow">
         <span class="menu-button">
             <button class="menu-button__button icon-btn" type="button" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--overflow" focusable="false" width="24" height="24" aria-hidden="true">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-vertical-24" focusable="false" width="24" height="24" aria-hidden="true">
+                    <use href="#icon-overflow-vertical-24"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -68,8 +68,8 @@ export const withFavorite = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                <use href="#icon-save-small"></use>
+            <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                <use href="#icon-save-16"></use>
             </svg>
         </button>
     </div>
@@ -84,8 +84,8 @@ export const withFavoriteAndLink = () => `
     </div>
     <div class="section-title__info">
         <button class="icon-btn infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg aria-hidden="true" class="icon icon--save-small" focusable="false" width="16" height="14">
-                <use href="#icon-save-small"></use>
+            <svg aria-hidden="true" class="icon icon--save-16" focusable="false" width="16" height="14">
+                <use href="#icon-save-16"></use>
             </svg>
         </button>
     </div>

package/src/less/select/select.less

@@ -26,7 +26,7 @@ span.select {
     vertical-align: middle;
 }
 
-.select svg.icon--dropdown {
+.select svg.icon--chevron-down-12 {
     height: 100%;
     pointer-events: none;
     position: absolute;