@festo-ui/web-essentials 6.1.0-dev.285 → 6.1.0-dev.287

package/dist/scss/_stepper-horizontal.scss

@@ -94,13 +94,14 @@
         .fwe-step-no {
           display: none;
         }
-        @extend .fwe-icon;
-        @extend .fwe-icon-menu-check;
         &:before {
+          content: "";
           position: absolute;
           left: 2px;
           top: 2px;
-          color: $white;
+          height: 16px;
+          width: 16px;
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMTQxIDEyLjgxNCAxLjkzNCA4LjYwN2wxLjQxNC0xLjQxNCAyLjc5MyAyLjc5MyA2Ljc5My02Ljc5MyAxLjQxNCAxLjQxNC04LjIwNyA4LjIwN3oiLz48L2c+PC9zdmc+");
         }
       }
     }

package/dist/scss/_stepper-vertical.scss

@@ -101,13 +101,14 @@ $vertical-step-height: 300px;
         .fwe-step-no {
           display: none;
         }
-        @extend .fwe-icon;
-        @extend .fwe-icon-menu-check;
         &:before {
+          content: "";
           position: absolute;
           left: 2px;
           top: 2px;
-          color: $white;
+          height: 16px;
+          width: 16px;
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMTQxIDEyLjgxNCAxLjkzNCA4LjYwN2wxLjQxNC0xLjQxNCAyLjc5MyAyLjc5MyA2Ljc5My02Ljc5MyAxLjQxNCAxLjQxNC04LjIwNyA4LjIwN3oiLz48L2c+PC9zdmc+");
         }
       }
     }

package/dist/scss/_table.scss

@@ -40,14 +40,8 @@ table.fwe-table {
           left: $spacer-xs;
         }
 
-        &.fwe-active {
-          color: $hero;
-        }
-
-        &:not(.fwe-active) {
-          &::before {
-            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
-          }
+        &::before {
+          background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
         }
 
         &.fwe-table-order-ascending {
@@ -62,6 +56,10 @@ table.fwe-table {
           }
         }
       }
+
+      &.fwe-active {
+        color: $hero;
+      }
     }
 
     td {

package/dist/scss/festo-web-essentials.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v6.1.0-dev.285 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v6.1.0-dev.287 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */

package/dist/scss/themes/flatpickr/festo.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v6.1.0-dev.285 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v6.1.0-dev.287 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "6.1.0-dev.285",
+  "version": "6.1.0-dev.287",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",

package/scss/_breadcrumb.scss

@@ -4,12 +4,11 @@
   justify-items: center;
   align-items: center;
   color: $text-light;
-
-  .fwe-icon-arrows-right-2 {
+  .fwe-icon,
+  .fwe-svg-icon {
     margin-left: 4px;
     margin-right: 4px;
   }
-
   a {
     color: $text-light;
     text-decoration: none;

package/scss/_button.scss

@@ -17,8 +17,9 @@ button.fwe-btn {
   border: none;
 
   i[class^="fwe-icon-"],
-  i[class*=" fwe-icon-"] {
-    padding-right: 8px;
+  i[class*=" fwe-icon-"],
+  .fwe-svg-icon {
+    margin-right: 8px;
   }
 
   &:hover {
@@ -71,8 +72,9 @@ button.fwe-btn {
     padding: 0;
 
     i[class^="fwe-icon-"],
-    i[class*=" fwe-icon-"] {
-      padding-right: 4px;
+    i[class*=" fwe-icon-"],
+    .fwe-svg-icon {
+      margin-right: 4px;
     }
 
     &.fwe-dark {
@@ -117,8 +119,9 @@ button.fwe-btn {
     }
 
     i[class^="fwe-icon-"],
-    i[class*=" fwe-icon-"] {
-      padding-right: 0px;
+    i[class*=" fwe-icon-"],
+    .fwe-svg-icon {
+      margin-right: 0px;
     }
   }
 }

package/scss/_checkbox.scss

@@ -27,9 +27,11 @@ $lgWidth: 24px;
   width: $lgWidth;
   min-width: $lgWidth;
   border-radius: $border-radius-s;
-  @extend .fwe-icon-lg;
   &:before {
-    left: -1px;
+    height: 18px;
+    width: 18px;
+    left: 2px;
+    top: 2px;
   }
 }
 
@@ -75,16 +77,16 @@ label.fwe-checkbox {
     min-height: $defaultHeight;
     width: $defaultWidth;
     min-width: $defaultWidth;
-    border: 1px solid $control-border;
-    background-color: $white;
     border-radius: 2px;
-    font-size: $font-size-md;
-    @extend .fwe-icon;
-    @extend .fwe-icon-menu-check;
-    &:before {
+    border: 1px solid $control-border;
+    background-color: white;
+    &::before {
+      content: "";
+      height: 14px;
+      width: 14px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMTQxIDEyLjgxNCAxLjkzNCA4LjYwN2wxLjQxNC0xLjQxNCAyLjc5MyAyLjc5MyA2Ljc5My02Ljc5MyAxLjQxNCAxLjQxNC04LjIwNyA4LjIwN3oiLz48L2c+PC9zdmc+");
       display: none;
       position: absolute;
-      color: $white;
     }
   }
 

package/scss/_chips.scss

@@ -4,7 +4,8 @@
   border-radius: $border-radius-xl;
   padding: 3px 16px 5px 16px;
   i[class^="fwe-icon-"],
-  i[class*=" fwe-icon-"] {
+  i[class*=" fwe-icon-"],
+  .fwe-svg-icon {
     @extend .fwe-icon-lg;
     margin-bottom: -3px;
   }
@@ -13,16 +14,15 @@
       padding-right: 30px;
       &::after {
         top: 4px;
-        font-family: $font-family-icons-24;
-        font-size: $font-size-xl;
-        line-height: $font-size-xl;
+        height: 24px;
+        width: 24px;
       }
     }
     &.fwe-filter {
       padding-left: 30px;
       &::before {
-        left: 9px;
         top: 8px;
+        left: 8px;
       }
     }
   }
@@ -57,10 +57,11 @@
   padding: 0px 12px 1px 12px;
   margin: 0px 8px 8px 0px;
   i[class^="fwe-icon-"],
-  i[class*=" fwe-icon-"] {
+  i[class*=" fwe-icon-"],
+  .fwe-svg-icon {
     margin-bottom: -1px;
     margin-left: -4px;
-    padding-right: 8px;
+    margin-right: 8px;
   }
   &:hover {
     background: $control-dark;
@@ -79,21 +80,18 @@
       cursor: pointer;
       padding-right: 24px;
       &::after {
+        content: "";
         position: absolute;
         right: 5px;
         top: 3px;
-        color: $text;
-        font-family: $font-family-icons-16;
-        font-size: 16px;
-        content: "\ea1c";
-        line-height: 16px;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        height: 16px;
+        width: 16px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMzMzIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
         background: $gray-100;
         &::after {
-          color: $hero;
+          background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
         }
       }
       &:active {
@@ -104,22 +102,16 @@
       cursor: pointer;
       padding-left: 24px;
       &::before {
+        content: "";
         position: absolute;
         left: 5px;
         top: 3px;
-        color: $hero;
-        font-family: $font-family-icons-16;
-        font-size: 16px;
-        content: "\e9d3";
-        line-height: 16px;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        height: 16px;
+        width: 16px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQoJPGcgaWQ9ImJhNmJmZGNhLWJhMzgtNDczMC04MjlkLTcyYmIzNzI3YjUzNCIgZGF0YS1uYW1lPSJjb250ZW50Ij4NCgkJPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+DQoJCTxwb2x5Z29uIHBvaW50cz0iNi4xNDEgMTIuODE0IDEuOTM0IDguNjA3IDMuMzQ4IDcuMTkzIDYuMTQxIDkuOTg2IDEyLjkzNCAzLjE5MyAxNC4zNDggNC42MDcgNi4xNDEgMTIuODE0IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
         background: $gray-100;
-        &::after {
-          color: $hero;
-        }
       }
       &:active {
         background: $gray-200;

package/scss/_list.scss

@@ -33,6 +33,7 @@ ul.fwe-list-group {
 
     [class^="fwe-icon-"],
     [class*=" fwe-icon-"],
+    .fwe-svg-icon,
     a,
     button {
       display: inline-block;

package/scss/_mobile-flyout.scss

@@ -2,29 +2,42 @@
   position: relative;
 
   .fwe-mobile-flyout-button {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
     padding: 0px;
+    height: 36px;
     border: none;
     background: none;
     outline: none;
     margin-bottom: 8px;
     margin-right: auto;
     cursor: pointer;
+    display: inline-block;
+    &::after {
+      content: "";
+      display: block;
+      height: 24px;
+      width: 24px;
+      background-color: $text;
+    }
     @media (hover: hover) and (pointer: fine) {
       &:hover {
-        color: $hero;
+        &::after {
+          background-color: $hero;
+        }
       }
     }
   }
 
   .fwe-burger-button {
     @extend .fwe-mobile-flyout-button;
-    @extend .fwe-icon-menu-menu;
+    &::after {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PC9nPjxnPjxyZWN0IHg9IjMiIHk9IjYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMyIgeT0iMTYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==");
+    }
   }
   .fwe-close-button {
     @extend .fwe-mobile-flyout-button;
-    @extend .fwe-icon-menu-close;
+    &::after {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGc+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIi8+PHBvbHlnb24gcG9pbnRzPSIxNi45NSA4LjQ2NCAxNS41MzYgNy4wNSAxMiAxMC41ODYgOC40NjQgNy4wNSA3LjA1IDguNDY0IDEwLjU4NiAxMiA3LjA1IDE1LjUzNiA4LjQ2NCAxNi45NSAxMiAxMy40MTQgMTUuNTM2IDE2Ljk1IDE2Ljk1IDE1LjUzNiAxMy40MTQgMTIgMTYuOTUgOC40NjQiIGZpbGw9IiMwMDAiLz48L2c+PC9zdmc+");
+    }
   }
 
   .fwe-mobile-flyout-container {
@@ -73,15 +86,20 @@
     display: flex;
     align-items: center;
     background: $background;
+    position: relative;
+    padding-left: 40px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 16px;
+      top: 19px;
+      height: 16px;
+      width: 16px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMTZWMGgxNnYxNnoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMTAuMzU0IDQuMzU0IDYuNzA3IDhsMy42NDcgMy42NDYtLjcwOC43MDhMNS4yOTMgOGw0LjM1My00LjM1NC43MDguNzA4eiIvPjwvc3ZnPg==");
+    }
     &:hover {
       background: $control;
     }
-    i {
-      @extend .fwe-icon;
-      @extend .fwe-icon-arrows-left-2;
-      margin-left: 16px;
-      margin-right: 8px;
-    }
     div {
       margin-top: -1px;
       margin-bottom: 1px;

package/scss/_modal.scss

@@ -1,12 +1,3 @@
-@mixin fwe-modal-icon-base-375 {
-  display: block;
-  position: relative;
-  top: 2px;
-  margin-right: $spacer-xxs;
-  font-size: $font-size-xl;
-  font-family: $font-family-icons-24;
-}
-
 .fwe-modal {
   padding: $spacer-xl;
   z-index: $zindex-modal;
@@ -34,22 +25,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    .fwe-icon-status-check-status {
-      &::before {
-        display: none;
-      }
-    }
-
-    .fwe-icon-status-warning {
-      &::before {
-        display: none;
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        display: none;
-      }
+    .fwe-icon,
+    .fwe-svg-icon {
+      display: none;
+      position: relative;
+      top: 2px;
+      margin-right: $spacer-xxs;
+      font-size: $font-size-xl;
+      font-family: $font-family-icons-24;
     }
   }
 
@@ -65,29 +48,12 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    .fwe-icon {
+    .fwe-icon,
+    .fwe-svg-icon {
       position: relative;
       top: 2px;
       margin-right: $spacer-xxs;
     }
-
-    .fwe-icon-status-check-status {
-      &::before {
-        color: $icon-hero;
-      }
-    }
-
-    .fwe-icon-status-warning {
-      &::before {
-        color: $orange;
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        color: $red;
-      }
-    }
   }
 
   &-close {
@@ -96,12 +62,6 @@
     right: $spacer-l;
     width: $spacer-l;
     height: $spacer-l;
-
-    .fwe-icon {
-      padding-right: 0 !important;
-      font-size: $font-size-xxl;
-      line-height: $font-size-xxl;
-    }
   }
 
   &-header {
@@ -148,14 +108,41 @@
     button.fwe-btn.fwe-btn-link {
       color: $text;
     }
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $hero;
+        }
+      }
+    }
   }
 
   &--warning {
     border-color: $orange;
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $orange;
+        }
+      }
+    }
   }
 
   &--error {
     border-color: $red;
+    .fwe-modal-header {
+      h1,
+      h2 {
+        .fwe-icon,
+        .fwe-svg-icon {
+          color: $red;
+        }
+      }
+    }
   }
 
   &--large {
@@ -202,25 +189,9 @@
       margin-bottom: $spacer-m;
       margin-right: $spacer-s;
 
-      .fwe-icon-status-check-status {
-        &::before {
-          @include fwe-modal-icon-base-375;
-          color: $icon-hero;
-        }
-      }
-
-      .fwe-icon-status-warning {
-        &::before {
-          @include fwe-modal-icon-base-375;
-          color: $orange;
-        }
-      }
-    }
-
-    .fwe-icon-status-failure {
-      &::before {
-        @include fwe-modal-icon-base-375;
-        color: $red;
+      .fwe-icon,
+      .fwe-svg-icon {
+        display: inline-block;
       }
     }
 

package/scss/_navbar-menu.scss

@@ -316,10 +316,12 @@
         color: $text-disabled;
         margin-top: 11px;
       }
-      @extend .fwe-icon;
       font-family: $font-family-base;
       &::before {
+        content: "";
         position: absolute;
+        height: 16px;
+        width: 16px;
         left: -32px;
         top: 21px;
       }
@@ -327,23 +329,21 @@
 
     .fwe-notification-info {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-info;
       &::before {
-        color: $caerul;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTgsLjk5OTg4YTcuMDAwMDYsNy4wMDAwNiwwLDEsMCw3LjAwMDA2LDcuMDAwMDZBNy4wMDAwNyw3LjAwMDA3LDAsMCwwLDgsLjk5OTg4Wk05LDEyLjk5OTk0SDd2LTZIOVptMC04SDd2LTJIOVoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PC9zdmc+");
       }
     }
     .fwe-notification-warning {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
       &::before {
-        color: $orange;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2ZmOTYwMCIvPjwvZz48L3N2Zz4=");
       }
     }
 
     .fwe-notification-error {
       @extend .fwe-notification-item-content;
-      @extend .fwe-icon-status-warning;
       &::before {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGc+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJlNmQ1NGM1MS1lMDNkLTRkNWMtYmQ5Yy0xNjk5Mzg1YzRiODQiIGRhdGEtbmFtZT0iY29udGVudCI+PHBhdGggZD0iTTE1LjIxNTcsMTMuNTI5NDIsOC44ODIzMiwxLjY1NDQyYTEsMSwwLDAsMC0xLjc2NDY0LDBMLjc4NDMsMTMuNTI5NDJBMSwxLDAsMCwwLDEuNjY2NzUsMTVIMTQuMzMzMzdhMSwxLDAsMCwwLC44ODIzMy0xLjQ3MDU4Wk05LDEzSDdWMTFIOVptMC0zSDdWNUg5WiIgZmlsbD0iI2Q1MDAwMCIvPjwvZz48L3N2Zz4=");
         color: $red;
       }
     }

package/scss/_pagination.scss

@@ -1,8 +1,12 @@
 .fwe-pagination {
   display: flex;
   .fwe-navigate-btn {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
+    &::before {
+      content: "";
+      height: 24px;
+      width: 24px;
+      background-color: $text;
+    }
     line-height: normal;
     box-sizing: border-box;
     display: inline-flex;
@@ -12,17 +16,20 @@
     padding: 0px;
     height: 24px;
     width: 24px;
-    color: $text;
     background: transparent;
     cursor: pointer;
     border: none;
 
     &:hover {
-      color: $hero;
+      &::before {
+        background-color: $hero;
+      }
     }
 
     &:active {
-      color: $hero-dark;
+      &::before {
+        background-color: $hero-dark;
+      }
     }
 
     &:focus {
@@ -32,16 +39,22 @@
     &:disabled,
     &.fwe-disabled {
       cursor: default;
-      color: $text-disabled;
+      &::before {
+        background-color: $text-disabled;
+      }
     }
   }
   .fwe-navigate-btn-up {
     @extend .fwe-navigate-btn;
-    @extend .fwe-icon-arrows-right-2;
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik05LjE3MiAxOC4zNjQgMTUuNTM2IDEyIDkuMTcyIDUuNjM2bC0uNzA4LjcwN0wxNC4xMjEgMTJsLTUuNjU3IDUuNjU3LjcwOC43MDd6Ii8+PC9zdmc+");
+    }
   }
   .fwe-navigate-btn-down {
     @extend .fwe-navigate-btn;
-    @extend .fwe-icon-arrows-left-2;
+    &::before {
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAyNFYwaDI0djI0eiIvPjxwYXRoIGQ9Ik0xNC44MjggNS42MzYgOC40NjQgMTJsNi4zNjQgNi4zNjQuNzA4LS43MDdMOS44NzkgMTJsNS42NTctNS42NTctLjcwOC0uNzA3eiIvPjwvc3ZnPg==");
+    }
   }
 
   .fwe-page-dot {

package/scss/_search-input.scss

@@ -2,17 +2,26 @@
   display: inline-block;
   position: relative;
   .fwe-search-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-lg;
-    @extend .fwe-icon-file-search;
+    height: 16px;
+    width: 16px;
+
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PGcgZmlsbD0iIzMzMyIgZGF0YS1uYW1lPSJjb250ZW50Ij48cGF0aCBkPSJNMTAgMmE0IDQgMCAxIDEtNCA0IDQuMDA0IDQuMDA0IDAgMCAxIDQtNG0wLTFhNSA1IDAgMSAwIDUgNSA1LjAwNiA1LjAwNiAwIDAgMC01LTVaTTEuMjkzIDEzLjI5M2wzLjgyMi0zLjgyMmE2LjA0MyA2LjA0MyAwIDAgMCAxLjQxNCAxLjQxNGwtMy44MjIgMy44MjJhMSAxIDAgMCAxLTEuNDE0LTEuNDE0WiIvPjwvZz48L3N2Zz4=");
     position: absolute;
     line-height: 1;
     left: 0px;
-    bottom: 2px;
+    bottom: 8px;
   }
   .fwe-clear-icon {
-    @extend .fwe-icon;
-    @extend .fwe-icon-close-small;
+    height: 16px;
+    width: 16px;
+    &::after {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iY29udGVudCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDE2djE2SDB6IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0xMC4yNCA1LjA1IDggNy4zIDUuNzUgNS4wNWwtLjcuNzFMNy4yOSA4bC0yLjI0IDIuMjUuNy43TDggOC43MWwyLjI0IDIuMjQuNzEtLjdMOC43IDhsMi4yNS0yLjI0LS43MS0uNzF6IiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCIvPjwvc3ZnPg==");
+    }
+
     cursor: pointer;
     position: absolute;
     right: 0px;

package/scss/_segment.scss

@@ -122,12 +122,6 @@
   }
 
   &.fwe-segment-icon {
-    .fwe-icon {
-      &::before {
-        position: relative;
-        top: 1px;
-      }
-    }
     .fwe-segment-label {
       padding: 0 $spacer-s;
       line-height: 30px;