From de53eb7546957132a47c0f6e0f78b34e58d59cdb Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 9 Feb 2023 15:19:36 +0000
Subject: [PATCH] feat: replace icons with images

---
 public/assets/rss3.svg             | 43 +++++++++++++++++++++++++
 src/components/icons/HootIcon.tsx  | 41 ------------------------
 src/components/icons/RSS3Icon.tsx  | 51 ------------------------------
 src/components/icons/XCharIcon.tsx | 36 ---------------------
 src/components/icons/XFeedIcon.tsx | 29 -----------------
 src/components/icons/XShopIcon.tsx | 36 ---------------------
 src/components/icons/XSyncIcon.tsx | 29 -----------------
 src/components/site/SiteHeader.tsx | 12 +++----
 src/pages/index.tsx                | 38 ++++++++++++----------
 9 files changed, 69 insertions(+), 246 deletions(-)
 create mode 100644 public/assets/rss3.svg
 delete mode 100644 src/components/icons/HootIcon.tsx
 delete mode 100644 src/components/icons/RSS3Icon.tsx
 delete mode 100644 src/components/icons/XCharIcon.tsx
 delete mode 100644 src/components/icons/XFeedIcon.tsx
 delete mode 100644 src/components/icons/XShopIcon.tsx
 delete mode 100644 src/components/icons/XSyncIcon.tsx

diff --git a/public/assets/rss3.svg b/public/assets/rss3.svg
new file mode 100644
index 00000000..3b778472
--- /dev/null
+++ b/public/assets/rss3.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="bg">
+      <rect width="1024" height="1024" fill="#0072ff" />
+    </g>
+    <g id="Layer_1-2" data-name="Layer 1">
+      <g id="Layer_2-2" data-name="Layer 2">
+        <g id="图层_1" data-name="图层 1">
+          <path
+            d="M655.79,528.1c-10-14.91-34.25-22.84-51.57-27.52-2-.53-4.12-1.06-6.36-1.62h-.17c-9.33-2.36-19.93-5-28.17-9.44-9.45-5.18-14.07-11.88-14.07-20.5a20.82,20.82,0,0,1,.39-4.17v-.25a17.3,17.3,0,0,1,.49-1.88,2.41,2.41,0,0,1,.08-.25v-.09a24,24,0,0,1,6-9.45c7-7.08,18.17-11.06,30.7-11.06h.39a66,66,0,0,1,26.66,6.27,71.68,71.68,0,0,1,22.21,15.75l.15,18V482h15.59V428H642.54v12.25a.54.54,0,0,1-.25.45.7.7,0,0,1-.43-.19,79.69,79.69,0,0,0-21.71-11.7,83.89,83.89,0,0,0-26-4.51c-10.15,0-18.44,1.18-25.36,3.44a48.58,48.58,0,0,0-15.76,8.77,41.19,41.19,0,0,0-11.89,14.87,42.25,42.25,0,0,0-4.09,17.92,37.68,37.68,0,0,0,1.36,10.88,40.78,40.78,0,0,0,5.31,11c.2.32.44.62.65.93s.23.3.33.45l.14.19c10.22,14.11,33,20.36,49.66,24.95l.46.12,3.7,1,4,1.07a163.1,163.1,0,0,1,25.37,8.46,29.78,29.78,0,0,1,11,8.37,25.89,25.89,0,0,1,5.42,11.61,25.29,25.29,0,0,1-.93,12.71,32.25,32.25,0,0,1-7.9,12.46,37.91,37.91,0,0,1-13.48,7.73,56.74,56.74,0,0,1-15,2.68,75.79,75.79,0,0,1-24.11-2.73c-13.29-4.2-25.42-12.32-33.28-22.23a3.23,3.23,0,0,1-.58-1.08l-.15-15.45v-.2H533.54v56.54h15.6V582.24a68,68,0,0,0,22.25,13.06A92.46,92.46,0,0,0,601.23,601h1.26c8.66,0,28.91,0,44.79-13.45A46.31,46.31,0,0,0,658,574a47.42,47.42,0,0,0,5-15.9,44.12,44.12,0,0,0-.73-16A36.57,36.57,0,0,0,655.79,528.1Z"
+            fill="#fff"
+          />
+          <path
+            d="M501.87,528.1c-9.84-14.84-34.14-22.81-51.57-27.51-2-.52-4-1-6.23-1.57-18.89-4.66-42.41-10.48-42.69-30a20.83,20.83,0,0,1,1.84-8.55,25.4,25.4,0,0,1,5.33-7.56c7.09-7,18.2-11,30.64-11h.39a65.77,65.77,0,0,1,26.62,6.27,70.8,70.8,0,0,1,22.09,15.76l.3,18v.2h15.59V428H488.63v12.25a.54.54,0,0,1-.24.45.5.5,0,0,1-.43-.19,79.89,79.89,0,0,0-21.72-11.7,83.89,83.89,0,0,0-26-4.51c-10.2,0-18.52,1.18-25.41,3.44a48.53,48.53,0,0,0-15.71,8.77,41.19,41.19,0,0,0-11.89,14.87,42.31,42.31,0,0,0-4.11,18,38.22,38.22,0,0,0,1.33,10.86,41.42,41.42,0,0,0,5.18,11c9.79,15.25,33.74,21.81,51.22,26.6l.42.11,3.47,1,3.66,1,.34.09a163.1,163.1,0,0,1,25.37,8.46,30.44,30.44,0,0,1,11.1,8.43,26.23,26.23,0,0,1,5.44,11.71,25.26,25.26,0,0,1-1,12.73,32,32,0,0,1-7.94,12.44,37.05,37.05,0,0,1-13.42,7.66,55.69,55.69,0,0,1-15,2.62c-1.05,0-2.15.07-3.26.07A76.86,76.86,0,0,1,429,581.15c-.79-.24-1.59-.52-2.36-.8h-.12c-1.59-.57-3.19-1.18-4.72-1.9A71.34,71.34,0,0,1,401,564.53l-.31-.3c-.94-.94-1.9-2-2.82-3l-.71-.81c-.41-.49-.81-1-1.18-1.46a3.35,3.35,0,0,1-.57-1.07l-.15-15.45v-.2H379.47v56.54h15.75V582.25a67.79,67.79,0,0,0,22.25,13.06A92.46,92.46,0,0,0,447.31,601h1.26c8.61,0,28.77,0,44.8-13.45A46.44,46.44,0,0,0,504.1,574a47.32,47.32,0,0,0,5-15.8,44.18,44.18,0,0,0-.73-16A36.91,36.91,0,0,0,501.87,528.1Z"
+            fill="#fff"
+          />
+          <path
+            d="M342,585.33l-42.61-64.41a46.93,46.93,0,0,0,21-4.08c9.32-4.72,16.81-10.71,21.4-19.57a51.54,51.54,0,0,0,5.65-23.61,49.16,49.16,0,0,0-14.17-34.5c-9.85-8.93-22.15-13.27-37.6-13.27H213.09v17.82h17.52V585.55H211.55v14.9h55.33v-14.9H249.06V521.18h29.82l41.74,64.37h-19v14.9H361.2v-14.9H342.58A.79.79,0,0,1,342,585.33ZM249.06,442.91h45.67c14,0,24.79,5.57,30.25,15.15a31.66,31.66,0,0,1-.5,31.25c-5.59,9.45-12.21,14.67-26.87,14.67H249.06Z"
+            fill="#fff"
+          />
+          <path
+            d="M805.27,548.83c0-21.38-10.81-36.83-28.74-43.45,15.2-8,21.91-21.12,21.91-34.64,0-31.21-26.18-47.74-60.32-47.74-18.64.14-38.5,6.34-52.07,25.38l14.17,9.25c7.6-10.21,18.41-18.1,37.9-18.1,24.8,0,42.39,10.07,42.39,29.25,0,18.37-17.64,28.61-35.71,28.61H720.19v17.72h26c23,0,41.25,12.41,40.68,33.52-1.28,22.44-21,34.5-46.94,34.5-16.65,0-35.14-5.25-49-20l-.7-.27-12.1,13.24.57.14c17.36,16.28,38,24.7,61.18,24.7C775.68,600.86,805.27,581.54,805.27,548.83Z"
+            fill="#fff"
+          />
+          <rect
+            x="155.23"
+            y="503.86"
+            width="44.85"
+            height="18.32"
+            fill="#fff"
+          />
+          <rect
+            x="823.92"
+            y="503.86"
+            width="44.85"
+            height="18.32"
+            fill="#fff"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/icons/HootIcon.tsx b/src/components/icons/HootIcon.tsx
deleted file mode 100644
index 8e856099..00000000
--- a/src/components/icons/HootIcon.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react"
-
-export const HootIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="36"
-      height="24"
-      viewBox="0 0 36 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M8.01388 5.85572C12.5495 5.85572 16.002 9.51132 16.002 14.3177C16.002 19.1242 12.5495 22.7798 8.01388 22.7798C3.47823 22.7798 0.0595703 19.1242 0.0595703 14.3177C0.0595703 9.51132 3.47823 5.85572 8.01388 5.85572ZM1.85352 14.3177C1.85352 18.278 4.45982 21.1889 8.01388 21.1889C11.5679 21.1889 14.2081 18.278 14.2081 14.3177C14.2081 10.3575 11.6695 7.44658 7.98003 7.44658C4.29058 7.44658 1.85352 10.4252 1.85352 14.3177Z"
-        fill="black"
-      />
-      <path
-        d="M27.375 5.85572C31.9106 5.85572 35.3631 9.51132 35.3631 14.3177C35.3631 19.1242 31.9106 22.7798 27.375 22.7798C22.8393 22.7798 19.4207 19.1242 19.4207 14.3177C19.4207 9.51132 22.8393 5.85572 27.375 5.85572ZM21.2146 14.3177C21.2146 18.278 23.8209 21.1889 27.375 21.1889C30.929 21.1889 33.5692 18.278 33.5692 14.3177C33.5692 10.3575 31.0306 7.44658 27.3411 7.44658C23.6517 7.44658 21.2146 10.4252 21.2146 14.3177Z"
-        fill="black"
-      />
-      <path
-        d="M19.8556 22.3059L17.7114 24L15.5654 22.3059L17.7114 20.6118L19.8556 22.3059Z"
-        fill="#0072FF"
-      />
-      <path
-        d="M33.515 0.0154049C32.9193 0.472354 32.3253 0.930996 31.7312 1.38795C29.1046 1.49626 24.6773 2.10553 20.5343 5.06216C19.6018 5.72897 18.7996 6.42962 18.1108 7.12351L17.6335 7.60077L17.1546 7.12351C16.4657 6.42962 15.6635 5.72897 14.731 5.06216C10.5897 2.10553 6.16069 1.49626 3.53577 1.38795C2.94004 0.930996 2.34601 0.472354 1.75198 0.0154049C6.9172 -0.162298 11.6796 1.20009 15.5214 3.96379C16.2559 4.49012 16.9633 5.074 17.6335 5.70189C18.3037 5.074 19.0111 4.49012 19.7439 3.96379C23.5874 1.20009 28.3498 -0.162298 33.515 0.0154049Z"
-        fill="#0072FF"
-      />
-      <path
-        d="M9.82475 14.3178H8.0308V17.3438H9.82475V14.3178Z"
-        fill="#0072FF"
-      />
-      <path
-        d="M27.3919 14.3178H25.598V17.3438H27.3919V14.3178Z"
-        fill="#0072FF"
-      />
-    </svg>
-  )
-}
diff --git a/src/components/icons/RSS3Icon.tsx b/src/components/icons/RSS3Icon.tsx
deleted file mode 100644
index 2027b54c..00000000
--- a/src/components/icons/RSS3Icon.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react"
-
-export const RSS3Icon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
-      <g id="Layer_2" data-name="Layer 2">
-        <g id="bg">
-          <rect width="1024" height="1024" fill="#0072ff" />
-        </g>
-        <g id="Layer_1-2" data-name="Layer 1">
-          <g id="Layer_2-2" data-name="Layer 2">
-            <g id="图层_1" data-name="图层 1">
-              <path
-                d="M655.79,528.1c-10-14.91-34.25-22.84-51.57-27.52-2-.53-4.12-1.06-6.36-1.62h-.17c-9.33-2.36-19.93-5-28.17-9.44-9.45-5.18-14.07-11.88-14.07-20.5a20.82,20.82,0,0,1,.39-4.17v-.25a17.3,17.3,0,0,1,.49-1.88,2.41,2.41,0,0,1,.08-.25v-.09a24,24,0,0,1,6-9.45c7-7.08,18.17-11.06,30.7-11.06h.39a66,66,0,0,1,26.66,6.27,71.68,71.68,0,0,1,22.21,15.75l.15,18V482h15.59V428H642.54v12.25a.54.54,0,0,1-.25.45.7.7,0,0,1-.43-.19,79.69,79.69,0,0,0-21.71-11.7,83.89,83.89,0,0,0-26-4.51c-10.15,0-18.44,1.18-25.36,3.44a48.58,48.58,0,0,0-15.76,8.77,41.19,41.19,0,0,0-11.89,14.87,42.25,42.25,0,0,0-4.09,17.92,37.68,37.68,0,0,0,1.36,10.88,40.78,40.78,0,0,0,5.31,11c.2.32.44.62.65.93s.23.3.33.45l.14.19c10.22,14.11,33,20.36,49.66,24.95l.46.12,3.7,1,4,1.07a163.1,163.1,0,0,1,25.37,8.46,29.78,29.78,0,0,1,11,8.37,25.89,25.89,0,0,1,5.42,11.61,25.29,25.29,0,0,1-.93,12.71,32.25,32.25,0,0,1-7.9,12.46,37.91,37.91,0,0,1-13.48,7.73,56.74,56.74,0,0,1-15,2.68,75.79,75.79,0,0,1-24.11-2.73c-13.29-4.2-25.42-12.32-33.28-22.23a3.23,3.23,0,0,1-.58-1.08l-.15-15.45v-.2H533.54v56.54h15.6V582.24a68,68,0,0,0,22.25,13.06A92.46,92.46,0,0,0,601.23,601h1.26c8.66,0,28.91,0,44.79-13.45A46.31,46.31,0,0,0,658,574a47.42,47.42,0,0,0,5-15.9,44.12,44.12,0,0,0-.73-16A36.57,36.57,0,0,0,655.79,528.1Z"
-                fill="#fff"
-              />
-              <path
-                d="M501.87,528.1c-9.84-14.84-34.14-22.81-51.57-27.51-2-.52-4-1-6.23-1.57-18.89-4.66-42.41-10.48-42.69-30a20.83,20.83,0,0,1,1.84-8.55,25.4,25.4,0,0,1,5.33-7.56c7.09-7,18.2-11,30.64-11h.39a65.77,65.77,0,0,1,26.62,6.27,70.8,70.8,0,0,1,22.09,15.76l.3,18v.2h15.59V428H488.63v12.25a.54.54,0,0,1-.24.45.5.5,0,0,1-.43-.19,79.89,79.89,0,0,0-21.72-11.7,83.89,83.89,0,0,0-26-4.51c-10.2,0-18.52,1.18-25.41,3.44a48.53,48.53,0,0,0-15.71,8.77,41.19,41.19,0,0,0-11.89,14.87,42.31,42.31,0,0,0-4.11,18,38.22,38.22,0,0,0,1.33,10.86,41.42,41.42,0,0,0,5.18,11c9.79,15.25,33.74,21.81,51.22,26.6l.42.11,3.47,1,3.66,1,.34.09a163.1,163.1,0,0,1,25.37,8.46,30.44,30.44,0,0,1,11.1,8.43,26.23,26.23,0,0,1,5.44,11.71,25.26,25.26,0,0,1-1,12.73,32,32,0,0,1-7.94,12.44,37.05,37.05,0,0,1-13.42,7.66,55.69,55.69,0,0,1-15,2.62c-1.05,0-2.15.07-3.26.07A76.86,76.86,0,0,1,429,581.15c-.79-.24-1.59-.52-2.36-.8h-.12c-1.59-.57-3.19-1.18-4.72-1.9A71.34,71.34,0,0,1,401,564.53l-.31-.3c-.94-.94-1.9-2-2.82-3l-.71-.81c-.41-.49-.81-1-1.18-1.46a3.35,3.35,0,0,1-.57-1.07l-.15-15.45v-.2H379.47v56.54h15.75V582.25a67.79,67.79,0,0,0,22.25,13.06A92.46,92.46,0,0,0,447.31,601h1.26c8.61,0,28.77,0,44.8-13.45A46.44,46.44,0,0,0,504.1,574a47.32,47.32,0,0,0,5-15.8,44.18,44.18,0,0,0-.73-16A36.91,36.91,0,0,0,501.87,528.1Z"
-                fill="#fff"
-              />
-              <path
-                d="M342,585.33l-42.61-64.41a46.93,46.93,0,0,0,21-4.08c9.32-4.72,16.81-10.71,21.4-19.57a51.54,51.54,0,0,0,5.65-23.61,49.16,49.16,0,0,0-14.17-34.5c-9.85-8.93-22.15-13.27-37.6-13.27H213.09v17.82h17.52V585.55H211.55v14.9h55.33v-14.9H249.06V521.18h29.82l41.74,64.37h-19v14.9H361.2v-14.9H342.58A.79.79,0,0,1,342,585.33ZM249.06,442.91h45.67c14,0,24.79,5.57,30.25,15.15a31.66,31.66,0,0,1-.5,31.25c-5.59,9.45-12.21,14.67-26.87,14.67H249.06Z"
-                fill="#fff"
-              />
-              <path
-                d="M805.27,548.83c0-21.38-10.81-36.83-28.74-43.45,15.2-8,21.91-21.12,21.91-34.64,0-31.21-26.18-47.74-60.32-47.74-18.64.14-38.5,6.34-52.07,25.38l14.17,9.25c7.6-10.21,18.41-18.1,37.9-18.1,24.8,0,42.39,10.07,42.39,29.25,0,18.37-17.64,28.61-35.71,28.61H720.19v17.72h26c23,0,41.25,12.41,40.68,33.52-1.28,22.44-21,34.5-46.94,34.5-16.65,0-35.14-5.25-49-20l-.7-.27-12.1,13.24.57.14c17.36,16.28,38,24.7,61.18,24.7C775.68,600.86,805.27,581.54,805.27,548.83Z"
-                fill="#fff"
-              />
-              <rect
-                x="155.23"
-                y="503.86"
-                width="44.85"
-                height="18.32"
-                fill="#fff"
-              />
-              <rect
-                x="823.92"
-                y="503.86"
-                width="44.85"
-                height="18.32"
-                fill="#fff"
-              />
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  )
-}
diff --git a/src/components/icons/XCharIcon.tsx b/src/components/icons/XCharIcon.tsx
deleted file mode 100644
index bc0c6b33..00000000
--- a/src/components/icons/XCharIcon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react"
-
-export const XCharIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g clipPath="url(#clip0_5172_21145)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M21.0568 32.3907C23.3998 32.1424 25.5483 30.9736 27.0295 29.1413C28.5108 27.3089 29.2035 24.9632 28.9552 22.6202C28.7785 20.9525 28.9382 19.6513 29.2452 18.6465C29.3311 18.365 32.375 17.4817 32.7897 17.1498C32.9517 17.0202 33.1188 16.8992 33.3086 16.7617L33.4861 16.6327C33.7386 16.4485 34.0221 16.2356 34.2885 15.991C35.2519 15.1063 35.5097 13.8731 35.3439 12.8034C35.1825 11.7626 34.598 10.7217 33.653 10.1563C33.64 10.1481 33.6255 10.1392 33.6094 10.1297C33.5709 10.1068 33.5231 10.0804 33.4649 10.0512C33.3485 9.9926 33.1904 9.92291 32.9814 9.8488C32.5641 9.70072 31.941 9.53398 31.0367 9.40459C29.2317 9.14665 23.4382 9.65906 18.7014 10.1609C13.9647 10.6628 7.75657 12.1829 6.04566 12.8134C5.18856 13.1294 4.61415 13.423 4.2372 13.6552C4.04843 13.7715 3.90834 13.8728 3.80685 13.9544C3.75599 13.9952 3.71483 14.031 3.68208 14.0615C3.66831 14.0742 3.65586 14.0859 3.64494 14.0967C2.83943 14.8475 2.48593 15.9878 2.54626 17.0393C2.60824 18.12 3.11897 19.2718 4.24617 19.9349C4.55803 20.1183 4.87991 20.267 5.16539 20.3943L5.36588 20.4831C5.58028 20.5779 5.76895 20.6612 5.95452 20.754C6.42969 20.9916 10.0271 20.4105 10.1702 20.6677C10.2762 20.8583 10.3784 21.0624 10.4755 21.2808C10.8796 22.364 11.1701 23.3943 11.2864 24.4923C11.5347 26.8353 12.7034 28.9838 14.5358 30.465C16.3681 31.9463 18.7138 32.6389 21.0568 32.3907Z"
-          fill="#6AD991"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M16.8145 1.17836C14.6625 1.54418 12.6257 2.41802 10.8253 3.74001C10.2719 4.14633 10.1504 4.93208 10.5538 5.49504C10.9573 6.05798 11.733 6.18494 12.2864 5.77862C13.7876 4.67636 15.4703 3.95812 17.236 3.65798C19.0018 3.35784 20.8273 3.47972 22.6083 4.02407C23.2649 4.22473 23.9552 3.84858 24.15 3.18394C24.3448 2.51929 23.9704 1.81784 23.3139 1.61718C21.1777 0.964341 18.9666 0.812544 16.8145 1.17836ZM21.0045 5.141C18.6535 4.56979 16.2648 4.97584 14.2346 6.29178C13.6588 6.66496 13.4927 7.44209 13.8636 8.02752C14.2345 8.61298 15.0019 8.78505 15.5776 8.41187C17.0422 7.46258 18.7415 7.17373 20.4374 7.58578C21.1041 7.74777 21.7716 7.33181 21.9282 6.6567C22.0848 5.9816 21.6712 5.30299 21.0045 5.141Z"
-          fill="#50C07B"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_5172_21145">
-          <rect width="36" height="36" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
diff --git a/src/components/icons/XFeedIcon.tsx b/src/components/icons/XFeedIcon.tsx
deleted file mode 100644
index 2e914969..00000000
--- a/src/components/icons/XFeedIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-
-export const XFeedIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="37"
-      height="36"
-      viewBox="0 0 37 36"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23.0374 7.2464C22.9495 5.44116 21.8769 3.91545 20.2028 3.28731C18.4273 2.62116 16.4292 3.12788 15.0615 4.65681C14.5692 5.20717 14.0947 5.78512 13.647 6.37575C12.768 7.53518 11.3054 8.28506 9.71675 8.37152C8.83098 8.41973 8.07045 8.48646 7.40872 8.56562C4.22711 8.94627 1.94045 11.1417 1.41701 13.6633C1.18034 14.8034 1 16.0937 1 17.3579C1 18.6222 1.18034 19.9125 1.41701 21.0526C1.94045 23.5741 4.22711 25.7697 7.40872 26.1502C8.07045 26.2293 8.83098 26.2962 9.71675 26.3443C11.3054 26.4309 12.768 27.1808 13.647 28.3402C14.0947 28.9306 14.5692 29.5086 15.0615 30.059C16.4292 31.588 18.4273 32.0948 20.2028 31.4286C21.8769 30.8005 22.9495 29.2746 23.0374 27.4694C23.1581 24.9885 23.2548 21.6588 23.2548 17.3579C23.2548 13.0571 23.1581 9.72736 23.0374 7.2464Z"
-        fill="#FFDF99"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M33.0244 19.0242C33.0244 16.8413 32.5042 14.6869 31.5027 12.6904C31.1948 12.0768 30.4405 11.8253 29.8179 12.1287C29.1953 12.4321 28.9402 13.1755 29.248 13.7892C30.0831 15.4539 30.5092 17.2332 30.5092 19.0242C30.5092 20.8153 30.0831 22.5946 29.248 24.2592C28.9402 24.8729 29.1953 25.6164 29.8179 25.9198C30.4405 26.2233 31.1948 25.9717 31.5027 25.3581C32.5042 23.3615 33.0244 21.2072 33.0244 19.0242ZM28.4157 22.4909C29.3728 20.2689 29.3728 17.8459 28.4157 15.6238C28.1442 14.9937 27.4059 14.6997 26.7666 14.9673C26.1273 15.2348 25.8291 15.9625 26.1005 16.5926C26.7909 18.1955 26.7909 19.9192 26.1005 21.5221C25.8291 22.1523 26.1273 22.88 26.7666 23.1475C27.4059 23.415 28.1442 23.121 28.4157 22.4909Z"
-        fill="#F6C549"
-      />
-    </svg>
-  )
-}
diff --git a/src/components/icons/XShopIcon.tsx b/src/components/icons/XShopIcon.tsx
deleted file mode 100644
index b956d145..00000000
--- a/src/components/icons/XShopIcon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react"
-
-export const XShopIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g clipPath="url(#clip0_5172_21158)">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M20.8372 29.6051C22.2054 30.8559 24.0886 31.1917 25.7612 30.4394C27.535 29.6416 28.6236 27.8291 28.5147 25.7279C28.4755 24.9715 28.4033 24.208 28.3026 23.4545C28.1048 21.9754 28.6278 20.3727 29.7219 19.162C30.3319 18.487 30.8374 17.8889 31.2619 17.3532C33.3032 14.7774 34.7469 11.3361 33.8239 7.44451C33.5171 6.97304 33.1771 6.48634 32.8078 6.00718C32.393 5.46902 31.9413 4.94037 31.4581 4.45348C30.9865 3.97821 30.4748 3.53262 29.953 3.12205C29.4644 2.73753 28.9669 2.38373 28.4852 2.06502C24.6225 1.82525 21.1485 2.52975 18.5573 4.55141C18.0184 4.97189 17.4164 5.47266 16.7368 6.07762C15.5177 7.16233 13.9111 7.67311 12.4336 7.46411C11.681 7.35775 10.918 7.27973 10.1619 7.23479C8.06156 7.10978 6.24074 8.18444 5.42952 9.95218C4.66451 11.619 4.98604 13.5048 6.22633 14.8825C7.93089 16.7758 10.2661 19.2698 13.3734 22.4009C16.4808 25.532 18.9569 27.8861 20.8372 29.6051Z"
-          fill="#E65040"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M5.96671 28.9335C7.51029 30.4771 9.40148 31.6326 11.5215 32.3362C12.173 32.5524 12.8842 32.1969 13.1099 31.5421C13.3356 30.8873 12.9903 30.1812 12.3387 29.9649C10.5711 29.3783 9.01167 28.4215 7.74522 27.155C6.47876 25.8885 5.52187 24.3291 4.93533 22.5615C4.71909 21.9099 4.0129 21.5646 3.3581 21.7903C2.70329 22.0159 2.34781 22.7272 2.56404 23.3788C3.26759 25.4987 4.42313 27.3899 5.96671 28.9335ZM6.77428 23.2233C7.66872 25.4713 9.38205 27.1846 11.63 28.0791C12.2675 28.3327 12.9975 28.0185 13.2604 27.3773C13.5233 26.7361 13.2196 26.0106 12.5821 25.757C10.9605 25.1118 9.74162 23.8929 9.09639 22.2713C8.84275 21.6338 8.1173 21.3301 7.47607 21.593C6.83484 21.8559 6.52064 22.5858 6.77428 23.2233Z"
-          fill="#FF8A7A"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_5172_21158">
-          <rect width="36" height="36" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  )
-}
diff --git a/src/components/icons/XSyncIcon.tsx b/src/components/icons/XSyncIcon.tsx
deleted file mode 100644
index 04991d4a..00000000
--- a/src/components/icons/XSyncIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-
-export const XSyncIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M25.3514 2.40039C19.9028 2.40039 15.2504 5.75659 13.383 10.4927C7.06993 10.6467 2 15.7598 2 22.0448C2 28.4267 7.22739 33.6004 13.6757 33.6004H35.8595C41.018 33.6004 45.2 29.4614 45.2 24.3559C45.2 20.0473 42.2215 16.427 38.1913 15.402C38.1934 15.3054 38.1946 15.2086 38.1946 15.1115C38.1946 8.09127 32.4446 2.40039 25.3514 2.40039Z"
-        fill="#5B89F7"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23.2001 44.7998C25.8106 44.7998 28.3869 44.1481 30.7745 42.8934C31.5083 42.5077 31.8091 41.5627 31.4462 40.7827C31.0834 40.0027 30.1943 39.6831 29.4605 40.0687C27.4698 41.115 25.3419 41.6488 23.2001 41.6488C21.0583 41.6488 18.9305 41.115 16.9399 40.0687C16.206 39.6831 15.3168 40.0027 14.954 40.7827C14.5911 41.5627 14.8919 42.5077 15.6258 42.8933C18.0133 44.1481 20.5896 44.7998 23.2001 44.7998ZM19.0545 39.0259C21.7117 40.225 24.6093 40.225 27.2665 39.0259C28.0201 38.6859 28.3716 37.761 28.0517 36.96C27.7318 36.1591 26.8616 35.7855 26.108 36.1255C24.1912 36.9905 22.1299 36.9905 20.213 36.1255C19.4595 35.7855 18.5892 36.1591 18.2693 36.96C17.9494 37.761 18.301 38.6859 19.0545 39.0259Z"
-        fill="#B2C5FF"
-      />
-    </svg>
-  )
-}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index f9fc691c..c3152ec2 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -8,14 +8,12 @@ import { UniLink } from "../ui/UniLink"
 import { Profile } from "~/lib/types"
 import { ConnectButton } from "../common/ConnectButton"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
-import { RSS3Icon } from "~/components/icons/RSS3Icon"
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid"
 import { Image } from "~/components/ui/Image"
 import { FollowingButton } from "~/components/common/FollowingButton"
 import { FollowingCount } from "~/components/common/FollowingCount"
 import { RssIcon } from "@heroicons/react/24/solid"
-import { XCharIcon } from "~/components/icons/XCharIcon"
-import { XFeedIcon } from "~/components/icons/XFeedIcon"
+import { XCharLogo, XFeedLogo } from "@crossbell/ui"
 import { FastAverageColor } from "fast-average-color"
 import { useState, useRef, useEffect, RefObject } from "react"
 import chroma from "chroma-js"
@@ -62,12 +60,12 @@ export const SiteHeader: React.FC<{
   const moreMenuItems = [
     {
       text: "View on xChar",
-      icon: <XCharIcon className="w-4 h-4" />,
+      icon: <XCharLogo className="w-4 h-4" />,
       url: `${CSB_XCHAR}/${site?.username}`,
     },
     {
       text: "View on xFeed",
-      icon: <XFeedIcon className="w-4 h-4" />,
+      icon: <XFeedLogo className="w-4 h-4" />,
       url: `${CSB_IO}/@${site?.username}`,
     },
     {
@@ -76,7 +74,7 @@ export const SiteHeader: React.FC<{
         <div className="w-4 h-4">
           <Image
             alt="Hoot It"
-            src="/assets/hootit.png"
+            src="/assets/hoot.svg"
             className="rounded"
             width={16}
             height={16}
@@ -95,7 +93,7 @@ export const SiteHeader: React.FC<{
       icon: (
         <div className="w-4 h-4">
           <Image
-            alt="Hoot It"
+            alt="JSON Feed"
             src="/assets/json-feed.png"
             className="rounded"
             width={16}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5decefaf..46c5292c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -26,14 +26,14 @@ import {
   RssIcon,
   EllipsisHorizontalIcon,
 } from "@heroicons/react/24/outline"
-import { XCharIcon } from "~/components/icons/XCharIcon"
-import { XFeedIcon } from "~/components/icons/XFeedIcon"
-import { XSyncIcon } from "~/components/icons/XSyncIcon"
-import { XShopIcon } from "~/components/icons/XShopIcon"
-import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
-import { RSS3Icon } from "~/components/icons/RSS3Icon"
 import { Tooltip } from "~/components/ui/Tooltip"
-import { HootIcon } from "~/components/icons/HootIcon"
+import {
+  XCharLogo,
+  XFeedLogo,
+  XSyncLogo,
+  XShopLogo,
+  CrossbellChainLogo,
+} from "@crossbell/ui"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const queryClient = new QueryClient()
@@ -154,52 +154,56 @@ export default function Home() {
     },
     {
       name: "xChar",
-      icon: <XCharIcon className="w-full h-full" />,
+      icon: <XCharLogo className="w-full h-full" />,
       url: "https://xchar.app/",
     },
     {
       name: "xFeed",
-      icon: <XFeedIcon className="w-full h-full" />,
+      icon: <XFeedLogo className="w-full h-full" />,
       url: "https://crossbell.io/feed",
     },
     {
       name: "xSync",
-      icon: <XSyncIcon className="w-full h-full" />,
+      icon: <XSyncLogo className="w-full h-full" />,
       url: "https://xsync.app/",
     },
     {
       name: "xShop",
-      icon: <XShopIcon className="w-full h-full" />,
+      icon: <XShopLogo className="w-full h-full" />,
       text: "Coming soon",
     },
     {
       name: "Crossbell Scan",
-      icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
       url: "https://scan.crossbell.io/",
     },
     {
       name: "Crossbell Faucet",
-      icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
       url: "https://faucet.crossbell.io/",
     },
     {
       name: "Crossbell Export",
-      icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
       url: "https://export.crossbell.io/",
     },
     {
       name: "Crossbell SDK",
-      icon: <CrossbellIcon className="w-full h-full p-[2px]" />,
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
       url: "https://crossbell-box.github.io/crossbell.js/",
     },
     {
       name: "RSS3",
-      icon: <RSS3Icon className="w-full h-full" />,
+      icon: (
+        <Image alt="RSS3" src="/assets/rss3.svg" className="rounded" fill />
+      ),
       url: "https://rss3.io/",
     },
     {
       name: "Hoot It",
-      icon: <HootIcon className="w-full h-full" />,
+      icon: (
+        <Image alt="Hoot It" src="/assets/hoot.svg" className="rounded" fill />
+      ),
       url: "https://hoot.it/search/xLog",
     },
     {