diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss
index 03c3741d5ea..6402de1b62a 100644
--- a/res/css/views/elements/_RichText.scss
+++ b/res/css/views/elements/_RichText.scss
@@ -86,6 +86,11 @@ a.mx_Pill {
     margin-right: 0.24rem;
 }
 
+.mx_Emoji {
+    font-size: 1.8rem;
+    vertical-align: bottom;
+}
+
 .mx_Markdown_BOLD {
     font-weight: bold;
 }
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 5b187975274..8ab391facf6 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -88,6 +88,8 @@ limitations under the License.
     .mx_EventTile_line {
         width: fit-content;
         max-width: 70%;
+        // fixed line height to prevent emoji from being taller than text
+        line-height: $font-18px;
     }
 
     > .mx_SenderProfile {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 51e7f169272..8d84147f64c 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -233,11 +233,6 @@ $left-gutter: 64px;
         overflow-y: hidden;
     }
 
-    .mx_EventTile_Emoji {
-        font-size: 1.8rem;
-        vertical-align: bottom;
-    }
-
     &.mx_EventTile_selected .mx_EventTile_line,
     &:hover .mx_EventTile_line {
         border-top-left-radius: 4px;
@@ -391,7 +386,7 @@ $left-gutter: 64px;
     position: absolute;
 }
 
-.mx_EventTile_bigEmoji .mx_EventTile_Emoji {
+.mx_EventTile_bigEmoji .mx_Emoji {
     font-size: 48px !important;
     line-height: 57px;
 }
diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index ca391fc300d..c26359f299d 100644
--- a/src/HtmlUtils.tsx
+++ b/src/HtmlUtils.tsx
@@ -404,9 +404,9 @@ export interface IOptsReturnString extends IOpts {
 }
 
 const emojiToHtmlSpan = (emoji: string) =>
-    `<span class='mx_EventTile_Emoji' title='${unicodeToShortcode(emoji)}'>${emoji}</span>`;
+    `<span class='mx_Emoji' title='${unicodeToShortcode(emoji)}'>${emoji}</span>`;
 const emojiToJsxSpan = (emoji: string, key: number) =>
-    <span key={key} className='mx_EventTile_Emoji' title={unicodeToShortcode(emoji)}>{ emoji }</span>;
+    <span key={key} className='mx_Emoji' title={unicodeToShortcode(emoji)}>{ emoji }</span>;
 
 /**
  * Wraps emojis in <span> to style them separately from the rest of message. Consecutive emojis (and modifiers) are wrapped