diff --git a/static/css/utils/asidenav.scss b/static/css/utils/asidenav.scss
index 10f26cadc..fa7eadb1d 100644
--- a/static/css/utils/asidenav.scss
+++ b/static/css/utils/asidenav.scss
@@ -141,7 +141,7 @@
   text-transform: uppercase;
   width: 100%;
   height: 100%;
-  padding: 0 4px 2px;
+  padding: 2px 4px;
   border: 1px solid currentColor;
   letter-spacing: 2px;
   background-color: white;
diff --git a/templates/widgets/navbar/item.hamlet b/templates/widgets/navbar/item.hamlet
index 6446b6366..156844387 100644
--- a/templates/widgets/navbar/item.hamlet
+++ b/templates/widgets/navbar/item.hamlet
@@ -1,4 +1,6 @@
 $newline never
 <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
-  <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
+  $if isJust menuItemIcon
+    <div .navbar__link-icon>
+      <i .fas.fa-2x.fa-#{fromMaybe "none" menuItemIcon}>
   <div .navbar__link-label>_{SomeMessage menuItemLabel}
diff --git a/templates/widgets/navbar/navbar.lucius b/templates/widgets/navbar/navbar.lucius
index 335c59d03..8dde8fbc5 100644
--- a/templates/widgets/navbar/navbar.lucius
+++ b/templates/widgets/navbar/navbar.lucius
@@ -58,6 +58,7 @@
 
 /* links */
 .navbar__link-wrapper {
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -66,15 +67,23 @@
   min-width: 90px;
   color: var(--color-lightwhite);
   transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+  overflow: hidden;
 
   &:hover {
     color: var(--color-lightwhite);
   }
 }
 
+.navbar__link-icon {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  opacity: 0.3;
+}
+
 .navbar__link-label {
   transition: opacity .2s ease;
-  padding: 4px 6px;
+  padding: 2px 4px;
   text-transform: uppercase;
 }