diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index 963018683..cb913aeb8 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -7,13 +7,20 @@
   ul {
     list-style-type: none;
     margin-bottom: 0;
-    margin-left: 0;
+    margin-#{$global-left}: 0;
     padding: 0;
   }
 
   > ul > li a {
+    display: flex;
     font-weight: bold;
 
+    &::before,
+    &::after {
+      flex: 1em 0 0;
+      margin-top: 0.1em;
+    }
+
     @mixin icon($name, $style) {
       @include has-fa-icon($name, $style);
 
@@ -22,15 +29,6 @@
       }
     }
 
-    [class^="icon-"] {
-      display: inline-block;
-      font-size: rem-calc(20);
-      line-height: $line-height;
-      text-align: center;
-      vertical-align: middle;
-      width: $line-height * 1.5;
-    }
-
     &.booths-link {
       @include icon(archive, solid);
     }
@@ -142,7 +140,7 @@
   li a {
     color: inherit;
     display: block;
-    padding: $line-height / 2 $line-height / 4;
+    padding: $line-height / 2;
     vertical-align: top;
 
     &:hover {
@@ -154,15 +152,13 @@
 
   .is-accordion-submenu-parent {
 
-    > a::after {
-      border: 0;
-      content: "\f078";
-      font-family: "Font Awesome 5 Free";
-      font-weight: bold;
-      height: auto;
-      position: absolute;
-      right: 24px;
-      transition: 0.25s;
+    > a {
+      @include has-fa-icon(chevron-down, solid, after);
+
+      &::after {
+        margin-#{$global-left}: auto;
+        transition: 0.25s;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index b5d2a93c1..a06306930 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -17,8 +17,7 @@
 
 %admin-menu-icon {
   font-size: rem-calc(20);
-  margin-left: rem-calc(8);
-  margin-right: rem-calc(10);
+  margin-#{$global-right}: rem-calc(10);
 }
 
 $font-awesome-icons: (