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';
 
-// Notifications Modal Illustration: "Focused (badge only)"
-export const badgeOnlyNotificationsIllustrationAsset = {
-  fileName: 'badge-notifs.svg',
-  height: '86px',
-  width: '46px',
-};
-
 // Notifications Modal Illustration: "Background"
 export const backgroundNotificationsIllustrationAsset = {
   fileName: 'muted-notifs.svg',
diff --git a/web/assets/badge-notifs.react.js b/web/assets/badge-notifs.react.js
new file mode 100644
--- /dev/null
+++ b/web/assets/badge-notifs.react.js
@@ -0,0 +1,31 @@
+// @flow
+
+import * as React from 'react';
+
+function BadgeNotifsIllustration(): React.Node {
+  return (
+    <svg width={46} height={86} xmlns="http://www.w3.org/2000/svg">
+      <title>{'badge-notifs'}</title>
+      <g transform="translate(.5 .5)" fill="none" fillRule="evenodd">
+        <rect stroke="#666" width={45} height={85} rx={5.5} />
+        <circle fill="#C4C4C4" fillRule="nonzero" cx={22.5} cy={75.5} r={3} />
+        <rect
+          fill="gray"
+          fillRule="nonzero"
+          x={15.5}
+          y={46.5}
+          width={14}
+          height={14}
+          rx={1.4}
+        />
+        <path
+          d="M12.5 41.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm.62 5.701h-.78l-1.321.864v.766l1.268-.828h.03V52.5h.803v-5.299Z"
+          fill="#7E57C2"
+          fillRule="nonzero"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default BadgeNotifsIllustration;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -14,10 +14,10 @@
 
 import {
   assetCacheURLPrefix,
-  badgeOnlyNotificationsIllustrationAsset,
   backgroundNotificationsIllustrationAsset,
 } from '../../../assets.js';
 import AllNotifsIllustration from '../../../assets/all-notifs.react.js';
+import BadgeNotifsIllustration from '../../../assets/badge-notifs.react.js';
 import Button from '../../../components/button.react';
 import EnumSettingsOption from '../../../components/enum-settings-option.react';
 import { useSelector } from '../../../redux/redux-utils';
@@ -138,13 +138,7 @@
 
   const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
   const focusedBadgeOnlyItem = React.useMemo(() => {
-    const icon = (
-      <img
-        src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
-        height={badgeOnlyNotificationsIllustrationAsset.height}
-        width={badgeOnlyNotificationsIllustrationAsset.width}
-      />
-    );
+    const icon = <BadgeNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isFocusedBadgeOnlySelected}