diff --git a/src/components/Avatar/__tests__/Avatar.test.js b/src/components/Avatar/__tests__/Avatar.test.js
index e2ed64954..b45990d7c 100644
--- a/src/components/Avatar/__tests__/Avatar.test.js
+++ b/src/components/Avatar/__tests__/Avatar.test.js
@@ -16,15 +16,25 @@ describe('Avatar', () => {
     const tree = renderer.create(<Avatar />).toJSON();
     expect(tree).toMatchInlineSnapshot(`
       <div
-        className="str-chat__avatar str-chat__message-sender-avatar"
+        className="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--no-letters"
         data-testid="avatar"
         onClick={[Function]}
         onMouseOver={[Function]}
+        role="button"
       >
-        <div
-          className="str-chat__avatar-fallback"
-          data-testid="avatar-fallback"
-        />
+        <svg
+          className="str-chat__icon str-chat__icon--user"
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
     `);
   });
@@ -33,10 +43,11 @@ describe('Avatar', () => {
     const tree = renderer.create(<Avatar image='random' />).toJSON();
     expect(tree).toMatchInlineSnapshot(`
       <div
-        className="str-chat__avatar str-chat__message-sender-avatar"
+        className="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--no-letters"
         data-testid="avatar"
         onClick={[Function]}
         onMouseOver={[Function]}
+        role="button"
       >
         <img
           alt=""
diff --git a/src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewMessenger.test.js.snap b/src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewMessenger.test.js.snap
index ebde4a742..b6c008eb9 100644
--- a/src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewMessenger.test.js.snap
+++ b/src/components/ChannelPreview/__tests__/__snapshots__/ChannelPreviewMessenger.test.js.snap
@@ -20,6 +20,7 @@ exports[`ChannelPreviewMessenger should render correctly 1`] = `
         data-testid="avatar"
         onClick={[Function]}
         onMouseOver={[Function]}
+        role="button"
         title="Channel name"
       >
         <img
diff --git a/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap b/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
index abac79d65..9b9575f25 100644
--- a/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
+++ b/src/components/Message/__tests__/__snapshots__/MessageStatus.test.js.snap
@@ -31,6 +31,7 @@ exports[`MessageStatus renders default read UI for the last message 1`] = `
   <div
     class="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--message-status str-chat__avatar--one-letter"
     data-testid="avatar"
+    role="button"
     title="other-user"
   >
     <div
diff --git a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
index 48e59b5ca..7042e5513 100644
--- a/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
+++ b/src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
@@ -141,7 +141,13 @@ describe('VirtualizedMessageComponents', () => {
     it('should not render custom head in Header when not loading more messages', () => {
       const context = { head };
       const { container } = renderElements(<Header context={context} />);
-      expect(container).toMatchInlineSnapshot(`<div />`);
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Custom head
+          </div>
+        </div>
+      `);
     });
 
     it('should render custom LoadingIndicator instead of head when loading more', () => {
@@ -150,6 +156,9 @@ describe('VirtualizedMessageComponents', () => {
       const { container } = renderElements(<Header context={context} />, componentContext);
       expect(container).toMatchInlineSnapshot(`
         <div>
+          <div>
+            Custom head
+          </div>
           <div
             class="str-chat__virtual-list__loading"
           >
diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
index 47619c06a..2054e8874 100644
--- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
+++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageListComponents.test.js.snap
@@ -50,6 +50,9 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
 
 exports[`VirtualizedMessageComponents Header should not render custom head in Header when loading more messages, but the LoadingIndicator 1`] = `
 <div>
+  <div>
+    Custom head
+  </div>
   <div
     class="str-chat__virtual-list__loading"
   >
diff --git a/src/components/UserItem/__tests__/UserItem.test.js b/src/components/UserItem/__tests__/UserItem.test.js
index aaf7527c7..1e6461f27 100644
--- a/src/components/UserItem/__tests__/UserItem.test.js
+++ b/src/components/UserItem/__tests__/UserItem.test.js
@@ -18,15 +18,25 @@ describe('UserItem', () => {
         className="str-chat__user-item"
       >
         <div
-          className="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--autocomplete-item"
+          className="str-chat__avatar str-chat__message-sender-avatar str-chat__avatar--autocomplete-item str-chat__avatar--no-letters"
           data-testid="avatar"
           onClick={[Function]}
           onMouseOver={[Function]}
+          role="button"
         >
-          <div
-            className="str-chat__avatar-fallback"
-            data-testid="avatar-fallback"
-          />
+          <svg
+            className="str-chat__icon str-chat__icon--user"
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z"
+              fill="currentColor"
+            />
+          </svg>
         </div>
         <span
           className="str-chat__user-item--name"