diff --git a/webroot/img/user-icon.svg b/webroot/img/user-icon.svg
new file mode 100644
index 000000000..a3c53df9d
--- /dev/null
+++ b/webroot/img/user-icon.svg
@@ -0,0 +1,38 @@
+
+
diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js
index 3a76aa4b6..fb4be113e 100644
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@@ -95,6 +95,9 @@ export default class UsernameForm extends Component {
const moderatorFlag = html`
`;
+ const userIcon = html`
+
+ `;
return html`
@@ -109,7 +112,7 @@ export default class UsernameForm extends Component {
id="username-display"
class="text-indigo-100 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
'moderator-flag'}"
- >${isModerator && moderatorFlag}${username}${isModerator ? moderatorFlag : userIcon}${username}
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index ec773c951..a32d6f671 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -201,6 +201,13 @@
height: 1.5rem;
}
+.user-icon-flag {
+ display: inline-block;
+ margin-right: .5rem;
+ vertical-align: middle;
+ height: 0.8rem;
+}
+
.moderator-actions-group {
position: absolute;
top: 0;