diff --git a/.icons/usercss.svg b/.icons/usercss.svg
new file mode 100644
index 0000000000..050ddcd7ae
--- /dev/null
+++ b/.icons/usercss.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="512" height="512">
+  <!-- pixel-aligned -->
+  <path d="M1,0v5.8c0,0.3,0.3,0.4,0.5,0.4C1.7,6.2,2,6.1,2,5.8V0h1v5.9C3,6.7,2.1,7,1.5,7C0.9,7,0,6.7,0,5.9V0H1z"/>
+  <path d="M9,4v1.8C9,6,9.3,6,9.5,6S10,6,10,5.8V5h1v1c0,0.6-0.8,1-1.5,1C8.7,7,8,6.6,8,6V1c0-0.6,0.7-1,1.5-1C10.2,0,11,0.4,11,1v3H9z M10,3V1.3C10,1,9.6,1,9.5,1S9,1,9,1.3V3H10z"/>
+  <path d="M13,10V9.6c0-0.4-0.7-0.5-1-0.5c-0.3,0-1,0.1-1,0.5v1.1c0,0.6,3,1.5,3,2.4v1.5c0,1.1-1.2,1.5-2,1.5c-0.8,0-2-0.3-2-1.5V14h1v0.5c0,0.4,0.7,0.5,1,0.5c0.3,0,1-0.1,1-0.5v-0.9c0-1.2-3-1.4-3-2.8V9.5c0-1.1,1.2-1.5,2-1.5c0.8,0,2,0.3,2,1.5V10H13z"/>
+  <path d="M8,10V9.6c0-0.4-0.7-0.5-1-0.5c-0.3,0-1,0.1-1,0.5v1.1c0,0.6,3,1.5,3,2.4v1.5c0,1.1-1.2,1.5-2,1.5c-0.8,0-2-0.3-2-1.5V14h1v0.5C6,14.9,6.7,15,7,15c0.3,0,1-0.1,1-0.5v-0.9c0-1.2-3-1.4-3-2.8V9.5c0-1.1,1.2-1.5,2-1.5c0.8,0,2,0.3,2,1.5V10H8z"/>
+  <path d="M6,2V1.6C6,1.1,5.7,1,5.5,1C5.2,1,5,1.1,5,1.6v0.8C5,4,7,2.7,7,4.7v0.8C7,6.7,6.3,7,5.5,7C4.7,7,4,6.7,4,5.5V5h1v0.4C5,6,5.2,6,5.5,6C5.7,6,6,6,6,5.4V4.9c0-1.2-2-0.8-2-2.2V1.5C4,0.3,4.7,0,5.5,0C6.3,0,7,0.3,7,1.5V2H6z"/>
+  <path d="M4,10V9.5c0-1.1-1.2-1.5-2-1.5c-0.8,0-2,0.3-2,1.5v0.9v0.2v4c0,1.1,1.2,1.5,2,1.5c0.8,0,2-0.3,2-1.5v-0.5H3v0.4C3,14.9,2.3,15,2,15c-0.3,0-1-0.1-1-0.5v-3.9v-0.2V9.6c0-0.4,0.7-0.5,1-0.5c0.3,0,1,0.1,1,0.5V10H4z"/>
+  <path d="M14.1,0C15,0.1,15,0.7,15,1.5v1.9h-1V1.8c0-0.6-0.3-0.5-0.5-0.5C13.2,1.3,13,1.8,13,2v5h-1V0h1v1C13,1,13.3,0,14.1,0z"/>
+</svg>
diff --git a/global-dark.css b/global-dark.css
index 2eedef7d6f..fdd6718f82 100644
--- a/global-dark.css
+++ b/global-dark.css
@@ -21,6 +21,7 @@
     --cmin: hsl(0, 0%, 100%);
     --cmax: hsl(0, 0%, 0%);
     --accent-1: hsl(180, 100%, 95%);
+    --accent-2: hsl(180, 50%, 30%);
     --accent-3: hsl(180, 30%, 18%);
     --input-bg: var(--c95);
     --red1: hsl(0, 85%, 55%);
diff --git a/global.css b/global.css
index 7b21315049..a66c63cef8 100644
--- a/global.css
+++ b/global.css
@@ -32,7 +32,7 @@
   --cmax: hsl(0, 0%, 100%);
   --bg: var(--c100);
   --fg: var(--c00);
-  --accent-1: hsl(180, 100%, 15%);
+  --accent-1: hsl(180, 100%, 19%);
   --accent-2: hsl(180, 50%, 40%);
   --accent-3: hsl(180, 40%, 69%);
   --red1: hsl(0, 70%, 45%);
@@ -452,7 +452,7 @@ body.resizing-v > * {
 @font-face {
   font-family: 'icons';
   src: url(/icons.ttf) format('truetype');
-  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+22c1,U+22ee,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+e000;
+  unicode-range: /*AUTO-GENERATED-ICON-RANGE*/ U+20,U+2195,U+2197,U+21b2,U+21b6,U+222a,U+22c1,U+22ee,U+24d8,U+25bc,U+25f4,U+2611,U+2699,U+270f,U+2713,U+2714,U+2716,U+2795,U+2796,U+27f3,U+d83e;
 }
 
 /*AUTO-GENERATED-ICON*/ .i-check1::after { content: "✓"; }
@@ -470,7 +470,8 @@ body.resizing-v > * {
 /*AUTO-GENERATED-ICON*/ .i-plus::after { content: "➕"; }
 /*AUTO-GENERATED-ICON*/ .i-reorder::after { content: "↕"; }
 /*AUTO-GENERATED-ICON*/ .i-select-arrow::after { content: "▼"; }
-/*AUTO-GENERATED-ICON*/ .i-sort-down::after { content: ""; }
+/*AUTO-GENERATED-ICON*/ .i-sort-down::after { content: "🠇"; }
+/*AUTO-GENERATED-ICON*/ .i-usercss::after { content: "∪"; }
 /*AUTO-GENERATED-ICON*/ .i-undo::after { content: "↶"; }
 /*AUTO-GENERATED-ICON*/ .i-update-check::after { content: "⟳"; }
 /*AUTO-GENERATED-ICON*/ .i-v::after { content: "⋁"; }
diff --git a/icons.ttf b/icons.ttf
index 7cd6b33a60..998bf57da8 100644
Binary files a/icons.ttf and b/icons.ttf differ
diff --git a/manage.html b/manage.html
index 0bc5fe84e5..0f2877bb08 100644
--- a/manage.html
+++ b/manage.html
@@ -42,7 +42,7 @@ <h2 class="style-name">
   <template data-id="styleNewUI">
     <div class="entry">
       <h2 class="style-name">
-        <input class="checker" type="checkbox" i18n="title:toggleStyle">
+        <input type="checkbox" i18n="title:toggleStyle">
         <a class="style-name-link">
           &nbsp;
           <span class="style-info" data-type="version"></span>
@@ -249,9 +249,9 @@ <h2 i18n="manageFilters">:
           <a href="edit.html">
             <button id="add-style-label" i18n="addStyleLabel" tabindex="-1"></button>
           </a>
-          <label id="add-style-as-usercss-wrapper">
+          <label id="add-style-as-usercss-wrapper" i18n="title:optionsAdvancedNewStyleAsUsercss">
             <input type="checkbox" id="newStyleAsUsercss">
-            <span i18n="manageNewStyleAsUsercss, title:optionsAdvancedNewStyleAsUsercss"></span>
+            <i class=i-usercss></i>
             <a id="usercss-wiki"
                class="icon"
                href="https://github.com/openstyles/stylus/wiki/Usercss"
diff --git a/manage/manage.css b/manage/manage.css
index 90063621d3..0587f97ce1 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -87,20 +87,30 @@ a:hover {
   align-items: center;
   flex-wrap: wrap;
 }
-
 #add-style-wrapper > * {
   /* in case the children are wrapped */
   margin-bottom: .5rem;
 }
-
 #header #add-style-as-usercss-wrapper {
   display: flex;
   align-items: center;
 }
-
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a i {
   color: var(--c65);
 }
+#newStyleAsUsercss + i {
+  font-size: 16px;
+  cursor: auto;
+}
+#newStyleAsUsercss:checked,
+#newStyleAsUsercss:checked + i {
+  border-color: var(--accent-1);
+  color: var(--accent-1);
+}
+#newStyleAsUsercss:checked + i + a i {
+  color: var(--accent-2);
+  filter: grayscale(.75);
+}
 
 button.icon {
   --w: 16px;
diff --git a/manage/sorter.js b/manage/sorter.js
index a347756177..f8f2fa0759 100644
--- a/manage/sorter.js
+++ b/manage/sorter.js
@@ -1,5 +1,4 @@
 /* global $ $create dom messageBoxProxy */// dom.js
-/* global FIREFOX */// toolbox.js
 /* global installed */// manage.js
 /* global prefs */
 /* global t */// localization.js
@@ -92,7 +91,7 @@ const sorter = (() => {
     const option = $create('option');
     const optgroup = $create('optgroup');
     const meta = {
-      desc: ` ${FIREFOX ? '🠇' : '\uE000'}`,
+      desc: ` 🠇`,
       enabled: t('genericEnabledLabel'),
       disabled: t('genericDisabledLabel'),
       dateNew: ` (${t('sortDateNewestFirst')})`,
diff --git a/popup.html b/popup.html
index 8c6310fe84..8437fa6a31 100644
--- a/popup.html
+++ b/popup.html
@@ -127,7 +127,7 @@
     <div class="if-not-blocked">
       <label id="write-as" i18n="title:optionsAdvancedNewStyleAsUsercss">
         <input id="newStyleAsUsercss" type="checkbox">
-        <div>U</div>
+        <i class=i-usercss></i>
       </label>
       <div id="write-style">
         <span id="write-style-for" i18n="writeStyleFor"></span>
@@ -150,7 +150,7 @@
                menu-gf="GreasyFork"></button>
     </div>
     <button id="options-btn" i18n="title:openOptions" class="rel">
-      <svg class="if-not-blocked abs i-config" viewBox="0 0 20 20">
+      <svg class="if-not-blocked abs" viewBox="0 0 20 20">
         <text y="100%">⚙</text>
       </svg>
       <span class="if-not-blocked">&nbsp;</span>
diff --git a/popup/popup.css b/popup/popup.css
index e22764cf33..17201ba3bf 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -413,24 +413,28 @@ a:hover i {
 /* 'New style' links */
 #write-style {
   cursor: pointer;
+  line-height: 16px;
 }
-#newStyleAsUsercss ~ div {
-  font-weight: bold;
-  margin: 0 -1px 0;
-  padding: 1px 3px 0;
-  text-align: center;
-  border-radius: 4px;
-  position: absolute;
+#write-as {
+  flex: 0;
 }
-#newStyleAsUsercss:checked ~ div {
-  color: var(--bg);
-  background-color: var(--accent-2);
+#newStyleAsUsercss + i {
+  pointer-events: auto;
+  margin-left: -1px;
+  color: var(--c60);
+}
+#newStyleAsUsercss:checked,
+#newStyleAsUsercss:checked + i {
+  border-color: var(--accent-1);
+  color: var(--accent-2);
 }
 
 .write-style-link {
   margin-left: .6ex
 }
-
+.write-style-link:nth-last-child(2) {
+  font-weight: bold;
+}
 .about-blank > .breadcrumbs {
   pointer-events: none;
 }
diff --git a/popup/popup.js b/popup/popup.js
index c96d210cb4..a777c2247e 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -347,7 +347,6 @@ function createStyleElement(style) {
     });
     const styleName = $('.style-name', entry);
     Object.assign(styleName, {
-      htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
       onclick: Events.name,
     });
     styleName.appendChild(document.createTextNode(' '));
diff --git a/tools/build-icons.js b/tools/build-icons.js
index 559700872a..2b86921c6b 100644
--- a/tools/build-icons.js
+++ b/tools/build-icons.js
@@ -21,7 +21,8 @@ const SVG_MAP = Object.entries({
   'plus': '➕',
   'reorder': '↕',
   'select-arrow': '▼',
-  'sort-down': '\uE000', // must be in PUA range because the symbol is used along with normal fonts
+  'sort-down': '🠇',
+  'usercss': '∪',
   'undo': '↶',
   'update-check': '⟳',
   'v': '⋁',