diff --git a/components/Footer.tsx b/components/Footer.tsx
index 2e5452627b..4c25e22105 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react'
 
-import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
-import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import { FaEnvelopeOpenText } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
+import { FaLinkedin } from 'react-icons/fa'
+import { FaMastodon } from 'react-icons/fa'
+import { FaTwitter } from 'react-icons/fa'
+import { FaYoutube } from 'react-icons/fa'
+import { FaZhihu } from 'react-icons/fa6'
+import { FaBilibili } from 'react-icons/fa6'
+import { IoMoonSharp } from 'react-icons/io5'
+import { IoSunnyOutline } from 'react-icons/io5'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
@@ -135,6 +136,18 @@ export const FooterImpl: React.FC = () => {
             <FaYoutube />
           </a>
         )}
+
+        {config.bilibili && (
+          <a
+            className={styles.bilibili}
+            href={`https://space.bilibili.com/${config.bilibili}`}
+            title={`Bilibili ${config.bilibili}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaBilibili />
+          </a>
+        )}
       </div>
     </footer>
   )
diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx
index 7702c254d6..bcde598d9f 100644
--- a/components/NotionPageHeader.tsx
+++ b/components/NotionPageHeader.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 
 import * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import { IoMoonSharp } from 'react-icons/io5'
+import { IoSunnyOutline } from 'react-icons/io5'
 import cs from 'classnames'
 import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
diff --git a/components/PageActions.tsx b/components/PageActions.tsx
index 2336513c58..8a22a94824 100644
--- a/components/PageActions.tsx
+++ b/components/PageActions.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
-import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+import { AiOutlineRetweet } from 'react-icons/ai'
+import { IoHeartOutline } from 'react-icons/io5'
 
 import styles from './styles.module.css'
 
diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
index 87113e258a..f2696563c3 100644
--- a/components/PageSocial.module.css
+++ b/components/PageSocial.module.css
@@ -128,6 +128,13 @@
   border-color: #777;
 }
 
+.bilibili .actionBgPane {
+  background: #fb7299;
+}
+.bilibili:hover {
+  border-color: #fb7299;
+}
+
 @media only screen and (max-width: 768px) {
   .links {
     position: relative;
diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
index 36ec81900c..a57234f0c2 100644
--- a/components/PageSocial.tsx
+++ b/components/PageSocial.tsx
@@ -67,7 +67,19 @@ const socialLinks: SocialLink[] = [
         <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
       </svg>
     )
-  }
+  },
+  
+  // TODO: add Bilibili
+  config.bilibili && {
+    name: 'bilibili',
+    href: `https://space.bilibili.com/${config.bilibili}`,
+    title: `Bilibili ${config.bilibili}`,
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M18.223 3.086a1.25 1.25 0 0 1 0 1.768L17.08 5.996h1.17A3.75 3.75 0 0 1 22 9.747v7.5a3.75 3.75 0 0 1-3.75 3.75H5.75A3.75 3.75 0 0 1 2 17.247v-7.5a3.75 3.75 0 0 1 3.75-3.75h1.166L5.775 4.855a1.25 1.25 0 1 1 1.767-1.768l2.652 2.652c.079.079.145.165.198.257h3.213c.053-.092.12-.18.199-.258l2.651-2.652a1.25 1.25 0 0 1 1.768 0zm.027 5.42H5.75a1.25 1.25 0 0 0-1.247 1.157l-.003.094v7.5c0 .659.51 1.199 1.157 1.246l.093.004h12.5a1.25 1.25 0 0 0 1.247-1.157l.003-.093v-7.5c0-.69-.56-1.25-1.25-1.25zm-10 2.5c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25zm7.5 0c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25z"/>
+      </svg>
+    )
+  },
 ].filter(Boolean)
 
 export const PageSocial: React.FC = () => {
diff --git a/components/styles.module.css b/components/styles.module.css
index bea8ff1ed9..831d8bfe32 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -118,6 +118,10 @@
   color: #777777;
 }
 
+.bilibili:hover {
+  color: #fb7299;
+}
+
 .comments {
   width: 100%;
   margin-top: 2em;
diff --git a/lib/config.ts b/lib/config.ts
index bab17e983c..a4283e27b5 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -61,6 +61,7 @@ export const youtube: string | null = getSiteConfig('youtube', null)
 export const linkedin: string | null = getSiteConfig('linkedin', null)
 export const newsletter: string | null = getSiteConfig('newsletter', null)
 export const zhihu: string | null = getSiteConfig('zhihu', null)
+export const bilibili: string | null = getSiteConfig('bilibili', null)
 
 export const getMastodonHandle = (): string | null => {
   if (!mastodon) {
diff --git a/lib/site-config.ts b/lib/site-config.ts
index b8c4fb60a1..6cf943cc98 100644
--- a/lib/site-config.ts
+++ b/lib/site-config.ts
@@ -17,6 +17,7 @@ export interface SiteConfig {
   youtube?: string
   zhihu?: string
   mastodon?: string;
+  bilibili?: string;
 
   defaultPageIcon?: string | null
   defaultPageCover?: string | null
diff --git a/package.json b/package.json
index 022285a387..559e05af1a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "@fisch0920/use-dark-mode": "^2.4.0",
     "@keyvhq/core": "^1.6.9",
     "@keyvhq/redis": "^1.6.10",
-    "@react-icons/all-files": "^4.1.0",
     "@vercel/og": "^0.0.19",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
@@ -47,6 +46,7 @@
     "react": "^18.2.0",
     "react-body-classname": "^1.3.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-notion-x": "^6.15.6",
     "react-tweet-embed": "^2.0.0",
     "react-use": "^17.4.2",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 97a7b4ce21..aace567a72 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Document, { Head, Html, Main, NextScript } from 'next/document'
 
-import { IconContext } from '@react-icons/all-files'
+import { IconContext } from 'react-icons'
 
 export default class MyDocument extends Document {
   render() {
diff --git a/site.config.ts b/site.config.ts
index cded79c3bf..6b04490fac 100644
--- a/site.config.ts
+++ b/site.config.ts
@@ -20,6 +20,7 @@ export default siteConfig({
   twitter: 'transitive_bs',
   github: 'transitive-bullshit',
   linkedin: 'fisch2',
+  // bilibili: '#', // optional bilibili uid
   // mastodon: '#', // optional mastodon profile URL, provides link verification
   // newsletter: '#', // optional newsletter URL
   // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
diff --git a/yarn.lock b/yarn.lock
index f3bb398744..36692cc6cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -454,11 +454,6 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@react-icons/all-files@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz"
-  integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
-
 "@resvg/resvg-wasm@2.0.0-alpha.4":
   version "2.0.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@resvg/resvg-wasm/-/resvg-wasm-2.0.0-alpha.4.tgz#fc2f86186a9641df030d8f9f3f9d995899cd1ecb"
@@ -2940,6 +2935,11 @@ react-hotkeys-hook@^3.0.3:
   dependencies:
     hotkeys-js "3.8.7"
 
+react-icons@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
+
 react-image@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz"