diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss
index 23e962567..5285ea7f0 100644
--- a/src/addons/notifications/notifications.scss
+++ b/src/addons/notifications/notifications.scss
@@ -1,29 +1,39 @@
 @import "~theme/globals";
 
 :host {
-    ::ng-deep {
-        core-user-avatar .core-avatar-extra {
+    --extra-icon-size: 16px;
+
+    ::ng-deep core-user-avatar {
+        .core-avatar-extra-img,
+        core-mod-icon {
             margin: 0 !important;
             position: absolute;
             right: -4px;
             bottom: -4px;
-        }
-        core-user-avatar img.core-avatar-extra {
-            background: none;
-            width: 24px;
-            height: 24px;
-            border-radius: 0 !important;
-        }
-        core-user-avatar core-mod-icon.core-avatar-extra {
-            --size: 16px;
             padding: 0.2rem;
         }
+
+        .core-avatar-extra-img {
+            background: var(--background-color);
+            border-radius: var(--medium-radius);
+            img {
+                max-width: var(--extra-icon-size);
+                max-height: var(--extra-icon-size);
+                display: block;
+            }
+        }
+
+        core-mod-icon  {
+            --size: var(--extra-icon-size);
+        }
     }
 
     .core-notification-icon {
-        width: 34px;
-        height: 34px;
-        margin: 10px !important;
+        width: var(--core-avatar-size);
+        height: var(--core-avatar-size);
+        @include margin(6px, 8px, 6px, 0px);
+        background: var(--background-color);
+        border-radius: var(--small-radius);
     }
 
     .item core-format-text ::ng-deep {
diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html
index d3b9fe72e..bac0b73c5 100644
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@@ -36,10 +36,11 @@
                     <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
                         [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
                         [userId]="notification.useridfrom">
-                        <img *ngIf="notification.iconurl && !notification.modname" [src]="notification.iconurl" alt="" role="presentation"
-                            class="core-avatar-extra">
+                        <div class="core-avatar-extra-img" *ngIf="notification.iconurl && !notification.modname">
+                            <img [src]="notification.iconurl" alt="" role="presentation">
+                        </div>
                         <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
-                            [showAlt]="false" class="core-avatar-extra">
+                            [showAlt]="false">
                         </core-mod-icon>
                     </core-user-avatar>
 
diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html
index 371835ddb..c0566dee0 100644
--- a/src/addons/notifications/pages/notification/notification.html
+++ b/src/addons/notifications/pages/notification/notification.html
@@ -13,8 +13,10 @@
         <ion-item class="ion-text-wrap" [attr.aria-label]="subject">
             <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
                 [fullname]="userFromFullName">
-                <img *ngIf="iconUrl && !modname" [src]="iconUrl" alt="" role="presentation" class="core-avatar-extra">
-                <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false" class="core-avatar-extra">
+                <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
+                    <img [src]="iconUrl" alt="" role="presentation">
+                </div>
+                <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
                 </core-mod-icon>
             </core-user-avatar>
 
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index ad04a1ec8..38eea5500 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -78,8 +78,6 @@
 }
 
 :host-context(ion-item) {
-    margin-top: 6px;
-    margin-bottom: 6px;
     @include margin(6px, 8px, 6px, 0px);
     img {
         min-width: var(--core-avatar-size);