diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js
--- a/lib/shared/avatar-utils.js
+++ b/lib/shared/avatar-utils.js
@@ -5,6 +5,8 @@
 
 import { selectedThreadColors } from './color-utils.js';
 import { threadOtherMembers } from './thread-utils.js';
+import genesis from '../facts/genesis.js';
+import { threadInfoSelector } from '../selectors/thread-selectors.js';
 import type { ClientEmojiAvatar, ClientAvatar } from '../types/avatar-types.js';
 import {
   type RawThreadInfo,
@@ -12,6 +14,7 @@
   threadTypes,
 } from '../types/thread-types.js';
 import type { UserInfos } from '../types/user-types.js';
+import { useSelector } from '../utils/redux-utils.js';
 
 const defaultAnonymousUserEmojiAvatar: ClientEmojiAvatar = {
   color: selectedThreadColors[4],
@@ -91,4 +94,27 @@
   return getAvatarForUser(memberInfos[0]);
 }
 
-export { getAvatarForUser, getUserAvatarForThread };
+function useGetAvatarForThread(
+  thread: RawThreadInfo | ThreadInfo,
+): ClientAvatar {
+  const containingThreadID = thread.containingThreadID;
+  const containingThreadInfo = useSelector(state =>
+    containingThreadID ? threadInfoSelector(state)[containingThreadID] : null,
+  );
+
+  if (thread.avatar) {
+    return thread.avatar;
+  }
+
+  if (thread.containingThreadID && thread.containingThreadID !== genesis.id) {
+    invariant(containingThreadInfo, 'containingThreadInfo should be set');
+
+    return containingThreadInfo.avatar
+      ? containingThreadInfo.avatar
+      : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);
+  }
+
+  return getDefaultAvatar(thread.id, thread.color);
+}
+
+export { getAvatarForUser, getUserAvatarForThread, useGetAvatarForThread };