diff --git a/edit.html b/edit.html
index 8463a984..e136d6fb 100644
--- a/edit.html
+++ b/edit.html
@@ -25,6 +25,7 @@
     <script src="js/script-loader.js"></script>
     <script src="js/storage-util.js"></script>
     <script src="content/apply.js"></script>
+    <script src="edit/lint.js"></script>
     <script src="edit/util.js"></script>
     <script src="edit/regexp-tester.js"></script>
     <script src="edit/applies-to-line-widget.js"></script>
@@ -64,8 +65,6 @@
     <script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
 
     <link  href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet" />
-    <script src="vendor/codemirror/addon/lint/lint.js"></script>
-
 
     <link  href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
     <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
@@ -88,16 +87,6 @@
     <link  href="edit/codemirror-default.css" rel="stylesheet">
     <script src="edit/codemirror-default.js"></script>
 
-    <script src="edit/linter.js"></script>
-    <script src="edit/linter-defaults.js"></script>
-    <script src="edit/linter-engines.js"></script>
-    <script src="edit/linter-meta.js"></script>
-    <script src="edit/linter-help-dialog.js"></script>
-    <script src="edit/linter-report.js"></script>
-    <script src="edit/linter-config-dialog.js"></script>
-
-    <script src="edit/editor-worker.js"></script>
-
     <link id="cm-theme" rel="stylesheet">
 
     <template data-id="appliesTo">
@@ -272,7 +261,7 @@
     </template>
   </head>
 
-  <body id="stylus-edit">
+  <body id="stylus-edit" class="truegray-alpha-2">
     <div id="header">
       <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
       <section id="basic-info">
@@ -428,7 +417,7 @@
             </a>
           </h2>
         </summary>
-        <div class="lint-report-container"></div>
+        <div></div>
       </details>
       <div id="footer" class="hidden">
         <a href="https://github.com/openstyles/stylus/wiki/Usercss"
diff --git a/global.css b/global.css
index 16c49b88..0ea73fbf 100644
--- a/global.css
+++ b/global.css
@@ -1,3 +1,124 @@
+:root {
+  --white: hsl(0, 0%, 100%);
+  --white-alpha-75: hsla(0, 0%, 100%, 0.75);
+  --gray-lightness-10: hsl(0, 0%, 10%);
+  --gray-lightness-20: hsl(0, 0%, 20%);
+  --gray-lightness-24: hsl(0, 0%, 24%);
+  --gray-lightness-25: hsl(0, 0%, 25%);
+  --gray-lightness-27: hsl(0, 0%, 27%);
+  --gray-lightness-30: hsl(0, 0%, 30%);
+  --gray-lightness-33: hsl(0, 0%, 33%);
+  --gray-lightness-38: hsl(0, 0%, 38%);
+  --gray-lightness-40: hsl(0, 0%, 40%);
+  --gray-lightness-45: hsl(0, 0%, 45%);
+  --gray-lightness-46: hsl(0, 0%, 46%);
+  --truegray: hsl(0, 0%, 50%);
+  --gray-lightness-60: hsl(0, 0%, 60%);
+  --gray-lightness-65: hsl(0, 0%, 65%);
+  --gray-lightness-66: hsl(0, 0%, 66%);
+  --gray-lightness-73: hsl(0, 0%, 73%);
+  --gray-lightness-76: hsl(0, 0%, 76%);
+  --gray-lightness-80: hsl(0, 0%, 80%);
+  --gray-lightness-84: hsl(0, 0%, 84%);
+  --gray-lightness-85: hsl(0, 0%, 85%);
+  --gray-lightness-86: hsl(0, 0%, 86%);
+  --gray-lightness-87: hsl(0, 0%, 87%);
+  --gray-lightness-88: hsl(0, 0%, 88%);
+  --gray-lightness-90: hsl(0, 0%, 90%);
+  --main-bg: hsl(0, 0%, 90%);
+  --gray-lightness-92: hsl(0, 0%, 92%);
+  --gray-lightness-93: hsl(0, 0%, 93%);
+  --gray-lightness-95: hsl(0, 0%, 95%);
+  --truegray-alpha-05: hsla(0, 0%, 50%, .05);
+  --truegray-alpha-06: hsla(0, 0%, 50%, .06);
+  --truegray-alpha-07: hsla(0, 0%, 50%, .07);
+  --truegray-alpha-1: hsla(0, 0%, 50%, .1);
+  --truegray-alpha-15: hsla(0, 0%, 50%, .15);
+  --truegray-alpha-2: hsla(0, 0%, 50%, .2);
+  --truegray-alpha-25: hsla(0, 0%, 50%, .25);
+  --truegray-alpha-3: hsla(0, 0%, 50%, .3);
+  --truegray-alpha-4: hsla(0, 0%, 50%, .4);
+  --truegray-alpha-5: hsla(0, 0%, 50%, .5);
+  --truegray-alpha-6: hsla(0, 0%, 50%, .6);
+  --truegray-alpha-7: hsla(0, 0%, 50%, .7);
+  --black: hsl(0, 0%, 0%);
+  --black-alpha-05: hsla(0, 0%, 0%, .05);
+  --black-alpha-1: hsla(0, 0%, 0%, .1);
+  --black-alpha-15: hsla(0, 0%, 0%, .15);
+  --black-alpha-25: hsla(0, 0%, 0%, .25);
+  --black-alpha-3: hsla(0, 0%, 0%, .3);
+  --black-alpha-4: hsla(0, 0%, 0%, .4);
+  --black-alpha-45: hsla(0, 0%, 0%, .45);
+  --black-alpha-5: hsla(0, 0%, 0%, .5);
+  --black-alpha-7: hsla(0, 0%, 0%, .7);
+  --black-alpha-75: hsla(0, 0%, 0%, .75);
+  --darker-red: hsl(0, 100%, 42%);
+  --darkred: hsl(0, 100%, 27%);
+  --maroon: hsl(0, 100%, 25%);
+  --darker-maroon: hsl(0, 100%, 20%);
+  --red-alpha-05: hsla(0, 100%, 50%, .05);
+  --red-alpha-1: hsla(0, 100%, 50%, .1);
+  --darkgreen: hsl(120, 100%, 20%);
+  --darkcyan: hsl(180, 100%, 27%);
+  --darkcyan-alpha-5: hsla(180, 100%, 27%, .5);
+  --darkcyan-alpha-75: hsla(180, 100%, 27%, .75);
+  --focus-outline: hsl(180, 100%, 34%);
+  --selection: hsl(180, 50%, 34%);
+}
+
+/* in case custom browser bg is specified */
+html {
+  background-color: var(--white);
+}
+
+a, .disabled a:hover {
+  color: var(--black);
+  transition: color .5s;
+  text-decoration-skip: ink;
+}
+
+a:hover {
+  color: var(--gray-lightness-40);
+}
+
+.main-bg {
+  background-color: var(--main-bg);
+}
+
+.truegray-alpha-05 {
+  background-color: var(--truegray-alpha-05);
+}
+
+.truegray-alpha-06 {
+  background-color: var(--truegray-alpha-06);
+}
+
+.truegray-alpha-1 {
+  background-color: var(--truegray-alpha-1);
+}
+
+.truegray-alpha-15 {
+  background-color: var(--truegray-alpha-15);
+}
+
+.truegray-alpha-2 {
+  background-color: var(--truegray-alpha-2);
+}
+
+* {
+  outline-color: var(--focus-outline);
+}
+
+::selection {
+  color: var(--white);
+  background-color: var(--selection);
+}
+
+::-moz-selection {
+  color: var(--white);
+  background-color: var(--selection);
+}
+
 body {
   font: normal 12px Arial, system-ui, sans-serif;
 }
@@ -24,49 +145,66 @@ button {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 2px 7px;
-  border: 1px solid hsl(0, 0%, 62%);
+  border: 1px solid var(--gray-lightness-60);
   font: inherit;
   font-size: 13px;
-  color: #000;
-  background-color: hsl(0, 0%, 100%);
+  color: var(--gray-lightness-10);
+  background-color: var(--gray-lightness-95);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
   background-repeat: repeat-x;
-  background-size: 100% 100%;
-  transition: background-color .25s, border-color .25s;
+  background-size: auto 100%;
+  transition: color .25s, background-color .25s, border-color .25s;
 }
 
 button:not(:disabled):hover {
-  background-color: hsl(0, 0%, 95%);
-  border-color: hsl(0, 0%, 52%);
+  color: var(--black);
+  background-color: var(--gray-lightness-90);
+  border-color: var(--truegray);
 }
 
 button:active {
-  background-color: hsl(0, 0%, 95%);
-  border-color: hsl(0, 0%, 52%);
+  background-color: var(--gray-lightness-90);
+  border-color: var(--truegray);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
   background-repeat: repeat-x;
   background-size: 100% 100%;
 }
 
-/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(:disabled):hover {
-  background-color: hsl(0, 0%, 90%);
-  border-color: hsl(0, 0%, 50%);
-}
-
 input  {
   font: inherit;
 }
 
-input:not([type]) {
-  background: #fff;
-  color: #000;
+input:not([type]),
+input[type="text"],
+input[type="search"] {
+  color: var(--black);
+  background: var(--gray-lightness-93);
   height: 22px;
-  min-height: 22px!important;
   line-height: 22px;
   padding: 0 3px;
   font: inherit;
-  border: 1px solid hsl(0, 0%, 66%);
+  border: 1px solid var(--gray-lightness-66);
+  transition: border-color .25s;
+}
+
+input[data-focused-via-click]:not([type]):focus,
+input[data-focused-via-click][type="number"]:focus,
+input[data-focused-via-click][type="search"]:focus,
+label[data-focused-via-click] input[type="number"]:focus,
+label[data-focused-via-click] + input[type="number"]:focus,
+input[data-focused-via-click].config-value:focus,
+label[data-focused-via-click] input.config-value:focus {
+  outline: none;
+  border-color: var(--focus-outline);
+}
+
+input[type="number"] {
+  height: 22px;
+  color: var(--black);
+  background: var(--gray-lightness-93);
+  border: 1px solid var(--gray-lightness-66);
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 .svg-icon.checked {
@@ -74,7 +212,7 @@ input:not([type]) {
   height: 8px;
   width: 8px;
   display: none;
-  fill: #000;
+  fill: var(--gray-lightness-20);
   margin: 2px 0 0 2px;
 }
 
@@ -89,19 +227,19 @@ input[type="checkbox"]:not(.slider) {
   position: absolute;
   left: 0;
   top: 0;
-  border: 1px solid hsl(0, 0%, 46%);
+  border: 1px solid var(--gray-lightness-46);
   height: 12px;
   width: 12px;
   display: inline-flex;
   border-radius: 2px;
-  background-color: hsla(0, 0%, 0%, .1);
+  background-color: var(--truegray-alpha-15);
   margin: 0;
   transition: background-color .1s, border-color .1s;
 }
 
 input[type="checkbox"]:not(.slider):hover {
-  border-color: hsl(0, 0%, 32%);
-  background-color: hsl(0, 0%, 82%);
+  border-color: var(--black);
+  background-color: var(--truegray-alpha-25);
 }
 
 input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -113,31 +251,46 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
 
 input[type="checkbox"]:not(.slider):disabled {
   background-color: transparent;
-  border-color: hsl(0, 0%, 50%);
+  border-color: var(--truegray);
 }
 
 input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
-  fill: hsl(0, 0%, 50%);
+  fill: var(--truegray);
 }
 
 input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
-  color: hsl(0, 0%, 50%);
+  color: var(--truegray);
 }
 
 label {
+  color: var(--gray-lightness-20);
   transition: color .1s;
 }
 
+label:hover {
+  color: var(--black)
+}
+
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAIGBgYGAgIGBgSS07UcAAAAEdFJOUwAiFQpfOvseAAAAFklEQVQI12NgZGBkwA+YoZAJDhkhEAACSgAd0bXODAAAAABJRU5ErkJggg==);
+  background-repeat: repeat-x;
+  background-size: 100% 100%;
   height: 22px;
   font: inherit;
-  color: #000;
-  background-color: transparent;
-  border: 1px solid hsl(0, 0%, 66%);
+  color: var(--gray-lightness-20);
+  background-color: var(--gray-lightness-88);
+  border: 1px solid var(--gray-lightness-60);
   padding: 0 20px 0 6px;
-  transition: color .5s;
+  transition: color .5s, background-color .5s, border-color .5s;
+}
+
+select:hover,
+select:focus {
+  color: var(--black);
+  background-color: var(--main-bg);
+  border-color: var(--truegray);
 }
 
 .select-resizer {
@@ -152,19 +305,24 @@ select {
   display: inline-flex;
   height: 14px;
   width: 14px;
-  fill: #000;
+  fill: var(--gray-lightness-30);
   position: absolute;
   top: 4px;
   right: 4px;
   transition: fill .5s;
 }
 
+select:hover + .svg-icon.select-arrow,
+select:focus + .svg-icon.select-arrow {
+  fill: var(--black);
+}
+
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
-  background: hsl(0, 0%, 88%);
+  background: var(--gray-lightness-88);
   border-radius: 50%;
-  border: 1px solid hsl(0, 0%, 60%);
+  border: 1px solid var(--gray-lightness-60);
   cursor: default;
   height: 13px;
   width: 13px;
@@ -186,7 +344,7 @@ input[type="radio"]:after {
 }
 
 input[type="radio"]:checked:after {
-  background-color: hsl(0, 0%, 30%);
+  background-color: var(--gray-lightness-30);
   transform: scale(1);
 }
 
@@ -235,9 +393,6 @@ select[disabled] > option {
 /* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
   .firefox.non-windows input[type="number"] {
     -moz-appearance: textfield;
-    background: #fff;
-    color: #000;
-    border: 1px solid hsl(0, 0%, 66%);
   }
 
   .firefox.non-windows input[type="number"]:not(:disabled):hover,
@@ -246,8 +401,7 @@ select[disabled] > option {
   }
 
   .firefox.non-windows input[type="color"] {
-    background: #fff;
-    border: 1px solid hsl(0, 0%, 66%);
+    border: 1px solid var(--gray-lightness-66);
     padding: 4px;
   }
 
diff --git a/manage.html b/manage.html
index df581f3f..d6393b78 100644
--- a/manage.html
+++ b/manage.html
@@ -167,9 +167,9 @@
   <script src="js/storage-util.js" async></script>
 </head>
 
-<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
+<body id="stylus-manage" class="truegray-alpha-15" i18n-dragndrop-hint="dragDropMessage">
 
-<div id="header">
+<div id="header" class="truegray-alpha-06">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
   <div id="manage-settings">
@@ -325,16 +325,18 @@
 
         <div id="newUIoptions">
           <div>
-            <label for="manage.newUI.favicons" i18n-text="manageFavicons">
-              <input id="manage.newUI.favicons" type="checkbox">
-              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <div class="favicon-label-wrapper">
+              <label for="manage.newUI.favicons" i18n-text="manageFavicons">
+                <input id="manage.newUI.favicons" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
               <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
                 <svg class="svg-icon select-arrow">
                   <title i18n-text="optionsSubheading"></title>
                   <use xlink:href="#svg-icon-select-arrow"/>
                 </svg>
               </a>
-            </label>
+            </div>
             <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
               <div>
                 <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
diff --git a/options.html b/options.html
index edf5850e..ec057cd5 100644
--- a/options.html
+++ b/options.html
@@ -28,7 +28,7 @@
   <script src="content/apply.js"></script>
 </head>
 
-<body id="stylus-options">
+<body id="stylus-options" class="truegray-alpha-2">
   <div id="options">
 
     <div class="block">
@@ -105,6 +105,57 @@
             <span></span>
           </span>
         </label>
+        <div class="radio-outer-wrapper action-elements">
+          <div class="radio-title" i18n-text="optionsPopupTitle"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupIconUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-svg">
+                  <svg class="svg-icon vector" viewBox="0 0 40 22">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="m 36.9,0.95 c -1.2,0 -2.4,0.8 -2.9,1.9 H 23.8 v -2.5 h -7.5 v 2.5 H 6 C 5.5,1.75 4.4,0.95 3.1,0.95 1.3,0.95 0,2.35 0,4.05 c 0,1.7 1.4,3.1 3.1,3.1 1.2,0 2.4,-0.8 2.9,-1.9 h 6.4 c -3,2 -5.2,5.1 -6.2,8.8 H 3.8 v 7.6 h 7.5 v -7.5 H 8.8 c 1.1,-3.6 4,-6.6 7.5,-7.9 v 1.6 h 7.5 v -1.6 c 3.6,1.4 6.4,4.2 7.5,7.9 h -2.5 v 7.5 h 7.5 v -7.5 h -2.4 c -1,-3.6 -3.2,-6.8 -6.2,-8.8 H 34 c 0.5,1.1 1.6,1.9 2.9,1.9 1.8,0 3.1,-1.4 3.1,-3.1 0,-1.8 -1.4,-3.2 -3.1,-3.2 z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClassicUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-text">
+                  <svg class="svg-icon text" viewBox="0 0 8 8">
+                    <path d="M0 0v2h.5c0-.55.45-1 1-1h1.5v5.5c0 .28-.22.5-.5.5h-.5v1h4v-1h-.5c-.28 0-.5-.22-.5-.5v-5.5h1.5c.55 0 1 .45 1 1h.5v-2h-8z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div class="radio-outer-wrapper style-name-action">
+          <div class="radio-title" i18n-text="optionsPopupTitleClickAction"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupClickActionLink">
+              <div class="popupclick ">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-edit">
+                  <svg class="svg-icon edit" viewBox="0 0 1024 1024">
+                    <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
+                    <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClickActionToggle">
+              <div class="popupclick">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-toggle">
+                  <svg class="svg-icon double-toggle" viewBox="0 0 1024 1024">
+                    <path d="M692.053333 474.502095 331.897905 474.502095c-119.369143 0-216.088381-100.766476-216.088381-225.060571S212.528762 24.380952 331.897905 24.380952l360.131048 0c119.369143 0 216.137143 100.766476 216.137143 225.060571S811.398095 474.502095 692.053333 474.502095zM692.053333 61.878857 331.897905 61.878857c-99.449905 0-180.077714 83.992381-180.077714 187.562667s80.62781 187.562667 180.077714 187.562667l360.131048 0c99.474286 0 180.077714-83.992381 180.077714-187.562667S791.527619 61.878857 692.053333 61.878857zM331.897905 399.433143c-79.579429 0-144.067048-67.145143-144.067048-149.991619s64.512-150.064762 144.067048-150.064762c79.555048 0 144.042667 67.193905 144.042667 150.064762S411.452952 399.433143 331.897905 399.433143zM331.897905 549.497905l360.131048 0c119.369143 0 216.137143 100.790857 216.137143 225.060571S811.398095 999.619048 692.053333 999.619048L331.897905 999.619048c-119.369143 0-216.088381-100.766476-216.088381-225.03619S212.528762 549.497905 331.897905 549.497905zM692.053333 924.623238c79.60381 0 144.11581-67.193905 144.11581-150.040381s-64.512-150.064762-144.11581-150.064762c-79.579429 0-144.042667 67.218286-144.042667 150.064762S612.473905 924.623238 692.053333 924.623238z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -167,7 +218,7 @@
       </div>
     </div>
 
-    <div class="block" id="actions">
+    <div class="block truegray-alpha-2" id="actions">
       <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
       <button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
       <div data-cmd="check-updates">
diff --git a/popup.html b/popup.html
index 6c96fdfd..56739468 100644
--- a/popup.html
+++ b/popup.html
@@ -25,18 +25,31 @@
   <template data-id="style">
     <div class="entry">
       <div class="main-controls">
+        <a class="style-edit-link-accessibility directLinkUI-el" href="edit.html?id=" tabindex="0"></a>
         <label class="style-name">
-          <input class="checker" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <input class="checker toggleUI-el" type="checkbox">
+          <svg class="svg-icon checked toggleUI-el"><use xlink:href="#svg-icon-checked"/></svg>
         </label>
       </div>
       <div class="actions">
-        <a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
-        <a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
         <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
           <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
         </a>
-        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
+        <a href="#" class="enable directLinkUI-el" i18n-title="enableStyleLabel" tabindex="0">
+          <svg class="svg-icon toggled-off" viewbox="0 0 24 24">
+            <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M7,15c-1.66,0-3-1.34-3-3    c0-1.66,1.34-3,3-3s3,1.34,3,3C10,13.66,8.66,15,7,15z"/>
+		    <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10    c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+		    <path d="M7,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C10,10.34,8.66,9,7,9z"/>
+          </svg>
+        </a>
+        <a href="#" class="disable directLinkUI-el" i18n-title="disableStyleLabel" tabindex="0">
+          <svg class="svg-icon toggled-on" viewbox="0 0 24 24">
+            <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M17,15c-1.66,0-3-1.34-3-3    c0-1.66,1.34-3,3-3s3,1.34,3,3C20,13.66,18.66,15,17,15z"/>
+		    <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10    c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+		    <path d="M17,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C20,10.34,18.66,9,17,9z"/>
+          </svg>
+        </a>
+        <a class="style-edit-link toggleUI-el" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
           <svg class="svg-icon edit" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
           </svg>
@@ -50,6 +63,14 @@
     </div>
   </template>
 
+  <template data-id="confirmHotkey">
+    <a id="popup-confirm-icon" class="action-wrapper iconUI-el" i18n-title="confirmOK">
+      <svg class="svg-icon thumbsup" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M13.991 13.991c-.05.69-1.269 1-1.998 1H5.666l-1.668-1V7.995c1.359 0 2.108-.75 3.128-1.879 1.229-1.359 1.139-2.558.879-4.127-.08-.5.5-1 1-1 .829 0 1.998 2.729 1.998 3.998l-.02 1.03c0 .689.33.969 1.02.969H14c.63 0 .98.36 1 .999l-1 5.996-.01.01zm0-7.995h-2.018l.02-.98C11.993 3.719 10.823 0 8.994 0c-.58 0-1.169.3-1.559.77-.36.41-.5.909-.42 1.409.25 1.479.28 2.278-.629 3.278-1 1.089-1.48 1.549-2.388 1.549h-2C.94 6.996 0 7.935 0 8.994v3.998c0 1.06.94 1.999 1.999 1.999h1.719l1.439.86c.16.089.33.139.52.139h6.325c1.13 0 2.839-.5 2.999-1.879l.979-5.946c.02-.08.02-.14.02-.2-.03-1.17-.84-1.969-1.999-1.969h-.01z"/>
+      </svg>
+    </a>
+  </template>
+
   <template data-id="writeStyle">
     <a class="write-style-link"></a>
   </template>
@@ -71,14 +92,14 @@
   </template>
 
   <template data-id="unavailableInfo">
-    <div class="blocked-info">
+    <div class="blocked-info truegray-alpha-1">
       <label i18n-text="stylusUnavailableForURL"></label>
       <p i18n-text="stylusUnavailableForURLdetails"></p>
     </div>
   </template>
 
   <template data-id="unreachableInfo">
-    <div class="blocked-info">
+    <div class="blocked-info truegray-alpha-1">
       <label i18n-text="unreachableContentScript"></label>
       <p i18n-text="unreachableFileHint"></p>
     </div>
@@ -166,13 +187,25 @@
   <script src="js/storage-util.js" async></script>
 </head>
 
-<body id="stylus-popup">
+<body id="stylus-popup" class="truegray-alpha-15">
 
   <div id="confirm">
-    <div>
+    <div class="main-bg">
       <b>Style's Name</b>
       <span i18n-text="deleteStyleConfirm"></span>
-      <div>
+      <div class="iconUI-el">
+        <a id="popup-delete-icon" href="#" class="action-wrapper" i18n-title="confirmDelete" data-cmd="ok" tabindex="0">
+          <svg class="svg-icon remove" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
+          </svg>
+        </a>
+        <a id="popup-cancel-icon" href="#" class="action-wrapper iconUI-el" i18n-title="confirmCancel" data-cmd="cancel" tabindex="0">
+          <svg class="svg-icon cancel" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"/>
+          </svg>
+        </a>
+      </div>
+      <div class="classicUI-el">
         <button i18n-text="confirmDelete" data-cmd="ok"></button>
         <button i18n-text="confirmCancel" data-cmd="cancel"></button>
       </div>
@@ -183,45 +216,100 @@
     <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
   </div>
 
-  <div class="actions">
-    <div id="disable-all-wrapper">
-      <div class="main-controls">
-        <label id="disableAll-label" i18n-text="disableAllStyles">
-          <input id="disableAll" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+  <div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
+    <button id="popup-manage-button" class="classicUI-el" i18n-text="openManage" data-href="manage.html" i18n-title="popupManageTooltip"></button>
+    <a id="popup-manage-icon" href="#" class="iconUI-el" data-href="manage.html" i18n-title="popupManageTooltip" tabindex="0">
+      <svg class="svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
+      </svg>
+    </a>
+  </div>
+  <div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
+    <button id="popup-options-button" class="classicUI-el" i18n-text="openOptionsPopup"></button>
+    <a id="popup-options-icon" href="#" class="iconUI-el" i18n-title="openOptionsPopup" tabindex="0">
+      <svg class="svg-icon options" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
+      </svg>
+    </a>
+  </div>
+  <div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
+    <div id="find-styles">
+      <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
+      <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
+        <svg  class="svg-icon search" viewBox="0 0 24 24">
+          <path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z    M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7   L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
+        </svg>
+      </a>
+      <span id="find-styles-inline-group">
+        <label i18n-title="findStylesInlineTooltip">
+          <input id="popup.findStylesInline" class="checker toggle-inline classicUI-el" type="checkbox">
+          <svg class="svg-icon checked classicUI-el"><use xlink:href="#svg-icon-checked"/></svg>
+          <span class="classicUI-el" i18n-text="findStylesInline"></span>
+          <a id="find-inline-icon" href="#" class="iconUI-el" tabindex="0">
+            <svg viewBox="0 0 20 20" class="svg-icon inline">
+              <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M 17,9 H 11 V 3 l 2,2 4,-4 2,2 -4,4 z"/>
+            </svg>
+          </a>
+          <a id="find-external-icon" href="#" class="iconUI-el" i18n-title="findStylesExternalTooltip" tabindex="0">
+            <svg class="svg-icon external" viewBox="0 0 20 20">
+              <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+            </svg>
+          </a>
         </label>
-      </div>
+        <div id="find-external-icon-noclick" class="iconUI-el" i18n-title="findStylesExternalTooltip">
+          <svg class="svg-icon external noclick" viewBox="0 0 20 20">
+            <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+          </svg>
+        </div>
+      </span>
     </div>
+  </div>
+  <div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
+    <button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
+    <a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
+      <svg class="svg-icon wiki" viewBox="0 0 24 24">
+        <path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
+      </svg>
+    </a>
+  </div>
+  <div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
     <div class="main-controls">
-      <div id="find-styles">
-        <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"></a>
-        <span id="find-styles-inline-group">
-          <label i18n-title="findStylesInlineTooltip">
-            <input id="popup.findStylesInline" class="checker" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span i18n-text="findStylesInline"></span>
-          </label>
-        </span>
-      </div>
-      <div id="write-style">
-        <span id="write-style-for" i18n-text="writeStyleFor"></span>
-      </div>
+      <label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
+        <input id="disableAll" type="checkbox">
+        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+      </label>
     </div>
+    <a id="disable-all-icon" class="iconUI-el" href="#" tabindex="0">
+      <div i18n-title="disableAllStyles">
+        <svg class="svg-icon toggle-all-off" viewBox="0 0 24 24">
+          <path fill="none" d="M0 0h24v24H0z"/>
+          <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+        </svg>
+      </div>
+      <div i18n-title="reEnableAllStyles">
+        <svg  class="svg-icon toggle-all-on" viewBox="0 0 24 24">
+          <path fill="none" d="M0 0h24v24H0z"/>
+          <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+        </svg>
+      </div>
+    </a>
+  </div>
 
-    <!-- Actions -->
-    <div id="popup-options">
-      <button id="popup-manage-button" i18n-text="openManage"
-              data-href="manage.html" i18n-title="popupManageTooltip"></button>
-      <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
-      <button id="popup-wiki-button"
-              i18n-text="linkStylusWiki"
-              i18n-title="linkGetHelp"
-              data-href="https://github.com/openstyles/stylus/wiki"></button>
+  <div id="write-style-wrapper" class="truegray-alpha-1">
+    <div id="write-style">
+      <span id="write-style-for" i18n-text="writeStyleFor">
+        <div id="popup-write-style-icon"  i18n-title="writeStyleForInfo">
+		  <svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
+            <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
+            <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
+          </svg>
+        </div>
+      </span>
     </div>
   </div>
 
   <div id="search-results-error" class="hidden"></div>
-  <div id="search-results" class="hidden">
+  <div id="search-results" class="hidden truegray-alpha-1">
     <div class="search-results-nav" data-type="top"></div>
     <div id="search-results-list"></div>
     <div class="search-results-nav" data-type="bottom"></div>
@@ -240,8 +328,8 @@
       <path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
     </symbol>
 
-    <symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
-      <path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
+    <symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
+      <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
     </symbol>
 
     <symbol id="svg-icon-help" viewBox="0 0 14 16">
