diff --git a/.vscode/settings.json b/.vscode/settings.json
index d387fc02..3b6ce13b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,12 +15,15 @@
     "fontawesome",
     "fortawesome",
     "headlessui",
+    "heroicons",
     "romaji",
     "svgr",
+    "tabler",
     "tailwindcss",
     "ukphone",
     "usphone",
     "vercel",
+    "Wechat",
     "Weixin",
     "wordlist"
   ]
diff --git a/package.json b/package.json
index fe0ac4cf..cbb01170 100644
--- a/package.json
+++ b/package.json
@@ -5,14 +5,11 @@
   "homepage": ".",
   "dependencies": {
     "@floating-ui/react": "^0.20.1",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
     "@headlessui/tailwindcss": "^0.1.2",
+    "@heroicons/react": "^2.0.17",
     "@radix-ui/react-slider": "^1.1.1",
+    "@tabler/icons-react": "^2.16.0",
     "@tailwindcss/postcss7-compat": "^2.2.17",
     "autoprefixer": "^10.4.13",
     "classnames": "^2.3.2",
@@ -33,7 +30,8 @@
     "source-map-explorer": "^2.5.2",
     "swr": "^2.0.4",
     "typescript": "^4.0.3",
-    "use-sound": "^4.0.1"
+    "use-sound": "^4.0.1",
+    "yarn": "^1.22.19"
   },
   "scripts": {
     "dev": "vite",
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 475557de..563bc5af 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import InfoPanel from '@/components/InfoPanel'
 
 import vscLogo from '@/assets/vsc-logo.svg'
@@ -11,6 +10,8 @@ import redBookLogo from '@/assets/redBook-black-logo.svg'
 import redBookCode from '@/assets/redBook-code.jpg'
 import alipay from '@/assets/alipay.jpg'
 import weChat from '@/assets/weChat.jpg'
+import { IconBrandWechat, IconCoffee, IconTerminal2 } from '@tabler/icons-react'
+import { EnvelopeIcon } from '@heroicons/react/24/solid'
 
 const Footer: React.FC = () => {
   const [infoPanelState, setInfoPanelState] = useAtom(infoPanelStateAtom)
@@ -46,7 +47,7 @@ const Footer: React.FC = () => {
         <InfoPanel
           openState={infoPanelState.donate}
           title="Buy us a coffee"
-          icon="coffee"
+          icon={IconCoffee}
           btnColor="bg-yellow-300"
           iconColor="text-yellow-500"
           iconBackgroundColor="bg-yellow-100"
@@ -73,7 +74,7 @@ const Footer: React.FC = () => {
         <InfoPanel
           openState={infoPanelState.vsc}
           title="VSCode 摸🐟插件"
-          icon="terminal"
+          icon={IconTerminal2}
           btnColor="bg-blue-400"
           iconColor="text-blue-600"
           iconBackgroundColor="bg-blue-300"
@@ -97,7 +98,7 @@ const Footer: React.FC = () => {
         <InfoPanel
           openState={infoPanelState.community}
           title="用户反馈社群"
-          icon={['fab', 'weixin']}
+          icon={IconBrandWechat}
           btnColor="bg-cyan-400"
           iconColor="text-cyan-600"
           iconBackgroundColor="bg-cyan-300"
@@ -151,53 +152,75 @@ const Footer: React.FC = () => {
       )}
 
       <footer
-        className="mt-4 flex w-full items-center justify-center pb-1 text-center text-sm ease-in"
+        className="mt-4 flex flex w-full items-center items-center justify-center justify-center pb-1 text-sm ease-in"
         onClick={(e) => e.currentTarget.blur()}
       >
         <a href="https://github.com/Kaiyiwing/qwerty-learner" target="_blank" rel="noreferrer">
-          <FontAwesomeIcon icon={['fab', 'github']} className="mr-3 text-gray-500 dark:text-gray-400" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 496 512"
+            className="mr-3 inline h-4 w-4 fill-current text-gray-500 focus:outline-none  dark:text-gray-400"
+          >
+            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+          </svg>
         </a>
-        <span
-          className="mr-3 cursor-pointer"
+        <button
+          className="mr-3 h-4 w-4 cursor-pointer"
+          type="button"
           onClick={(e) => {
             handleOpenInfoPanel('redBook')
             e.currentTarget.blur()
           }}
         >
-          <img src={redBookLogo} className="svg-inline--fa fill-current text-gray-500" alt="red book" style={{ fill: '#6B7280' }} />
-        </span>
-        <span
-          className="cursor-pointer"
+          <img src={redBookLogo} className="fill-current text-gray-500" alt="red book" />
+        </button>
+        <button
+          className="cursor-pointer focus:outline-none "
+          type="button"
           onClick={(e) => {
             handleOpenInfoPanel('community')
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon={['fab', 'weixin']} className="mr-3 text-gray-500 dark:text-gray-400" />
-        </span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 576 512"
+            className="mr-3 inline h-4 w-4 fill-current text-gray-500 focus:outline-none  dark:text-gray-400"
+          >
+            <path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z" />
+          </svg>
+        </button>
 
-        <span
-          className="cursor-pointer"
+        <button
+          className="cursor-pointer focus:outline-none "
+          type="button"
           onClick={(e) => {
             handleOpenInfoPanel('donate')
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon={['fas', 'coffee']} className="mr-3 text-gray-500 dark:text-gray-400" />
-        </span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 640 512"
+            className="mr-3 inline h-4 w-4 fill-current text-gray-500 focus:outline-none  dark:text-gray-400"
+          >
+            <path d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+          </svg>
+        </button>
 
-        <span
-          className="mr-3 cursor-pointer"
+        <button
+          className="mr-3 h-3.5 w-3.5 cursor-pointer focus:outline-none"
+          type="button"
           onClick={(e) => {
             handleOpenInfoPanel('vsc')
             e.currentTarget.blur()
           }}
         >
-          <img src={vscLogo} className="svg-inline--fa fill-current text-gray-500" alt="visual studio code" />
-        </span>
+          <img src={vscLogo} className="fill-current text-gray-500" alt="visual studio code" />
+        </button>
 
         <a href="mailto:me@kaiyi.cool" target="_blank" rel="noreferrer" onClick={(e) => e.currentTarget.blur()}>
-          <FontAwesomeIcon icon={['fas', 'envelope']} className="mr-3 text-gray-500 dark:text-gray-400" />
+          <EnvelopeIcon className="mr-3 inline h-4 w-4 text-gray-500 dark:text-gray-400" />
         </a>
 
         <div className="group relative inline-block ">
@@ -208,15 +231,16 @@ const Footer: React.FC = () => {
             <span className="px-3 py-1 text-xs text-gray-500 dark:text-gray-400">中国大陆镜像</span>
           </div>
         </div>
-        <span
+        <button
           className="cursor-pointer text-gray-500 no-underline hover:no-underline dark:text-gray-400 "
+          type="button"
           onClick={(e) => {
             handleOpenInfoPanel('donate')
             e.currentTarget.blur()
           }}
         >
           @ Qwerty Learner
-        </span>
+        </button>
         <a
           className="cursor-pointer pl-2 text-gray-500 no-underline hover:no-underline dark:text-gray-400"
           href="https://beian.miit.gov.cn"
diff --git a/src/components/InfoPanel/index.tsx b/src/components/InfoPanel/index.tsx
index 765c144e..53c4457f 100644
--- a/src/components/InfoPanel/index.tsx
+++ b/src/components/InfoPanel/index.tsx
@@ -1,21 +1,30 @@
-import React, { Fragment } from 'react'
+import React, { ElementType, Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import classNames from 'classnames'
 import redBookLogo from '@/assets/redBook-color-logo.svg'
+import type { TablerIconsProps } from '@tabler/icons-react'
 
 type InfoPanelProps = {
   openState: boolean
   onClose: () => void
   title: string
-  icon: IconProp | 'redBookLogo'
+  icon: ElementType<TablerIconsProps> | 'redBookLogo'
   iconColor: string
   iconBackgroundColor: string
   btnColor: string
   children: React.ReactNode
 }
 
-const InfoPanel: React.FC<InfoPanelProps> = ({ openState, title, onClose, icon, iconBackgroundColor, iconColor, btnColor, children }) => {
+const InfoPanel: React.FC<InfoPanelProps> = ({
+  openState,
+  title,
+  onClose,
+  icon: Icon,
+  iconBackgroundColor,
+  iconColor,
+  btnColor,
+  children,
+}) => {
   return (
     <Transition.Root show={openState} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={() => onClose()}>
@@ -48,8 +57,8 @@ const InfoPanel: React.FC<InfoPanelProps> = ({ openState, title, onClose, icon,
                     <div
                       className={`${iconBackgroundColor} mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full dark:bg-opacity-50 sm:mx-0 sm:h-10 sm:w-10`}
                     >
-                      {icon !== 'redBookLogo' ? (
-                        <FontAwesomeIcon icon={icon} className={`h-5 w-5 stroke-current dark:bg-opacity-100  ${iconColor}`} />
+                      {Icon !== 'redBookLogo' ? (
+                        <Icon className={classNames('h-6 w-6 stroke-current dark:bg-opacity-100', iconColor)} />
                       ) : (
                         <img src={redBookLogo} alt="redBookLogo" className="h-6 w-6" />
                       )}
diff --git a/src/components/StarCard/index.tsx b/src/components/StarCard/index.tsx
index 2a678314..36614d4e 100644
--- a/src/components/StarCard/index.tsx
+++ b/src/components/StarCard/index.tsx
@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Transition } from '@headlessui/react'
 import starBar from '@/assets/starBar.svg'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
@@ -6,6 +5,7 @@ import { dismissStartCardDateAtom } from '@/store'
 import { useSetAtom } from 'jotai'
 import { recordStarAction } from '@/utils'
 import { DISMISS_START_CARD_DATE_KEY } from '@/constants'
+import { IconCircleX } from '@tabler/icons-react'
 
 export default function StarCard() {
   const [countdown, setCountdown] = useState(5)
@@ -55,7 +55,7 @@ export default function StarCard() {
       <>
         {isCounting ? (
           <div className="flex flex-col items-center gap-4 pt-6">
-            <img src={starBar} className="svg-inline--fa fill-current text-4xl" alt="" />
+            <img src={starBar} className="fill-current text-4xl" alt="star project" />
             <span className="text-gray w-full text-center text-gray-400">
               收藏快捷键<span className="pl-2 text-indigo-600">cmd + d</span>
             </span>
@@ -94,8 +94,8 @@ export default function StarCard() {
               后自动关闭
             </span>
           )}
-          <button onClick={onClickCloseStar}>
-            <FontAwesomeIcon icon={['fas', 'times-circle']} className="text-indigo-400" size="lg" />
+          <button type="button" onClick={onClickCloseStar}>
+            <IconCircleX className="text-indigo-400" />
           </button>
         </div>
         <span className="pb-4 text-xl text-gray-600 dark:text-gray-50">
diff --git a/src/icon.ts b/src/icon.ts
deleted file mode 100644
index 4c6678ee..00000000
--- a/src/icon.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faKeyboard } from '@fortawesome/free-regular-svg-icons'
-import {
-  faBookReader,
-  faEnvelope,
-  faVolumeMute,
-  faVolumeUp,
-  faEye,
-  faEyeSlash,
-  faAssistiveListeningSystems,
-  faCoffee,
-  faMicrophone,
-  faMicrophoneSlash,
-  faMoon,
-  faSun,
-  faCheckCircle,
-  faTerminal,
-  faExclamation,
-  faRandom,
-  faRepeat,
-  faRotate,
-  faCircleCheck,
-  faCheck,
-  faTriangleExclamation,
-  faHeart,
-  faThumbsUp,
-  faTimes,
-  faTimesCircle,
-  faEarthAmericas,
-  faShareFromSquare,
-  faChevronDown,
-  faGear,
-  faSliders,
-} from '@fortawesome/free-solid-svg-icons'
-import { faGithub, faWeixin } from '@fortawesome/free-brands-svg-icons'
-
-library.add(
-  faKeyboard,
-  faBookReader,
-  faGithub,
-  faWeixin,
-  faEnvelope,
-  faVolumeUp,
-  faVolumeMute,
-  faEye,
-  faEyeSlash,
-  faAssistiveListeningSystems,
-  faCoffee,
-  faMicrophone,
-  faMicrophoneSlash,
-  faMoon,
-  faSun,
-  faCheckCircle,
-  faTerminal,
-  faExclamation,
-  faRandom,
-  faRepeat,
-  faRotate,
-  faCircleCheck,
-  faCheck,
-  faTriangleExclamation,
-  faHeart,
-  faThumbsUp,
-  faTimes,
-  faTimesCircle,
-  faEarthAmericas,
-  faShareFromSquare,
-  faChevronDown,
-  faGear,
-  faSliders,
-)
diff --git a/src/index.css b/src/index.css
index 7b59f5e7..dcfaa895 100644
--- a/src/index.css
+++ b/src/index.css
@@ -55,6 +55,10 @@ body,
 }
 
 @layer components {
+  .icon {
+    @apply h-5.5 w-5.5 focus:outline-none;
+  }
+
   .word-chip {
     @apply flex h-10 w-auto cursor-pointer
       flex-row items-center
diff --git a/src/index.tsx b/src/index.tsx
index 881dede0..42840b61 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import './icon'
 import 'react-app-polyfill/stable'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import GalleryPage from './pages/Gallery'
diff --git a/src/pages/Gallery/ChapterButton.tsx b/src/pages/Gallery/ChapterButton.tsx
index 6f43892c..43072d29 100644
--- a/src/pages/Gallery/ChapterButton.tsx
+++ b/src/pages/Gallery/ChapterButton.tsx
@@ -1,5 +1,5 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useEffect, useRef } from 'react'
+import { CheckCircleIcon } from '@heroicons/react/20/solid'
 
 export const ChapterButton: React.FC<ChapterButtonProps> = ({ index, selected, wordCount, onClick }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -21,11 +21,7 @@ export const ChapterButton: React.FC<ChapterButtonProps> = ({ index, selected, w
       <p className="w-full text-lg text-gray-800 dark:text-white dark:text-opacity-80">Chapter {index + 1}</p>
       <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{wordCount} 词</p>
       {selected ? (
-        <FontAwesomeIcon
-          className="absolute -bottom-4 -right-4 text-6xl text-green-500 opacity-60 dark:text-green-300"
-          icon={['fas', 'check-circle']}
-          fixedWidth
-        />
+        <CheckCircleIcon className="absolute -bottom-4 -right-4 h-18 w-18 text-6xl text-green-500 opacity-60 dark:text-green-300" />
       ) : null}
     </button>
   )
diff --git a/src/pages/Gallery/DictionaryCard.tsx b/src/pages/Gallery/DictionaryCard.tsx
index 3d259b5f..e40eb0c2 100644
--- a/src/pages/Gallery/DictionaryCard.tsx
+++ b/src/pages/Gallery/DictionaryCard.tsx
@@ -1,8 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useEffect, useRef } from 'react'
 import { DictionaryResource } from '@/typings'
 import { useAtom, useSetAtom } from 'jotai'
 import { currentChapterAtom, currentDictIdAtom } from '@/store'
+import { CheckCircleIcon } from '@heroicons/react/20/solid'
 
 const DictionaryCard: React.FC<DictionaryCardProps> = ({ dictionary }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -31,11 +31,7 @@ const DictionaryCard: React.FC<DictionaryCardProps> = ({ dictionary }) => {
       <p className="mb-1 text-xs text-gray-900 dark:text-white dark:text-opacity-90">{dictionary.description}</p>
       <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{dictionary.length} 词</p>
       {currentDictId === dictionary.id ? (
-        <FontAwesomeIcon
-          className="absolute -bottom-4 -right-4 text-6xl text-green-500 opacity-60 dark:text-green-300"
-          icon={['fas', 'check-circle']}
-          fixedWidth
-        />
+        <CheckCircleIcon className="absolute -bottom-4 -right-4 h-18 w-18 text-6xl text-green-500 opacity-60 dark:text-green-300" />
       ) : null}
     </button>
   )
diff --git a/src/pages/Typing/components/PronunciationSwitcher/index.tsx b/src/pages/Typing/components/PronunciationSwitcher/index.tsx
index f5742baa..2b9b89e5 100644
--- a/src/pages/Typing/components/PronunciationSwitcher/index.tsx
+++ b/src/pages/Typing/components/PronunciationSwitcher/index.tsx
@@ -4,10 +4,10 @@ import { currentDictInfoAtom, phoneticConfigAtom, pronunciationConfigAtom } from
 import { useCallback, useEffect, useMemo } from 'react'
 import { Listbox } from '@headlessui/react'
 import { PronunciationType, PRONUNCIATION_PHONETIC_MAP } from '@/typings'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Fragment } from 'react'
 import { Popover, Transition, Switch } from '@headlessui/react'
 import Tooltip from '@/components/Tooltip'
+import { IconChevronDown, IconCheck } from '@tabler/icons-react'
 
 const PronunciationSwitcher = () => {
   const currentDictInfo = useAtomValue(currentDictInfoAtom)
@@ -178,7 +178,7 @@ const PronunciationSwitcher = () => {
                           <Listbox.Button className="listbox-button">
                             <span>{pronunciationConfig.name}</span>
                             <span>
-                              <FontAwesomeIcon icon="chevron-down" fixedWidth className="focus:outline-none " />
+                              <IconChevronDown className="focus:outline-none" />
                             </span>
                           </Listbox.Button>
                           <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
@@ -190,7 +190,7 @@ const PronunciationSwitcher = () => {
                                       <span>{item.name}</span>
                                       {selected ? (
                                         <span className="listbox-options-icon ">
-                                          <FontAwesomeIcon icon="check" fixedWidth className="focus:outline-none" />
+                                          <IconCheck className="focus:outline-none" />
                                         </span>
                                       ) : null}
                                     </>
diff --git a/src/pages/Typing/components/ResultScreen/ConclusionBar.tsx b/src/pages/Typing/components/ResultScreen/ConclusionBar.tsx
index d885dc73..23245fd7 100644
--- a/src/pages/Typing/components/ResultScreen/ConclusionBar.tsx
+++ b/src/pages/Typing/components/ResultScreen/ConclusionBar.tsx
@@ -1,40 +1,37 @@
-import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import classNames from 'classnames'
+import { HeartIcon, HandThumbUpIcon, ExclamationTriangleIcon } from '@heroicons/react/20/solid'
+import { ElementType, SVGAttributes } from 'react'
 
 type IconMapper = {
-  icon: IconProp
+  icon: ElementType<SVGAttributes<SVGSVGElement>>
   className: string
-  size: SizeProp
   text: (mistakeCount: number) => string
 }
 
 const ICON_MAPPER: IconMapper[] = [
   {
-    icon: ['fas', 'heart'],
+    icon: HeartIcon,
     className: 'text-indigo-600',
-    size: 'lg',
     text: (mistakeCount: number) => `表现不错！只错了 ${mistakeCount} 个单词`,
   },
   {
-    icon: ['fas', 'thumbs-up'],
+    icon: HandThumbUpIcon,
     className: 'text-indigo-600',
-    size: 'lg',
     text: () => '有些小问题哦，下一次可以做得更好！',
   },
   {
-    icon: ['fas', 'exclamation-triangle'],
+    icon: ExclamationTriangleIcon,
     className: 'text-indigo-600',
-    size: 'lg',
     text: () => '错误太多，再来一次如何？',
   },
 ]
 
 const ConclusionBar = ({ mistakeLevel, mistakeCount }: ConclusionBarProps) => {
-  const { icon, className, size, text } = ICON_MAPPER[mistakeLevel]
+  const { icon: Icon, className, text } = ICON_MAPPER[mistakeLevel]
 
   return (
     <div className="flex h-10 flex-row items-center">
-      <FontAwesomeIcon icon={icon} className={className} size={size} />
+      <Icon className={classNames(className, 'h-5 w-5')} />
       <span className="ml-2 inline-block align-middle text-sm font-medium leading-10 text-gray-700 sm:text-sm md:text-base">
         {text(mistakeCount)}
       </span>
diff --git a/src/pages/Typing/components/ResultScreen/index.tsx b/src/pages/Typing/components/ResultScreen/index.tsx
index b1bdf08e..ab08b4a0 100644
--- a/src/pages/Typing/components/ResultScreen/index.tsx
+++ b/src/pages/Typing/components/ResultScreen/index.tsx
@@ -5,7 +5,6 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import ConclusionBar from './ConclusionBar'
 import RemarkRing from './RemarkRing'
 import WordChip from './WordChip'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { currentChapterAtom, currentDictInfoAtom, infoPanelStateAtom } from '@/store'
 import { recordOpenInfoPanelAction } from '@/utils'
@@ -13,6 +12,7 @@ import { InfoPanelType } from '@/typings'
 import { TypingContext, TypingStateActionType } from '../../store'
 import ShareButton from '../ShareButton'
 import redBookLogo from '@/assets/redBook-color-logo.svg'
+import { IconX } from '@tabler/icons-react'
 
 const ResultScreen = () => {
   // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
@@ -124,7 +124,7 @@ const ResultScreen = () => {
               {`${currentDictInfo.name} 第 ${currentChapter + 1} 章`}
             </div>
             <button className="absolute right-7 top-5" onClick={exitButtonHandler}>
-              <FontAwesomeIcon icon={['fas', 'times']} className="text-gray-400" size="lg" />
+              <IconX className="text-gray-400" />
             </button>
             <div className="mt-10 flex flex-row gap-2 overflow-hidden">
               <div className="flex flex-shrink-0 flex-grow-0 flex-col gap-3 px-4 sm:px-1 md:px-2 lg:px-4">
@@ -151,31 +151,54 @@ const ResultScreen = () => {
                     handleOpenInfoPanel('redBook')
                     e.currentTarget.blur()
                   }}
-                  className="svg-inline--fa h-5 cursor-pointer fill-current text-gray-50"
+                  className="h-5 cursor-pointer fill-current text-gray-50"
                   alt="red book"
                   style={{ fill: '#6B7280' }}
                 />
 
-                <FontAwesomeIcon
-                  icon={['fas', 'coffee']}
+                <button
                   onClick={(e) => {
                     handleOpenInfoPanel('donate')
                     e.currentTarget.blur()
                   }}
                   className="cursor-pointer text-gray-500 dark:text-gray-400"
-                />
+                  type="button"
+                  title="捐赠我们的项目"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 640 512"
+                    className="h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400"
+                  >
+                    <path d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+                  </svg>
+                </button>
 
-                <FontAwesomeIcon
-                  icon={['fab', 'weixin']}
+                <button
                   onClick={(e) => {
                     handleOpenInfoPanel('community')
                     e.currentTarget.blur()
                   }}
                   className="cursor-pointer text-gray-500 dark:text-gray-400"
-                />
+                  type="button"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 576 512"
+                    className="h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400"
+                  >
+                    <path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z" />
+                  </svg>
+                </button>
 
                 <a href="https://github.com/Kaiyiwing/qwerty-learner" target="_blank" rel="noreferrer" className="leading-[0px]">
-                  <FontAwesomeIcon icon={['fab', 'github']} className="text-gray-500 dark:text-gray-400" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 496 512"
+                    className="h-5.5 w-5.5 fill-current text-gray-500 focus:outline-none dark:text-gray-400"
+                  >
+                    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+                  </svg>
                 </a>
               </div>
             </div>
diff --git a/src/pages/Typing/components/Setting/index.tsx b/src/pages/Typing/components/Setting/index.tsx
index ce32f242..79f4fa1d 100644
--- a/src/pages/Typing/components/Setting/index.tsx
+++ b/src/pages/Typing/components/Setting/index.tsx
@@ -1,10 +1,11 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Dialog, Tab, Transition } from '@headlessui/react'
 import classNames from 'classnames'
 import { Fragment, useContext, useState } from 'react'
 import SoundSetting from './SoundSetting'
 import AdvancedSetting from './AdvancedSetting'
 import { TypingContext, TypingStateActionType } from '../../store'
+import { IconEar, IconAdjustmentsHorizontal, IconX } from '@tabler/icons-react'
+import { Cog6ToothIcon } from '@heroicons/react/24/solid'
 
 export default function Setting() {
   const [isOpen, setIsOpen] = useState(false)
@@ -26,11 +27,11 @@ export default function Setting() {
       <button
         type="button"
         onClick={openModal}
-        className={`flex items-center justify-center rounded p-[2px] py-[3px] text-lg text-indigo-400 outline-none transition-colors duration-300 ease-in-out hover:bg-indigo-400 hover:text-white  ${
+        className={`flex items-center justify-center rounded p-[2px] text-lg text-indigo-400 outline-none transition-colors duration-300 ease-in-out hover:bg-indigo-400 hover:text-white  ${
           isOpen && 'bg-indigo-400 text-white'
         }`}
       >
-        <FontAwesomeIcon icon="gear" fixedWidth className="focus:outline-none" />
+        <Cog6ToothIcon className="icon" />
       </button>
 
       <Transition appear show={isOpen} as={Fragment}>
@@ -61,12 +62,9 @@ export default function Setting() {
                 <Dialog.Panel className="flex w-200 flex-col overflow-hidden rounded-2xl bg-white p-0 shadow-xl dark:bg-gray-800">
                   <div className="relative flex h-22 items-end justify-between rounded-t-lg border-b border-neutral-100 bg-stone-50 px-6 py-3 dark:border-neutral-700 dark:bg-gray-900">
                     <span className="text-3xl font-bold text-gray-600">设置</span>
-                    <FontAwesomeIcon
-                      icon={['fas', 'times']}
-                      className="absolute right-7 top-5 cursor-pointer text-gray-400"
-                      size="lg"
-                      onClick={() => setIsOpen(false)}
-                    />
+                    <button type="button" onClick={() => setIsOpen(false)}>
+                      <IconX className="absolute right-7 top-5 cursor-pointer text-gray-400" />
+                    </button>
                   </div>
 
                   <Tab.Group vertical>
@@ -80,7 +78,7 @@ export default function Setting() {
                             )
                           }
                         >
-                          <FontAwesomeIcon icon="ear-listen" className="mr-2 text-neutral-500  dark:text-neutral-300" size="1x" />
+                          <IconEar className="mr-2 text-neutral-500  dark:text-neutral-300" />
                           <span className="text-neutral-500 dark:text-neutral-300 ">音效设置</span>
                         </Tab>
                         <Tab
@@ -91,7 +89,7 @@ export default function Setting() {
                             )
                           }
                         >
-                          <FontAwesomeIcon icon="sliders" className="mr-2 text-neutral-500  dark:text-neutral-300" size="1x" />
+                          <IconAdjustmentsHorizontal className="mr-2 text-neutral-500  dark:text-neutral-300" />
                           <span className="text-neutral-500 dark:text-neutral-300">高级设置</span>
                         </Tab>
                       </Tab.List>
diff --git a/src/pages/Typing/components/ShareButton/SharePicDialog.tsx b/src/pages/Typing/components/ShareButton/SharePicDialog.tsx
index c023c13d..2bbfe9d2 100644
--- a/src/pages/Typing/components/ShareButton/SharePicDialog.tsx
+++ b/src/pages/Typing/components/ShareButton/SharePicDialog.tsx
@@ -16,7 +16,7 @@ import { TypingContext } from '../../store'
 import { useAtomValue } from 'jotai'
 import { currentChapterAtom, currentDictInfoAtom } from '@/store'
 import { recordShareAction } from '@/utils'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { XMarkIcon } from '@heroicons/react/24/solid'
 
 const PIC_RATIO = 3
 const PIC_LIST = [shareImage1, shareImage2, shareImage3, shareImage4, shareImage5, shareImage6, shareImage7, shareImage8, shareImage9]
@@ -114,7 +114,7 @@ export default function SharePicDialog({ showState, setShowState, randomChoose }
                 <Dialog.Panel className="relative transform overflow-hidden rounded-large bg-white text-left shadow-xl transition-all  dark:bg-gray-700">
                   <div className="flex flex-col items-center justify-center pb-10 pl-20 pr-14 pt-20">
                     <button className="absolute right-7 top-5" onClick={handleClose}>
-                      <FontAwesomeIcon icon={['fas', 'times']} className="text-gray-400" size="lg" />
+                      <XMarkIcon className="h-6 w-6 text-gray-400" />
                     </button>
                     <div className="h-152 w-116">
                       {imageURL ? (
diff --git a/src/pages/Typing/components/ShareButton/index.tsx b/src/pages/Typing/components/ShareButton/index.tsx
index a3b69bec..eb535fe6 100644
--- a/src/pages/Typing/components/ShareButton/index.tsx
+++ b/src/pages/Typing/components/ShareButton/index.tsx
@@ -1,8 +1,8 @@
 import { recordShareAction } from '@/utils'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useCallback, useMemo, useState } from 'react'
 import SharePicDialog from './SharePicDialog'
 import { flip, offset, shift, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
+import { IconShare2 } from '@tabler/icons-react'
 
 export default function ShareButton() {
   const [isShowSharePanel, setIsShowSharePanel] = useState(false)
@@ -35,13 +35,16 @@ export default function ShareButton() {
     <>
       {isShowSharePanel && <SharePicDialog showState={isShowSharePanel} setShowState={setIsShowSharePanel} randomChoose={randomChoose} />}
 
-      <FontAwesomeIcon
+      <button
         ref={refs.setReference}
+        type="button"
         {...getReferenceProps()}
-        icon={['fas', 'share-from-square']}
-        className="ml-[2px] cursor-pointer text-xl text-indigo-400"
+        className="cursor-pointer text-xl text-indigo-400"
         onClick={onClickShare}
-      />
+        title="分享你的成绩给朋友"
+      >
+        <IconShare2 />
+      </button>
 
       {showTranslation && (
         <div
diff --git a/src/pages/Typing/components/SoundSwitcher/index.tsx b/src/pages/Typing/components/SoundSwitcher/index.tsx
index 95860d2c..57106177 100644
--- a/src/pages/Typing/components/SoundSwitcher/index.tsx
+++ b/src/pages/Typing/components/SoundSwitcher/index.tsx
@@ -1,8 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Fragment, useCallback } from 'react'
 import { Popover, Transition, Switch } from '@headlessui/react'
 import { useAtom } from 'jotai'
 import { keySoundsConfigAtom, hintSoundsConfigAtom } from '@/store'
+import { SpeakerWaveIcon } from '@heroicons/react/24/solid'
 
 export default function SoundSwitcher() {
   const [keySoundsConfig, setKeySoundsConfig] = useAtom(keySoundsConfigAtom)
@@ -27,14 +27,14 @@ export default function SoundSwitcher() {
       {({ open }) => (
         <>
           <Popover.Button
-            className={`flex items-center justify-center rounded p-[2px] py-[3px] text-lg text-indigo-400 outline-none transition-colors duration-300 ease-in-out hover:bg-indigo-400 hover:text-white  ${
+            className={`flex items-center justify-center rounded p-[2px] text-lg text-indigo-400 outline-none transition-colors duration-300 ease-in-out hover:bg-indigo-400 hover:text-white  ${
               open ? 'bg-indigo-400 text-white' : ''
             }`}
             onFocus={(e) => {
               e.target.blur()
             }}
           >
-            <FontAwesomeIcon icon="volume-up" fixedWidth className="focus:outline-none" />
+            <SpeakerWaveIcon className="icon" />
           </Popover.Button>
 
           <Transition
diff --git a/src/pages/Typing/components/Switcher/index.tsx b/src/pages/Typing/components/Switcher/index.tsx
index 6e49ebe2..1a2ac16a 100644
--- a/src/pages/Typing/components/Switcher/index.tsx
+++ b/src/pages/Typing/components/Switcher/index.tsx
@@ -1,5 +1,4 @@
 import { useContext } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useHotkeys } from 'react-hotkeys-hook'
 import Tooltip from '@/components/Tooltip'
 import { useAtom } from 'jotai'
@@ -7,6 +6,8 @@ import { isLoopSingleWordAtom, isOpenDarkModeAtom } from '@/store'
 import { TypingContext, TypingStateActionType } from '../../store'
 import SoundSwitcher from '../SoundSwitcher'
 import Setting from '../Setting'
+import { IconRepeatOnce, IconRepeatOff, IconLanguage, IconLanguageOff } from '@tabler/icons-react'
+import { SunIcon, MoonIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid'
 
 export default function Switcher() {
   const [isOpenDarkMode, setIsOpenDarkMode] = useAtom(isOpenDarkModeAtom)
@@ -69,53 +70,53 @@ export default function Switcher() {
   )
 
   return (
-    <div className="flex items-center justify-center space-x-3">
+    <div className="flex items-center justify-center space-x-2">
       <Tooltip content="音效设置">
         <SoundSwitcher />
       </Tooltip>
 
-      <Tooltip content="开关单个单词循环（Ctrl + L）">
+      <Tooltip className="h-7 w-7" content="开关单个单词循环（Ctrl + L）">
         <button
-          className={`${isLoopSingleWord ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
+          className={`p-[2px] ${isLoopSingleWord ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
           onClick={(e) => {
             changeLoopSingleWordState()
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon="repeat" fixedWidth />
+          {isLoopSingleWord ? <IconRepeatOnce /> : <IconRepeatOff />}
         </button>
       </Tooltip>
-      <Tooltip content="开关英语显示（Ctrl + V）">
+      <Tooltip className="h-7 w-7" content="开关英语显示（Ctrl + V）">
         <button
-          className={`${state?.isWordVisible ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
+          className={`p-[2px] ${state?.isWordVisible ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
           onClick={(e) => {
             changeWordVisibleState()
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon={state?.isWordVisible ? 'eye' : 'eye-slash'} fixedWidth />
+          {state?.isWordVisible ? <EyeIcon className="icon" /> : <EyeSlashIcon className="icon" />}
         </button>
       </Tooltip>
-      <Tooltip content="开关释义显示（Ctrl + T）">
+      <Tooltip className="h-7 w-7" content="开关释义显示（Ctrl + T）">
         <button
-          className={`${state?.isTransVisible ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
+          className={`p-[2px] ${state?.isTransVisible ? 'text-indigo-400' : 'text-gray-400'} text-lg focus:outline-none`}
           onClick={(e) => {
             changeTransVisibleState()
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon="earth-americas" fixedWidth />
+          {state?.isTransVisible ? <IconLanguage /> : <IconLanguageOff />}
         </button>
       </Tooltip>
-      <Tooltip content="开关深色模式（Ctrl + D）">
+      <Tooltip className="h-7 w-7" content="开关深色模式（Ctrl + D）">
         <button
-          className={`text-lg text-indigo-400 focus:outline-none`}
+          className={`p-[2px] text-lg text-indigo-400 focus:outline-none`}
           onClick={(e) => {
             changeDarkModeState()
             e.currentTarget.blur()
           }}
         >
-          <FontAwesomeIcon icon={isOpenDarkMode ? 'moon' : 'sun'} fixedWidth />
+          {isOpenDarkMode ? <MoonIcon className="icon" /> : <SunIcon className="icon" />}
         </button>
       </Tooltip>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 064fc29a..b1a411ed 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,9 @@ module.exports = {
         md: '0.375rem',
       },
       width: {
+        3.5: '0.875rem',
+        5.5: '1.375rem',
+        15: '3.75rem',
         18: '4.5rem',
         70: '17.5rem',
         75: '18.75rem',
@@ -26,6 +29,9 @@ module.exports = {
         200: '50rem',
       },
       height: {
+        3.5: '0.875rem',
+        5.5: '1.375rem',
+        15: '3.75rem',
         18: '4.5rem',
         22: '5.5rem',
         112: '28rem',
diff --git a/yarn.lock b/yarn.lock
index 210e3537..72558b10 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1218,46 +1218,6 @@
     aria-hidden "^1.1.3"
     tabbable "^6.0.1"
 
-"@fortawesome/fontawesome-common-types@6.4.0":
-  version "6.4.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
-  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
-
-"@fortawesome/fontawesome-svg-core@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
-  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-brands-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f"
-  integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-regular-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
-  integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-solid-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
-  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/react-fontawesome@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.npmmirror.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
-  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
-  dependencies:
-    prop-types "^15.8.1"
-
 "@headlessui/react@^1.7.13":
   version "1.7.13"
   resolved "https://registry.npmmirror.com/@headlessui/react/-/react-1.7.13.tgz#fd150b394954e9f1d86ed2340cffd1217d6e7628"
@@ -1270,6 +1230,11 @@
   resolved "https://registry.npmmirror.com/@headlessui/tailwindcss/-/tailwindcss-0.1.2.tgz#f49a88f00b235fe812583ece8bdb1038b096646d"
   integrity sha512-AQNESz+f1grCxifrocOE6hDMDFqhqY0g3xrSGOS0ocGkmVkssaBzXaAPAPNSs/nHmr4ZUhfl5THQpYrvaouWlQ==
 
+"@heroicons/react@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.17.tgz#42a8086bc434ceefc03592f20c4e81b11e915cf8"
+  integrity sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -1484,6 +1449,19 @@
   resolved "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
+"@tabler/icons-react@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.16.0.tgz#9944fc966beaaed73f195b61ebaa587cb6d0ddc6"
+  integrity sha512-WwVjPzwvChmaQfhOjaVPyUjHeUosP2G1kqG6RfSkOWWiGx46nfZG7ekuBDidXuvMdTP1o2iC9JJIGm6mz3k5Uw==
+  dependencies:
+    "@tabler/icons" "2.16.0"
+    prop-types "^15.7.2"
+
+"@tabler/icons@2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.16.0.tgz#fd7eb6ab7c9578abd8883b018387db141e2289aa"
+  integrity sha512-1kaPH5APIWGtXe0W0eQ9g4MdfaQJ2gh95TAa94lNAqRR0JeC3fkD0yXGCcUiNK4GnGDv3UtPSCd3dbdKTe1b2A==
+
 "@tailwindcss/postcss7-compat@^2.2.17":
   version "2.2.17"
   resolved "https://registry.npmmirror.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.17.tgz#dc78f3880a2af84163150ff426a39e42b9ae8922"
@@ -4333,7 +4311,7 @@ promise@^8.1.0:
   dependencies:
     asap "~2.0.6"
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmmirror.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5321,6 +5299,11 @@ yargs@^17.5.1:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
+yarn@^1.22.19:
+  version "1.22.19"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"