diff --git a/web/chat/chat-thread-ancestors.css b/web/chat/chat-thread-ancestors.css
index 3bbde21f9..db9a04f1e 100644
--- a/web/chat/chat-thread-ancestors.css
+++ b/web/chat/chat-thread-ancestors.css
@@ -1,51 +1,51 @@
 div.ancestorThreadsContainer {
   font-size: var(--xs-font-12);
   display: flex;
   align-items: center;
   column-gap: 5px;
 }
 
 div.ancestorName {
   display: flex;
   align-items: center;
   padding: 2px 6px;
   border-radius: 2px;
   box-sizing: border-box;
   line-height: 1.5;
 }
 
 button.seeFullStructure {
   background-color: transparent;
   border: none;
   cursor: pointer;
 }
 
 div.ancestorKeyserver {
   display: flex;
   align-items: center;
 }
 
 div.ancestorKeyserverName {
   border-radius: 0px 2px 2px 0px;
 }
 
-div.ancestorSeparator {
+svg.ancestorSeparator {
   color: var(--thread-ancestor-separator-color);
 }
 
 div.ancestorKeyserverOperator {
   display: flex;
   column-gap: 5px;
   padding: 0px 5px;
   align-items: center;
   border: 1px solid var(--thread-ancestor-keyserver-border);
   border-radius: 2px 0px 0px 2px;
   height: 22px;
   box-sizing: border-box;
 }
 
 button.seeFullAncestor {
   font-size: var(--xs-font-12);
   font-weight: var(--semi-bold);
   cursor: pointer;
 }
diff --git a/web/chat/chat-thread-ancestors.react.js b/web/chat/chat-thread-ancestors.react.js
index 32401e8c1..8566e3122 100644
--- a/web/chat/chat-thread-ancestors.react.js
+++ b/web/chat/chat-thread-ancestors.react.js
@@ -1,126 +1,130 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { useAncestorThreads } from 'lib/shared/ancestor-threads';
 import { memberHasAdminPowers, colorIsDark } from 'lib/shared/thread-utils';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './chat-thread-ancestors.css';
 
 const SHOW_SEE_FULL_STRUCTURE = false;
 
 type ThreadAncestorsProps = {
   +threadInfo: ThreadInfo,
 };
 function ThreadAncestors(props: ThreadAncestorsProps): React.Node {
   const { threadInfo } = props;
   const { color: threadColor } = threadInfo;
   const darkColor = colorIsDark(threadColor);
   const threadColorStyle = React.useMemo(
     () => ({
       backgroundColor: `#${threadColor}`,
       color: darkColor
         ? 'var(--thread-ancestor-color-light)'
         : 'var(--thread-ancestor-color-dark)',
     }),
     [darkColor, threadColor],
   );
   const fullStructureButtonColorStyle = React.useMemo(
     () => ({ color: `#${threadColor}` }),
     [threadColor],
   );
 
   const ancestorThreads = useAncestorThreads(threadInfo);
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const community = ancestorThreads[0] ?? threadInfo;
   const keyserverOwnerUsername: ?string = React.useMemo(() => {
     for (const member of community.members) {
       if (memberHasAdminPowers(member)) {
         return userInfos[member.id].username;
       }
     }
     return undefined;
   }, [community.members, userInfos]);
 
   const keyserverInfo = React.useMemo(
     () => (
       <div className={css.ancestorKeyserver}>
         <div className={css.ancestorKeyserverOperator}>
           <SWMansionIcon icon="cloud" size={12} />
           <span>{keyserverOwnerUsername}</span>
         </div>
         <div
           style={threadColorStyle}
           className={classNames(css.ancestorName, css.ancestorKeyserverName)}
         >
           {community.uiName}
         </div>
       </div>
     ),
     [community.uiName, keyserverOwnerUsername, threadColorStyle],
   );
 
   const middlePath = React.useMemo(() => {
     if (ancestorThreads.length < 2) {
       return null;
     }
     return (
       <>
-        <div className={css.ancestorSeparator}>
-          <SWMansionIcon icon="chevron-right" size={10} />
-        </div>
+        <SWMansionIcon
+          className={css.ancestorSeparator}
+          icon="chevron-right"
+          size={12}
+        />
         <div style={threadColorStyle} className={css.ancestorName}>
           &hellip;
         </div>
       </>
     );
   }, [ancestorThreads.length, threadColorStyle]);
 
   const threadHasNoAncestors = community === threadInfo;
 
   const currentThread = React.useMemo(() => {
     if (threadHasNoAncestors) {
       return null;
     }
     return (
       <>
-        <div className={css.ancestorSeparator}>
-          <SWMansionIcon icon="chevron-right" size={10} />
-        </div>
+        <SWMansionIcon
+          className={css.ancestorSeparator}
+          icon="chevron-right"
+          size={12}
+        />
         <div style={threadColorStyle} className={css.ancestorName}>
           {threadInfo.uiName}
         </div>
       </>
     );
   }, [threadHasNoAncestors, threadColorStyle, threadInfo.uiName]);
 
   let seeFullStructure = null;
   if (SHOW_SEE_FULL_STRUCTURE) {
     seeFullStructure = (
       <button
         style={fullStructureButtonColorStyle}
         className={css.seeFullStructure}
       >
         See full structure
       </button>
     );
   }
 
   return (
     <>
       <div className={css.ancestorThreadsContainer}>
         {keyserverInfo}
         {middlePath}
         {currentThread}
       </div>
       {seeFullStructure}
     </>
   );
 }
 
 export default ThreadAncestors;