diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 80a8008634..0e6ce60419 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -1,11 +1,14 @@
 @charset 'UTF-8';
 
 .emoticon {
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
     background-size: contain;
     display: inline-block;
-    height: 1.5em;
-    margin-bottom: .25em;
-    width: 1.5em;
+    font-size: 19px;
+    height: 1em;
+    vertical-align: text-top;
+    width: 1em;
 }
 
 .emoticon-suggestion {
diff --git a/webapp/utils/emoticons.jsx b/webapp/utils/emoticons.jsx
index 7280ef88b4..26443b1205 100644
--- a/webapp/utils/emoticons.jsx
+++ b/webapp/utils/emoticons.jsx
@@ -38,7 +38,7 @@ export function handleEmoticons(text, tokens, emojis) {
 
             // we have an image path so we found a matching emoticon
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${path}" title="${matchText}" />`,
+                value: `<span alt="${matchText}" class="emoticon" title="${matchText}" style="background-image:url(${path})"></span>`,
                 originalText: fullMatch
             });