diff --git a/keyserver/images/arrow.svg b/keyserver/images/arrow.svg
new file mode 100755
--- /dev/null
+++ b/keyserver/images/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="30" viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 26H0.5V26.5H1V26ZM26.3536 26.3536C26.5488 26.1583 26.5488 25.8417 26.3536 25.6464L23.1716 22.4645C22.9763 22.2692 22.6597 22.2692 22.4645 22.4645C22.2692 22.6597 22.2692 22.9763 22.4645 23.1716L25.2929 26L22.4645 28.8284C22.2692 29.0237 22.2692 29.3403 22.4645 29.5355C22.6597 29.7308 22.9763 29.7308 23.1716 29.5355L26.3536 26.3536ZM0.5 0V26H1.5V0H0.5ZM1 26.5H26V25.5H1V26.5Z" fill="#808080"/>
+</svg>
diff --git a/keyserver/images/long_arrow.svg b/keyserver/images/long_arrow.svg
new file mode 100644
--- /dev/null
+++ b/keyserver/images/long_arrow.svg
@@ -0,0 +1,7 @@
+<svg width="27px" height="38px" viewBox="0 0 27 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="long_arrow-8.35.28-AM" transform="translate(0.000000, -0.000000)" fill="#808080" fill-rule="nonzero">
+            <path d="M0,0 L1,0 L1,33.5 L24.793,33.5 L22.4645,31.1716 C22.2909,30.998 22.2716111,30.728558 22.4066333,30.53373 L22.4645,30.4645 C22.6380111,30.2909 22.9074432,30.2716111 23.1023403,30.4066333 L23.1716,30.4645 L26.3536,33.6464 C26.5271111,33.82 26.5463901,34.089442 26.411437,34.2843402 L26.3536,34.3536 L23.1716,37.5355 C22.9763,37.7308 22.6597,37.7308 22.4645,37.5355 C22.2909,37.3619889 22.2716111,37.0925568 22.4066333,36.8976597 L22.4645,36.8284 L24.791,34.5 L0,34.5 L0,0 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>
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
@@ -47,15 +47,6 @@
   color: var(--thread-color-read);
   line-height: var(--line-height-text);
 }
-div.threadArrowExtender {
-  width: 10px;
-  position: absolute;
-  border-left: 0.5px solid var(--arrow-extension-color);
-  height: 8px;
-  top: -15px;
-  left: 32px;
-}
-
 .threadButton {
   flex: 1;
   cursor: pointer;
@@ -72,7 +63,7 @@
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-left: 12px;
 }
 p.breadCrumbs {
   display: flex;
@@ -312,3 +303,16 @@
   display: flex;
   flex-direction: column;
 }
+img.longArrow {
+  height: 40px;
+  width: 25px;
+  position: absolute;
+  left: 28.5px;
+  top: -18px;
+}
+
+img.arrow {
+  position: absolute;
+  left: 28px;
+  top: -10px;
+}
diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js
--- a/web/chat/sidebar-item.react.js
+++ b/web/chat/sidebar-item.react.js
@@ -6,7 +6,6 @@
 import type { SidebarInfo } from 'lib/types/thread-types';
 
 import { useOnClickThread } from '../selectors/nav-selectors';
-import SWMansionIcon from '../SWMansionIcon.react';
 import css from './chat-thread-list.css';
 
 type Props = {
@@ -25,16 +24,24 @@
   const onClick = useOnClickThread(threadInfo);
 
   const unreadCls = classNames(css.sidebarTitle, { [css.unread]: unread });
-
-  let arrowExtender;
+  let arrow;
   if (extendArrow) {
-    arrowExtender = <div className={css.threadArrowExtender} />;
+    arrow = (
+      <img
+        className={css.longArrow}
+        src="images/long_arrow.svg"
+        alt="sidebar arrow"
+      />
+    );
+  } else {
+    arrow = (
+      <img src="images/arrow.svg" className={css.arrow} alt="sidebar arrow" />
+    );
   }
 
   return (
     <>
-      {arrowExtender}
-      <SWMansionIcon icon="right-angle-arrow" size={28} />
+      {arrow}
       <div className={css.spacer} />
       <a className={css.threadButtonSidebar} onClick={onClick}>
         <div className={css.threadRow}>