diff --git a/frontend/src/components/icons/Twitter.vue b/frontend/src/components/icons/Twitter.vue
new file mode 100644
index 0000000..4297404
--- /dev/null
+++ b/frontend/src/components/icons/Twitter.vue
@@ -0,0 +1,18 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M8 2H1L9.26086 13.0145L1.44995 21.9999H4.09998L10.4883 14.651L16 22H23L14.3917 10.5223L21.8001 2H19.1501L13.1643 8.88578L8 2ZM17 20L5 4H7L19 20H17Z"></path>
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index 399cf88..c6cae8e 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -16,6 +16,7 @@ import useBrowserStore from 'stores/browser.js'
 import { useRender } from '@/utils/render.js'
 import wechatUrl from '@/assets/images/wechat_official.png'
 import QRCode from '@/components/icons/QRCode.vue'
+import Twitter from '@/components/icons/Twitter.vue'
 
 const themeVars = useThemeVars()
 const render = useRender()
@@ -173,13 +174,12 @@ const exThemeVars = computed(() => {
                 @click="openWechatOfficial" />
             <icon-button
                 v-else
+                :icon="Twitter"
                 :border="false"
                 :size="iconSize"
                 class="nav-menu-button"
                 t-tooltip="ribbon.follow_x"
-                @click="openX">
-                <span style="font-weight: bold; font-size: 24px">𝕏</span>
-            </icon-button>
+                @click="openX" />
             <icon-button
                 :icon="Github"
                 :size="iconSize"