diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index a69d4d689d..9e3451ab94 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -114,5 +114,16 @@
 
   img {
     padding: 3px;
+    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;
+      }
+    }
   }
 }
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 2f1cb34c46..0ee8f2ddc8 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -72,7 +72,12 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
 
   const renderIcon = () => {
     if (icon) {
-      return <img src={icon} width={size} height={size} />;
+      return <img
+        {...rest}
+        src={icon}
+        className={active ? "active" : "default"}
+        width={size}
+        height={size} />;
     } else {
       return <Avatar
         {...rest}