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

package/dist/css/themes/flatpickr/festo.css

@@ -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/css/themes/flatpickr/festo.min.css

@@ -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
  */.fng-flatpickr span{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-calendar{display:none;text-align:center;animation:none;direction:ltr;border:0;font-size:var(--fwe-font-size-md);line-height:font-size-md10px;position:absolute;box-sizing:border-box;touch-action:manipulation}.flatpickr-calendar.open{max-height:640px;width:324px;background:var(--fwe-white);box-shadow:0 1px 8px rgba(0,0,0,.3);border-radius:8px;padding:12px;padding-bottom:48px;display:inline-block;z-index:var(--fwe-z-index-dropdown)}.flatpickr-calendar.animate.open{animation:none}.flatpickr-calendar.inline{display:block;position:relative;top:2px;box-shadow:none;background:inherit}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:var(--fwe-z-index-dropdown);display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 var(--fwe-gray-200),5px 0 0 var(--fwe-gray-200)}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid var(--fwe-gray-200)}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:unset;height:0;width:0;left:32px}.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:32px}.flatpickr-calendar:before{border-width:7px;margin:0 -7px}.flatpickr-calendar:after{border-width:6px;margin:0 -6px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:rgba(0,0,0,.15)}.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--fwe-white)}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:var(--fwe-border)}.flatpickr-calendar.arrowBottom:after{border-top-color:var(--fwe-white)}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:0 0;color:var(--fwe-text);fill:var(--fwe-text);height:42px;margin-top:12px;line-height:24px;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:42px;z-index:3;color:var(--fwe-text)}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:var(--fwe-text-light)}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:var(--fwe-hero)}.flatpickr-months .flatpickr-next-month{padding:24px 20px 0 0;right:0}.flatpickr-months .flatpickr-prev-month{left:0;padding:24px 0 0 20px}.numInputWrapper{position:relative;height:auto}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.numInputWrapper input[type=number]{-moz-appearance:textfield}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;font-weight:var(--fwe-font-weight-bold)}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper span{position:absolute;right:-8px;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;box-sizing:border-box}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--fwe-text);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--fwe-text);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:var(--fwe-font-size-base);font-weight:var(--fwe-font-weight-normal);position:absolute;width:75%;left:12.5%;padding:7px 0 0 0;line-height:calc(var(--fwe-font-size-base) + 8px);height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:var(--fwe-font-weight-bold);color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{color:var(--fwe-hero)}.flatpickr-current-month select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-image:url("data:image/svg+xml;utf8,<svg  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>");background-repeat:no-repeat;background-position-x:100%;background-position-y:70%;border:none;color:inherit;cursor:pointer;line-height:24px;margin:-1px 0 0 0;outline:0;padding-left:8px;padding-right:16px}.flatpickr-current-month select:hover{color:var(--fwe-hero);background-image:url("data:image/svg+xml;utf8,<svg fill='rgb(0, 145, 220)'  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>")}.flatpickr-current-month select option{color:var(--fwe-text)!important}.flatpickr-current-month .numInputWrapper{width:60px;display:inline-block}.flatpickr-current-month .numInputWrapper input{background:0 0;box-sizing:border-box;color:inherit;cursor:text;margin-left:16px;display:inline-block;line-height:24px;border:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month .numInputWrapper:hover{color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowUp:hover:after{border-bottom-color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowDown:hover:after{border-top-color:var(--fwe-hero)}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:0 0;pointer-events:none}.flatpickr-monthDropdown-months{font-weight:var(--fwe-font-weight-bold)}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:0}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:0;padding:0}.flatpickr-weekdays{border-bottom:1px solid var(--fwe-border);background:0 0;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:48px;margin-bottom:4px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:var(--fwe-font-size-md);background:0 0;color:var(--fwe-text-light);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:var(--fwe-font-weight-normal)}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:304px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:304px;min-width:304px;max-width:304px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 var(--fwe-gray-200)}.flatpickr-day{background:0 0;border:2px;border-radius:150px;box-sizing:border-box;color:var(--fwe-text);cursor:pointer;font-weight:var(--fwe-font-weight-normal);width:14.2857143%;flex-basis:14.2857143%;max-width:33px;height:33px;line-height:33px;margin:4px;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus{cursor:pointer;outline:0;background:var(--fwe-gray-200);border-color:var(--fwe-gray-200);font-weight:var(--fwe-font-weight-bold)}.flatpickr-day:hover{cursor:pointer;outline:0;color:var(--fwe-hero-dark)}.flatpickr-day.today{background-color:inherit;font-weight:var(--fwe-font-weight-bold);text-decoration:underline}.flatpickr-day.today:hover{color:var(--fwe-hero-dark)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:var(--fwe-white);box-shadow:none;color:var(--fwe-hero);border:2px solid var(--fwe-hero);font-weight:var(--fwe-font-weight-bold);line-height:28px}.flatpickr-day.endRange.flatpickr-disabled,.flatpickr-day.endRange.inRange.flatpickr-disabled,.flatpickr-day.endRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.endRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.endRange:focus.flatpickr-disabled,.flatpickr-day.endRange:hover.flatpickr-disabled,.flatpickr-day.selected.flatpickr-disabled,.flatpickr-day.selected.inRange.flatpickr-disabled,.flatpickr-day.selected.nextMonthDay.flatpickr-disabled,.flatpickr-day.selected.prevMonthDay.flatpickr-disabled,.flatpickr-day.selected:focus.flatpickr-disabled,.flatpickr-day.selected:hover.flatpickr-disabled,.flatpickr-day.startRange.flatpickr-disabled,.flatpickr-day.startRange.inRange.flatpickr-disabled,.flatpickr-day.startRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.startRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.startRange:focus.flatpickr-disabled,.flatpickr-day.startRange:hover.flatpickr-disabled{color:var(--fwe-text-disabled);background:var(--fwe-control-disabled)}.flatpickr-day.startRange.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px;box-shadow:10px 0 0 var(--fwe-hero)}.flatpickr-day.selected.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange:not(.inRange):not(.startRange),.flatpickr-day.selected.endRange:not(.inRange):not(.startRange){border-radius:50px;position:relative}.flatpickr-day.endRange:not(.inRange):not(.startRange)::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange)::before{content:"";position:absolute;height:calc(100% + 4px);z-index:-1;width:42px;background-color:var(--fwe-gray-200);left:-26px;top:-2px}.flatpickr-day.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.endRange,.flatpickr-day.startRange.endRange{border-radius:50px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n)::before{content:"";position:absolute;height:100%;z-index:-1;width:24px;background-color:var(--fwe-gray-200);left:16px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange:not(.startRange){box-shadow:none;position:relative}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100)}.flatpickr-day.inRange:not(.startRange)::before{content:"";position:absolute;height:100%;z-index:-1;width:48px;background-color:var(--fwe-gray-200);left:-28px}.flatpickr-day.inRange:not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-100)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100);background:var(--fwe-gray-100)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 var(--fwe-hero),5px 0 0 var(--fwe-hero)}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 var(--fwe-gray-200)}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:0 0;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--fwe-control-border)}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--fwe-control-border)}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:0 0;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:var(--fwe-text);font-size:var(--fwe-font-size-md);position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:var(--fwe-font-weight-bold)}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:var(--fwe-font-weight-normal)}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:var(--fwe-text);font-weight:var(--fwe-font-weight-bold);width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:var(--fwe-font-weight-normal)}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:var(--fwe-white)}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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;

package/dist/scss/_select.scss

@@ -13,14 +13,15 @@
   display: flex;
   flex-direction: column;
   padding-bottom: 18px;
-  @extend .fwe-icon;
-  @extend .fwe-icon-lg;
-  @extend .fwe-icon-arrows-collapse;
   &::before {
     pointer-events: none;
     position: absolute;
     bottom: 22px;
     left: calc(100% - 24px);
+    content: "";
+    height: 24px;
+    width: 24px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
   }
 
   .fwe-select-label {

package/dist/scss/_snackbar.scss

@@ -23,6 +23,7 @@
     line-height: $font-size-xl;
 
     &.fwe-icon-close-small {
+      padding-right: 0px;
       &::before {
         vertical-align: middle;
       }
@@ -37,7 +38,11 @@
 
   .fwe-btn {
     color: $hero;
-
+    min-height: 24px;
+    i {
+      height: 24px;
+      display: flex;
+    }
     &:hover {
       color: $hero-dark;
     }