diff --git a/ui/analyse/css/study/_members.scss b/ui/analyse/css/study/_members.scss
index 05dd61e964..0f4542b6fd 100644
--- a/ui/analyse/css/study/_members.scss
+++ b/ui/analyse/css/study/_members.scss
@@ -18,7 +18,6 @@
     transition: 2.5s;
   }
   i {
-    @extend %data-icon-middle;
     font-size: 1.2em;
     opacity: 0.5;
     transition: 2.5s;
diff --git a/ui/common/css/abstract/_extends.scss b/ui/common/css/abstract/_extends.scss
index 8ebf301e86..8ab2bc866e 100644
--- a/ui/common/css/abstract/_extends.scss
+++ b/ui/common/css/abstract/_extends.scss
@@ -89,7 +89,7 @@
 
 %data-icon {
   font-size: 1.1em;
-  vertical-align: text-top;
+  vertical-align: middle;
   font-family: 'lichess';
   font-style: normal;
   font-weight: normal;
@@ -98,9 +98,9 @@
   content: attr(data-icon);
   opacity: 0.9;
 }
-%data-icon-middle {
+%data-icon-top {
   &::before {
-    vertical-align: middle;
+    vertical-align: text-top;
   }
 }
 %fullscreen-mask {
diff --git a/ui/common/css/base/_util.scss b/ui/common/css/base/_util.scss
index 39d8dc267d..bc65ed16af 100644
--- a/ui/common/css/base/_util.scss
+++ b/ui/common/css/base/_util.scss
@@ -11,7 +11,7 @@
 }
 
 .rp::before {
-  @extend %data-icon, %data-icon-middle;
+  @extend %data-icon;
   margin-right: .2em;
   content: 'N';
 }
diff --git a/ui/common/css/component/_btn-rack.scss b/ui/common/css/component/_btn-rack.scss
index fa37270af1..ff07468d81 100644
--- a/ui/common/css/component/_btn-rack.scss
+++ b/ui/common/css/component/_btn-rack.scss
@@ -28,7 +28,7 @@
       border: 0;
     }
     i {
-      @extend %roboto, %data-icon-middle;
+      @extend %roboto;
       letter-spacing: -1px;
     }
   }
diff --git a/ui/common/css/component/_friend-box.scss b/ui/common/css/component/_friend-box.scss
index 514bbe0d5a..c707e0ecad 100644
--- a/ui/common/css/component/_friend-box.scss
+++ b/ui/common/css/component/_friend-box.scss
@@ -51,7 +51,6 @@
         }
       }
       &.tv {
-        @extend %data-icon-middle;
         flex: 0 0 auto;
         padding: 0 5px;
       }
diff --git a/ui/common/css/component/_mselect.scss b/ui/common/css/component/_mselect.scss
index 9b4dc68985..f496a8798f 100644
--- a/ui/common/css/component/_mselect.scss
+++ b/ui/common/css/component/_mselect.scss
@@ -20,9 +20,6 @@ $c-mselect: $c-primary;
       font-size: 70%;
       color: $c-mselect;
     }
-    > * {
-      @extend %data-icon-middle;
-    }
   }
   &__toggle:checked ~ .mselect__label {
     @include transition(opacity);
@@ -39,7 +36,6 @@ $c-mselect: $c-primary;
     transform-origin: top;
     @include transition(transform);
     > * {
-      @extend %data-icon-middle;
       white-space: nowrap;
       display: block;
       padding: .3em 1em;
diff --git a/ui/common/css/component/_tour-reminder.scss b/ui/common/css/component/_tour-reminder.scss
index c66b12d4f7..7c9eceee7e 100644
--- a/ui/common/css/component/_tour-reminder.scss
+++ b/ui/common/css/component/_tour-reminder.scss
@@ -13,7 +13,6 @@
   z-index: z('tour-reminder');
 
   a {
-    @extend %data-icon-middle;
     color: $c-primary-over;
     margin: 0 .5em;
   }
diff --git a/ui/learn/css/_screen.scss b/ui/learn/css/_screen.scss
index 31f5a18aa6..5afdfb11b0 100644
--- a/ui/learn/css/_screen.scss
+++ b/ui/learn/css/_screen.scss
@@ -150,9 +150,6 @@
     a:hover {
       filter: brightness(0.9);
     }
-    [data-icon] {
-      @extend %data-icon-middle;
-    }
   }
   piece {
     width: 100%;
diff --git a/ui/lobby/css/_timeline.scss b/ui/lobby/css/_timeline.scss
index 92b0ea3b6e..9ee1777868 100644
--- a/ui/lobby/css/_timeline.scss
+++ b/ui/lobby/css/_timeline.scss
@@ -6,7 +6,7 @@
   .entry {
     @extend %roboto;
     a {
-      @extend %base-font, %data-icon-middle;
+      @extend %base-font;
       color: $c-font-page;
     }
     &:hover a {
diff --git a/ui/round/css/_tour-standing.scss b/ui/round/css/_tour-standing.scss
index a3ddb81010..f202292fe4 100644
--- a/ui/round/css/_tour-standing.scss
+++ b/ui/round/css/_tour-standing.scss
@@ -6,7 +6,7 @@
     border-bottom: none;
   }
   td {
-    @extend %nowrap-hidden, %data-icon-middle;
+    @extend %nowrap-hidden;
     padding: .2em 1em;
     line-height: 2em;
     text-overflow: ellipsis;
diff --git a/ui/site/css/_user-tournament.scss b/ui/site/css/_user-tournament.scss
index 0662263ed4..d06a48cd4b 100644
--- a/ui/site/css/_user-tournament.scss
+++ b/ui/site/css/_user-tournament.scss
@@ -16,9 +16,6 @@ h1 {
     }
     .icon {
       text-align: center;
-      span {
-        @extend %data-icon-middle;
-      }
     }
     .header {
       letter-spacing: 2px;
@@ -59,7 +56,6 @@ h1 {
       text-align: right;
     }
     th span {
-      @extend %data-icon-middle;
       &::before {
         font-size: 2em;
       }
diff --git a/ui/site/css/mod/_inquiry.scss b/ui/site/css/mod/_inquiry.scss
index 3975542d1a..f7d9ca15e2 100644
--- a/ui/site/css/mod/_inquiry.scss
+++ b/ui/site/css/mod/_inquiry.scss
@@ -237,7 +237,6 @@ body.no-inquiry {
     text-align: left;
   }
   .dropper > span.icon {
-    @extend %data-icon-middle;
     line-height: 40px;
   }
   .dropper.warn,
diff --git a/ui/site/css/streamer/_form.scss b/ui/site/css/streamer/_form.scss
index 3ff34c9ec6..5518225b45 100644
--- a/ui/site/css/streamer/_form.scss
+++ b/ui/site/css/streamer/_form.scss
@@ -15,7 +15,7 @@
   }
 
   .status {
-    @extend %box-radius, %data-icon-middle;
+    @extend %box-radius;
     padding: 1em 1.5em;
     margin-bottom: 2em;
     background: $c-bg-zebra;