diff --git a/lib/shared/threads/protocols/dm-thread-protocol.js b/lib/shared/threads/protocols/dm-thread-protocol.js
--- a/lib/shared/threads/protocols/dm-thread-protocol.js
+++ b/lib/shared/threads/protocols/dm-thread-protocol.js
@@ -559,7 +559,8 @@
     membershipChangesShownInThreadPreview: true,
     usersWithoutDeviceListExcludedFromSearchResult: true,
     supportsMediaGallery: false,
-    chatThreadListIcon: 'lock',
+    nativeChatThreadListIcon: 'lock',
+    webChatThreadListIcon: iconCreationFunction => iconCreationFunction('lock'),
     threadAncestorLabel: () => 'Local DM',
   },
 
diff --git a/lib/shared/threads/protocols/keyserver-thread-protocol.js b/lib/shared/threads/protocols/keyserver-thread-protocol.js
--- a/lib/shared/threads/protocols/keyserver-thread-protocol.js
+++ b/lib/shared/threads/protocols/keyserver-thread-protocol.js
@@ -356,7 +356,9 @@
     membershipChangesShownInThreadPreview: false,
     usersWithoutDeviceListExcludedFromSearchResult: false,
     supportsMediaGallery: true,
-    chatThreadListIcon: 'server',
+    nativeChatThreadListIcon: 'server',
+    webChatThreadListIcon: iconCreationFunction =>
+      iconCreationFunction('server'),
     threadAncestorLabel: (ancestorPath: React.Node) => ancestorPath,
   },
 
diff --git a/lib/shared/threads/thread-spec.js b/lib/shared/threads/thread-spec.js
--- a/lib/shared/threads/thread-spec.js
+++ b/lib/shared/threads/thread-spec.js
@@ -265,7 +265,10 @@
     +membershipChangesShownInThreadPreview: boolean,
     +usersWithoutDeviceListExcludedFromSearchResult: boolean,
     +supportsMediaGallery: boolean,
-    +chatThreadListIcon: string,
+    +nativeChatThreadListIcon: string,
+    +webChatThreadListIcon: (
+      iconCreationFunction: (iconName: 'lock' | 'server') => React.Node,
+    ) => React.Node,
     +threadAncestorLabel: (ancestorPath: React.Node) => React.Node,
   },
   +uploadMultimediaToKeyserver: boolean,
diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -137,7 +137,7 @@
     : styles.iconRead;
   const iconName =
     threadSpecs[data.threadInfo.type].protocol.presentationDetails
-      .chatThreadListIcon;
+      .nativeChatThreadListIcon;
 
   const threadDetails = React.useMemo(
     () => (
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -12,7 +12,6 @@
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
 import { threadSpecs } from 'lib/shared/threads/thread-specs.js';
-import { threadTypeIsThick } from 'lib/types/thread-types-enum.js';
 import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
 import {
   useResolvedThreadInfo,
@@ -129,14 +128,23 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
-  const isThick = threadTypeIsThick(threadInfo.type);
+  const presentationDetails =
+    threadSpecs[threadInfo.type].protocol.presentationDetails;
 
   const iconClass = unread ? css.iconUnread : css.iconRead;
-  const icon = isThick ? lock : server;
-  const breadCrumbs =
-    threadSpecs[
-      threadInfo.type
-    ].protocol.presentationDetails.threadAncestorLabel(ancestorPath);
+  const iconCreationFunction = React.useCallback(
+    (iconName: 'lock' | 'server') => {
+      const icon = iconName === 'lock' ? lock : server;
+      return <FontAwesomeIcon size="xs" className={iconClass} icon={icon} />;
+    },
+    [iconClass],
+  );
+
+  const icon = React.useMemo(
+    () => presentationDetails.webChatThreadListIcon(iconCreationFunction),
+    [iconCreationFunction, presentationDetails],
+  );
+  const breadCrumbs = presentationDetails.threadAncestorLabel(ancestorPath);
 
   return (
     <>
@@ -149,9 +157,7 @@
         </div>
         <div className={css.threadButton}>
           <div className={css.header}>
-            <div className={css.iconWrapper}>
-              <FontAwesomeIcon size="xs" className={iconClass} icon={icon} />
-            </div>
+            <div className={css.iconWrapper}>{icon}</div>
             <p className={breadCrumbsClassName}>{breadCrumbs}</p>
           </div>
           <div className={css.threadRow}>