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
@@ -142,21 +142,28 @@
 
   let iconComponent;
   if (nativeChatThreadListIcon === 'farcaster') {
+    const farcasterIconColor = data.threadInfo.currentUser.unread
+      ? colors.listForegroundLabel
+      : colors.listForegroundTertiaryLabel;
     iconComponent = (
       <View style={styles.farcasterIcon}>
-        <FarcasterLogo size={8} />
+        <FarcasterLogo size={12} color={farcasterIconColor} />
       </View>
     );
   } else {
     const iconName = nativeChatThreadListIcon === 'lock' ? 'lock' : 'server';
-    iconComponent = <Icon name={iconName} size={12} style={iconStyle} />;
+    iconComponent = (
+      <View style={styles.iconContainer}>
+        <Icon name={iconName} size={12} style={iconStyle} />
+      </View>
+    );
   }
 
   const threadDetails = React.useMemo(
     () => (
       <View style={styles.threadDetails}>
         <View style={styles.header}>
-          <View style={styles.iconContainer}>{iconComponent}</View>
+          {iconComponent}
           <ThreadAncestorsLabel threadInfo={data.threadInfo} />
         </View>
         <View style={styles.row}>
@@ -177,7 +184,6 @@
       lastActivityStyle,
       resolvedThreadInfo.uiName,
       styles.header,
-      styles.iconContainer,
       styles.row,
       styles.threadDetails,
       threadNameStyle,
@@ -309,13 +315,7 @@
     color: 'listForegroundLabel',
   },
   farcasterIcon: {
-    backgroundColor: '#855DCD',
-    borderRadius: 6,
-    width: 12,
-    height: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-    opacity: 0.7,
+    marginRight: 3,
   },
 };
 
diff --git a/native/vectors/farcaster-logo.react.js b/native/vectors/farcaster-logo.react.js
--- a/native/vectors/farcaster-logo.react.js
+++ b/native/vectors/farcaster-logo.react.js
@@ -5,9 +5,10 @@
 
 type Props = {
   +size?: number,
+  +color?: string,
 };
 
-function FarcasterLogo({ size = 200 }: Props): React.Node {
+function FarcasterLogo({ size = 200, color = 'white' }: Props): React.Node {
   return React.useMemo(
     () => (
       <Svg
@@ -19,19 +20,19 @@
       >
         <Path
           d="M257.778 155.556H742.222V844.445H671.111V528.889H670.414C662.554 441.677 589.258 373.333 500 373.333C410.742 373.333 337.446 441.677 329.586 528.889H328.889V844.445H257.778V155.556Z"
-          fill="white"
+          fill={color}
         />
         <Path
           d="M128.889 253.333L157.778 351.111H182.222V746.667C169.949 746.667 160 756.616 160 768.889V795.556H155.556C143.283 795.556 133.333 805.505 133.333 817.778V844.445H382.222V817.778C382.222 805.505 372.273 795.556 360 795.556H355.556V768.889C355.556 756.616 345.606 746.667 333.333 746.667H306.667V253.333H128.889Z"
-          fill="white"
+          fill={color}
         />
         <Path
           d="M675.556 746.667C663.282 746.667 653.333 756.616 653.333 768.889V795.556H648.889C636.616 795.556 626.667 805.505 626.667 817.778V844.445H875.556V817.778C875.556 805.505 865.606 795.556 853.333 795.556H848.889V768.889C848.889 756.616 838.94 746.667 826.667 746.667V351.111H851.111L880 253.333H702.222V746.667H675.556Z"
-          fill="white"
+          fill={color}
         />
       </Svg>
     ),
-    [size],
+    [size, color],
   );
 }
 
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
@@ -135,26 +135,25 @@
   const iconClass = unread ? css.iconUnread : css.iconRead;
   const webChatThreadListIcon = presentationDetails.webChatThreadListIcon;
 
-  let icon;
+  let iconComponent;
+  let iconWrapperClass;
   if (webChatThreadListIcon === 'farcaster') {
-    icon = (
-      <div className={css.farcasterIconBackground}>
-        <CommIcon icon="farcaster" size={12} color="#fff" />
-      </div>
+    iconComponent = (
+      <CommIcon icon="farcaster" size={16} className={iconClass} />
     );
+    iconWrapperClass = css.farcasterIconWrapper;
+  } else if (webChatThreadListIcon === 'lock') {
+    iconComponent = (
+      <FontAwesomeIcon size="xs" className={iconClass} icon={lock} />
+    );
+    iconWrapperClass = css.iconWrapper;
   } else {
-    let iconComponent;
-    if (webChatThreadListIcon === 'lock') {
-      iconComponent = (
-        <FontAwesomeIcon size="xs" className={iconClass} icon={lock} />
-      );
-    } else {
-      iconComponent = (
-        <FontAwesomeIcon size="xs" className={iconClass} icon={server} />
-      );
-    }
-    icon = <div className={css.iconWrapper}>{iconComponent}</div>;
+    iconComponent = (
+      <FontAwesomeIcon size="xs" className={iconClass} icon={server} />
+    );
+    iconWrapperClass = css.iconWrapper;
   }
+  const icon = <div className={iconWrapperClass}>{iconComponent}</div>;
 
   const breadCrumbs = presentationDetails.threadAncestorLabel(ancestorPath);
 
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -297,18 +297,8 @@
   padding: 7px 6px 2px 0;
 }
 
-.farcasterIconBackground {
-  padding: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 12px;
-  background-color: #855dcd;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 3px;
-  margin-right: 3px;
-  margin-bottom: -3px;
+.farcasterIconWrapper {
+  padding: 10px 3px 0 0;
 }
 
 .header {