diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index deb691266c4c9..a8ea725085254 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -43,7 +43,9 @@
 				:href="app.href"
 				class="app-menu-popover-entry">
 				<template #icon>
-					<img :src="app.icon" alt="" :class="{ 'has-unread': app.unread > 0 }">
+					<div class="app-icon" :class="{ 'has-unread': app.unread > 0 }">
+						<img :src="app.icon" alt="">
+					</div>
 				</template>
 				{{ app.name }}
 				<span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
@@ -231,11 +233,20 @@ $header-icon-size: 20px;
 }
 
 .app-menu-popover-entry {
-	img {
-		filter: var(--background-invert-if-bright);
-		width: $header-icon-size;
-		height: $header-icon-size;
-		padding: calc((50px - $header-icon-size) / 2);
+	.app-icon {
+		position: relative;
+		height: 44px;
+
+		&.has-unread::after {
+			background-color: var(--color-main-text);
+		}
+
+		img {
+			filter: var(--background-invert-if-bright);
+			width: $header-icon-size;
+			height: $header-icon-size;
+			padding: calc((50px - $header-icon-size) / 2);
+		}
 	}
 }