@ebay/skin 15.5.1 → 16.0.0-1

package/src/less/select/stories/floating-label.stories.js

@@ -9,8 +9,8 @@ export const defaultLabel = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -26,8 +26,8 @@ export const selectedOption = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -42,8 +42,8 @@ export const errorState = () => `
             <option value="2">Option 2</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>
@@ -58,8 +58,8 @@ export const disabled = () => `
             <option value="2">Option 2 can't pick</option>
             <option value="3">Option 3</option>
         </select>
-        <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-            <use href="#icon-dropdown"></use>
+        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
 </span>

package/src/less/split-button/stories/base.stories.js

@@ -8,8 +8,8 @@ export const primaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -38,8 +38,8 @@ export const primaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -68,8 +68,8 @@ export const secondaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -98,8 +98,8 @@ export const secondaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -128,8 +128,8 @@ export const tertiaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -158,8 +158,8 @@ export const tertiaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -186,8 +186,8 @@ export const fakePrimaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -214,8 +214,8 @@ export const fakePrimaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -242,8 +242,8 @@ export const fakeSecondaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -270,8 +270,8 @@ export const fakeSecondaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -298,8 +298,8 @@ export const fakeTertiaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -326,8 +326,8 @@ export const fakeTertiaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/split-button/stories/rtl.stories.js

@@ -10,8 +10,8 @@ export const primaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -42,8 +42,8 @@ export const primaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -74,8 +74,8 @@ export const secondaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -106,8 +106,8 @@ export const secondaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -138,8 +138,8 @@ export const tertiaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">
@@ -170,8 +170,8 @@ export const tertiaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
             <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/split-button/stories/size.stories.js

@@ -8,8 +8,8 @@ export const longTextCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">
@@ -38,8 +38,8 @@ export const longTextExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
         <div class="menu-button__menu menu-button__menu--reverse">

package/src/less/textbox/stories/icon.stories.js

@@ -2,8 +2,8 @@ export default { title: 'Textbox/Icon' };
 
 export const base = () => `
 <span class="textbox">
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
 </span>
@@ -12,20 +12,20 @@ export const base = () => `
 export const end = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
 
 export const dual = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-messages"></use>
+    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-mail-24"></use>
     </svg>
 </span>
 `;
@@ -34,8 +34,8 @@ export const actionable = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-            <use href="#icon-messages"></use>
+        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -43,13 +43,13 @@ export const actionable = () => `
 
 export const dualActionable = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -59,8 +59,8 @@ export const actionableLarge = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-            <use href="#icon-messages"></use>
+        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>
@@ -68,13 +68,13 @@ export const actionableLarge = () => `
 
 export const dualActionableLarge = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-        <use href="#icon-search"></use>
+    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </button>
 </span>

package/src/less/textbox/stories/rtl/icon.stories.js

@@ -3,8 +3,8 @@ export default { title: 'Textbox/RTL/Icon' };
 export const base = () => `
 <div dir="rtl">
     <span class="textbox">
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
         <input class="textbox__control" type="text" placeholder="placeholder text" />
     </span>
@@ -15,8 +15,8 @@ export const end = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </span>
 </div>
@@ -25,13 +25,13 @@ export const end = () => `
 export const dual = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-search"></use>
+        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-messages"></use>
+        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-mail-24"></use>
         </svg>
     </span>
 </div>
@@ -42,8 +42,8 @@ export const actionable = () => `
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg aria-hidden="true" class="icon icon--messages" focusable="false" width="16" height="16">
-                <use href="#icon-messages"></use>
+            <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+                <use href="#icon-mail-24"></use>
             </svg>
         </button>
     </span>
@@ -53,14 +53,14 @@ export const actionable = () => `
 export const dualActionable = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search" focusable="false" width="16" height="16" aria-hidden="true">
-            <use href="#icon-search"></use>
+        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg class="icon icon--messages" focusable="false" width="16" height="16" aria-hidden="true">
-                <use href="#icon-messages"></use>
+            <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+                <use href="#icon-mail-24"></use>
             </svg>
         </button>
     </span>

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

@@ -6,8 +6,8 @@ export const primaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-small" focusable="false">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close icon--close-16" focusable="false">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -28,8 +28,8 @@ export const secondaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-small" focusable="false">
-                    <use href="#icon-close-small"></use>
+                <svg class="icon icon--close icon--close-16" focusable="false">
+                    <use href="#icon-close-16"></use>
                 </svg>
             </button>
         </div>
@@ -52,8 +52,8 @@ export const RTL = () => `
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
                 <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close icon--close-small" focusable="false">
-                        <use href="#icon-close-small"></use>
+                    <svg class="icon icon--close icon--close-16" focusable="false">
+                        <use href="#icon-close-16"></use>
                     </svg>
                 </button>
             </div>

package/src/less/tooltip/stories/pointer.stories.js

@@ -94,8 +94,8 @@ function getPointerStyle(key) {
 export const top = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('top')}">
@@ -114,8 +114,8 @@ export const top = () => `
 export const topLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -136,8 +136,8 @@ export const topLeft = () => `
 export const leftTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -158,8 +158,8 @@ export const leftTop = () => `
 export const left = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('left')}">
@@ -178,8 +178,8 @@ export const left = () => `
 export const leftBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -200,8 +200,8 @@ export const leftBottom = () => `
 export const bottomLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -222,8 +222,8 @@ export const bottomLeft = () => `
 export const bottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -244,8 +244,8 @@ export const bottom = () => `
 export const bottomRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -266,8 +266,8 @@ export const bottomRight = () => `
 export const rightBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -288,8 +288,8 @@ export const rightBottom = () => `
 export const right = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle('right')}">
@@ -308,8 +308,8 @@ export const right = () => `
 export const rightTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
@@ -330,8 +330,8 @@ export const rightTop = () => `
 export const topRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(

package/src/less/tooltip/stories/tooltip.stories.js

@@ -3,8 +3,8 @@ export default { title: 'Tooltip' };
 export const collapsed = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 12px); left: 0">
@@ -22,8 +22,8 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
-        <svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
-            <use href="#icon-settings"></use>
+        <svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% - 90px); left: 4px">