diff --git a/bun.lockb b/bun.lockb
index 31bd2de..f788c28 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 0562b69..d4328e2 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.5",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/src/components/docs-footer.tsx b/src/components/docs-footer.tsx
index c2f9415..f5e7d47 100644
--- a/src/components/docs-footer.tsx
+++ b/src/components/docs-footer.tsx
@@ -3,10 +3,10 @@
 import { ReactElement, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 import { Separator } from "@/components/ui/separator";
 import { DateTime } from "luxon";
 import SimpleTooltip from "@/components/simple-tooltip";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 const DocsFooter = ({
     pages,
@@ -62,7 +62,7 @@ const DocsFooter = ({
                         href={`/${previous.slug}` || "#"}
                         draggable={false}
                     >
-                        <ChevronLeftIcon className="pb-1 w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
+                        <ChevronLeft className="pb-1 w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
                         <div className="flex flex-col">
                             <h1 className="text-sm opacity-75">Previous</h1>
                             <p>{previous.title}</p>
@@ -81,7 +81,7 @@ const DocsFooter = ({
                             <h1 className="text-sm opacity-75">Next</h1>
                             <p>{next.title}</p>
                         </div>
-                        <ChevronRightIcon className="pb-1 w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                        <ChevronRight className="pb-1 w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
                     </Link>
                 )}
             </div>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index bdcfb56..0899ddc 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -4,11 +4,8 @@ import { ReactElement, ReactNode } from "react";
 import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
 import Link from "next/link";
 import Image from "next/image";
-import {
-    ArrowTopRightOnSquareIcon,
-    EnvelopeIcon,
-} from "@heroicons/react/24/outline";
 import { cn } from "@/lib/utils";
+import { ExternalLink, Mail } from "lucide-react";
 
 const links = {
     Resources: [
@@ -69,9 +66,7 @@ const Footer = (): ReactElement => (
                         />
                         <SocialLink
                             name="Email"
-                            logo={
-                                <EnvelopeIcon className="opacity-95 w-6 h-6" />
-                            }
+                            logo={<Mail className="opacity-95 w-6 h-6" />}
                             href="mailto:support@pulseapp.cc"
                         />
                     </div>
@@ -187,7 +182,7 @@ const FooterLink = ({
                 {name}
             </span>
             {shortName && <span className="flex sm:hidden">{shortName}</span>}
-            {external && <ArrowTopRightOnSquareIcon className="w-3.5 h-3.5" />}
+            {external && <ExternalLink className="w-3.5 h-3.5" />}
         </Link>
     );
 };
diff --git a/src/components/navbar/search-dialog.tsx b/src/components/navbar/search-dialog.tsx
index 121576c..f4f45be 100644
--- a/src/components/navbar/search-dialog.tsx
+++ b/src/components/navbar/search-dialog.tsx
@@ -9,10 +9,10 @@ import {
     CommandItem,
     CommandList,
 } from "@/components/ui/command";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Input } from "@/components/ui/input";
 import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { Search } from "lucide-react";
 
 /**
  * The dialog for quickly searching the docs.
@@ -53,7 +53,7 @@ const QuickSearchDialog = ({
                 onClick={() => setOpen(true)}
             >
                 <div className="absolute top-2.5 left-3 z-10">
-                    <MagnifyingGlassIcon className="w-[1.15rem] h-[1.15rem]" />
+                    <Search className="w-[1.15rem] h-[1.15rem]" />
                 </div>
 
                 <Input
diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index e13aefd..5bd255f 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -1,17 +1,13 @@
 "use client";
 
 import { ReactElement, useEffect, useRef, useState } from "react";
-import {
-    ArrowLongRightIcon,
-    ArrowLongUpIcon,
-    Bars3CenterLeftIcon,
-} from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { truncateText } from "@/lib/string";
 import { motion, useInView } from "framer-motion";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
+import { AlignLeftIcon, ArrowUpFromDot, MoveRight } from "lucide-react";
 
 type Header = {
     id: string;
@@ -90,7 +86,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
         >
             {/* Title */}
             <div className="flex gap-2.5 items-center">
-                <Bars3CenterLeftIcon className="w-5 h-5" />
+                <AlignLeftIcon className="w-5 h-5" />
                 <h1>On This Page</h1>
             </div>
 
@@ -157,7 +153,7 @@ const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                 draggable={false}
             >
                 <span>Edit this page on GitHub</span>
-                <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                <MoveRight className="w-4 h-4 group-hover:translate-x-px transition-all transform-gpu" />
             </Link>
 
             {/* Scroll to Top */}
@@ -177,7 +173,7 @@ const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => {
                     }
                 >
                     <span>Scroll to Top</span>
-                    <ArrowLongUpIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                    <ArrowUpFromDot className="w-4 h-4 group-hover:-translate-y-px transition-all transform-gpu" />
                 </Button>
             </div>
         </footer>
diff --git a/src/components/sidebar/sidebar-links.tsx b/src/components/sidebar/sidebar-links.tsx
index 0ca3459..68a3a0b 100644
--- a/src/components/sidebar/sidebar-links.tsx
+++ b/src/components/sidebar/sidebar-links.tsx
@@ -11,7 +11,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { AnimatePresence, motion } from "framer-motion";
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronRight } from "lucide-react";
 
 const SidebarLinks = ({
     pages,
@@ -86,7 +86,7 @@ const CategoryItem = ({
                                     animate={{ rotate: isOpen ? 90 : 180 }}
                                     transition={{ duration: 0.2 }}
                                 >
-                                    <ChevronRightIcon className="w-4 h-4" />
+                                    <ChevronRight className="w-4 h-4" />
                                 </motion.div>
                             )}
                         </Button>
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 3d1205d..70e1520 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -5,7 +5,7 @@ import SidebarLinks from "@/components/sidebar/sidebar-links";
 import ThemeSwitcher from "@/components/theme-switcher";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
-import { Bars3BottomRightIcon } from "@heroicons/react/24/outline";
+import { AlignRightIcon } from "lucide-react";
 
 const Sidebar = (): ReactElement => (
     <>
@@ -13,7 +13,7 @@ const Sidebar = (): ReactElement => (
         <div className="xs:hidden">
             <Sheet>
                 <SheetTrigger className="flex items-center">
-                    <Bars3BottomRightIcon className="w-6 h-6" />
+                    <AlignRightIcon className="w-6 h-6" />
                 </SheetTrigger>
                 <SheetContent className="h-full px-5 pt-11" side="right">
                     <SidebarContent />