diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss
index 4cc44ab4eb..55d72c8cb9 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/elements/_MessageEditor.scss
@@ -59,10 +59,14 @@ limitations under the License.
                 width: 16px;
                 height: 16px;
                 background: var(--avatar-background);    //set on parent by JS
-                color: var(--avatar-color);
+                color: $avatar-initial-color;
                 background-repeat: no-repeat;
                 background-size: 16px;
                 border-radius: 8px;
+                text-align: center;
+                font-weight: normal;
+                line-height: 16px;
+                font-size: 10.4px;
             }
         }
     }
diff --git a/src/editor/parts.js b/src/editor/parts.js
index f1f64f4b05..b388c01d4b 100644
--- a/src/editor/parts.js
+++ b/src/editor/parts.js
@@ -17,6 +17,8 @@ limitations under the License.
 import AutocompleteWrapperModel from "./autocomplete";
 import Avatar from "../Avatar";
 
+const DPR = window.devicePixelRatio;
+
 class BasePart {
     constructor(text = "") {
         this._text = text;
@@ -153,6 +155,7 @@ class PillPart extends BasePart {
         const container = document.createElement("span");
         container.className = this.type;
         container.appendChild(document.createTextNode(this.text));
+        this.setAvatar(container);
         return container;
     }
 
@@ -166,6 +169,7 @@ class PillPart extends BasePart {
             // console.log("turning", node.className, "into", this.type);
             node.className = this.type;
         }
+        this.setAvatar(node);
     }
 
     canUpdateDOMNode(node) {
@@ -222,6 +226,9 @@ export class RoomPillPart extends PillPart {
         this._room = room;
     }
 
+    setAvatar(node) {
+    }
+
     get type() {
         return "room-pill";
     }
@@ -233,18 +240,21 @@ export class UserPillPart extends PillPart {
         this._member = member;
     }
 
-    toDOMNode() {
-        const pill = super.toDOMNode();
-        const avatarUrl = Avatar.avatarUrlForMember(this._member, 16, 16);
-        if (avatarUrl) {
-            pill.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
-            pill.style.setProperty("--avatar-letter", "''");
-        } else {
-            pill.style.setProperty("--avatar-background", `green`);
-            pill.style.setProperty("--avatar-color", `white`);
-            pill.style.setProperty("--avatar-letter", `'${this.text[0].toUpperCase()}'`);
+    setAvatar(node) {
+        const name = this._member.name || this._member.userId;
+        const defaultAvatarUrl = Avatar.defaultAvatarUrlForString(this._member.userId);
+        let avatarUrl = Avatar.avatarUrlForMember(this._member, 16 * DPR, 16 * DPR);
+        let initialLetter = "";
+        if (avatarUrl === defaultAvatarUrl) {
+            // the url from defaultAvatarUrlForString is meant to go in an img element,
+            // which has the base of the document. we're using it in css,
+            // which has the base of the theme css file, two levels deeper than the document,
+            // so go up to the level of the document.
+            avatarUrl = `../../${avatarUrl}`;
+            initialLetter = Avatar.getInitialLetter(name);
         }
-        return pill;
+        node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
+        node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
     }
 
     get type() {