diff --git a/CREDITS b/CREDITS
index e946331..c2be3bc 100644
--- a/CREDITS
+++ b/CREDITS
@@ -143,6 +143,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1
 C: Copyright (c) 2021 Mmis1000 <mmis10002@gmail.com>
 L: MIT
 
+N: edge-frfox
+W: https://github.com/bmFtZQ/edge-frfox
+C: Copyright (c) 2021 bmFtZQ
+L: MIT
+
 N: Feather
 W: https://github.com/feathericons/feather
 C: Copyright (c) 2013-2017 Cole Bemis
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index 37d84f4..c1a89e6 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -8329,6 +8329,53 @@
   }
 }
 /** Url View UI ***************************************************************/
+/*= Url Bar - Icon box as Separator ==========================================*/
+@supports -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") {
+  #identity-box {
+    /* separator */
+    position: relative;
+  }
+
+  #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]),
+  #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]),
+  #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]) {
+    /* remove background from urlbar box */
+    background-color: transparent !important;
+  }
+  #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open])::after,
+  #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open])::after,
+  #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open])::after {
+    opacity: 0.375;
+  }
+  #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button::after,
+  #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button::after,
+  #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button::after {
+    /* Box Model */
+    content: "";
+    position: absolute;
+    display: block;
+    /* Position */
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    /* Bar shape */
+    width: 1px;
+    height: 1em;
+    /* Bar Color */
+    opacity: 0;
+    background-color: currentColor;
+  }
+  #identity-box[pageproxystate="valid"] #identity-icon-label {
+    /* increase space between icon and text - as identity box padding */
+    padding-inline-start: 8px !important;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .identity-box-button::after {
+      transition: opacity 0.2s var(--animation-easing-function);
+    }
+  }
+}
 /*= Url View - Share Layout ==================================================*/
 @supports -moz-bool-pref("userChrome.urlView.as_launcher") or -moz-bool-pref("userChrome.urlView.full_width_padding") {
   .urlbarView {
@@ -10055,14 +10102,16 @@
     }
   }
   @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") {
-    #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box,
-    #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box {
-      padding-inline: var(--urlbar-icon-padding) !important;
-    }
     #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover),
     #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) {
       background-color: transparent !important;
     }
+    @supports not -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") {
+      #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box,
+      #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box {
+        padding-inline: var(--urlbar-icon-padding) !important;
+      }
+    }
     #identity-box[pageproxystate="valid"] #identity-icon-label {
       display: none !important;
     }
diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss
index 56e0de4..226c5e1 100644
--- a/src/hidden/_index.scss
+++ b/src/hidden/_index.scss
@@ -61,10 +61,13 @@
     @include Option("userChrome.hidden.urlbar_iconbox.label_only") {
       &.chromeUI #identity-icon-box,
       &.extensionPage #identity-icon-box {
-        padding-inline: var(--urlbar-icon-padding) !important;
         &:not(:hover) {
           background-color: transparent !important;
         }
+
+        @include NotOption("userChrome.urlbar.iconbox_as_separator") {
+          padding-inline: var(--urlbar-icon-padding) !important;
+        }
       }
 
       #identity-icon-label {
diff --git a/src/urlview/_iconbox_as_separator.scss b/src/urlview/_iconbox_as_separator.scss
new file mode 100644
index 0000000..20d09d7
--- /dev/null
+++ b/src/urlview/_iconbox_as_separator.scss
@@ -0,0 +1,52 @@
+#identity-box {
+  /* separator */
+  position: relative;
+}
+
+#identity-box[pageproxystate="valid"] {
+  &.notSecureText,
+  &.chromeUI,
+  &.extensionPage {
+    > .identity-box-button {
+      &:not(:hover, [open]) {
+        /* remove background from urlbar box */
+        background-color: transparent !important;
+
+        &::after {
+          opacity: 0.375;
+        }
+      }
+
+      &::after {
+        /* Box Model */
+        content: "";
+        position: absolute;
+        display: block;
+
+        /* Position */
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+
+        /* Bar shape */
+        width: 1px;
+        height: 1em;
+
+        /* Bar Color */
+        opacity: 0;
+        background-color: currentColor;
+      }
+    }
+  }
+
+  #identity-icon-label {
+    /* increase space between icon and text - as identity box padding */
+    padding-inline-start: 8px !important;
+  }
+}
+
+@include Animate {
+  .identity-box-button::after {
+    transition: opacity 0.2s var(--animation-easing-function);
+  }
+}
diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss
index bc70297..1233e93 100644
--- a/src/urlview/_index.scss
+++ b/src/urlview/_index.scss
@@ -1,3 +1,8 @@
+/*= Url Bar - Icon box as Separator ==========================================*/
+@include Option("userChrome.urlbar.iconbox_as_separator") {
+  @import "iconbox_as_separator";
+}
+
 /*= Url View - Share Layout ==================================================*/
 @include Option("userChrome.urlView.as_launcher", "userChrome.urlView.full_width_padding") {
   .urlbarView {
diff --git a/user.js b/user.js
index 494098e..0af7678 100644
--- a/user.js
+++ b/user.js
@@ -138,6 +138,8 @@ user_pref("userChrome.rounding.square_tab",           false);
 // user_pref("userChrome.padding.urlView_result",              true);
 // user_pref("userChrome.padding.panel_header",                true);
 
+// user_pref("userChrome.urlbar.iconbox_as_separator",         true);
+
 // user_pref("userChrome.urlView.as_launcher",                 true);
 // user_pref("userChrome.urlView.full_width_padding",          true);
 // user_pref("userChrome.urlView.always_show_page_actions",    true);