diff --git a/src/renderer/components/drawer/drawer.scss b/src/renderer/components/drawer/drawer.scss
index 72a2f10eb1..488a890f2c 100644
--- a/src/renderer/components/drawer/drawer.scss
+++ b/src/renderer/components/drawer/drawer.scss
@@ -3,6 +3,7 @@
   --size: 50%;
   --full-size: 75%;
   --spacing: #{$padding * 3};
+  --icon-focus-color: white;
 
   position: absolute;
   background: $contentColor;
diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss
index 253423bd4c..5840f53602 100644
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@@ -5,6 +5,7 @@
   --big-size: 32px;
   --color-active: #{$iconActiveColor};
   --bgc-active: #{$iconActiveBackground};
+  --focus-color: var(--icon-focus-color, #{$lensBlue});
 
   display: inline-flex;
   flex-shrink: 0;
@@ -106,7 +107,7 @@
 
   &.active {
     color: var(--color-active);
-    box-shadow: 0 0 0 3px $iconActiveBackground;
+    box-shadow: 0 0 0 2px $iconActiveBackground;
     background-color: $iconActiveBackground;
   }
 
@@ -115,8 +116,16 @@
     transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
     border-radius: 50%;
 
-    &.focusable:focus {
-      @extend .active;
+    &.focusable:focus:not(:hover) {
+      box-shadow: 0 0 0 2px var(--focus-color);
+
+      .mouse-intent & {
+        box-shadow: none;
+
+        &.active {
+          box-shadow: 0 0 0 2px $iconActiveBackground;
+        }
+      }
     }
 
     &:hover {