diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss
index 5f6f869877..28eddf1fa2 100644
--- a/res/css/views/rooms/_TopUnreadMessagesBar.scss
+++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss
@@ -51,7 +51,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
+    mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;
@@ -61,12 +61,20 @@ limitations under the License.
     display: block;
     width: 18px;
     height: 18px;
-    background-image: url('$(res)/img/cancel.svg');
-    background-position: center;
-    background-size: 10px;
-    background-repeat: no-repeat;
-    background-color: $primary-bg-color;
+    background: $primary-bg-color;
     border: 1.3px solid $roomtile-name-color;
-    border-radius: 99px;
+    border-radius: 10px;
     margin: 5px auto;
 }
+
+.mx_TopUnreadMessagesBar_markAsRead::before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    mask-image: url('$(res)/img/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-size: 10px;
+    mask-position: 4px 4px;
+    background: $roomtile-name-color;
+}