diff --git a/web/assets.js b/web/assets.js
--- a/web/assets.js
+++ b/web/assets.js
@@ -2,13 +2,6 @@
 
 export const assetCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
 
-// Background Illustration
-export const backgroundIllustrationAsset = {
-  fileName: 'background-illustration.svg',
-  height: '100px',
-  width: '133px',
-};
-
 // Notifications Modal Illustration: "Focused"
 export const focusedNotificationsIllustrationAsset = {
   fileName: 'all-notifs.svg',
diff --git a/web/assets/background-illustration.react.js b/web/assets/background-illustration.react.js
new file mode 100644
--- /dev/null
+++ b/web/assets/background-illustration.react.js
@@ -0,0 +1,44 @@
+// @flow
+
+import * as React from 'react';
+
+function BackgroundIllustration(): React.Node {
+  return (
+    <svg
+      width={133}
+      height={100}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x={20.5}
+        y={32}
+        width={87}
+        height={67.522}
+        rx={5.194}
+        fill="#563894"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m63.116 63.61-33.54-31.226a1.317 1.317 0 0 1-.288-.384h-3.594a5.19 5.19 0 0 0-1.69.281c.175 1.4.822 2.778 2.032 3.904l33.54 31.227a6.492 6.492 0 0 0 8.848 0l33.541-31.227c1.209-1.126 1.856-2.503 2.032-3.904a5.187 5.187 0 0 0-1.691-.281h-3.593a1.322 1.322 0 0 1-.287.384L64.886 63.61a1.299 1.299 0 0 1-1.77 0Z"
+        fill="#331F5C"
+      />
+      <circle cx={99.5} cy={33} r={33} fill="#AE94DB" />
+      <path
+        d="M93.201 15.26a13.003 13.003 0 0 1 6.299-1.634c7.217 0 13.25 6.034 13.25 13.252 0 3.38.413 6.346.987 8.835M87.354 21.65a12.953 12.953 0 0 0-1.104 5.228c0 11.043-4.417 17.67-4.417 17.67h28.708M81.833 15.835l35.333 35.338"
+        stroke="#6D49AB"
+        strokeWidth={3.713}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.125 46.756a6.625 6.625 0 1 1-13.25 0"
+        stroke="#6D49AB"
+        strokeWidth={3.713}
+      />
+    </svg>
+  );
+}
+
+export default BackgroundIllustration;
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -5,7 +5,7 @@
 
 import { emptyItemText } from 'lib/shared/thread-utils';
 
-import { assetCacheURLPrefix, backgroundIllustrationAsset } from '../assets';
+import BackgroundIllustration from '../assets/background-illustration.react';
 import Button from '../components/button.react';
 import Search from '../components/search.react';
 import { useSelector } from '../redux/redux-utils';
@@ -67,11 +67,7 @@
 function EmptyItem() {
   return (
     <div className={css.emptyItemContainer}>
-      <img
-        src={`${assetCacheURLPrefix}/${backgroundIllustrationAsset.fileName}`}
-        height={backgroundIllustrationAsset.height}
-        width={backgroundIllustrationAsset.width}
-      />
+      <BackgroundIllustration />
       <div className={css.emptyItemText}>{emptyItemText}</div>
     </div>
   );