diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index 2f9ad6a696..e713b20432 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -31,12 +31,20 @@
 }
 
 .HotbarIcon {
+  --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+  --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+
   border-radius: 6px;
   user-select: none;
   cursor: pointer;
   transition: none;
   text-shadow: 0 0 4px #0000008f;
   position: relative;
+  z-index: 0; // allows to catch state of :active pseudo-selector
+
+  &:active .MuiAvatar-root {
+    box-shadow: var(--iconActiveShadow) !important;
+  }
 
   div.MuiAvatar-colorDefault {
     font-weight:500;
@@ -64,20 +72,17 @@
     box-shadow: none;
   }
 
-  div.MuiAvatar-root {
+  .MuiAvatar-root {
     width: var(--size);
     height: var(--size);
+    border-radius: 6px;
 
     &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+      box-shadow: var(--iconActiveShadow);
     }
 
-    &.interactive {
-      &:hover {
-        &:not(.active) {
-          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-        }
-      }
+    &.interactive:not(.active):hover {
+      box-shadow: var(--iconHoverShadow);
     }
   }
 
@@ -117,20 +122,6 @@
     }
   }
 
-  img {
-    border-radius: 6px;
-
-    &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-    }
-
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-      }
-    }
-  }
-
   .materialIcon {
     margin-left: 1px;
     margin-top: 1px;