diff --git a/package.json b/package.json
index 21f618b5f..d022bb9f2 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "sideEffects": false,
   "repository": "https://github.com/TanStack/tanstack.com.git",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@10.26.0",
   "type": "module",
   "scripts": {
     "dev": "pnpm run with-env vite dev",
@@ -59,12 +59,12 @@
     "hast-util-to-string": "^3.0.1",
     "html-react-parser": "^5.1.10",
     "lru-cache": "^7.13.1",
+    "lucide-react": "^0.561.0",
     "mermaid": "^11.11.0",
     "postgres": "^3.4.7",
     "react": "^19.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^19.2.0",
-    "react-icons": "^5.3.0",
     "react-instantsearch": "7",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-callouts": "^2.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c4ac35f19..aa98532d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,6 +125,9 @@ importers:
       lru-cache:
         specifier: ^7.13.1
         version: 7.18.3
+      lucide-react:
+        specifier: ^0.561.0
+        version: 0.561.0(react@19.2.0)
       mermaid:
         specifier: ^11.11.0
         version: 11.11.0
@@ -140,9 +143,6 @@ importers:
       react-dom:
         specifier: ^19.2.0
         version: 19.2.0(react@19.2.0)
-      react-icons:
-        specifier: ^5.3.0
-        version: 5.3.0(react@19.2.0)
       react-instantsearch:
         specifier: '7'
         version: 7.15.5(algoliasearch@5.23.4)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -5157,6 +5157,11 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  lucide-react@0.561.0:
+    resolution: {integrity: sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   luxon@3.5.0:
     resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
     engines: {node: '>=12'}
@@ -5898,11 +5903,6 @@ packages:
     peerDependencies:
       react: ^19.2.0
 
-  react-icons@5.3.0:
-    resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
-    peerDependencies:
-      react: '*'
-
   react-instantsearch-core@7.15.5:
     resolution: {integrity: sha512-SFxiwwMf0f5F/8U0Y4ullvQ7bZtbYE516UOJbxaHhjV8yY0i8c22K4lrBFrYbxVRT7QAcp2wLGHiB7r/lD7eRA==}
     peerDependencies:
@@ -12439,6 +12439,10 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  lucide-react@0.561.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   luxon@3.5.0: {}
 
   magic-string@0.30.17:
@@ -13341,10 +13345,6 @@ snapshots:
       react: 19.2.0
       scheduler: 0.27.0
 
-  react-icons@5.3.0(react@19.2.0):
-    dependencies:
-      react: 19.2.0
-
   react-instantsearch-core@7.15.5(algoliasearch@5.23.4)(react@19.2.0):
     dependencies:
       '@babel/runtime': 7.24.5
diff --git a/src/components/CodeExplorerTopBar.tsx b/src/components/CodeExplorerTopBar.tsx
index b998ca205..94aedc329 100644
--- a/src/components/CodeExplorerTopBar.tsx
+++ b/src/components/CodeExplorerTopBar.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
-import { FaExpand, FaCompress } from 'react-icons/fa'
-import { CgMenuLeft } from 'react-icons/cg'
+import {
+  ArrowLeftFromLine,
+  ArrowRightFromLine,
+  Maximize,
+  Minimize,
+  TextAlignStart,
+} from 'lucide-react'
 
 interface CodeExplorerTopBarProps {
   activeTab: 'code' | 'sandbox'
@@ -23,16 +28,26 @@ export function CodeExplorerTopBar({
     <div className="flex items-center justify-between gap-2 border-b border-gray-200 dark:border-gray-700">
       <div className="flex items-center gap-2 px-1">
         {activeTab === 'code' ? (
-          <button
-            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-            className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-            title={isSidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
-          >
-            <CgMenuLeft className="w-4 h-4" />
-          </button>
+          isSidebarOpen ? (
+            <button
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              title={'Hide sidebar'}
+            >
+              <ArrowLeftFromLine className="w-4 h-4" />
+            </button>
+          ) : (
+            <button
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              title={'Show sidebar'}
+            >
+              <ArrowRightFromLine className="w-4 h-4" />
+            </button>
+          )
         ) : (
           <div className="p-2 text-sm rounded" aria-hidden>
-            <CgMenuLeft className="w-4 h-4 text-transparent" aria-hidden />
+            <TextAlignStart className="w-4 h-4 text-transparent" aria-hidden />
           </div>
         )}
         <button
@@ -81,9 +96,9 @@ export function CodeExplorerTopBar({
           title={isFullScreen ? 'Exit full screen' : 'Enter full screen'}
         >
           {isFullScreen ? (
-            <FaCompress className="w-4 h-4" />
+            <Minimize className="w-4 h-4" />
           ) : (
-            <FaExpand className="w-4 h-4" />
+            <Maximize className="w-4 h-4" />
           )}
         </button>
       </div>
diff --git a/src/components/CopyMarkdownButton.tsx b/src/components/CopyMarkdownButton.tsx
index 04062db22..21f68c895 100644
--- a/src/components/CopyMarkdownButton.tsx
+++ b/src/components/CopyMarkdownButton.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useState, useTransition } from 'react'
-import { FaCheck, FaCopy } from 'react-icons/fa'
 
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useToast } from '~/components/ToastProvider'
+import { Check, Copy } from 'lucide-react'
 
 export function useCopyButton(
   onCopy: () => void | Promise<void>,
@@ -115,11 +115,11 @@ export function CopyMarkdownButton({
       <div className="flex gap-2 items-center">
         {checked ? (
           <>
-            <FaCheck className="w-3 h-3" /> Copied to Clipboard
+            <Check className="w-3 h-3" /> Copied to Clipboard
           </>
         ) : (
           <>
-            <FaCopy className="w-3 h-3" /> Copy Markdown
+            <Copy className="w-3 h-3" /> Copy Markdown
           </>
         )}
       </div>
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index 488fa8333..88f7d6114 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react'
-import {
-  BsArrowsCollapseVertical,
-  BsArrowsExpandVertical,
-} from 'react-icons/bs'
-import { FaEdit } from 'react-icons/fa'
+import { FoldHorizontal, SquarePen, UnfoldHorizontal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useWidthToggle } from '~/components/DocsLayout'
 import { DocTitle } from '~/components/DocTitle'
@@ -146,9 +142,9 @@ function DocContent({
                     title={isFullWidth ? 'Constrain width' : 'Expand width'}
                   >
                     {isFullWidth ? (
-                      <BsArrowsCollapseVertical className="w-4 h-4" />
+                      <FoldHorizontal className="w-4 h-4" />
                     ) : (
-                      <BsArrowsExpandVertical className="w-4 h-4" />
+                      <UnfoldHorizontal className="w-4 h-4" />
                     )}
                   </button>
                 )}
@@ -186,7 +182,7 @@ function DocContent({
               href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
               className="flex items-center gap-2"
             >
-              <FaEdit /> Edit on GitHub
+              <SquarePen size={16} /> Edit on GitHub
             </a>
           </div>
           <div className="h-24" />
diff --git a/src/components/DocFeedbackFloatingButton.tsx b/src/components/DocFeedbackFloatingButton.tsx
index 60e5cb978..75d2b9a5a 100644
--- a/src/components/DocFeedbackFloatingButton.tsx
+++ b/src/components/DocFeedbackFloatingButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FaPlus, FaComment, FaLightbulb } from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
+import { Lightbulb, MessageSquare, Plus } from 'lucide-react'
 
 interface DocFeedbackFloatingButtonProps {
   onAddNote: () => void
@@ -111,7 +111,7 @@ export function DocFeedbackFloatingButton({
         )}
         title="Add feedback"
       >
-        <FaPlus
+        <Plus
           className={twMerge(
             'text-[10px] transition-transform duration-200',
             isMenuOpen && 'rotate-45',
@@ -128,7 +128,7 @@ export function DocFeedbackFloatingButton({
                 onClick={handleNoteClick}
                 className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
               >
-                <FaComment className="text-blue-500" />
+                <MessageSquare className="text-blue-500" />
                 <div>
                   <div className="font-medium text-sm text-gray-900 dark:text-white">
                     Add Note
@@ -148,7 +148,7 @@ export function DocFeedbackFloatingButton({
               onClick={handleFeedbackClick}
               className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
             >
-              <FaLightbulb className="text-yellow-500" />
+              <Lightbulb className="text-yellow-500" />
               <div>
                 <div className="font-medium text-sm text-gray-900 dark:text-white">
                   Suggest Improvement
diff --git a/src/components/DocFeedbackNote.tsx b/src/components/DocFeedbackNote.tsx
index cc1e4b5d3..b8220a8a2 100644
--- a/src/components/DocFeedbackNote.tsx
+++ b/src/components/DocFeedbackNote.tsx
@@ -1,22 +1,21 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import {
-  FaComment,
-  FaLightbulb,
-  FaTrash,
-  FaChevronDown,
-  FaChevronUp,
-  FaSave,
-  FaTimes,
-} from 'react-icons/fa'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   deleteDocFeedback,
   updateDocFeedback,
   updateDocFeedbackCollapsed,
 } from '~/utils/docFeedback.functions'
-import { useToast } from '~/components/ToastProvider'
 import type { DocFeedback } from '~/db/schema'
+import {
+  ChevronDown,
+  ChevronUp,
+  Lightbulb,
+  MessageSquare,
+  Save,
+  Trash,
+  X,
+} from 'lucide-react'
 
 interface DocFeedbackNoteProps {
   note: DocFeedback
@@ -42,13 +41,13 @@ export function DocFeedbackNote({
 
   // Theme based on type
   const isImprovement = note.type === 'improvement'
-  const Icon = isImprovement ? FaLightbulb : FaComment
+  const Icon = isImprovement ? Lightbulb : MessageSquare
   const colors = isImprovement
     ? {
         bg: 'bg-yellow-50 dark:bg-yellow-900/20',
         border: 'border-yellow-400 dark:border-yellow-600',
         header: 'bg-yellow-100 dark:bg-yellow-900/30',
-        icon: 'text-yellow-600 dark:text-yellow-500',
+        icon: 'text-yellow-600 dark:text-yellow-500 text-[14px]',
         text: 'text-yellow-800 dark:text-yellow-300',
         timestamp: 'text-yellow-700 dark:text-yellow-400',
         deleteHover: 'hover:text-yellow-600 dark:hover:text-yellow-400',
@@ -57,7 +56,7 @@ export function DocFeedbackNote({
         bg: 'bg-blue-50 dark:bg-blue-900/20',
         border: 'border-blue-400 dark:border-blue-600',
         header: 'bg-blue-100 dark:bg-blue-900/30',
-        icon: 'text-blue-600 dark:text-blue-500',
+        icon: 'text-blue-600 dark:text-blue-500 text-[14px]',
         text: 'text-blue-800 dark:text-blue-300',
         timestamp: 'text-blue-700 dark:text-blue-400',
         deleteHover: 'hover:text-blue-600 dark:hover:text-blue-400',
@@ -377,7 +376,7 @@ export function DocFeedbackNote({
                     title={isImprovement ? 'Delete improvement' : 'Delete note'}
                     disabled={isDeleting || isSaving}
                   >
-                    <FaTrash className="text-xs" />
+                    <Trash className="text-xs" />
                   </button>
                 </>
               )}
@@ -394,9 +393,9 @@ export function DocFeedbackNote({
                 }
               >
                 {note.isCollapsed ? (
-                  <FaChevronDown className="text-xs" />
+                  <ChevronDown className="text-xs" />
                 ) : (
-                  <FaChevronUp className="text-xs" />
+                  <ChevronUp className="text-xs" />
                 )}
               </button>
             </div>
@@ -444,7 +443,7 @@ export function DocFeedbackNote({
                   )}
                   disabled={isSaving}
                 >
-                  <FaSave className="text-[10px]" />
+                  <Save className="text-[10px]" />
                   {isSaving ? 'Saving...' : 'Save'}
                 </button>
                 <button
@@ -452,7 +451,7 @@ export function DocFeedbackNote({
                   className="px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white disabled:opacity-50"
                   disabled={isSaving}
                 >
-                  <FaTimes className="inline text-[10px] mr-1" />
+                  <X className="inline text-[10px] mr-1" />
                   Cancel
                 </button>
               </div>
diff --git a/src/components/DocFeedbackProvider.tsx b/src/components/DocFeedbackProvider.tsx
index 3ca046c08..a0a6cde08 100644
--- a/src/components/DocFeedbackProvider.tsx
+++ b/src/components/DocFeedbackProvider.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { twMerge } from 'tailwind-merge'
-import { FaComment, FaLightbulb } from 'react-icons/fa'
 import { DocFeedbackNote } from './DocFeedbackNote'
 import { DocFeedbackFloatingButton } from './DocFeedbackFloatingButton'
 import { getDocFeedbackForPageQueryOptions } from '~/queries/docFeedback'
@@ -13,6 +12,7 @@ import {
   getBlockIdentifier,
 } from '~/utils/docFeedback.client'
 import type { DocFeedback } from '~/db/schema'
+import { Lightbulb, MessageSquare } from 'lucide-react'
 
 interface DocFeedbackProviderProps {
   children: React.ReactNode
@@ -536,21 +536,21 @@ function CreatingFeedbackNote({
 
   // Theme based on type
   const isImprovement = type === 'improvement'
-  const Icon = isImprovement ? FaLightbulb : FaComment
+  const Icon = isImprovement ? Lightbulb : MessageSquare
 
   const colors = isImprovement
     ? {
         bg: 'bg-yellow-50 dark:bg-yellow-900/20',
         border: 'border-yellow-400 dark:border-yellow-600',
         header: 'bg-yellow-100 dark:bg-yellow-900/30',
-        icon: 'text-yellow-600 dark:text-yellow-500',
+        icon: 'text-yellow-600 dark:text-yellow-500 text-[14px]',
         text: 'text-yellow-800 dark:text-yellow-300',
       }
     : {
         bg: 'bg-blue-50 dark:bg-blue-900/20',
         border: 'border-blue-400 dark:border-blue-600',
         header: 'bg-blue-100 dark:bg-blue-900/30',
-        icon: 'text-blue-600 dark:text-blue-500',
+        icon: 'text-blue-600 dark:text-blue-500 text-[14px]',
         text: 'text-blue-800 dark:text-blue-300',
       }
 
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
index 68d7e155b..9a10df7c2 100644
--- a/src/components/DocsLayout.tsx
+++ b/src/components/DocsLayout.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { CgClose, CgMenuLeft } from 'react-icons/cg'
-import { FaArrowLeft, FaArrowRight, FaDiscord, FaGithub } from 'react-icons/fa'
+import { X, TextAlignStart, ArrowLeft, ArrowRight } from 'lucide-react'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { Link, useMatches, useParams } from '@tanstack/react-router'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { last } from '~/utils/utils'
@@ -79,7 +80,7 @@ const useMenuConfig = ({
       {
         label: (
           <div className="flex items-center gap-2">
-            GitHub <FaGithub className="text-lg opacity-20" />
+            GitHub <GithubIcon className="opacity-20" />
           </div>
         ),
         to: `https://github.com/${repo}`,
@@ -87,7 +88,7 @@ const useMenuConfig = ({
       {
         label: (
           <div className="flex items-center gap-2">
-            Discord <FaDiscord className="text-lg opacity-20" />
+            Discord <DiscordIcon className="text-lg opacity-20" />
           </div>
         ),
         to: 'https://tlinz.com/discord',
@@ -140,14 +141,11 @@ type DocsLayoutProps = {
 }
 
 export function DocsLayout({
-  name,
-  version,
   colorFrom,
   colorTo,
   textColor,
   config,
   frameworks,
-  versions,
   repo,
   children,
 }: DocsLayoutProps) {
@@ -155,8 +153,6 @@ export function DocsLayout({
     from: '/$libraryId/$version/docs',
   })
   const { _splat } = useParams({ strict: false })
-  // const frameworkConfig = useFrameworkConfig({ frameworks })
-  // const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
 
   const matches = useMatches()
@@ -292,8 +288,8 @@ export function DocsLayout({
       >
         <summary className="py-2 px-4 flex gap-2 items-center justify-between">
           <div className="flex-1 flex gap-4 items-center">
-            <CgMenuLeft className="icon-open cursor-pointer" />
-            <CgClose className="icon-close cursor-pointer" />
+            <TextAlignStart className="icon-open cursor-pointer" size={16} />
+            <X className="icon-close cursor-pointer" size={16} />
             Documentation
           </div>
         </summary>
@@ -363,7 +359,7 @@ export function DocsLayout({
                   className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
                 >
                   <div className="flex gap-2 items-center font-bold">
-                    <FaArrowLeft />
+                    <ArrowLeft size={16} />
                     {prevItem.label}
                   </div>
                 </Link>
@@ -383,7 +379,7 @@ export function DocsLayout({
                     >
                       {nextItem.label}
                     </span>{' '}
-                    <FaArrowRight className={textColor} />
+                    <ArrowRight className={textColor} size={16} />
                   </div>
                 </Link>
               ) : null}
diff --git a/src/components/FeatureGrid.tsx b/src/components/FeatureGrid.tsx
index ac332652e..df1b44434 100644
--- a/src/components/FeatureGrid.tsx
+++ b/src/components/FeatureGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FaCheckCircle } from 'react-icons/fa'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
 
 type FeatureGridProps = {
   title?: string
@@ -25,7 +25,7 @@ export function FeatureGrid({ title, items, gridClassName }: FeatureGridProps) {
       >
         {items.map((d, i) => (
           <span key={i} className="flex items-center gap-2">
-            <FaCheckCircle className="text-green-500 " /> {d}
+            <CheckCircleIcon className="text-green-500 " /> {d}
           </span>
         ))}
       </div>
diff --git a/src/components/FeedEntry.tsx b/src/components/FeedEntry.tsx
index 80a5e1b18..b90a36844 100644
--- a/src/components/FeedEntry.tsx
+++ b/src/components/FeedEntry.tsx
@@ -3,9 +3,9 @@ import { Markdown } from '~/components/Markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'
-import { FaEdit, FaTrash, FaEye, FaEyeSlash, FaStar } from 'react-icons/fa'
 import { Link } from '@tanstack/react-router'
 import { TableRow, TableCell } from '~/components/TableComponents'
+import { Eye, EyeOff, SquarePen, Star, Trash } from 'lucide-react'
 
 export interface FeedEntry {
   _id: string
@@ -303,7 +303,7 @@ export function FeedEntry({
                   className="p-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
                   title="Edit"
                 >
-                  <FaEdit className="w-3 h-3" />
+                  <SquarePen className="w-3 h-3" />
                 </button>
               )}
               {adminActions.onToggleVisibility && (
@@ -315,9 +315,9 @@ export function FeedEntry({
                   title={entry.isVisible ? 'Hide' : 'Show'}
                 >
                   {entry.isVisible ? (
-                    <FaEye className="w-3 h-3" />
+                    <Eye className="w-3 h-3" />
                   ) : (
-                    <FaEyeSlash className="w-3 h-3" />
+                    <EyeOff className="w-3 h-3" />
                   )}
                 </button>
               )}
@@ -333,7 +333,7 @@ export function FeedEntry({
                   }`}
                   title="Toggle Featured"
                 >
-                  <FaStar className="w-3 h-3" />
+                  <Star className="w-3 h-3" />
                 </button>
               )}
               {adminActions.onDelete && (
@@ -342,7 +342,7 @@ export function FeedEntry({
                   className="p-0.5 hover:bg-red-100 dark:hover:bg-red-900 rounded transition-colors text-red-500"
                   title="Delete"
                 >
-                  <FaTrash className="w-3 h-3" />
+                  <Trash className="w-3 h-3" />
                 </button>
               )}
             </div>
diff --git a/src/components/FeedEntryTimeline.tsx b/src/components/FeedEntryTimeline.tsx
index 5fd745bd3..70d97780a 100644
--- a/src/components/FeedEntryTimeline.tsx
+++ b/src/components/FeedEntryTimeline.tsx
@@ -4,9 +4,9 @@ import { Markdown } from '~/components/Markdown'
 import { libraries } from '~/libraries'
 import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'
-import { FaEdit, FaTrash, FaEye, FaEyeSlash, FaStar } from 'react-icons/fa'
 import { FeedEntry } from './FeedEntry'
 import { Link } from '@tanstack/react-router'
+import { Eye, EyeOff, SquarePen, Star, Trash } from 'lucide-react'
 
 interface FeedEntryTimelineProps {
   entry: FeedEntry
@@ -250,7 +250,7 @@ export function FeedEntryTimeline({
                 className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-gray-600 dark:text-gray-400"
                 title="Edit"
               >
-                <FaEdit className="w-4 h-4" />
+                <SquarePen className="w-4 h-4" />
               </button>
             )}
             {adminActions.onToggleVisibility && (
@@ -262,9 +262,9 @@ export function FeedEntryTimeline({
                 title={entry.isVisible ? 'Hide' : 'Show'}
               >
                 {entry.isVisible ? (
-                  <FaEye className="w-4 h-4" />
+                  <Eye className="w-4 h-4" />
                 ) : (
-                  <FaEyeSlash className="w-4 h-4" />
+                  <EyeOff className="w-4 h-4" />
                 )}
               </button>
             )}
@@ -281,7 +281,7 @@ export function FeedEntryTimeline({
                 )}
                 title="Toggle Featured"
               >
-                <FaStar className="w-4 h-4" />
+                <Star className="w-4 h-4" />
               </button>
             )}
             {adminActions.onDelete && (
@@ -290,7 +290,7 @@ export function FeedEntryTimeline({
                 className="p-2 hover:bg-red-100 dark:hover:bg-red-900 rounded transition-colors text-red-500"
                 title="Delete"
               >
-                <FaTrash className="w-4 h-4" />
+                <Trash className="w-4 h-4" />
               </button>
             )}
           </div>
diff --git a/src/components/FeedFilters.tsx b/src/components/FeedFilters.tsx
index edabfcdc7..deae897b8 100644
--- a/src/components/FeedFilters.tsx
+++ b/src/components/FeedFilters.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { LuHelpCircle, LuRotateCcw } from 'react-icons/lu'
+import { RotateCcw } from 'lucide-react'
 import { useDebouncedValue } from '@tanstack/react-pacer'
 import { Library, type LibraryId } from '~/libraries'
 import { partners } from '~/utils/partners'
-import { Tooltip } from '~/components/Tooltip'
 import {
   FEED_CATEGORIES,
   RELEASE_LEVELS,
@@ -477,7 +476,7 @@ export function FeedFilters({
             onClick={onClearFilters}
             className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors"
           >
-            <LuRotateCcw className="w-3.5 h-3.5" />
+            <RotateCcw className="w-3.5 h-3.5" />
             <span>Reset Filters</span>
           </button>
         </div>
diff --git a/src/components/FeedbackLeaderboard.tsx b/src/components/FeedbackLeaderboard.tsx
index 1e747e638..0f9a7b051 100644
--- a/src/components/FeedbackLeaderboard.tsx
+++ b/src/components/FeedbackLeaderboard.tsx
@@ -14,7 +14,7 @@ import {
 } from './TableComponents'
 import { PaginationControls } from './PaginationControls'
 import { twMerge } from 'tailwind-merge'
-import { FaTrophy, FaMedal, FaAward } from 'react-icons/fa'
+import { Award, Medal, Trophy } from 'lucide-react'
 
 export function FeedbackLeaderboard() {
   const navigate = useNavigate({ from: '/_libraries/feedback-leaderboard' })
@@ -67,9 +67,9 @@ export function FeedbackLeaderboard() {
   }
 
   const getRankIcon = (rank: number) => {
-    if (rank === 1) return <FaTrophy className="text-yellow-500" />
-    if (rank === 2) return <FaMedal className="text-gray-400" />
-    if (rank === 3) return <FaMedal className="text-amber-600" />
+    if (rank === 1) return <Trophy className="text-yellow-500" size={14} />
+    if (rank === 2) return <Medal className="text-gray-400" size={14} />
+    if (rank === 3) return <Medal className="text-amber-600" size={14} />
     return null
   }
 
@@ -79,7 +79,7 @@ export function FeedbackLeaderboard() {
       <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <div className="flex items-center gap-3 mb-2">
-            <FaAward className="text-3xl text-blue-500" />
+            <Award className="text-3xl text-blue-500" />
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
               Documentation Feedback Leaderboard
             </h1>
diff --git a/src/components/FeedbackModerationList.tsx b/src/components/FeedbackModerationList.tsx
index aa7e32511..45f4d973d 100644
--- a/src/components/FeedbackModerationList.tsx
+++ b/src/components/FeedbackModerationList.tsx
@@ -1,12 +1,5 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import {
-  FaCheck,
-  FaTimes,
-  FaComment,
-  FaLightbulb,
-  FaExclamationTriangle,
-} from 'react-icons/fa'
 import {
   Table,
   TableHeader,
@@ -20,6 +13,8 @@ import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/schema'
 import { calculatePoints } from '~/utils/docFeedback.client'
+import { Check, Lightbulb, TriangleAlert } from 'lucide-react'
+import { MessageSquare, X } from 'lucide-react'
 
 interface FeedbackModerationListProps {
   data:
@@ -174,9 +169,9 @@ export function FeedbackModerationList({
                   <TableCell>
                     <div className="flex items-center gap-2">
                       {feedback.type === 'note' ? (
-                        <FaComment className="text-blue-500" />
+                        <MessageSquare className="text-blue-500" size={14} />
                       ) : (
-                        <FaLightbulb className="text-yellow-500" />
+                        <Lightbulb className="text-yellow-500" size={14} />
                       )}
                       <span className="text-xs">
                         {feedback.type === 'note' ? 'Note' : 'Improvement'}
@@ -213,7 +208,7 @@ export function FeedbackModerationList({
                     </span>
                     {feedback.isDetached && (
                       <div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400 mt-1">
-                        <FaExclamationTriangle />
+                        <TriangleAlert size={12} />
                         Detached
                       </div>
                     )}
@@ -235,14 +230,14 @@ export function FeedbackModerationList({
                           className="px-3 py-1 text-xs font-medium text-white bg-green-600 hover:bg-green-700 rounded transition-colors"
                           title="Approve"
                         >
-                          <FaCheck />
+                          <Check />
                         </button>
                         <button
                           onClick={() => handleModerate(feedback.id, 'deny')}
                           className="px-3 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded transition-colors"
                           title="Deny"
                         >
-                          <FaTimes />
+                          <X size={14} />
                         </button>
                       </div>
                     )}
@@ -309,7 +304,10 @@ export function FeedbackModerationList({
                         {/* Moderation Note Input (for pending only) */}
                         {isPending && (
                           <div>
-                            <label className="block text-sm font-semibold mb-2">
+                            <label
+                              htmlFor={`moderation-note-${feedback.id}`}
+                              className="block text-sm font-semibold mb-2"
+                            >
                               Internal Moderation Note (optional):
                             </label>
                             <textarea
diff --git a/src/components/FilterComponents.tsx b/src/components/FilterComponents.tsx
index e74b10d80..2ae0711f4 100644
--- a/src/components/FilterComponents.tsx
+++ b/src/components/FilterComponents.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { MdExpandMore } from 'react-icons/md'
-import { LuTable, LuList } from 'react-icons/lu'
-import { LuRotateCcw } from 'react-icons/lu'
+import { Table, List, ChevronDown } from 'lucide-react'
 import { useDebouncedValue } from '@tanstack/react-pacer'
 import { twMerge } from 'tailwind-merge'
 
@@ -68,7 +66,7 @@ export function FilterSection({
           className="flex items-center gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors flex-1 py-0"
         >
           <span>{title}</span>
-          <MdExpandMore
+          <ChevronDown
             className={twMerge(
               'w-3.5 h-3.5 transition-transform',
               !isExpanded && 'rotate-90',
@@ -187,11 +185,8 @@ interface FilterBarProps {
 export function FilterBar({
   children,
   title = 'Filters',
-  onClearFilters,
-  hasActiveFilters,
   mobileControls,
   desktopHeader,
-  viewMode,
 }: FilterBarProps) {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -208,7 +203,7 @@ export function FilterBar({
               <span className="text-sm font-semibold text-gray-900 dark:text-white">
                 {title}
               </span>
-              <MdExpandMore
+              <ChevronDown
                 className={twMerge(
                   'w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform flex-shrink-0',
                   !isOpen && 'rotate-90',
@@ -269,8 +264,8 @@ export function ViewModeToggle({
     'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white/50 dark:hover:bg-gray-700/50'
 
   const compactViewModes = [
-    { mode: 'table' as const, icon: LuTable, title: 'Table view' },
-    { mode: 'timeline' as const, icon: LuList, title: 'Timeline view' },
+    { mode: 'table' as const, icon: Table, title: 'Table view' },
+    { mode: 'timeline' as const, icon: List, title: 'Timeline view' },
   ]
 
   if (compact) {
@@ -299,13 +294,13 @@ export function ViewModeToggle({
   const viewModes = [
     {
       mode: 'table' as const,
-      icon: LuTable,
+      icon: Table,
       label: 'Table',
       title: 'Table view',
     },
     {
       mode: 'timeline' as const,
-      icon: LuList,
+      icon: List,
       label: 'Timeline',
       title: 'Timeline view',
     },
diff --git a/src/components/FrameworkCard.tsx b/src/components/FrameworkCard.tsx
index 5cb64decb..887ce9f75 100644
--- a/src/components/FrameworkCard.tsx
+++ b/src/components/FrameworkCard.tsx
@@ -1,10 +1,10 @@
 import { Link } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { FaCheck, FaCopy } from 'react-icons/fa'
 import { Library } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
 import { useCopyButton } from '~/components/CopyMarkdownButton'
 import { useToast } from '~/components/ToastProvider'
+import { Check, Copy } from 'lucide-react'
 
 export function FrameworkCard({
   framework,
@@ -102,9 +102,9 @@ export function FrameworkCard({
             title="Copy package name"
           >
             {copied ? (
-              <FaCheck className="w-3 h-3 text-green-600 dark:text-green-400" />
+              <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
             ) : (
-              <FaCopy className="w-3 h-3" />
+              <Copy className="w-3 h-3" />
             )}
           </button>
         </div>
diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index a3651f61c..ec029211f 100644
--- a/src/components/MaintainerCard.tsx
+++ b/src/components/MaintainerCard.tsx
@@ -7,7 +7,6 @@ import {
 } from '~/libraries/maintainers'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-// import { FaCode, FaGitAlt, FaComment, FaEye } from 'react-icons/fa'
 
 function RoleBadge({
   maintainer,
@@ -193,69 +192,6 @@ function MaintainerSocialLinks({ maintainer }: { maintainer: Maintainer }) {
   )
 }
 
-// GitHub stats component - commented out due to performance/accuracy concerns
-/*
-function GitHubStats({
-  username,
-  stats,
-}: {
-  username: string
-  stats?: {
-    totalCommits: number
-    totalPullRequests: number
-    totalIssues: number
-    totalReviews: number
-  }
-}) {
-  if (!stats) return null
-
-  const totalContributions =
-    stats.totalCommits +
-    stats.totalPullRequests +
-    stats.totalIssues +
-    stats.totalReviews
-
-  return (
-    <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
-      <div
-        className="flex items-center gap-1"
-        title="Total commits to TanStack repositories"
-      >
-        <FaCode className="w-3 h-3" />
-        <span>{stats.totalCommits.toLocaleString()}</span>
-      </div>
-      <div
-        className="flex items-center gap-1"
-        title="Total pull requests to TanStack repositories"
-      >
-        <FaGitAlt className="w-3 h-3" />
-        <span>{stats.totalPullRequests.toLocaleString()}</span>
-      </div>
-      <div
-        className="flex items-center gap-1"
-        title="Total issues opened in TanStack repositories"
-      >
-        <FaComment className="w-3 h-3" />
-        <span>{stats.totalIssues.toLocaleString()}</span>
-      </div>
-      <div
-        className="flex items-center gap-1"
-        title="Total pull request reviews in TanStack repositories"
-      >
-        <FaEye className="w-3 h-3" />
-        <span>{stats.totalReviews.toLocaleString()}</span>
-      </div>
-      <div
-        className="text-xs text-gray-500 dark:text-gray-500"
-        title="Total contributions to TanStack repositories"
-      >
-        {totalContributions.toLocaleString()} total
-      </div>
-    </div>
-  )
-}
-*/
-
 interface MaintainerCardProps {
   maintainer: Maintainer
   libraryId?: Library['id']
@@ -310,7 +246,6 @@ export function CompactMaintainerCard({
 export function MaintainerRowCard({
   maintainer,
   libraryId,
-  stats,
 }: MaintainerRowCardProps) {
   const libraries = getPersonsMaintainerOf(maintainer)
   const [showAllLibraries, setShowAllLibraries] = useState(false)
@@ -409,11 +344,6 @@ export function MaintainerRowCard({
               )}
             </div>
           )}
-
-          {/* GitHub Stats - commented out due to performance/accuracy concerns */}
-          {/* <div className="mt-4">
-            <GitHubStats username={maintainer.github} stats={stats} />
-          </div> */}
         </div>
       </div>
     </div>
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index b5ad4902e..6d545de75 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { FaRegCopy } from 'react-icons/fa'
 import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
 import { createHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
@@ -16,8 +15,7 @@ import { twMerge } from 'tailwind-merge'
 import { useMarkdownHeadings } from '~/components/MarkdownHeadingContext'
 import { renderMarkdown } from '~/utils/markdown'
 import { Tabs } from '~/components/Tabs'
-import { BlockWithFeedback } from '~/components/BlockWithFeedback'
-import { useDocFeedback } from '~/components/DocFeedbackContext'
+import { Copy } from 'lucide-react'
 
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -100,8 +98,8 @@ const markdownComponents: Record<string, React.FC> = {
       className={`max-w-full h-auto rounded-lg shadow-md ${
         props.className ?? ''
       }`}
-      // loading="lazy"
-      // decoding="async"
+      loading="lazy"
+      decoding="async"
     />
   ),
 }
@@ -258,7 +256,11 @@ export function CodeBlock({
             }}
             aria-label="Copy code to clipboard"
           >
-            {copied ? <span className="text-xs">Copied!</span> : <FaRegCopy />}
+            {copied ? (
+              <span className="text-xs">Copied!</span>
+            ) : (
+              <Copy size={14} />
+            )}
           </button>
         </div>
       ) : null}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f79f09714..44b4578fb 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,31 +1,24 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import { BrandContextMenu } from './BrandContextMenu'
+import { Link, useLocation, useMatches } from '@tanstack/react-router'
 import {
-  Link,
-  useLocation,
-  useMatches,
-  type LinkProps,
-} from '@tanstack/react-router'
-import { TbBrandX, TbBrandBluesky } from 'react-icons/tb'
-import { FaDiscord, FaGithub, FaInstagram } from 'react-icons/fa'
-import {
-  LuCode,
-  LuUsers,
-  LuMusic,
-  LuHelpCircle,
-  LuBookOpen,
-  LuTrendingUp,
-  LuShirt,
-  LuShieldCheck,
-  LuPaintbrush,
-  LuHammer,
-  LuUser,
-  LuLock,
-  LuX,
-  LuMenu,
-  LuRss,
-} from 'react-icons/lu'
+  Code,
+  Users,
+  Music,
+  HelpCircle,
+  BookOpen,
+  TrendingUp,
+  Shirt,
+  ShieldCheck,
+  Paintbrush,
+  Hammer,
+  User,
+  Lock,
+  X,
+  Menu,
+  Rss,
+} from 'lucide-react'
 import { ThemeToggle } from './ThemeToggle'
 import { SearchButton } from './SearchButton'
 import { FeedTicker } from './FeedTicker'
@@ -36,6 +29,11 @@ import {
 } from '~/components/AuthComponents'
 import { libraries } from '~/libraries'
 import { useCapabilities } from '~/hooks/useCapabilities'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
+import { InstagramIcon } from '~/components/icons/InstagramIcon'
+import { BSkyIcon } from '~/components/icons/BSkyIcon'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
 
 export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
@@ -83,7 +81,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             className="flex items-center gap-1 bg-gray-500/20 rounded-lg p-2 opacity-80
             hover:opacity-100 whitespace-nowrap uppercase font-black text-xs"
           >
-            <LuUser className="scale-125" />
+            <User size={16} />
             <div className="">Log In</div>
           </Link>
         )
@@ -99,7 +97,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <Authenticated>
         {!canAdmin ? (
           <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
-            <LuUser />
+            <User size={16} />
             <Link
               to="/account"
               className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white whitespace-nowrap"
@@ -110,7 +108,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         ) : null}
         {canAdmin ? (
           <div className="flex items-center gap-2 px-2 py-1 rounded-lg">
-            <LuLock />
+            <Lock />
             <Link
               to="/admin"
               className="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
@@ -130,28 +128,28 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         className="opacity-70 hover:opacity-100"
         aria-label="Follow TanStack on X.com"
       >
-        <TbBrandX className="text-xl" />
+        <BrandXIcon className="text-xl" />
       </a>
       <a
         href="https://bsky.app/profile/tanstack.com"
         className="opacity-70 hover:opacity-100"
-        aria-label="Follow TanStack on Bluesky"
+        aria-label="Follow TanStack on Besky"
       >
-        <TbBrandBluesky className="text-xl" />
+        <BSkyIcon className="text-xl" />
       </a>
       <a
         href="https://instagram.com/tan_stack"
         className="opacity-70 hover:opacity-100"
         aria-label="Follow TanStack on Instagram"
       >
-        <FaInstagram className="text-xl" />
+        <InstagramIcon className="text-xl" />
       </a>
       <a
         href="https://tlinz.com/discord"
         className="opacity-70 hover:opacity-100"
         aria-label="Join TanStack Discord"
       >
-        <FaDiscord className="text-xl" />
+        <DiscordIcon className="text-xl" />
       </a>
     </div>
   )
@@ -159,7 +157,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
   const navbar = (
     <div
       className={twMerge(
-        'w-full p-2 fixed top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-blur-lg shadow-xl shadow-black/3',
+        'w-full p-2 fixed top-0 z-[100] bg-white/70 dark:bg-black/70 backdrop-br-lg shadow-xl shadow-black/3',
         'flex items-center justify-between gap-4',
         'dark:border-b border-gray-500/20',
       )}
@@ -186,7 +184,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                 setShowMenu(true)
               }}
             >
-              {showMenu ? <LuX /> : <LuMenu />}
+              {showMenu ? <X /> : <Menu />}
             </button>
             <Link
               to="/"
@@ -379,7 +377,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                         'rounded-lg hover:bg-gray-500/10 dark:hover:bg-gray-500/30',
                       )}
                     >
-                      <LuUsers />
+                      <Users size={14} />
                       Contributors
                     </Link>
                   </div>
@@ -436,7 +434,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             >
               <div className="flex items-center gap-2">
                 <div className="flex items-center gap-4 justify-between">
-                  <LuHammer />
+                  <Hammer />
                 </div>
                 <div>Builder</div>
               </div>
@@ -448,27 +446,27 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             label: (
               <>
                 <span>Feed</span>
-                <span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-md uppercase">
+                <span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-be-400 to-be-600 text-white rounded-md uppercase">
                   Beta
                 </span>
               </>
             ),
-            icon: <LuRss />,
+            icon: <Rss size={14} />,
             to: '/feed',
           },
           {
             label: 'Maintainers',
-            icon: <LuCode />,
+            icon: <Code size={14} />,
             to: '/maintainers',
           },
           {
             label: 'Partners',
-            icon: <LuUsers />,
+            icon: <Users size={14} />,
             to: '/partners',
           },
           {
             label: 'Blog',
-            icon: <LuMusic />,
+            icon: <Music size={14} />,
             to: '/blog',
           },
           {
@@ -480,48 +478,48 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                 </span>
               </>
             ),
-            icon: <LuBookOpen />,
+            icon: <BookOpen size={14} />,
             to: '/learn',
           },
           {
             label: 'Support',
-            icon: <LuHelpCircle />,
+            icon: <HelpCircle size={14} />,
             to: '/support',
           },
           {
             label: 'Stats',
-            icon: <LuTrendingUp />,
+            icon: <TrendingUp size={14} />,
             to: '/stats/npm',
           },
           {
             label: 'Discord',
-            icon: <FaDiscord />,
+            icon: <DiscordIcon size={14} />,
             to: 'https://tlinz.com/discord',
             target: '_blank',
           },
           {
             label: 'Merch',
-            icon: <LuShirt />,
+            icon: <Shirt size={14} />,
             to: '/merch',
           },
           {
             label: 'GitHub',
-            icon: <FaGithub />,
+            icon: <GithubIcon />,
             to: 'https://github.com/tanstack',
           },
           {
             label: 'Ethos',
-            icon: <LuShieldCheck />,
+            icon: <ShieldCheck size={14} />,
             to: '/ethos',
           },
           {
             label: 'Tenets',
-            icon: <LuBookOpen />,
+            icon: <BookOpen size={14} />,
             to: '/tenets',
           },
           {
             label: 'Brand Guide',
-            icon: <LuPaintbrush />,
+            icon: <Paintbrush size={14} />,
             to: '/brand-guide',
           },
         ]
@@ -565,7 +563,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
 
   const smallMenu = showMenu ? (
     <div
-      className="lg:hidden bg-white/50 dark:bg-black/60 backdrop-blur-[20px] z-50
+      className="lg:hidden bg-white/50 dark:bg-black/60 backdrop-br-[20px] z-50
     fixed top-[var(--navbar-height)] left-0 right-0 max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
     "
     >
@@ -611,7 +609,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           inlineMenu
             ? ''
             : [
-                'fixed bg-white/70 dark:bg-black/50 backdrop-blur-lg -translate-x-full',
+                'fixed bg-white/70 dark:bg-black/50 backdrop-br-lg -translate-x-full',
                 showMenu && 'translate-x-0',
               ],
         )}
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 2230c78ce..b19a64e84 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import { TbGhost } from 'react-icons/tb'
+import { Ghost } from 'lucide-react'
 
 export function NotFound({ children }: { children?: any }) {
   return (
@@ -8,7 +8,7 @@ export function NotFound({ children }: { children?: any }) {
         <h1 className="text-3xl font-black uppercase [letter-spacing:-0.02em]">
           404 Not Found
         </h1>
-        <TbGhost className="text-[10rem] opacity-20 hover:opacity-100 animate-bounce mt-8 blur-md hover:blur-none transition-all duration-300" />
+        <Ghost className="text-[10rem] opacity-20 hover:opacity-100 animate-bounce mt-8 blur-md hover:blur-none transition-all duration-300" />
         <p>The page you are looking for does not exist.</p>
         {children || (
           <p className="flex items-center gap-2 flex-wrap">
diff --git a/src/components/NotesModerationList.tsx b/src/components/NotesModerationList.tsx
index 84717fa5b..a57b5e397 100644
--- a/src/components/NotesModerationList.tsx
+++ b/src/components/NotesModerationList.tsx
@@ -1,10 +1,5 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import {
-  FaComment,
-  FaExclamationTriangle,
-  FaExternalLinkAlt,
-} from 'react-icons/fa'
 import {
   Table,
   TableHeader,
@@ -18,6 +13,7 @@ import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import type { DocFeedback } from '~/db/schema'
 import { calculatePoints } from '~/utils/docFeedback.client'
+import { ExternalLink, TriangleAlert } from 'lucide-react'
 
 interface NotesModerationListProps {
   data:
@@ -196,7 +192,7 @@ export function NotesModerationList({
                     </span>
                     {feedback.isDetached && (
                       <div className="flex items-center gap-1 text-xs text-yellow-600 dark:text-yellow-400 mt-1">
-                        <FaExclamationTriangle />
+                        <TriangleAlert size={12} />
                         Detached
                       </div>
                     )}
@@ -228,7 +224,7 @@ export function NotesModerationList({
                       rel="noopener noreferrer"
                       className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
                     >
-                      <FaExternalLinkAlt className="text-[10px]" />
+                      <ExternalLink className="text-[10px]" />
                       View Doc
                     </a>
                   </TableCell>
diff --git a/src/components/OpenSourceStats.tsx b/src/components/OpenSourceStats.tsx
index e0a4f32b4..97cc9fb39 100644
--- a/src/components/OpenSourceStats.tsx
+++ b/src/components/OpenSourceStats.tsx
@@ -1,12 +1,11 @@
 import NumberFlow from '@number-flow/react'
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { FaCube, FaStar, FaUsers } from 'react-icons/fa'
-import { FaDownload } from 'react-icons/fa'
 import { BlankErrorBoundary } from './BlankErrorBoundary'
 import { Suspense } from 'react'
 import { Library } from '~/libraries'
 import { ossStatsQuery } from '~/queries/stats'
 import { useNpmDownloadCounter } from '~/hooks/useNpmDownloadCounter'
+import { Box, Download, Star, Users } from 'lucide-react'
 
 const StableCounter = ({
   value,
@@ -20,8 +19,6 @@ const StableCounter = ({
       .fill('8')
       .join(''),
   )
-  // TODO don't use locale formatting since it can cause a hydration mismatch
-  //.toLocaleString()
 
   return (
     <>
@@ -120,7 +117,7 @@ function OssStatsContent({ library }: { library?: Library }) {
             !hasNpmDownloads ? 'opacity-50' : ''
           } ${!hasAnyData ? 'blur-sm' : ''}`}
         >
-          <FaDownload className="text-2xl group-hover:text-emerald-500 transition-colors duration-200" />
+          <Download className="text-2xl group-hover:text-emerald-500 transition-colors duration-200" />
           <div>
             <div className="text-2xl font-bold opacity-80 relative group-hover:text-emerald-500 transition-colors duration-200">
               {hasNpmDownloads ? (
@@ -146,7 +143,7 @@ function OssStatsContent({ library }: { library?: Library }) {
             !hasStarCount ? 'opacity-50' : ''
           } ${!hasAnyData ? 'blur-sm' : ''}`}
         >
-          <FaStar className="group-hover:text-yellow-500 text-2xl transition-colors duration-200" />
+          <Star className="group-hover:text-yellow-500 text-2xl transition-colors duration-200" />
           <div>
             <div className="text-2xl font-bold opacity-80 leading-none group-hover:text-yellow-500 transition-colors duration-200 relative">
               {hasStarCount ? (
@@ -165,7 +162,7 @@ function OssStatsContent({ library }: { library?: Library }) {
             !hasContributorCount ? 'opacity-50' : ''
           } ${!hasAnyData ? 'blur-sm' : ''}`}
         >
-          <FaUsers className="text-2xl" />
+          <Users className="text-2xl" />
           <div className="">
             <div className="text-2xl font-bold opacity-80 relative">
               {hasContributorCount ? (
@@ -184,7 +181,7 @@ function OssStatsContent({ library }: { library?: Library }) {
             !hasDependentCount ? 'opacity-50' : ''
           } ${!hasAnyData ? 'blur-sm' : ''}`}
         >
-          <FaCube className="text-2xl" />
+          <Box className="text-2xl" />
           <div className="">
             <div className="text-2xl font-bold opacity-80 relative">
               {hasDependentCount ? (
diff --git a/src/components/PaginationControls.tsx b/src/components/PaginationControls.tsx
index c9291be09..2cd6c9959 100644
--- a/src/components/PaginationControls.tsx
+++ b/src/components/PaginationControls.tsx
@@ -1,4 +1,4 @@
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
 
 interface PaginationControlsProps {
   currentPage: number
@@ -134,7 +134,7 @@ export function PaginationControls({
             disabled={!canGoPrevious}
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
           >
-            <FaChevronLeft className="w-2.5 h-2.5" />
+            <ChevronLeft className="w-2.5 h-2.5" />
             <span>Prev</span>
           </button>
 
@@ -175,7 +175,7 @@ export function PaginationControls({
             className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-900 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 gap-1 transition-colors"
           >
             <span>Next</span>
-            <FaChevronRight className="w-2.5 h-2.5" />
+            <ChevronRight className="w-2.5 h-2.5" />
           </button>
         </div>
       </div>
diff --git a/src/components/PartnershipCallout.tsx b/src/components/PartnershipCallout.tsx
index b3bd530e8..4d7f92e91 100644
--- a/src/components/PartnershipCallout.tsx
+++ b/src/components/PartnershipCallout.tsx
@@ -1,5 +1,5 @@
-import { TbHeartHandshake } from 'react-icons/tb'
 import { getLibrary, LibraryId } from '~/libraries'
+import { HeartHandshake } from 'lucide-react'
 
 interface PartnershipCalloutProps {
   libraryId: LibraryId
@@ -16,7 +16,8 @@ export function PartnershipCallout({ libraryId }: PartnershipCalloutProps) {
                     dark:bg-black/40 dark:shadow-none w-[500px] max-w-full mx-auto"
     >
       <span className="flex items-center gap-2 p-8 text-3xl text-rose-500 font-black uppercase">
-        {library.name.replace('TanStack ', '')} <TbHeartHandshake /> You?
+        {library.name.replace('TanStack ', '')} <HeartHandshake size={28} />{' '}
+        You?
       </span>
       <div className="flex flex-col p-4 gap-3 text-sm">
         <div>
diff --git a/src/components/SearchButton.tsx b/src/components/SearchButton.tsx
index fa1c64061..d650497b5 100644
--- a/src/components/SearchButton.tsx
+++ b/src/components/SearchButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { BiCommand } from 'react-icons/bi'
-import { MdSearch } from 'react-icons/md'
+import { Command, Search } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useSearchContext } from '~/contexts/SearchContext'
 
@@ -21,10 +20,10 @@ export function SearchButton({ className }: SearchButtonProps) {
       )}
     >
       <div className="flex items-center gap-1 text-sm">
-        <MdSearch className="text-lg" /> Search...
+        <Search size={18} /> Search...
       </div>
       <div className="flex items-center bg-white/50 dark:bg-gray-500/50 rounded-md px-2 py-1 gap-1 font-bold text-xs whitespace-nowrap">
-        <BiCommand /> + K
+        <Command size={12} /> + K
       </div>
     </button>
   )
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
index a19e88bd9..b1cb6a082 100644
--- a/src/components/SearchModal.tsx
+++ b/src/components/SearchModal.tsx
@@ -12,7 +12,7 @@ import {
   Pagination,
 } from 'react-instantsearch'
 import { liteClient } from 'algoliasearch/lite'
-import { MdClose, MdSearch } from 'react-icons/md'
+import { X, Search } from 'lucide-react'
 import { Link, useRouterState } from '@tanstack/react-router'
 import { useSearchContext } from '~/contexts/SearchContext'
 import { libraries } from '~/libraries'
@@ -308,11 +308,11 @@ function NoResults() {
 }
 
 const submitIconComponent = () => {
-  return <MdSearch />
+  return <Search size={18} />
 }
 
 const resetIconComponent = () => {
-  return <MdClose />
+  return <X size={20} />
 }
 
 export function SearchModal() {
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index b38e1ad18..e165b260b 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { Listbox, Transition } from '@headlessui/react'
 
-import { HiCheck, HiChevronDown } from 'react-icons/hi'
+import { Check, ChevronDown } from 'lucide-react'
 
 export type SelectOption = {
   label: string
@@ -57,7 +57,7 @@ export function Select<T extends SelectOption>({
               ) : null}
               <span className="truncate">{selectedOption.label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <HiChevronDown
+                <ChevronDown
                   className="h-5 w-5 text-gray-400"
                   aria-hidden="true"
                 />
@@ -103,7 +103,7 @@ export function Select<T extends SelectOption>({
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-400">
-                            <HiCheck className="h-5 w-5" aria-hidden="true" />
+                            <Check className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
                       </>
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index b4e378a5a..9c6d9386e 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,5 +1,5 @@
-import { TbFidgetSpinner } from 'react-icons/tb'
 import { twMerge } from 'tailwind-merge'
+import { Fan } from 'lucide-react'
 
 interface SpinnerProps {
   className?: string
@@ -7,7 +7,7 @@ interface SpinnerProps {
 
 export function Spinner({ className }: SpinnerProps) {
   return (
-    <TbFidgetSpinner
+    <Fan
       className={twMerge(
         'animate-spin text-gray-900 dark:text-white text-2xl',
         className,
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 9bad36163..eac748f08 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FaMoon, FaSun } from 'react-icons/fa'
 import { useTheme } from './ThemeProvider'
+import { Moon, Sun } from 'lucide-react'
 
 export function ThemeToggle() {
   const { toggleMode } = useTheme()
@@ -20,9 +20,9 @@ export function ThemeToggle() {
         hover:bg-gray-500/20 dark:hover:bg-gray-500/40
         cursor-pointer transition-all duration-300 ease-in-out text-xs font-black`}
     >
-      <div className="flex-1 flex items-center justify-between p-2 gap-1">
-        <FaSun className={`hidden light:block`} />
-        <FaMoon className={`hidden dark:block`} />
+      <div className="flex-1 flex items-center justify-between p-1.5 gap-1">
+        <Sun className={`hidden light:block`} size={16} />
+        <Moon className={`hidden dark:block`} size={16} />
         <div
           className={`hidden auto:block uppercase select-none opacity-70 text-xs`}
         >
diff --git a/src/components/TocMobile.tsx b/src/components/TocMobile.tsx
index 3f8f4c213..aaecd2f76 100644
--- a/src/components/TocMobile.tsx
+++ b/src/components/TocMobile.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from '@tanstack/react-router'
-import { FaCaretRight, FaCaretDown } from 'react-icons/fa6'
 import { MarkdownHeading } from '~/utils/markdown/processor'
+import { ChevronDown, ChevronRight } from 'lucide-react'
 
 interface TocMobileProps {
   headings: Array<MarkdownHeading>
@@ -26,7 +26,9 @@ export function TocMobile({ headings }: TocMobileProps) {
           rounded-b-xl"
           aria-expanded={isOpen}
         >
-          <span>{isOpen ? <FaCaretDown /> : <FaCaretRight />}</span>
+          <span>
+            {isOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+          </span>
           <span>On this page</span>
         </summary>
         <div className="px-2 py-2">
diff --git a/src/components/UserFeedbackSection.tsx b/src/components/UserFeedbackSection.tsx
index 4b66420e8..c4415acbb 100644
--- a/src/components/UserFeedbackSection.tsx
+++ b/src/components/UserFeedbackSection.tsx
@@ -1,24 +1,18 @@
 import * as React from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { Link } from '@tanstack/react-router'
 import { getUserDocFeedbackQueryOptions } from '~/queries/docFeedback'
-import {
-  FaAward,
-  FaComment,
-  FaLightbulb,
-  FaExternalLinkAlt,
-} from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
 import { PaginationControls } from './PaginationControls'
 import { Spinner } from './Spinner'
 import { calculatePoints } from '~/utils/docFeedback.client'
+import { Award, ExternalLink, Lightbulb, MessageSquare } from 'lucide-react'
 
 interface UserFeedbackSectionProps {
   userId: string
 }
 
 export function UserFeedbackSection({ userId }: UserFeedbackSectionProps) {
-  const navigate = useNavigate()
   const [page, setPage] = React.useState(1)
   const [pageSize, setPageSize] = React.useState(10)
 
@@ -44,7 +38,7 @@ export function UserFeedbackSection({ userId }: UserFeedbackSectionProps) {
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
-              <FaAward className="text-2xl text-blue-600 dark:text-blue-400" />
+              <Award className="text-2xl text-blue-600 dark:text-blue-400" />
               <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                 Feedback Points
               </h3>
@@ -88,7 +82,7 @@ export function UserFeedbackSection({ userId }: UserFeedbackSectionProps) {
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1"
           >
             View Leaderboard
-            <FaExternalLinkAlt className="text-xs" />
+            <ExternalLink className="text-xs" />
           </Link>
         </div>
       </div>
@@ -126,9 +120,9 @@ export function UserFeedbackSection({ userId }: UserFeedbackSectionProps) {
                       {/* Icon */}
                       <div className="mt-1">
                         {item.type === 'note' ? (
-                          <FaComment className="text-blue-500" />
+                          <MessageSquare className="text-blue-500" size={14} />
                         ) : (
-                          <FaLightbulb className="text-yellow-500" />
+                          <Lightbulb className="text-yellow-500" size={14} />
                         )}
                       </div>
 
diff --git a/src/components/admin/FeedEntryEditor.tsx b/src/components/admin/FeedEntryEditor.tsx
index 13be8708c..245108f73 100644
--- a/src/components/admin/FeedEntryEditor.tsx
+++ b/src/components/admin/FeedEntryEditor.tsx
@@ -8,7 +8,7 @@ import { partners } from '~/utils/partners'
 import { currentUserQueryOptions } from '~/queries/auth'
 import { useCreateFeedEntry, useUpdateFeedEntry } from '~/utils/mutations'
 import { generateManualEntryId } from '~/utils/feed-manual'
-import { FaSave, FaTimes } from 'react-icons/fa'
+import { Save, X } from 'lucide-react'
 
 interface FeedEntryEditorProps {
   entry: FeedEntry | null
@@ -163,7 +163,7 @@ export function FeedEntryEditor({
             onClick={onCancel}
             className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <FaTimes className="inline mr-2" />
+            <X size={14} className="inline mr-2" />
             Cancel
           </button>
           <button
@@ -171,7 +171,7 @@ export function FeedEntryEditor({
             disabled={saving || !title || !content || !user}
             className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
-            <FaSave className="inline mr-2" />
+            <Save className="inline mr-2" size={14} />
             {saving ? 'Saving...' : user ? 'Save' : 'Loading...'}
           </button>
         </div>
@@ -182,7 +182,9 @@ export function FeedEntryEditor({
         <div className="space-y-4">
           {/* Title */}
           <div>
-            <label className="block text-sm font-medium mb-2">Title *</label>
+            <label htmlFor="title" className="block text-sm font-medium mb-2">
+              Title *
+            </label>
             <input
               type="text"
               value={title}
@@ -194,7 +196,9 @@ export function FeedEntryEditor({
 
           {/* Content */}
           <div>
-            <label className="block text-sm font-medium mb-2">Content *</label>
+            <label htmlFor="content" className="block text-sm font-medium mb-2">
+              Content *
+            </label>
             <textarea
               value={content}
               onChange={(e) => setContent(e.target.value)}
@@ -206,7 +210,7 @@ export function FeedEntryEditor({
 
           {/* Excerpt */}
           <div>
-            <label className="block text-sm font-medium mb-2">
+            <label htmlFor="excerpt" className="block text-sm font-medium mb-2">
               Excerpt (optional)
             </label>
             <textarea
@@ -220,7 +224,10 @@ export function FeedEntryEditor({
 
           {/* Published Date */}
           <div>
-            <label className="block text-sm font-medium mb-2">
+            <label
+              htmlFor="publishedAt"
+              className="block text-sm font-medium mb-2"
+            >
               Published Date *
             </label>
             <input
@@ -233,7 +240,12 @@ export function FeedEntryEditor({
 
           {/* Category */}
           <div>
-            <label className="block text-sm font-medium mb-2">Category *</label>
+            <label
+              htmlFor="category"
+              className="block text-sm font-medium mb-2"
+            >
+              Category *
+            </label>
             <select
               value={category}
               onChange={(e) =>
@@ -259,7 +271,12 @@ export function FeedEntryEditor({
 
           {/* Libraries */}
           <div>
-            <label className="block text-sm font-medium mb-2">Libraries</label>
+            <label
+              htmlFor="libraries"
+              className="block text-sm font-medium mb-2"
+            >
+              Libraries
+            </label>
             <div className="max-h-40 overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-lg p-2">
               {libraries.map((library) => (
                 <label
@@ -280,7 +297,12 @@ export function FeedEntryEditor({
 
           {/* Partners */}
           <div>
-            <label className="block text-sm font-medium mb-2">Partners</label>
+            <label
+              htmlFor="partners"
+              className="block text-sm font-medium mb-2"
+            >
+              Partners
+            </label>
             <div className="max-h-40 overflow-y-auto border border-gray-300 dark:border-gray-600 rounded-lg p-2">
               {partners
                 .filter((p) => p.status === 'active')
@@ -303,7 +325,7 @@ export function FeedEntryEditor({
 
           {/* Tags */}
           <div>
-            <label className="block text-sm font-medium mb-2">
+            <label htmlFor="tags" className="block text-sm font-medium mb-2">
               Tags (comma-separated)
             </label>
             <input
diff --git a/src/components/admin/FeedSyncStatus.tsx b/src/components/admin/FeedSyncStatus.tsx
index efd65b785..8849a57db 100644
--- a/src/components/admin/FeedSyncStatus.tsx
+++ b/src/components/admin/FeedSyncStatus.tsx
@@ -6,8 +6,8 @@ import {
   syncGitHubSource,
   syncBlogSource,
 } from '~/utils/admin'
-import { FaSync } from 'react-icons/fa'
 import { Spinner } from '~/components/Spinner'
+import { RefreshCw } from 'lucide-react'
 
 export function FeedSyncStatus({
   onSyncComplete,
@@ -71,7 +71,7 @@ export function FeedSyncStatus({
             {syncingAll ? (
               <Spinner className="text-xs" />
             ) : (
-              <FaSync className="w-3 h-3" />
+              <RefreshCw className="w-3 h-3" />
             )}
             Sync All
           </button>
@@ -138,7 +138,7 @@ export function FeedSyncStatus({
                         {isSyncing ? (
                           <Spinner className="text-xs" />
                         ) : (
-                          <FaSync className="w-2.5 h-2.5" />
+                          <RefreshCw className="w-2.5 h-2.5" />
                         )}
                       </button>
                     </div>
diff --git a/src/components/icons/BSkyIcon.tsx b/src/components/icons/BSkyIcon.tsx
new file mode 100644
index 000000000..1e231c3eb
--- /dev/null
+++ b/src/components/icons/BSkyIcon.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+export function BSkyIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/BaseballCapIcon.tsx b/src/components/icons/BaseballCapIcon.tsx
new file mode 100644
index 000000000..94f0745b1
--- /dev/null
+++ b/src/components/icons/BaseballCapIcon.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+export function BaseballCapIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 256 256"
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth={2}
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M128,20A108.12,108.12,0,0,0,20,128v56a27.86,27.86,0,0,0,15.26,24.93,28,28,0,0,0,29.28-2.34C76.2,198.11,96.68,188,128,188s51.8,10.1,63.46,18.58A28,28,0,0,0,236,184V128A108.12,108.12,0,0,0,128,20Zm84,108v1.87a170,170,0,0,0-33.29-14.3,170.81,170.81,0,0,0-23.45-67A84.14,84.14,0,0,1,212,128Zm-58.46-18.12a174.42,174.42,0,0,0-51.08,0A150,150,0,0,1,128,50.94,150.07,150.07,0,0,1,153.54,109.88Zm-52.8-61.31a170.81,170.81,0,0,0-23.45,67A170,170,0,0,0,44,129.87V128A84.14,84.14,0,0,1,100.74,48.57Zm109.11,139a4,4,0,0,1-4.28-.36C191,176.61,165.77,164,128,164s-63,12.61-77.57,23.18a4,4,0,0,1-4.28.36A3.76,3.76,0,0,1,44,184V158.14a148,148,0,0,1,168,0V184A3.76,3.76,0,0,1,209.85,187.54Z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/BrandXIcon.tsx b/src/components/icons/BrandXIcon.tsx
new file mode 100644
index 000000000..8525fe1e7
--- /dev/null
+++ b/src/components/icons/BrandXIcon.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+export function BrandXIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
+      <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/CheckCircleIcon.tsx b/src/components/icons/CheckCircleIcon.tsx
new file mode 100644
index 000000000..58ef1372a
--- /dev/null
+++ b/src/components/icons/CheckCircleIcon.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+export function CheckCircleIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+  )
+}
diff --git a/src/components/icons/CogsIcon.tsx b/src/components/icons/CogsIcon.tsx
new file mode 100644
index 000000000..c576fb236
--- /dev/null
+++ b/src/components/icons/CogsIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function CogsIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 640 512"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      height={height}
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/DiscordIcon.tsx b/src/components/icons/DiscordIcon.tsx
new file mode 100644
index 000000000..f2baae3b5
--- /dev/null
+++ b/src/components/icons/DiscordIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function DiscordIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 640 512"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/GithubIcon.tsx b/src/components/icons/GithubIcon.tsx
new file mode 100644
index 000000000..ee48a35d5
--- /dev/null
+++ b/src/components/icons/GithubIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function GithubIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 496 512"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <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"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/GoogleIcon.tsx b/src/components/icons/GoogleIcon.tsx
new file mode 100644
index 000000000..b1be1f51b
--- /dev/null
+++ b/src/components/icons/GoogleIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function GoogleIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 496 512"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/InstagramIcon.tsx b/src/components/icons/InstagramIcon.tsx
new file mode 100644
index 000000000..2c14bbe50
--- /dev/null
+++ b/src/components/icons/InstagramIcon.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+export function InstagramIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 448 512"
+      fill="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/NpmIcon.tsx b/src/components/icons/NpmIcon.tsx
new file mode 100644
index 000000000..f6189b5d6
--- /dev/null
+++ b/src/components/icons/NpmIcon.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export function NpmIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 576 512"
+      stroke-width="0"
+      fill="currentColor"
+      stroke="currentColor"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M288 288h-32v-64h32v64zm288-128v192H288v32H160v-32H0V160h576zm-416 32H32v128h64v-96h32v96h32V192zm160 0H192v160h64v-32h64V192zm224 0H352v128h64v-96h32v96h32v-96h32v96h32V192z"></path>
+    </svg>
+  )
+}
diff --git a/src/components/icons/YinYangIcon.tsx b/src/components/icons/YinYangIcon.tsx
new file mode 100644
index 000000000..6c744b2e3
--- /dev/null
+++ b/src/components/icons/YinYangIcon.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export function YinYangIcon({
+  className,
+  width = '1em',
+  height = '1em',
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      stroke-width="0"
+      viewBox="0 0 496 512"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"></path>
+    </svg>
+  )
+}
diff --git a/src/libraries/ai.tsx b/src/libraries/ai.tsx
index cb4872724..77cbad511 100644
--- a/src/libraries/ai.tsx
+++ b/src/libraries/ai.tsx
@@ -1,8 +1,8 @@
 import { Library } from '.'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
+import { Book, Plug, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import { FaPlug } from 'react-icons/fa6'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/ai'
 
@@ -32,12 +32,12 @@ export const aiProject = {
   defaultDocs: 'getting-started/overview',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/ai/latest/docs',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -45,7 +45,7 @@ export const aiProject = {
   featureHighlights: [
     {
       title: 'Multi-Provider Support',
-      icon: <FaPlug className={twMerge(textStyles)} />,
+      icon: <Plug className={twMerge(textStyles)} />,
       description: (
         <div>
           Support for OpenAI, Anthropic, Ollama, and Google Gemini. Switch
@@ -56,7 +56,7 @@ export const aiProject = {
     },
     {
       title: 'Unified API',
-      icon: <FaBolt className={twMerge(textStyles)} />,
+      icon: <Zap className={twMerge(textStyles)} />,
       description: (
         <div>
           Same interface across all providers. Standalone functions with
@@ -67,7 +67,7 @@ export const aiProject = {
     },
     {
       title: 'Tool/Function Calling',
-      icon: <FaCogs className={twMerge(textStyles)} />,
+      icon: <CogsIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Automatic execution loop with no manual tool management needed.
diff --git a/src/libraries/config.tsx b/src/libraries/config.tsx
index d53028e79..90d07c41b 100644
--- a/src/libraries/config.tsx
+++ b/src/libraries/config.tsx
@@ -1,7 +1,7 @@
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { VscWand } from 'react-icons/vsc'
+import { Book, WandSparkles, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/config'
 
@@ -29,12 +29,12 @@ export const configProject = {
   frameworks: [],
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/config/latest/docs',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -42,7 +42,7 @@ export const configProject = {
   featureHighlights: [
     {
       title: 'Intuitive Configuration',
-      icon: <VscWand className="text-gray-400" />,
+      icon: <WandSparkles className="text-gray-400" />,
       description: (
         <div>
           TanStack Config offers a seamless and intuitive configuration
@@ -58,7 +58,7 @@ export const configProject = {
     },
     {
       title: 'Vite-Powered Builds',
-      icon: <FaBolt className="text-gray-500" />,
+      icon: <Zap className="text-gray-500" />,
       description: (
         <div>
           TanStack Config's build configuration harnesses the Vite ecosystem.
@@ -75,7 +75,7 @@ export const configProject = {
     },
     {
       title: 'Effortless Publication',
-      icon: <FaCogs className="text-gray-700" />,
+      icon: <CogsIcon className="text-gray-700" />,
       description: (
         <div>
           Say goodbye to the complexities of code publishing. This package
diff --git a/src/libraries/db.tsx b/src/libraries/db.tsx
index 164da9563..7df3db5be 100644
--- a/src/libraries/db.tsx
+++ b/src/libraries/db.tsx
@@ -1,7 +1,8 @@
-import { BsCollectionFill } from 'react-icons/bs'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
+import { GalleryVerticalEnd, Zap } from 'lucide-react'
+import { Book } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/db'
 
@@ -31,17 +32,12 @@ export const dbProject = {
   defaultDocs: 'overview',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/db/latest/docs',
     },
-    // {
-    //   icon: <VscPreview />,
-    //   label: 'Examples',
-    //   to: '/db/latest/docs/framework/react/examples/todo',
-    // },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -49,7 +45,7 @@ export const dbProject = {
   featureHighlights: [
     {
       title: 'Collections',
-      icon: <BsCollectionFill className={twMerge(textStyles)} />,
+      icon: <GalleryVerticalEnd className={twMerge(textStyles)} />,
       description: (
         <div>
           Collections are typed sets of objects. Sync or load data into them.
@@ -60,7 +56,7 @@ export const dbProject = {
     },
     {
       title: 'Live Queries',
-      icon: <FaBolt className={twMerge(textStyles)} />,
+      icon: <Zap className={twMerge(textStyles)} />,
       description: (
         <div>
           Live queries run reactively against and across collections. They're
@@ -71,7 +67,7 @@ export const dbProject = {
     },
     {
       title: 'Optimistic mutations',
-      icon: <FaCogs className={twMerge(textStyles)} />,
+      icon: <CogsIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           Batch and stage instant local changes across collections. Sync
diff --git a/src/libraries/devtools.tsx b/src/libraries/devtools.tsx
index 86e7684de..7d901c6a1 100644
--- a/src/libraries/devtools.tsx
+++ b/src/libraries/devtools.tsx
@@ -1,7 +1,7 @@
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { VscWand } from 'react-icons/vsc'
+import { Book, WandSparkles, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/devtools'
 
@@ -30,12 +30,12 @@ export const devtoolsProject = {
   frameworks: ['react', 'preact', 'solid', 'vanilla'],
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/devtools/latest/docs',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -43,7 +43,7 @@ export const devtoolsProject = {
   featureHighlights: [
     {
       title: 'Unified Devtools Panel',
-      icon: <VscWand className="text-slate-400" />,
+      icon: <WandSparkles size={16} className="text-slate-400" />,
       description: (
         <div>
           TanStack Devtools provides a centralized panel that houses all
@@ -58,7 +58,7 @@ export const devtoolsProject = {
     },
     {
       title: 'Framework Agnostic',
-      icon: <FaBolt className="text-slate-500" />,
+      icon: <Zap className="text-slate-500" />,
       description: (
         <div>
           Built with Solid.js for lightweight performance, but designed to work
@@ -73,7 +73,7 @@ export const devtoolsProject = {
     },
     {
       title: 'Custom Devtools Support',
-      icon: <FaCogs className="text-slate-600" />,
+      icon: <CogsIcon className="text-slate-600" />,
       description: (
         <div>
           Extend the devtools panel with your own custom devtools. The platform
diff --git a/src/libraries/form.tsx b/src/libraries/form.tsx
index b2f3b81bc..7dac086a0 100644
--- a/src/libraries/form.tsx
+++ b/src/libraries/form.tsx
@@ -1,7 +1,7 @@
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
+import { Book, Wallpaper, WandSparkles, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/form'
 
@@ -30,17 +30,17 @@ export const formProject = {
   scarfId: '72ec4452-5d77-427c-b44a-57515d2d83aa',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/form/latest/docs',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/form/latest/docs/framework/react/examples/simple',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -48,7 +48,7 @@ export const formProject = {
   featureHighlights: [
     {
       title: 'First-Class TypeScript Support',
-      icon: <VscWand className="text-yellow-400" />,
+      icon: <WandSparkles size={16} className="text-yellow-400" />,
       description: (
         <div>
           TanStack Form touts first-class TypeScript support with outstanding
@@ -65,7 +65,7 @@ export const formProject = {
     },
     {
       title: 'Headless and Framework Agnostic',
-      icon: <FaBolt className="text-yellow-500" />,
+      icon: <Zap className="text-yellow-500" />,
       description: (
         <div>
           Form's headless and framework agnostic approach ensures maximum
@@ -82,7 +82,7 @@ export const formProject = {
     },
     {
       title: 'Granular Reactive Performance',
-      icon: <FaCogs className="text-amber-500" />,
+      icon: <CogsIcon className="text-amber-500" />,
       description: (
         <div>
           When it comes to performance, TanStack Form delivers amazing speed and
diff --git a/src/libraries/pacer.tsx b/src/libraries/pacer.tsx
index 3cb75631a..976958306 100644
--- a/src/libraries/pacer.tsx
+++ b/src/libraries/pacer.tsx
@@ -1,9 +1,12 @@
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { FaGithub } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { GiF1Car } from 'react-icons/gi'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import {
+  ArrowRightLeft,
+  Book,
+  CircleGauge,
+  Wallpaper,
+  WandSparkles,
+} from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
-import { FaTimeline } from 'react-icons/fa6'
 
 const repo = 'tanstack/pacer'
 
@@ -33,17 +36,17 @@ export const pacerProject = {
   defaultDocs: 'overview',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/pacer/latest/docs',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/pacer/latest/docs/framework/react/examples/debounce',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -51,7 +54,7 @@ export const pacerProject = {
   featureHighlights: [
     {
       title: 'Flexible & Type-Safe',
-      icon: <VscWand className={twMerge(textStyles)} />,
+      icon: <WandSparkles className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Pacer provides an intuitive and flexible API that works
@@ -67,7 +70,7 @@ export const pacerProject = {
     },
     {
       title: 'Optimize Performance',
-      icon: <GiF1Car className={twMerge(textStyles)} />,
+      icon: <CircleGauge className={twMerge(textStyles)} />,
       description: (
         <div>
           Enhance your application's efficiency with flexible utilities for{' '}
@@ -84,7 +87,7 @@ export const pacerProject = {
     },
     {
       title: 'Async or Sync',
-      icon: <FaTimeline className={twMerge(textStyles)} />,
+      icon: <ArrowRightLeft className={twMerge(textStyles)} />,
       description: (
         <div>
           Choose between async or sync execution for each utility based on your
diff --git a/src/libraries/query.tsx b/src/libraries/query.tsx
index df1fa1e70..53618cae4 100644
--- a/src/libraries/query.tsx
+++ b/src/libraries/query.tsx
@@ -1,8 +1,8 @@
 import { handleRedirects } from '~/utils/handleRedirects.server'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { BiBookAlt } from 'react-icons/bi'
+import { Book, Wallpaper, WandSparkles, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/query'
 
@@ -60,17 +60,17 @@ export const queryProject = {
   },
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/query/latest/docs/framework/react/overview',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/query/latest/docs/framework/react/examples/basic',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'GitHub',
       to: `https://github.com/${repo}`,
     },
@@ -79,7 +79,7 @@ export const queryProject = {
     {
       title: 'Declarative & Automatic',
       icon: (
-        <VscWand
+        <WandSparkles
           className={twMerge('motion-safe:animate-pulse', textStyles)}
           style={{
             animationDuration: '5s',
@@ -103,7 +103,7 @@ export const queryProject = {
     {
       title: 'Simple & Familiar',
       icon: (
-        <FaBolt
+        <Zap
           className={twMerge('motion-safe:animate-bounce', textStyles)}
           style={{
             animationDuration: '2s',
@@ -127,7 +127,7 @@ export const queryProject = {
     {
       title: 'Extensible',
       icon: (
-        <FaCogs
+        <CogsIcon
           className={twMerge('motion-safe:animate-spin', textStyles)}
           style={{
             animationDuration: '10s',
diff --git a/src/libraries/ranger.tsx b/src/libraries/ranger.tsx
index 7e5c7f830..afb85c9f9 100644
--- a/src/libraries/ranger.tsx
+++ b/src/libraries/ranger.tsx
@@ -1,10 +1,12 @@
-import { VscPreview } from 'react-icons/vsc'
-import { FaGithub } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { CgTimelapse } from 'react-icons/cg'
-import { TbZoomQuestion } from 'react-icons/tb'
-import { RiLightbulbFlashLine } from 'react-icons/ri'
+import {
+  Book,
+  MessageCircleQuestionMark,
+  PlugZap,
+  RotateCw,
+  Wallpaper,
+} from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
 
 const repo = 'tanstack/ranger'
 
@@ -33,17 +35,17 @@ export const rangerProject = {
   scarfId: 'dd278e06-bb3f-420c-85c6-6e42d14d8f61',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/ranger/latest/docs/overview',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/ranger/latest/docs/framework/react/examples/basic',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -52,9 +54,7 @@ export const rangerProject = {
     {
       title: 'Typesafe & powerful, yet familiarly simple',
       icon: (
-        <RiLightbulbFlashLine
-          className={twMerge('scale-125 animate-pulse', textStyles)}
-        />
+        <PlugZap className={twMerge('scale-125 animate-pulse', textStyles)} />
       ),
       description: (
         <div>
@@ -69,7 +69,7 @@ export const rangerProject = {
     {
       title: '"Headless" UI library',
       icon: (
-        <CgTimelapse
+        <RotateCw
           className={twMerge('animate-spin', textStyles)}
           style={{
             animationDuration: '3s',
@@ -90,7 +90,7 @@ export const rangerProject = {
     },
     {
       title: 'Extensible',
-      icon: <TbZoomQuestion className={twMerge('', textStyles)} />,
+      icon: <MessageCircleQuestionMark className={twMerge('', textStyles)} />,
       description: (
         <div>
           Designed with maximum inversion of control in mind, Ranger is built to
diff --git a/src/libraries/router.tsx b/src/libraries/router.tsx
index 0352dee4f..3a7d1cc2e 100644
--- a/src/libraries/router.tsx
+++ b/src/libraries/router.tsx
@@ -1,11 +1,13 @@
-import { FaGithub } from 'react-icons/fa'
-import { VscPreview } from 'react-icons/vsc'
-import { BiBookAlt } from 'react-icons/bi'
-import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { CgTimelapse } from 'react-icons/cg'
-import { TbZoomQuestion } from 'react-icons/tb'
+import {
+  Book,
+  DatabaseZap,
+  MessageCircleQuestionMark,
+  PlugZap,
+  Wallpaper,
+} from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { redirect } from '@tanstack/react-router'
+import { GithubIcon } from '~/components/icons/GithubIcon'
 
 const repo = 'tanstack/router'
 
@@ -44,17 +46,17 @@ export const routerProject = {
   showCloudflareUrl: true,
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/router/latest/docs/framework/react/overview',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/router/latest/docs/framework/react/examples/kitchen-sink-file-based',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'GitHub',
       to: `https://github.com/${repo}`,
     },
@@ -62,9 +64,7 @@ export const routerProject = {
   featureHighlights: [
     {
       title: 'Typesafe & powerful, yet familiarly simple',
-      icon: (
-        <RiLightbulbFlashLine className={twMerge('scale-125', textStyles)} />
-      ),
+      icon: <PlugZap className={twMerge('scale-125', textStyles)} />,
       description: (
         <div>
           TanStack Router builds on modern routing patterns made popular by
@@ -79,7 +79,7 @@ export const routerProject = {
     {
       title: 'Built-in Data Fetching with Caching',
       icon: (
-        <CgTimelapse
+        <DatabaseZap
           className={twMerge('motion-safe:animate-spin', textStyles)}
           style={{
             animationDuration: '3s',
@@ -101,7 +101,7 @@ export const routerProject = {
     },
     {
       title: 'Search Param APIs to make your state-manager jealous',
-      icon: <TbZoomQuestion className={twMerge('', textStyles)} />,
+      icon: <MessageCircleQuestionMark className={twMerge('', textStyles)} />,
       description: (
         <div>
           Instead of throwing you to the URLSearchParam wolves, TanStack Router
diff --git a/src/libraries/start.tsx b/src/libraries/start.tsx
index 34c8fc426..6d1b4fea6 100644
--- a/src/libraries/start.tsx
+++ b/src/libraries/start.tsx
@@ -1,10 +1,8 @@
-import { FaGithub, FaYinYang } from 'react-icons/fa'
-import { VscPreview } from 'react-icons/vsc'
-import { BiBookAlt } from 'react-icons/bi'
-import { PiRocketLaunchDuotone, PiTreeStructureBold } from 'react-icons/pi'
-import { TbServerBolt } from 'react-icons/tb'
+import { Book, Network, Rocket, ServerCrash, Wallpaper } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { redirect } from '@tanstack/react-router'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { YinYangIcon } from '~/components/icons/YinYangIcon'
 
 const repo = 'tanstack/router'
 
@@ -40,17 +38,17 @@ export const startProject = {
   hideStackblitzUrl: true,
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/start/latest/docs/framework/react/overview',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/start/latest/docs/framework/react/examples/start-basic',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'GitHub',
       to: `https://github.com/${repo}`,
     },
@@ -59,7 +57,7 @@ export const startProject = {
     {
       title: 'Enterprise-Grade Routing',
       icon: (
-        <PiTreeStructureBold
+        <Network
           className={twMerge('motion-safe:animate-pulse', textStyles)}
           style={{
             animationDuration: '5s',
@@ -83,7 +81,7 @@ export const startProject = {
     {
       title: 'SSR, Streaming and Server RPCs',
       icon: (
-        <TbServerBolt
+        <ServerCrash
           className={twMerge('motion-safe:animate-ping', textStyles)}
           style={{
             animationDuration: '2s',
@@ -106,7 +104,7 @@ export const startProject = {
     {
       title: 'Client-Side First, 100% Server Capable',
       icon: (
-        <FaYinYang
+        <YinYangIcon
           className={twMerge('motion-safe:animate-spin', textStyles)}
           style={{
             animationDuration: '10s',
@@ -133,7 +131,7 @@ export const startProject = {
     {
       title: 'Deploy Anywhere',
       icon: (
-        <PiRocketLaunchDuotone
+        <Rocket
           className={twMerge('motion-safe:animate-bounce', textStyles)}
           style={{
             animationDuration: '2.5s',
diff --git a/src/libraries/store.tsx b/src/libraries/store.tsx
index 91cf4cf81..a89cd5077 100644
--- a/src/libraries/store.tsx
+++ b/src/libraries/store.tsx
@@ -1,7 +1,6 @@
-import { VscPreview, VscWand } from 'react-icons/vsc'
-import { FaGithub } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
+import { Book, Wallpaper, WandSparkles } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
 
 const repo = 'tanstack/store'
 
@@ -31,17 +30,17 @@ export const storeProject = {
   defaultDocs: 'overview',
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/store/latest/docs',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/store/latest/docs/framework/react/examples/simple',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -49,7 +48,7 @@ export const storeProject = {
   featureHighlights: [
     {
       title: 'Battle-Tested',
-      icon: <VscWand className={twMerge(textStyles)} />,
+      icon: <WandSparkles className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Store is widely adopted across the TanStack ecosystem,
@@ -65,7 +64,7 @@ export const storeProject = {
     },
     {
       title: 'Tiny Bundle Size',
-      icon: <VscWand className={twMerge(textStyles)} />,
+      icon: <WandSparkles className={twMerge(textStyles)} />,
       description: (
         <div>
           Designed with a focus on performance and efficiency, boasting a{' '}
@@ -80,7 +79,7 @@ export const storeProject = {
     },
     {
       title: 'Framework Agnostic',
-      icon: <VscWand className={twMerge(textStyles)} />,
+      icon: <WandSparkles className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack Store is{' '}
diff --git a/src/libraries/table.tsx b/src/libraries/table.tsx
index 429ef5bf2..a3de648b6 100644
--- a/src/libraries/table.tsx
+++ b/src/libraries/table.tsx
@@ -1,9 +1,8 @@
 import { handleRedirects } from '~/utils/handleRedirects.server'
-import { VscPreview } from 'react-icons/vsc'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { IoIosBody } from 'react-icons/io'
+import { Book, PersonStanding, Wallpaper, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/table'
 
@@ -53,17 +52,17 @@ export const tableProject = {
   },
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/table/latest/docs/introduction',
     },
     {
-      icon: <VscPreview className="text-lg" />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/table/latest/docs/framework/react/examples/basic',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -73,7 +72,7 @@ export const tableProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <IoIosBody className={twMerge(textStyles)} />
+          <PersonStanding className={twMerge(textStyles)} />
         </div>
       ),
       description: (
@@ -90,7 +89,7 @@ export const tableProject = {
     },
     {
       title: 'Big Power, Small Package',
-      icon: <FaBolt className={twMerge(textStyles)} />,
+      icon: <Zap className={twMerge(textStyles)} />,
       description: (
         <div>
           Don't be fooled by the small bundle size. TanStack Table is a
@@ -106,7 +105,7 @@ export const tableProject = {
     },
     {
       title: 'Extensible',
-      icon: <FaCogs className={twMerge(textStyles)} />,
+      icon: <CogsIcon className={twMerge(textStyles)} />,
       description: (
         <div>
           TanStack table ships with excellent defaults to get you off the ground
diff --git a/src/libraries/virtual.tsx b/src/libraries/virtual.tsx
index 7fec9021b..7986cc9c2 100644
--- a/src/libraries/virtual.tsx
+++ b/src/libraries/virtual.tsx
@@ -1,8 +1,7 @@
-import { VscPreview } from 'react-icons/vsc'
-import { FaGithub, FaBolt, FaCogs } from 'react-icons/fa'
-import { BiBookAlt } from 'react-icons/bi'
-import { IoIosBody } from 'react-icons/io'
+import { Book, PersonStanding, Wallpaper, Zap } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CogsIcon } from '~/components/icons/CogsIcon'
 
 const repo = 'tanstack/virtual'
 
@@ -33,17 +32,17 @@ export const virtualProject = {
   legacyPackages: ['react-virtual'],
   menu: [
     {
-      icon: <BiBookAlt />,
+      icon: <Book />,
       label: 'Docs',
       to: '/virtual/latest/docs/introduction',
     },
     {
-      icon: <VscPreview />,
+      icon: <Wallpaper size={16} />,
       label: 'Examples',
       to: '/virtual/latest/docs/framework/react/examples/dynamic',
     },
     {
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       label: 'Github',
       to: `https://github.com/${repo}`,
     },
@@ -53,7 +52,7 @@ export const virtualProject = {
       title: 'Designed for zero design',
       icon: (
         <div className="text-center overflow-hidden">
-          <IoIosBody className="text-purple-400" />
+          <PersonStanding className="text-purple-400" />
         </div>
       ),
       description: (
@@ -69,7 +68,7 @@ export const virtualProject = {
     },
     {
       title: 'Big Power, Small Package',
-      icon: <FaBolt className="text-purple-500" />,
+      icon: <Zap className="text-purple-500" />,
       description: (
         <div>
           Don't be fooled by the small bundle size. TanStack Virtual uses every
@@ -84,7 +83,7 @@ export const virtualProject = {
     },
     {
       title: 'Maximum Composability',
-      icon: <FaCogs className="text-purple-600" />,
+      icon: <CogsIcon className="text-purple-600" />,
       description: (
         <div>
           With a single function/hook, you'll get limitless virtualization for{' '}
diff --git a/src/routes/$libraryId/$version.docs.contributors.tsx b/src/routes/$libraryId/$version.docs.contributors.tsx
index fb5e028be..0d9b4b035 100644
--- a/src/routes/$libraryId/$version.docs.contributors.tsx
+++ b/src/routes/$libraryId/$version.docs.contributors.tsx
@@ -4,15 +4,14 @@ import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
 import { getLibrary } from '~/libraries'
 import { ContributorsWall } from '~/components/ContributorsWall'
-import {} from '@tanstack/react-router'
 import { getLibraryContributors } from '~/libraries/maintainers'
 import {
   MaintainerCard,
   CompactMaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
-import { MdViewList, MdViewModule, MdFormatListBulleted } from 'react-icons/md'
 import { useState } from 'react'
+import { Grid2X2, Grid3X3, LayoutList } from 'lucide-react'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/contributors')({
   component: RouteComponent,
@@ -64,7 +63,7 @@ function RouteComponent() {
                   }`}
                   title="Compact cards"
                 >
-                  <MdViewList className="w-5 h-5" />
+                  <Grid3X3 className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('full')}
@@ -75,7 +74,7 @@ function RouteComponent() {
                   }`}
                   title="Full cards"
                 >
-                  <MdViewModule className="w-5 h-5" />
+                  <Grid2X2 className="w-5 h-5" />
                 </button>
                 <button
                   onClick={() => setViewMode('row')}
@@ -86,7 +85,7 @@ function RouteComponent() {
                   }`}
                   title="Row cards"
                 >
-                  <MdFormatListBulleted className="w-5 h-5" />
+                  <LayoutList className="w-5 h-5" />
                 </button>
               </div>
             </div>
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index f7f6d2056..7e2b160a0 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -6,7 +6,6 @@ import {
   useSuspenseQuery,
 } from '@tanstack/react-query'
 import React from 'react'
-import { FaExternalLinkAlt } from 'react-icons/fa'
 import { DocTitle } from '~/components/DocTitle'
 import { Framework, getBranch, getLibrary } from '~/libraries'
 import { fetchFile, fetchRepoDirectoryContents } from '~/utils/docs'
@@ -19,6 +18,7 @@ import { capitalize, slugToTitle } from '~/utils/utils'
 import { z } from 'zod'
 import { CodeExplorer } from '~/components/CodeExplorer'
 import type { GitHubFileNode } from '~/utils/documents.server'
+import { ExternalLink } from 'lucide-react'
 
 const fileQueryOptions = (repo: string, branch: string, filePath: string) => {
   return queryOptions({
@@ -250,7 +250,7 @@ function PageComponent() {
               className="flex gap-1 items-center"
               rel="noreferrer"
             >
-              <FaExternalLinkAlt /> Github
+              <ExternalLink /> Github
             </a>
             {!library.hideStackblitzUrl ? (
               <a
@@ -259,7 +259,7 @@ function PageComponent() {
                 className="flex gap-1 items-center"
                 rel="noreferrer"
               >
-                <FaExternalLinkAlt /> StackBlitz
+                <ExternalLink /> StackBlitz
               </a>
             ) : null}
             {!library.hideCodesandboxUrl ? (
@@ -269,7 +269,7 @@ function PageComponent() {
                 className="flex gap-1 items-center"
                 rel="noreferrer"
               >
-                <FaExternalLinkAlt /> CodeSandbox
+                <ExternalLink /> CodeSandbox
               </a>
             ) : null}
           </div>
diff --git a/src/routes/$libraryId/$version.docs.framework.index.tsx b/src/routes/$libraryId/$version.docs.framework.index.tsx
index b2decd37a..4b46e3d9e 100644
--- a/src/routes/$libraryId/$version.docs.framework.index.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.index.tsx
@@ -1,11 +1,12 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { FaDiscord, FaGithub } from 'react-icons/fa'
 import { DocContainer } from '~/components/DocContainer'
 import { DocTitle } from '~/components/DocTitle'
 import { getLibrary } from '~/libraries'
 import { getFrameworkOptions } from '~/libraries/frameworks'
 import { FrameworkCard } from '~/components/FrameworkCard'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { DiscordIcon } from '~/components/icons/DiscordIcon'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/framework/')({
   component: RouteComponent,
@@ -30,7 +31,7 @@ function getPackageName(
 }
 
 function RouteComponent() {
-  const { libraryId, version } = Route.useParams()
+  const { libraryId } = Route.useParams()
   const library = getLibrary(libraryId)
 
   const frameworks = getFrameworkOptions(library.frameworks)
@@ -93,7 +94,7 @@ function RouteComponent() {
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
                 >
-                  <FaDiscord className="w-5 h-5" />
+                  <DiscordIcon className="w-5 h-5" />
                   Join Discord
                 </a>
                 <a
@@ -102,7 +103,7 @@ function RouteComponent() {
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
                 >
-                  <FaGithub className="w-5 h-5" />
+                  <GithubIcon className="w-5 h-5" />
                   Start Discussion
                 </a>
               </div>
diff --git a/src/routes/_libraries/account/feedback.tsx b/src/routes/_libraries/account/feedback.tsx
index 2ae3ac34d..909763603 100644
--- a/src/routes/_libraries/account/feedback.tsx
+++ b/src/routes/_libraries/account/feedback.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { getUserDocFeedbackQueryOptions } from '~/queries/docFeedback'
-import { FaAward, FaExternalLinkAlt } from 'react-icons/fa'
 import { PaginationControls } from '~/components/PaginationControls'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { DocFeedbackNote } from '~/components/DocFeedbackNote'
 import { Spinner } from '~/components/Spinner'
+import { Award, ExternalLink } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/account/feedback')({
   component: AccountFeedbackPage,
@@ -54,7 +54,7 @@ function AccountFeedbackPage() {
         <div className="flex items-start justify-between">
           <div>
             <div className="flex items-center gap-2 mb-2">
-              <FaAward className="text-2xl text-blue-600 dark:text-blue-400" />
+              <Award className="text-2xl text-blue-600 dark:text-blue-400" />
               <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                 Feedback Points
               </h3>
@@ -98,7 +98,7 @@ function AccountFeedbackPage() {
             className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1"
           >
             View Leaderboard
-            <FaExternalLinkAlt className="text-xs" />
+            <ExternalLink className="text-xs" />
           </Link>
         </div>
       </div>
@@ -134,7 +134,7 @@ function AccountFeedbackPage() {
                   >
                     {item.libraryId}
                     {item.pagePath}
-                    <FaExternalLinkAlt className="text-[10px]" />
+                    <ExternalLink className="text-[10px]" />
                   </Link>
 
                   {/* Feedback card */}
diff --git a/src/routes/_libraries/account/index.tsx b/src/routes/_libraries/account/index.tsx
index b2417c955..d6d0dbd61 100644
--- a/src/routes/_libraries/account/index.tsx
+++ b/src/routes/_libraries/account/index.tsx
@@ -1,10 +1,10 @@
-import { FaSignOutAlt } from 'react-icons/fa'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { authClient } from '~/utils/auth.client'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { useToast } from '~/components/ToastProvider'
 import { updateAdPreference } from '~/utils/users.server'
+import { LogOut } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/account/')({
   component: AccountSettingsPage,
@@ -69,7 +69,9 @@ function AccountSettingsPage() {
         </h3>
         <div className="flex flex-col gap-y-4 text-sm">
           <div className="flex flex-col gap-1">
-            <label className="font-medium">Email</label>
+            <label htmlFor="email" className="font-medium">
+              Email
+            </label>
             <input
               type="text"
               className="border border-gray-300 rounded-md py-1 px-2 w-full max-w-xs"
@@ -113,7 +115,7 @@ function AccountSettingsPage() {
           onClick={signOut}
           className="text-sm flex gap-2 items-center font-medium bg-black/80 hover:bg-black text-white dark:bg-white/95 dark:hover:bg-white dark:text-black py-1.5 px-2 rounded-md transition-colors my-4"
         >
-          <FaSignOutAlt /> Logout
+          <LogOut size={14} /> Logout
         </button>
       </div>
     </div>
diff --git a/src/routes/_libraries/account/notes.tsx b/src/routes/_libraries/account/notes.tsx
index f3707d515..1eec77409 100644
--- a/src/routes/_libraries/account/notes.tsx
+++ b/src/routes/_libraries/account/notes.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { getUserDocFeedbackQueryOptions } from '~/queries/docFeedback'
-import { FaExternalLinkAlt } from 'react-icons/fa'
 import { PaginationControls } from '~/components/PaginationControls'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { DocFeedbackNote } from '~/components/DocFeedbackNote'
 import { Spinner } from '~/components/Spinner'
+import { ExternalLink } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/account/notes')({
   component: AccountNotesPage,
@@ -80,7 +80,7 @@ function AccountNotesPage() {
                   >
                     {item.libraryId}
                     {item.pagePath}
-                    <FaExternalLinkAlt className="text-[10px]" />
+                    <ExternalLink className="text-[10px]" />
                   </Link>
 
                   {/* Feedback card */}
diff --git a/src/routes/_libraries/ads.tsx b/src/routes/_libraries/ads.tsx
index 0a69cca3f..608d1341d 100644
--- a/src/routes/_libraries/ads.tsx
+++ b/src/routes/_libraries/ads.tsx
@@ -2,12 +2,14 @@ import { createFileRoute, Link } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
 import { authClient } from '~/utils/auth.client'
-import { FaGithub, FaGoogle, FaCheckCircle } from 'react-icons/fa'
 import { Authenticated, Unauthenticated } from '~/components/AuthComponents'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useToast } from '~/components/ToastProvider'
 import { useEffect, useState } from 'react'
 import { setInterestedInHidingAds } from '~/utils/users.server'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
+import { GoogleIcon } from '~/components/icons/GoogleIcon'
 
 export const Route = createFileRoute('/_libraries/ads')({
   component: RouteComp,
@@ -202,7 +204,7 @@ function SignInForm() {
         }
         className="w-full bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/95 dark:hover:bg-white font-semibold py-2 px-4 rounded-md transition-colors"
       >
-        <FaGithub className="inline-block mr-2" /> Sign in with GitHub
+        <GithubIcon className="inline-block mr-2" /> Sign in with GitHub
       </button>
       <button
         onClick={() =>
@@ -212,7 +214,7 @@ function SignInForm() {
         }
         className="w-full bg-[#DB4437]/95 hover:bg-[#DB4437] text-white font-semibold py-2 px-4 rounded-md transition-colors mt-4"
       >
-        <FaGoogle className="inline-block mr-2" /> Sign in with Google
+        <GoogleIcon className="inline-block mr-2" /> Sign in with Google
       </button>
     </div>
   )
@@ -270,7 +272,7 @@ function OptInButton() {
     return (
       <div className="bg-white dark:bg-black/30 rounded-lg shadow-lg p-8 w-[100vw] max-w-sm mx-auto text-center">
         <div className="flex items-center justify-center mb-4">
-          <FaCheckCircle className="text-green-500 text-4xl" />
+          <CheckCircleIcon className="text-green-500 text-4xl" />
         </div>
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
           You're on the waitlist!
diff --git a/src/routes/_libraries/blog.$.tsx b/src/routes/_libraries/blog.$.tsx
index ea9eae2fa..4637c1bb0 100644
--- a/src/routes/_libraries/blog.$.tsx
+++ b/src/routes/_libraries/blog.$.tsx
@@ -10,7 +10,6 @@ import { createServerFn } from '@tanstack/react-start'
 import { formatAuthors } from '~/utils/blog'
 import { format } from 'date-fns'
 import { z } from 'zod'
-import { FaArrowLeft, FaEdit } from 'react-icons/fa'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 import { allPosts } from 'content-collections'
 import * as React from 'react'
@@ -20,6 +19,7 @@ import { Markdown } from '~/components/Markdown'
 import { CopyMarkdownButton } from '~/components/CopyMarkdownButton'
 import { GamFooter, GamHeader } from '~/components/Gam'
 import { AdGate } from '~/contexts/AdsContext'
+import { ArrowLeft, SquarePen } from 'lucide-react'
 
 function handleRedirects(docsPath: string) {
   if (docsPath.includes('directives-the-new-framework-lock-in')) {
@@ -140,7 +140,7 @@ ${content}`
                     to="/blog"
                     className="font-black inline-flex items-center gap-2 p-1"
                   >
-                    <FaArrowLeft />
+                    <ArrowLeft />
                     Back to Blog
                   </Link>
                 </div>
@@ -180,7 +180,7 @@ ${content}`
                           href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
                           className="flex items-center gap-2"
                         >
-                          <FaEdit /> Edit on GitHub
+                          <SquarePen size={16} /> Edit on GitHub
                         </a>
                       </div>
                       <div className="h-24" />
diff --git a/src/routes/_libraries/brand-guide.tsx b/src/routes/_libraries/brand-guide.tsx
index 78b908be0..fb0c1521a 100644
--- a/src/routes/_libraries/brand-guide.tsx
+++ b/src/routes/_libraries/brand-guide.tsx
@@ -4,7 +4,7 @@ import { Footer } from '~/components/Footer'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useToast } from '~/components/ToastProvider'
-import { FaRegCopy, FaDownload } from 'react-icons/fa'
+import { Copy, Download } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/brand-guide')({
   component: RouteComponent,
@@ -81,7 +81,7 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
               className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-700"
               aria-label="Download asset"
             >
-              <FaDownload className="h-3 w-3" />
+              <Download className="h-3 w-3" />
               Download
             </button>
             <button
@@ -114,7 +114,7 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
               }}
               className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-700"
             >
-              <FaRegCopy className="h-3 w-3" />
+              <Copy className="h-3 w-3" />
               Copy URL
             </button>
             {isSvg ? (
@@ -147,7 +147,7 @@ function AssetCard({ title, description, asset, url, bg }: AssetCardProps) {
                 }}
                 className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
               >
-                <FaRegCopy className="h-3 w-3" />
+                <Copy className="h-3 w-3" />
                 Copy as SVG
               </button>
             ) : null}
diff --git a/src/routes/_libraries/config.$version.index.tsx b/src/routes/_libraries/config.$version.index.tsx
index b53dc005e..8f3a8e529 100644
--- a/src/routes/_libraries/config.$version.index.tsx
+++ b/src/routes/_libraries/config.$version.index.tsx
@@ -1,5 +1,4 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { FaCheckCircle } from 'react-icons/fa'
 import { Footer } from '~/components/Footer'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import { LibraryHero } from '~/components/LibraryHero'
@@ -14,6 +13,7 @@ import OpenSourceStats from '~/components/OpenSourceStats'
 import { ossStatsQuery } from '~/queries/stats'
 import { AdGate } from '~/contexts/AdsContext'
 import { GamHeader } from '~/components/Gam'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
 
 const library = getLibrary('config')
 
@@ -82,7 +82,7 @@ function FormVersionIndex() {
             ].map((d, i) => {
               return (
                 <span key={i} className="flex items-center gap-2">
-                  <FaCheckCircle className="text-green-500 " /> {d}
+                  <CheckCircleIcon className="text-green-500 " /> {d}
                 </span>
               )
             })}
diff --git a/src/routes/_libraries/dashboard.tsx b/src/routes/_libraries/dashboard.tsx
index 80e429275..7234e1606 100644
--- a/src/routes/_libraries/dashboard.tsx
+++ b/src/routes/_libraries/dashboard.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
-import { FaArrowRight } from 'react-icons/fa'
-import { PiHandWavingLight } from 'react-icons/pi'
+import { ArrowRight, Hand } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/dashboard')({
   component: Dashboard,
@@ -35,7 +34,7 @@ function Dashboard() {
                   animation: waved ? 'hand-wave 1s ease-in-out 1' : undefined,
                 }}
               >
-                <PiHandWavingLight className="w-24 h-24 text-yellow-500 rounded-full" />
+                <Hand className="w-24 h-24 text-yellow-500 rounded-full" />
               </div>
             </div>
             <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-1 text-center">
@@ -50,7 +49,7 @@ function Dashboard() {
                 className="inline-block bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/90 dark:hover:bg-white font-semibold py-2 px-6 rounded-md transition-colors text-center"
               >
                 Account Settings
-                <FaArrowRight className="inline-block ml-2" />
+                <ArrowRight className="inline-block ml-2" />
               </a>
             </div>
           </div>
diff --git a/src/routes/_libraries/devtools.$version.index.tsx b/src/routes/_libraries/devtools.$version.index.tsx
index 9d68d88f1..f47de4b50 100644
--- a/src/routes/_libraries/devtools.$version.index.tsx
+++ b/src/routes/_libraries/devtools.$version.index.tsx
@@ -1,5 +1,4 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { FaCheckCircle } from 'react-icons/fa'
 import { Footer } from '~/components/Footer'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
 import { BottomCTA } from '~/components/BottomCTA'
@@ -14,6 +13,7 @@ import OpenSourceStats from '~/components/OpenSourceStats'
 import { ossStatsQuery } from '~/queries/stats'
 import { AdGate } from '~/contexts/AdsContext'
 import { GamHeader } from '~/components/Gam'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
 
 const library = getLibrary('devtools')
 
@@ -86,7 +86,7 @@ function DevtoolsVersionIndex() {
             ].map((d, i) => {
               return (
                 <span key={i} className="flex items-center gap-2">
-                  <FaCheckCircle className="text-green-500 " /> {d}
+                  <CheckCircleIcon className="text-green-500 " /> {d}
                 </span>
               )
             })}
diff --git a/src/routes/_libraries/feed.$id.tsx b/src/routes/_libraries/feed.$id.tsx
index e422b102a..2c015376a 100644
--- a/src/routes/_libraries/feed.$id.tsx
+++ b/src/routes/_libraries/feed.$id.tsx
@@ -2,7 +2,6 @@ import { createFileRoute, Link, notFound } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
 import { useCapabilities } from '~/hooks/useCapabilities'
-import { FaArrowLeft } from 'react-icons/fa'
 import { z } from 'zod'
 import { format, formatDistanceToNow } from 'date-fns'
 import { Markdown } from '~/components/Markdown'
@@ -11,6 +10,7 @@ import { partners } from '~/utils/partners'
 import { twMerge } from 'tailwind-merge'
 import type { FeedEntry } from '~/components/FeedEntry'
 import { getFeedEntryByIdQueryOptions } from '~/queries/feed'
+import { ArrowLeft } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/feed/$id')({
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -243,7 +243,7 @@ function FeedEntryView({ entry }: { entry: FeedEntry }) {
           }}
           className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-4 font-medium"
         >
-          <FaArrowLeft />
+          <ArrowLeft />
           Back to Feed
         </Link>
 
diff --git a/src/routes/_libraries/learn.tsx b/src/routes/_libraries/learn.tsx
index a80fe11cb..b5ebe17c8 100644
--- a/src/routes/_libraries/learn.tsx
+++ b/src/routes/_libraries/learn.tsx
@@ -1,8 +1,8 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { FaCheckCircle } from 'react-icons/fa'
-import { LuUsers, LuVideo, LuMapPin, LuStar } from 'react-icons/lu'
+import { Users, Video, MapPin, Star } from 'lucide-react'
 import { LogoQueryGG } from '~/components/LogoQueryGG'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
 
 export const Route = createFileRoute('/_libraries/learn')({
   component: LearnPage,
@@ -36,7 +36,7 @@ function LearnPage() {
             </div>
             <div className="p-4 lg:p-8">
               <div className="flex items-center gap-3 mb-4">
-                <LuUsers className="w-8 h-8" />
+                <Users className="w-8 h-8" />
                 <h2 className="text-xl font-bold">Professional Workshops</h2>
               </div>
               <p className="text-sm mb-4 opacity-90">
@@ -45,15 +45,15 @@ function LearnPage() {
               </p>
               <div className="grid gap-2 text-xs text-left">
                 <div className="flex items-start gap-2">
-                  <LuVideo className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Video className="w-4 h-4 mt-0.5 flex-shrink-0" />
                   <div>Remote workshops worldwide</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <LuMapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0" />
                   <div>Premium in-person options</div>
                 </div>
                 <div className="flex items-start gap-2">
-                  <LuStar className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                  <Star className="w-4 h-4 mt-0.5 flex-shrink-0" />
                   <div>From maintainers & creators</div>
                 </div>
               </div>
@@ -91,13 +91,13 @@ function LearnPage() {
               <div className="grid max-w-(--breakpoint-lg) mx-auto text-xs gap-2 text-left">
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <FaCheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>Save time by learning with a guided approach</div>
                 </div>
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <FaCheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>
                     Get hands-on experience building a real-world application
@@ -105,52 +105,13 @@ function LearnPage() {
                 </div>
                 <div className="flex items-start gap-2">
                   <span className="text-lg text-green-500">
-                    <FaCheckCircle />
+                    <CheckCircleIcon />
                   </span>
                   <div>Never worry about data fetching again</div>
                 </div>
               </div>
             </div>
           </Link>
-          {/* <Link
-              to={'https://github.com/tanstack' as string}
-              target="_blank"
-              className="max-w-[300px] rounded-lg bg-linear-to-br from-gray-500 to-gray-900 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105"
-            >
-              <div className="p-4 text-lg md:text-xl lg:text-2xl font-bold text-center">
-                GitHub
-              </div>
-              <div className="p-4 flex gap-2 flex-wrap">
-                {['Bug Reports', 'Feature Requests', 'Source Code'].map((d) => (
-                  <div
-                    key={d}
-                    className="text-sm bg-white text-black rounded-full py-1 px-2 shadow-lg font-bold"
-                  >
-                    {d}
-                  </div>
-                ))}
-              </div>
-            </Link>
-            <Link
-              to="/paid-support"
-              className="max-w-[300px] rounded-lg bg-linear-to-br from-green-500 to-sky-500 text-white shadow-black/20 shadow-lg hover:shadow-2xl hover:shadow-black/20 divide-y divide-white/30 transition-all duration-200 hover:scale-105"
-            >
-              <div className="p-4 text-lg md:text-xl lg:text-2xl font-bold text-center">
-                Paid Support
-              </div>
-              <div className="p-4 flex gap-2 flex-wrap">
-                {['Consulting', 'Enterprise Paid Support'].map((d) => (
-                  <div
-                    key={d}
-                    className="text-sm bg-white/90 rounded-full py-1 px-2 shadow-lg font-bold"
-                  >
-                    <div className="text-transparent bg-clip-text bg-linear-to-r to-green-600 from-sky-600">
-                      {d}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </Link> */}
         </div>
       </div>
     </div>
diff --git a/src/routes/_libraries/login.tsx b/src/routes/_libraries/login.tsx
index 5cb3e669f..5c9c91250 100644
--- a/src/routes/_libraries/login.tsx
+++ b/src/routes/_libraries/login.tsx
@@ -1,11 +1,12 @@
 import { authClient } from '~/utils/auth.client'
 import { useIsDark } from '~/hooks/useIsDark'
-import { FaGithub, FaGoogle } from 'react-icons/fa'
 // Using public asset URLs for splash images
 import { BrandContextMenu } from '~/components/BrandContextMenu'
 import { redirect, createFileRoute } from '@tanstack/react-router'
 import { getCurrentUser } from '~/utils/auth.server'
 import { z } from 'zod'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { GoogleIcon } from '~/components/icons/GoogleIcon'
 
 export const Route = createFileRoute('/_libraries/login')({
   component: LoginPage,
@@ -56,7 +57,7 @@ export function SignInForm() {
         }
         className="w-full bg-black/80 hover:bg-black text-white dark:text-black dark:bg-white/95 dark:hover:bg-white font-semibold py-2 px-4 rounded-md transition-colors"
       >
-        <FaGithub className="inline-block mr-2" /> Sign in with GitHub
+        <GithubIcon className="inline-block mr-2 -mt-0.5" /> Sign in with GitHub
       </button>
       <button
         onClick={() =>
@@ -66,7 +67,7 @@ export function SignInForm() {
         }
         className="w-full bg-[#DB4437]/95 hover:bg-[#DB4437] text-white font-semibold py-2 px-4 rounded-md transition-colors mt-4"
       >
-        <FaGoogle className="inline-block mr-2" /> Sign in with Google
+        <GoogleIcon className="inline-block mr-2 -mt-0.5" /> Sign in with Google
       </button>
     </div>
   )
diff --git a/src/routes/_libraries/maintainers.tsx b/src/routes/_libraries/maintainers.tsx
index 2c98ae898..8256bc324 100644
--- a/src/routes/_libraries/maintainers.tsx
+++ b/src/routes/_libraries/maintainers.tsx
@@ -2,13 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 import { useState } from 'react'
 import * as React from 'react'
-import {
-  MdClose,
-  MdFilterList,
-  MdViewList,
-  MdViewModule,
-  MdFormatListBulleted,
-} from 'react-icons/md'
+import { X, ListFilter, Grid2X2, Grid3X3, LayoutList } from 'lucide-react'
 import { Footer } from '~/components/Footer'
 import {
   MaintainerCard,
@@ -25,7 +19,6 @@ import {
   getRoleForFilteredLibraries,
 } from '~/libraries/maintainers'
 import { Library, libraries } from '~/libraries'
-// import { fetchAllMaintainerStats } from '~/utils/docs'
 
 const librarySchema = z.enum([
   'start',
@@ -64,26 +57,6 @@ export const Route = createFileRoute('/_libraries/maintainers')({
       keywords: 'tanstack,maintainers,contributors,open source,developers',
     }),
   }),
-  // loader: async ({ context: { queryClient } }) => {
-  //   try {
-  //     // Fetch GitHub stats for all maintainers
-  //     const stats = await queryClient.ensureQueryData({
-  //       queryKey: ['maintainerStats'],
-  //       queryFn: () => fetchAllMaintainerStats(),
-  //       staleTime: 1000 * 60 * 30, // 30 minutes
-  //     })
-
-  //     return {
-  //       stats,
-  //     }
-  //   } catch (error) {
-  //     console.error('Error loading maintainer stats:', error)
-  //     // Return empty stats array if there's an error
-  //     return {
-  //       stats: [],
-  //     }
-  //   }
-  // },
 })
 
 interface FilterProps {
@@ -174,7 +147,7 @@ function MaintainersFilter({
             }`}
             title="Compact cards"
           >
-            <MdViewList className="w-5 h-5" />
+            <Grid3X3 className="w-5 h-5" />
           </button>
           <button
             onClick={() => onViewModeChange('full')}
@@ -185,7 +158,7 @@ function MaintainersFilter({
             }`}
             title="Full cards"
           >
-            <MdViewModule className="w-5 h-5" />
+            <Grid2X2 className="w-5 h-5" />
           </button>
           <button
             onClick={() => onViewModeChange('row')}
@@ -196,7 +169,7 @@ function MaintainersFilter({
             }`}
             title="Row cards"
           >
-            <MdFormatListBulleted className="w-5 h-5" />
+            <LayoutList className="w-5 h-5" />
           </button>
         </div>
 
@@ -206,7 +179,7 @@ function MaintainersFilter({
             onClick={() => setIsOpen(!isOpen)}
             className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <MdFilterList className="w-4 h-4" />
+            <ListFilter className="w-4 h-4" />
             Filter & Sort
             {hasFilters && (
               <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">
@@ -324,7 +297,7 @@ function MaintainersFilter({
                   onClick={() => toggleLibrary(libraryId)}
                   className="hover:bg-black/10 dark:hover:bg-white/10 rounded p-0.5 transition-colors"
                 >
-                  <MdClose className="w-3 h-3" />
+                  <X className="w-3 h-3" />
                 </button>
               </span>
             )
diff --git a/src/routes/_libraries/paid-support.tsx b/src/routes/_libraries/paid-support.tsx
index 708780368..c6919be9c 100644
--- a/src/routes/_libraries/paid-support.tsx
+++ b/src/routes/_libraries/paid-support.tsx
@@ -1,7 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { seo } from '~/utils/seo'
-import { HiOutlineMail } from 'react-icons/hi'
-import { MdViewList, MdViewModule, MdFormatListBulleted } from 'react-icons/md'
 import { useState } from 'react'
 import { coreMaintainers } from '~/libraries/maintainers'
 import {
@@ -9,6 +7,7 @@ import {
   MaintainerCard,
   MaintainerRowCard,
 } from '~/components/MaintainerCard'
+import { Grid2x2, Grid3X3, LayoutList, Mail } from 'lucide-react'
 
 export const Route = createFileRoute('/_libraries/paid-support')({
   component: PaidSupportComp,
@@ -68,7 +67,7 @@ function PaidSupportComp() {
                 }`}
                 title="Compact cards"
               >
-                <MdViewList className="w-5 h-5" />
+                <Grid3X3 className="w-5 h-5" />
               </button>
               <button
                 onClick={() => setViewMode('full')}
@@ -79,7 +78,7 @@ function PaidSupportComp() {
                 }`}
                 title="Full cards"
               >
-                <MdViewModule className="w-5 h-5" />
+                <Grid2x2 className="w-5 h-5" />
               </button>
               <button
                 onClick={() => setViewMode('row')}
@@ -90,7 +89,7 @@ function PaidSupportComp() {
                 }`}
                 title="Row cards"
               >
-                <MdFormatListBulleted className="w-5 h-5" />
+                <LayoutList className="w-5 h-5" />
               </button>
             </div>
           </div>
@@ -157,7 +156,7 @@ function PaidSupportComp() {
               href="mailto:support@tanstack.com?subject=Enterprise%20Support%20Inquiry"
               className="inline-flex items-center gap-3 px-6 py-3 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-medium hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-lg hover:scale-105"
             >
-              <HiOutlineMail className="w-5 h-5" />
+              <Mail className="w-5 h-5" />
               Contact Support Team
             </a>
           </div>
diff --git a/src/routes/_libraries/partners.tsx b/src/routes/_libraries/partners.tsx
index a69d2a313..fd02d1a1e 100644
--- a/src/routes/_libraries/partners.tsx
+++ b/src/routes/_libraries/partners.tsx
@@ -6,7 +6,7 @@ import { z } from 'zod'
 import { Library } from '~/libraries'
 import { useState } from 'react'
 import * as React from 'react'
-import { MdClose, MdFilterList } from 'react-icons/md'
+import { ListFilter, X } from 'lucide-react'
 import { startProject } from '~/libraries/start'
 import { routerProject } from '~/libraries/router'
 import { queryProject } from '~/libraries/query'
@@ -134,7 +134,7 @@ function PartnersFilter({
             onClick={() => setIsOpen(!isOpen)}
             className="inline-flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
-            <MdFilterList className="w-4 h-4" />
+            <ListFilter className="w-4 h-4" />
             Filter Partners
             {hasFilters && (
               <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-0.5 rounded-full text-xs">
@@ -253,7 +253,7 @@ function PartnersFilter({
                     onClick={() => toggleLibrary(libraryId)}
                     className="hover:bg-blue-200 dark:hover:bg-blue-800 rounded p-0.5 transition-colors"
                   >
-                    <MdClose className="w-3 h-3" />
+                    <X className="w-3 h-3" />
                   </button>
                 </span>
               )
diff --git a/src/routes/_libraries/start.$version.index.tsx b/src/routes/_libraries/start.$version.index.tsx
index 4e5ea3499..7633ba437 100644
--- a/src/routes/_libraries/start.$version.index.tsx
+++ b/src/routes/_libraries/start.$version.index.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react'
 
-import { FaBook, FaGithub } from 'react-icons/fa'
-
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { LazySponsorSection } from '~/components/LazySponsorSection'
@@ -9,16 +7,17 @@ import { BottomCTA } from '~/components/BottomCTA'
 import { LibraryHero } from '~/components/LibraryHero'
 import { startProject } from '~/libraries/start'
 import { seo } from '~/utils/seo'
-import { VscPreview } from 'react-icons/vsc'
 import { getLibrary } from '~/libraries'
 import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
 import LandingPageGad from '~/components/LandingPageGad'
 import { PartnersSection } from '~/components/PartnersSection'
 import OpenSourceStats from '~/components/OpenSourceStats'
 import { ossStatsQuery } from '~/queries/stats'
-import { TbBrandX } from 'react-icons/tb'
 import { AdGate } from '~/contexts/AdsContext'
 import { GamHeader } from '~/components/Gam'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { Book, Wallpaper } from 'lucide-react'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
 
 const library = getLibrary('start')
 
@@ -111,7 +110,7 @@ function VersionIndex() {
             }}
             className="flex items-center gap-2 py-2 px-4 bg-cyan-900 rounded text-white uppercase font-extrabold"
           >
-            <VscPreview className="min-w-4" /> See an Example
+            <Wallpaper className="min-w-4" /> See an Example
           </Link>
           <Link
             from={'/$libraryId/$version'}
@@ -119,13 +118,13 @@ function VersionIndex() {
             params={{ libraryId: library.id }}
             className="flex items-center gap-2 py-2 px-4 bg-cyan-800 rounded text-white uppercase font-extrabold"
           >
-            <FaBook className="min-w-4" /> Try the BETA
+            <Book className="min-w-4" /> Try the BETA
           </Link>
           <a
             href={`https://github.com/tanstack/tanstack.com`}
             className={`flex items-center gap-2 py-2 px-4 bg-cyan-700 rounded text-white uppercase font-extrabold`}
           >
-            <FaGithub className="min-w-4" /> TanStack.com Source
+            <GithubIcon className="min-w-4" /> TanStack.com Source
           </a>
           <a
             href={`https://twitter.com/intent/post?text=${encodeURIComponent(
@@ -135,244 +134,17 @@ function VersionIndex() {
             className="flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold"
             rel="noreferrer"
           >
-            <TbBrandX className="min-w-4" /> Tweet about it!
+            <BrandXIcon className="min-w-4" /> Tweet about it!
           </a>{' '}
         </div>
       </div>
 
-      {/* <div
-        className="text-lg flex flex-col gap-12 p-8 max-w-[1200px] mx-auto
-                        md:flex-row"
-      >
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <VscWand className="text-cyan-500 text-6xl" />
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Built on TanStack Router
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              Writing your data fetching logic by hand is over. Tell TanStack
-              Query where to get your data and how fresh you need it to be and
-              the rest is automatic. It handles{' '}
-              <span className="font-semibold text-cyan-700 dark:text-cyan-400">
-                caching, background updates and stale data out of the box with
-                zero-configuration
-              </span>
-              .
-            </p>
-          </div>
-        </div>
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <div className="text-center">
-            <FaBolt className="text-sky-600 text-6xl" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Simple & Familiar
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              If you know how to work with promises or async/await, then you
-              already know how to use TanStack Query. There's{' '}
-              <span className="font-semibold text-sky-700 dark:text-sky-400">
-                no global state to manage, reducers, normalization systems or
-                heavy configurations to understand
-              </span>
-              . Simply pass a function that resolves your data (or throws an
-              error) and the rest is history.
-            </p>
-          </div>
-        </div>
-        <div className="flex-1 flex flex-col gap-8 items-center">
-          <div className="text-center">
-            <FaCogs className="text-blue-500 text-6xl" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <h3 className="uppercase text-center text-xl font-black">
-              Extensible
-            </h3>
-            <p className="text-sm text-gray-800 dark:text-gray-200 leading-6">
-              TanStack Query is configurable down to each observer instance of a
-              query with knobs and options to fit every use-case. It comes wired
-              up with{' '}
-              <span className="font-semibold text-blue-700 dark:text-blue-400">
-                dedicated devtools, infinite-loading APIs, and first class
-                mutation tools that make updating your data a breeze
-              </span>
-              . Don't worry though, everything is pre-configured for success!
-            </p>
-          </div>
-        </div>
-      </div> */}
-
-      {/* <div className="px-4 sm:px-6 lg:px-8 mx-auto">
-        <div className=" sm:text-center pb-16">
-          <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
-            No dependencies. All the Features.
-          </h3>
-          <p className="mt-4 text-xl max-w-3xl mx-auto leading-7 opacity-60">
-            With zero dependencies, TanStack Query is extremely lean given the
-            dense feature set it provides. From weekend hobbies all the way to
-            enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉),
-            TanStack Query is the battle-hardened tool to help you succeed at
-            the speed of your creativity.
-          </p>
-        </div>
-        <div className="grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4  mx-auto">
-          {[
-            'Backend agnostic',
-            'Dedicated Devtools',
-            'Auto Caching',
-            'Auto Refetching',
-            'Window Focus Refetching',
-            'Polling/Realtime Queries',
-            'Parallel Queries',
-            'Dependent Queries',
-            'Mutations API',
-            'Automatic Garbage Collection',
-            'Paginated/Cursor Queries',
-            'Load-More/Infinite Scroll Queries',
-            'Scroll Recovery',
-            'Request Cancellation',
-            'Suspense Ready!',
-            'Render-as-you-fetch',
-            'Prefetching',
-            'Variable-length Parallel Queries',
-            'Offline Support',
-            'SSR Support',
-            'Data Selectors',
-          ].map((d, i) => {
-            return (
-              <span key={i} className="flex items-center gap-2">
-                <FaCheckCircle className="text-green-500 " /> {d}
-              </span>
-            )
-          })}
-        </div>
-      </div> */}
-
-      {/* <div>
-        <div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-3">
-          Trusted in Production by
-        </div>
-        <marquee scrollamount="2">
-          <div className="flex gap-2 items-center text-3xl font-bold ml-[-100%]">
-            {(new Array(4) as string[])
-              .fill('')
-              .reduce(
-                (all) => [...all, ...all],
-                [
-                  'Google',
-                  'Walmart',
-                  'Facebook',
-                  'PayPal',
-                  'Amazon',
-                  'American Express',
-                  'Microsoft',
-                  'Target',
-                  'Ebay',
-                  'Autodesk',
-                  'CarFAX',
-                  'Docusign',
-                  'HP',
-                  'MLB',
-                  'Volvo',
-                  'Ocado',
-                  'UPC.ch',
-                  'EFI.com',
-                  'ReactBricks',
-                  'Nozzle.io',
-                  'Uber',
-                ]
-              )
-              .map((d, i) => (
-                <span key={i} className="opacity-70 even:opacity-40">
-                  {d}
-                </span>
-              ))}
-          </div>
-        </marquee>
-      </div> */}
-
       <PartnersSection libraryId="start" />
 
       <LazySponsorSection />
 
       <LandingPageGad />
 
-      {/* <div className="flex flex-col gap-4">
-        <div className="px-4 sm:px-6 lg:px-8  mx-auto max-w-3xl sm:text-center">
-          <h3 className="text-3xl text-center leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-2">
-            Less code, fewer edge cases.
-          </h3>
-          <p className="my-4 text-xl leading-7  text-gray-600">
-            Instead of writing reducers, caching logic, timers, retry logic,
-            complex async/await scripting (I could keep going...), you literally
-            write a tiny fraction of the code you normally would. You will be
-            surprised at how little code you're writing or how much code you're
-            deleting when you use TanStack Query. Try it out with one of the
-            examples below!
-          </p>
-          <div className="flex flex-wrap gap-2 justify-center">
-            {(
-              [
-                { label: 'Angular', value: 'angular' },
-                { label: 'React', value: 'react' },
-                { label: 'Solid', value: 'solid' },
-                { label: 'Svelte', value: 'svelte' },
-                { label: 'Vue', value: 'vue' },
-              ] as const
-            ).map((item) => (
-              <button
-                key={item.value}
-                className={`inline-block py-2 px-4 rounded text-white uppercase font-extrabold ${
-                  item.value === framework
-                    ? 'bg-cyan-500'
-                    : 'bg-gray-300 dark:bg-gray-700 hover:bg-cyan-300'
-                }`}
-                onClick={() => setFramework(item.value)}
-              >
-                {item.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div> */}
-
-      {/* {[''].includes(framework) ? (
-        <div className="px-2">
-          <div className="p-8 text-center text-lg w-full max-w-(--breakpoint-lg) mx-auto bg-black text-white rounded-xl">
-            Looking for the <strong>@tanstack/{framework}-query</strong>{' '}
-            example? We could use your help to build the{' '}
-            <strong>@tanstack/{framework}-query</strong> adapter! Join the{' '}
-            <a
-              href="https://tlinz.com/discord"
-              className="text-teal-500 font-bold"
-            >
-              TanStack Discord Server
-            </a>{' '}
-            and let's get to work!
-          </div>
-        </div>
-      ) : (
-        <div className="bg-white dark:bg-black">
-          <iframe
-            key={framework}
-            src={`https://stackblitz.com/github/${repo}/tree/${branch}/examples/${framework}/simple?embed=1&theme=${
-              isDark ? 'dark' : 'light'
-            }`}
-            title={`tannerlinsley/${framework}-query: basic`}
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-            className="shadow-2xl"
-            loading="lazy"
-            style={{
-              width: '100%',
-              height: '80vh',
-              border: '0',
-            }}
-          ></iframe>
-        </div>
-      )} */}
-
       <BottomCTA
         linkProps={{
           from: '/$libraryId/$version',
diff --git a/src/routes/_libraries/workshops.tsx b/src/routes/_libraries/workshops.tsx
index 3e8f39cb2..500d355f7 100644
--- a/src/routes/_libraries/workshops.tsx
+++ b/src/routes/_libraries/workshops.tsx
@@ -1,23 +1,23 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
 import { seo } from '~/utils/seo'
-import { HiOutlineMail } from 'react-icons/hi'
 import {
-  LuUsers,
-  LuVideo,
-  LuMapPin,
-  LuStar,
-  LuCode,
-  LuRocket,
-  LuCheckCircle2,
-  LuSettings,
-  LuCode2,
-} from 'react-icons/lu'
+  Users,
+  Video,
+  MapPin,
+  Star,
+  Code,
+  Rocket,
+  Settings,
+  CodeXml,
+} from 'lucide-react'
 import * as React from 'react'
 import { Footer } from '~/components/Footer'
 import { allMaintainers, Maintainer } from '~/libraries/maintainers'
 import { MaintainerCard } from '~/components/MaintainerCard'
 import { shuffleWithSeed } from '~/utils/utils'
+import { CheckCircleIcon } from '~/components/icons/CheckCircleIcon'
+import { Mail } from 'lucide-react'
 
 // Server function to get the seed based on 10-second intervals
 // This ensures consistency between server and client
@@ -74,7 +74,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get a Quote
             </a>
           </header>
@@ -83,7 +83,7 @@ function WorkshopsPage() {
           <div className="grid md:grid-cols-2 gap-6">
             <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg border border-gray-200 dark:border-gray-700">
               <div className="flex items-center gap-3 mb-4">
-                <LuVideo className="w-8 h-8 text-blue-500" />
+                <Video className="w-8 h-8 text-blue-500" />
                 <h2 className="text-2xl font-black">Remote Workshops</h2>
               </div>
               <p className="text-gray-600 dark:text-gray-300 mb-4">
@@ -93,19 +93,19 @@ function WorkshopsPage() {
               </p>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                 <li className="flex items-start gap-2">
-                  <LuCheckCircle2 className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                  <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
                   <span>No travel costs or logistics</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuCheckCircle2 className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                  <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
                   <span>Flexible scheduling across time zones</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuCheckCircle2 className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                  <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
                   <span>Interactive sessions with Q&A</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuCheckCircle2 className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
+                  <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
                   <span>Access to maintainers and creators</span>
                 </li>
               </ul>
@@ -113,7 +113,7 @@ function WorkshopsPage() {
 
             <div className="rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 p-6 shadow-lg text-white">
               <div className="flex items-center gap-3 mb-4">
-                <LuMapPin className="w-8 h-8" />
+                <MapPin className="w-8 h-8" />
                 <h2 className="text-2xl font-black">In-Person Workshops</h2>
               </div>
               <p className="mb-4 opacity-90">
@@ -123,19 +123,19 @@ function WorkshopsPage() {
               </p>
               <ul className="space-y-2 text-sm opacity-90">
                 <li className="flex items-start gap-2">
-                  <LuStar className="w-5 h-5 mt-0.5 flex-shrink-0" />
+                  <Star className="w-5 h-5 flex-shrink-0" />
                   <span>Premium experience with direct access</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuStar className="w-5 h-5 mt-0.5 flex-shrink-0" />
+                  <Star className="w-5 h-5 flex-shrink-0" />
                   <span>Personal appearance by Tanner Linsley available</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuStar className="w-5 h-5 mt-0.5 flex-shrink-0" />
+                  <Star className="w-5 h-5 flex-shrink-0" />
                   <span>Customized workshop content</span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <LuStar className="w-5 h-5 mt-0.5 flex-shrink-0" />
+                  <Star className="w-5 h-5 flex-shrink-0" />
                   <span>Extended Q&A and networking sessions</span>
                 </li>
               </ul>
@@ -155,7 +155,7 @@ function WorkshopsPage() {
               </h2>
               <div className="grid md:grid-cols-3 gap-6">
                 <div className="text-center">
-                  <LuCode className="w-12 h-12 text-blue-500 dark:text-blue-400 mx-auto mb-3" />
+                  <Code className="w-12 h-12 text-blue-500 dark:text-blue-400 mx-auto mb-3" />
                   <h3 className="font-black mb-2">From the Source</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300">
                     Learn directly from the maintainers and creators who built
@@ -163,7 +163,7 @@ function WorkshopsPage() {
                   </p>
                 </div>
                 <div className="text-center">
-                  <LuUsers className="w-12 h-12 text-blue-600 dark:text-blue-500 mx-auto mb-3" />
+                  <Users className="w-12 h-12 text-blue-600 dark:text-blue-500 mx-auto mb-3" />
                   <h3 className="font-black mb-2">Expert Instructors</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300">
                     Our workshops are led by experienced maintainers who
@@ -171,7 +171,7 @@ function WorkshopsPage() {
                   </p>
                 </div>
                 <div className="text-center">
-                  <LuRocket className="w-12 h-12 text-blue-700 dark:text-blue-600 mx-auto mb-3" />
+                  <Rocket className="w-12 h-12 text-blue-700 dark:text-blue-600 mx-auto mb-3" />
                   <h3 className="font-black mb-2">Practical Focus</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300">
                     Hands-on training that helps your team ship better code
@@ -198,7 +198,7 @@ function WorkshopsPage() {
             </div>
             <div className="grid md:grid-cols-2 gap-6 mt-8">
               <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg border border-gray-200 dark:border-gray-700">
-                <LuSettings className="w-8 h-8 text-blue-500 dark:text-blue-400 mb-3" />
+                <Settings className="w-8 h-8 text-blue-500 dark:text-blue-400 mb-3" />
                 <h3 className="text-lg font-black mb-2">
                   Customized to Your Stack
                 </h3>
@@ -210,7 +210,7 @@ function WorkshopsPage() {
                 </p>
               </div>
               <div className="rounded-lg bg-white dark:bg-gray-800 p-6 shadow-lg border border-gray-200 dark:border-gray-700">
-                <LuCode2 className="w-8 h-8 text-blue-600 dark:text-blue-500 mb-3" />
+                <CodeXml className="w-8 h-8 text-blue-600 dark:text-blue-500 mb-3" />
                 <h3 className="text-lg font-black mb-2">Hands-On Learning</h3>
                 <p className="text-gray-600 dark:text-gray-300 text-sm">
                   Expect to code, not just listen. Our workshops include live
@@ -235,7 +235,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-lg font-black text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get a Quote
             </a>
           </div>
@@ -317,7 +317,7 @@ function WorkshopsPage() {
                 href="mailto:workshops@tanstack.com?subject=Workshop%20Questions"
                 className="inline-flex items-center gap-3 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
               >
-                <HiOutlineMail className="w-5 h-5" />
+                <Mail className="w-5 h-5" />
                 Ask Us Anything
               </a>
             </div>
@@ -349,7 +349,7 @@ function WorkshopsPage() {
                     key={topic}
                     className="flex items-center gap-3 rounded-lg bg-white dark:bg-gray-800 px-4 py-3 shadow-sm border border-gray-200 dark:border-gray-700"
                   >
-                    <LuCheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0" />
+                    <CheckCircleIcon className="w-5 h-5 text-green-500 flex-shrink-0" />
                     <span className="text-gray-700 dark:text-gray-300 font-medium">
                       {topic}
                     </span>
@@ -385,15 +385,15 @@ function WorkshopsPage() {
               </p>
               <div className="flex flex-wrap justify-center gap-4">
                 <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 rounded-full text-sm font-medium border border-amber-200 dark:border-amber-800">
-                  <LuStar className="w-4 h-4" />
+                  <Star className="w-4 h-4" />
                   <span>Q&A Sessions</span>
                 </div>
                 <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 rounded-full text-sm font-medium border border-amber-200 dark:border-amber-800">
-                  <LuCode className="w-4 h-4" />
+                  <Code className="w-4 h-4" />
                   <span>Lightning Consults</span>
                 </div>
                 <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 rounded-full text-sm font-medium border border-amber-200 dark:border-amber-800">
-                  <LuRocket className="w-4 h-4" />
+                  <Rocket className="w-4 h-4" />
                   <span>Inspire Your Developers</span>
                 </div>
               </div>
@@ -420,7 +420,7 @@ function WorkshopsPage() {
               href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry"
               className="inline-flex items-center gap-3 px-8 py-4 bg-linear-to-r from-green-600 to-cyan-600 text-white rounded-lg font-black text-lg hover:from-green-700 hover:to-cyan-700 transition-all duration-200 hover:shadow-xl hover:scale-105"
             >
-              <HiOutlineMail className="w-6 h-6" />
+              <Mail className="w-6 h-6" />
               Get Started Today
             </a>
           </div>
@@ -512,7 +512,7 @@ function TestimonialsMarquee() {
               >
                 <div className="flex items-start gap-2 mb-4">
                   {[...Array(5)].map((_, j) => (
-                    <LuStar
+                    <Star
                       key={j}
                       className="w-4 h-4 text-yellow-500 fill-yellow-500"
                     />
@@ -566,7 +566,7 @@ function InstructorsSection({ instructors }: { instructors: Maintainer[] }) {
           href="mailto:workshops@tanstack.com?subject=Workshop%20Inquiry&body=I'm interested in learning more about your workshop instructors and availability."
           className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 hover:shadow-lg"
         >
-          <HiOutlineMail className="w-5 h-5" />
+          <Mail className="w-5 h-5" />
           Learn More About Our Instructors
         </a>
       </div>
diff --git a/src/routes/admin/feed.index.tsx b/src/routes/admin/feed.index.tsx
index 4880bcd43..129c3d12a 100644
--- a/src/routes/admin/feed.index.tsx
+++ b/src/routes/admin/feed.index.tsx
@@ -4,15 +4,14 @@ import {
   useSetFeedEntryFeatured,
   useDeleteFeedEntry,
 } from '~/utils/mutations'
-import { FaPlus } from 'react-icons/fa'
 import { z } from 'zod'
+import { Plus } from 'lucide-react'
 import { FeedEntry } from '~/components/FeedEntry'
 import { FeedSyncStatus } from '~/components/admin/FeedSyncStatus'
 import { FeedPage as FeedPageComponent } from '~/components/FeedPage'
 import { useFeedQuery } from '~/hooks/useFeedQuery'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
-import { FEED_DEFAULTS } from '~/utils/feedDefaults'
 import { libraries, type LibraryId } from '~/libraries'
 import { FEED_CATEGORIES, RELEASE_LEVELS } from '~/utils/feedSchema'
 const libraryIds = libraries.map((lib) => lib.id) as readonly LibraryId[]
@@ -144,7 +143,7 @@ function FeedAdminPage() {
           params={{ id: 'new' }}
           className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors text-sm"
         >
-          <FaPlus />
+          <Plus size={14} />
           Create Entry
         </Link>
       </div>
diff --git a/src/routes/admin/github-stats.tsx b/src/routes/admin/github-stats.tsx
index 1fb873416..5cfc93a00 100644
--- a/src/routes/admin/github-stats.tsx
+++ b/src/routes/admin/github-stats.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
-import { FaGithub, FaSync, FaStar, FaUsers, FaCube } from 'react-icons/fa'
 import {
   Table,
   TableHeader,
@@ -23,6 +22,8 @@ import {
   refreshAllGitHubStats,
 } from '~/utils/stats-admin.server'
 import { formatDistanceToNow } from 'date-fns'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { Box, RefreshCw, Star, Users } from 'lucide-react'
 
 type GitHubStatsEntry = {
   cacheKey: string
@@ -104,7 +105,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <FaStar className="text-yellow-500" />
+                <Star className="text-yellow-500" size={14} />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.starCount.toLocaleString()}
                 </span>
@@ -130,7 +131,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <FaUsers className="text-blue-500" />
+                <Users className="text-blue-500" size={14} />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.contributorCount.toLocaleString()}
                 </span>
@@ -167,7 +168,7 @@ function GitHubStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <FaCube className="text-purple-500" />
+                <Box className="text-purple-500" />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {entry.stats.dependentCount.toLocaleString()}
                 </span>
@@ -289,7 +290,10 @@ function GitHubStatsAdmin() {
               disabled={isRefreshing || refreshAllMutation.isPending}
               className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm"
             >
-              <FaSync className={isRefreshing ? 'animate-spin' : ''} />
+              <RefreshCw
+                className={isRefreshing ? 'animate-spin' : ''}
+                size={14}
+              />
               Refresh
             </button>
           )
@@ -310,7 +314,7 @@ function GitHubStatsAdmin() {
       <div className="mb-6 flex items-center justify-between">
         <div>
           <div className="flex items-center gap-3 mb-2">
-            <FaGithub className="text-2xl text-gray-900 dark:text-white" />
+            <GithubIcon className="text-2xl text-gray-900 dark:text-white" />
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
               GitHub Stats Management
             </h1>
@@ -326,7 +330,8 @@ function GitHubStatsAdmin() {
             disabled={refreshAllMutation.isPending || refreshingKey !== null}
             className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
-            <FaSync
+            <RefreshCw
+              size={14}
               className={refreshAllMutation.isPending ? 'animate-spin' : ''}
             />
             Refresh All
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index d1eaf2207..1262cb213 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -1,14 +1,9 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
-import {
-  FaLock,
-  FaUsers,
-  FaRss,
-  FaShieldAlt,
-  FaGithub,
-  FaNpm,
-} from 'react-icons/fa'
 import { useCapabilities } from '~/hooks/useCapabilities'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { Lock, Rss, ShieldHalf, Users } from 'lucide-react'
+import { NpmIcon } from '~/components/icons/NpmIcon'
 
 export const Route = createFileRoute('/admin/')({
   component: AdminPage,
@@ -34,7 +29,7 @@ function AdminPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <FaLock className="text-4xl text-red-500 mx-auto mb-4" />
+          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -78,7 +73,7 @@ function AdminDashboard() {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                  <FaUsers className="text-blue-600 dark:text-blue-400 text-xl" />
+                  <Users className="text-blue-600 dark:text-blue-400 text-xl" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   User Management
@@ -100,7 +95,7 @@ function AdminDashboard() {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-                  <FaShieldAlt className="text-purple-600 dark:text-purple-400 text-xl" />
+                  <ShieldHalf className="text-purple-600 dark:text-purple-400 text-xl" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   Role Management
@@ -123,7 +118,7 @@ function AdminDashboard() {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
-                  <FaRss className="text-green-600 dark:text-green-400 text-xl" />
+                  <Rss className="text-green-600 dark:text-green-400 text-xl" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   Feed Management
@@ -146,7 +141,7 @@ function AdminDashboard() {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-gray-100 dark:bg-gray-900/30 rounded-lg">
-                  <FaGithub className="text-gray-900 dark:text-gray-100 text-xl" />
+                  <GithubIcon className="text-gray-900 dark:text-gray-100 text-xl" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   GitHub Stats
@@ -169,7 +164,7 @@ function AdminDashboard() {
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-lg">
-                  <FaNpm className="text-red-600 dark:text-red-400 text-xl" />
+                  <NpmIcon className="text-red-600 dark:text-red-400 text-xl" />
                 </div>
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   NPM Stats
diff --git a/src/routes/admin/npm-stats.tsx b/src/routes/admin/npm-stats.tsx
index 2b60728e9..bde9376fa 100644
--- a/src/routes/admin/npm-stats.tsx
+++ b/src/routes/admin/npm-stats.tsx
@@ -1,7 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { FaNpm, FaSync, FaDownload } from 'react-icons/fa'
 import {
   Table,
   TableHeader,
@@ -25,6 +24,8 @@ import {
   refreshAllNpmStats,
 } from '~/utils/stats-admin.server'
 import { formatDistanceToNow } from 'date-fns'
+import { Download, RefreshCw } from 'lucide-react'
+import { NpmIcon } from '~/components/icons/NpmIcon'
 
 type NpmPackage = {
   id: string
@@ -127,7 +128,7 @@ function NpmStatsAdmin() {
         cell: ({ row }) => (
           <div>
             <div className="flex items-center gap-2">
-              <FaDownload className="text-emerald-500" />
+              <Download className="text-emerald-500" />
               <span className="font-semibold text-gray-900 dark:text-white">
                 {row.original.totalDownloads.toLocaleString()}
               </span>
@@ -189,7 +190,7 @@ function NpmStatsAdmin() {
           return (
             <div>
               <div className="flex items-center gap-2">
-                <FaDownload className="text-emerald-500" />
+                <Download className="text-emerald-500" />
                 <span className="font-semibold text-gray-900 dark:text-white">
                   {pkg.downloads?.toLocaleString() ?? 'N/A'}
                 </span>
@@ -254,7 +255,8 @@ function NpmStatsAdmin() {
             disabled={refreshPackageMutation.isPending}
             className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm"
           >
-            <FaSync
+            <RefreshCw
+              size={14}
               className={refreshPackageMutation.isPending ? 'animate-spin' : ''}
             />
             Refresh
@@ -285,7 +287,7 @@ function NpmStatsAdmin() {
         <div className="mb-6 flex items-center justify-between">
           <div>
             <div className="flex items-center gap-3 mb-2">
-              <FaNpm className="text-2xl text-red-500" />
+              <NpmIcon className="text-2xl text-red-500" />
               <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                 NPM Stats Management
               </h1>
@@ -305,7 +307,8 @@ function NpmStatsAdmin() {
             className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
             title="Complete refresh: discover packages, fetch fresh stats with growth rates, and rebuild all caches"
           >
-            <FaSync
+            <RefreshCw
+              size={14}
               className={refreshAllMutation.isPending ? 'animate-spin' : ''}
             />
             {refreshAllMutation.isPending
@@ -349,7 +352,7 @@ function NpmStatsAdmin() {
                   Total Downloads
                 </div>
                 <div className="flex items-center gap-3">
-                  <FaDownload className="text-2xl text-emerald-500" />
+                  <Download className="text-2xl text-emerald-500" />
                   <div className="text-3xl font-bold text-gray-900 dark:text-white">
                     {orgStats.totalDownloads.toLocaleString()}
                   </div>
@@ -360,7 +363,7 @@ function NpmStatsAdmin() {
                   Downloads Per Day
                 </div>
                 <div className="flex items-center gap-3">
-                  <FaDownload className="text-2xl text-emerald-500" />
+                  <Download className="text-2xl text-emerald-500" />
                   <div>
                     <div className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
                       {orgStats.ratePerDay !== undefined &&
diff --git a/src/routes/admin/roles.$roleId.tsx b/src/routes/admin/roles.$roleId.tsx
index 1255d3d9f..baf79c24b 100644
--- a/src/routes/admin/roles.$roleId.tsx
+++ b/src/routes/admin/roles.$roleId.tsx
@@ -1,6 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState, useMemo, useCallback } from 'react'
-import { FaLock, FaTrash, FaArrowLeft, FaUser, FaUsers } from 'react-icons/fa'
 import { useRemoveUsersFromRole } from '~/utils/mutations'
 import { useQuery } from '@tanstack/react-query'
 import { getRole, getUsersWithRole } from '~/utils/roles.functions'
@@ -11,6 +10,7 @@ import {
   flexRender,
   type ColumnDef,
 } from '@tanstack/react-table'
+import { ArrowLeft, Lock, Trash, User, Users } from 'lucide-react'
 
 export const Route = createFileRoute('/admin/roles/$roleId')({
   component: RoleDetailPage,
@@ -138,7 +138,10 @@ function RoleDetailPage() {
                   />
                 ) : (
                   <div className="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                    <FaUser className="text-gray-500 dark:text-gray-400" />
+                    <User
+                      className="text-gray-500 dark:text-gray-400"
+                      size={14}
+                    />
                   </div>
                 )}
               </div>
@@ -199,7 +202,7 @@ function RoleDetailPage() {
               }}
               className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
             >
-              <FaTrash className="w-4 h-4" />
+              <Trash className="w-4 h-4" />
             </button>
           )
         },
@@ -228,7 +231,7 @@ function RoleDetailPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <FaLock className="text-4xl text-red-500 mx-auto mb-4" />
+          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -263,7 +266,7 @@ function RoleDetailPage() {
               to="/admin/roles"
               className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
             >
-              <FaArrowLeft className="w-5 h-5" />
+              <ArrowLeft className="w-5 h-5" />
             </Link>
             <div>
               <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
@@ -280,7 +283,7 @@ function RoleDetailPage() {
 
         <div className="mb-4 flex items-center gap-4">
           <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-            <FaUsers className="w-5 h-5" />
+            <Users className="w-5 h-5" />
             <span className="text-sm">
               {usersWithRole?.length || 0} user(s) with this role
             </span>
@@ -414,7 +417,7 @@ function RoleDetailPage() {
 
           {(!usersWithRole || usersWithRole.length === 0) && (
             <div className="text-center py-12">
-              <FaUsers className="mx-auto h-12 w-12 text-gray-400" />
+              <Users className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
                 No users with this role
               </h3>
diff --git a/src/routes/admin/roles.index.tsx b/src/routes/admin/roles.index.tsx
index aa17b785d..9a6e9131f 100644
--- a/src/routes/admin/roles.index.tsx
+++ b/src/routes/admin/roles.index.tsx
@@ -21,21 +21,13 @@ import { useCapabilities } from '~/hooks/useCapabilities'
 import { useCurrentUserQuery } from '~/hooks/useCurrentUser'
 import { useCreateRole, useUpdateRole, useDeleteRole } from '~/utils/mutations'
 import { listRoles } from '~/utils/roles.functions'
-import {
-  FaEdit,
-  FaSave,
-  FaTimes,
-  FaLock,
-  FaPlus,
-  FaTrash,
-  FaUsers,
-} from 'react-icons/fa'
 import { Spinner } from '~/components/Spinner'
 import {
   useReactTable,
   getCoreRowModel,
   flexRender,
 } from '@tanstack/react-table'
+import { Lock, SquarePen, Plus, Save, X, Trash, Users } from 'lucide-react'
 
 // Role type for table
 type Role = {
@@ -97,7 +89,10 @@ function RolesPage() {
     <>
       {/* Name Filter */}
       <div className="mb-2">
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <label
+          htmlFor="name"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
           Name / Description
         </label>
         <FilterSearch
@@ -391,13 +386,13 @@ function RolesPage() {
                   onClick={handleSaveRole}
                   className="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
                 >
-                  <FaSave className="w-4 h-4" />
+                  <Save className="w-4 h-4" />
                 </button>
                 <button
                   onClick={handleCancelEdit}
                   className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                 >
-                  <FaTimes className="w-4 h-4" />
+                  <X className="w-4 h-4" />
                 </button>
               </div>
             )
@@ -410,19 +405,19 @@ function RolesPage() {
                 className="text-purple-600 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-300"
                 title="View users with this role"
               >
-                <FaUsers className="w-4 h-4" />
+                <Users className="w-4 h-4" />
               </Link>
               <button
                 onClick={() => handleEditRole(role)}
                 className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
               >
-                <FaEdit className="w-4 h-4" />
+                <SquarePen className="w-4 h-4" />
               </button>
               <button
                 onClick={() => handleDeleteRole(role._id)}
                 className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
               >
-                <FaTrash className="w-4 h-4" />
+                <Trash className="w-4 h-4" />
               </button>
             </div>
           )
@@ -466,7 +461,7 @@ function RolesPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <FaLock className="text-4xl text-red-500 mx-auto mb-4" />
+          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -526,7 +521,7 @@ function RolesPage() {
                 onClick={handleCreateRole}
                 className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
               >
-                <FaPlus className="w-4 h-4" />
+                <Plus className="w-4 h-4" />
                 Create Role
               </button>
             )}
@@ -539,7 +534,10 @@ function RolesPage() {
               </h2>
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    htmlFor="role-name"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                  >
                     Name
                   </label>
                   <input
@@ -551,7 +549,10 @@ function RolesPage() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    htmlFor="role-description"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                  >
                     Description
                   </label>
                   <input
@@ -563,7 +564,10 @@ function RolesPage() {
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    htmlFor="role-capabilities"
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                  >
                     Capabilities
                   </label>
                   <div className="space-y-2">
@@ -587,14 +591,14 @@ function RolesPage() {
                     onClick={handleSaveRole}
                     className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
                   >
-                    <FaSave className="w-4 h-4" />
+                    <Save className="w-4 h-4" />
                     Save
                   </button>
                   <button
                     onClick={handleCancelEdit}
                     className="flex items-center gap-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
                   >
-                    <FaTimes className="w-4 h-4" />
+                    <X className="w-4 h-4" />
                     Cancel
                   </button>
                 </div>
diff --git a/src/routes/admin/route.tsx b/src/routes/admin/route.tsx
index 3fccc242a..8b9851b00 100644
--- a/src/routes/admin/route.tsx
+++ b/src/routes/admin/route.tsx
@@ -6,24 +6,25 @@ import {
   createFileRoute,
   redirect,
 } from '@tanstack/react-router'
-import { CgClose, CgMenuLeft } from 'react-icons/cg'
 import {
-  FaHome,
-  FaUser,
-  FaUsers,
-  FaRss,
-  FaShieldAlt,
-  FaGithub,
-  FaNpm,
-  FaChartLine,
-  FaComments,
-  FaStickyNote,
-} from 'react-icons/fa'
+  X,
+  TextAlignStart,
+  ChartLine,
+  MessagesSquare,
+  Home,
+  Rss,
+  ShieldHalf,
+  StickyNote,
+  Users,
+  User,
+} from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 // Using public asset URL
 import { ClientAdminAuth } from '~/components/ClientAuth'
 import { requireCapability } from '~/utils/auth.server'
 import { useCapabilities } from '~/hooks/useCapabilities'
+import { GithubIcon } from '~/components/icons/GithubIcon'
+import { NpmIcon } from '~/components/icons/NpmIcon'
 
 export const Route = createFileRoute('/admin')({
   beforeLoad: async () => {
@@ -68,7 +69,7 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
   })[] = [
     {
       label: 'Admin Dashboard',
-      icon: <FaHome />,
+      icon: <Home size={14} />,
       to: '/admin',
       activeOptions: {
         exact: true,
@@ -76,49 +77,49 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
     },
     {
       label: 'Statistics',
-      icon: <FaChartLine />,
+      icon: <ChartLine size={14} />,
       to: '/admin/stats',
     },
     {
       label: 'Users',
-      icon: <FaUsers />,
+      icon: <Users size={14} />,
       to: '/admin/users',
     },
     {
       label: 'Roles',
-      icon: <FaShieldAlt />,
+      icon: <ShieldHalf size={14} />,
       to: '/admin/roles',
     },
     {
       label: 'Feedback',
-      icon: <FaComments />,
+      icon: <MessagesSquare size={14} />,
       to: '/admin/feedback',
       requiredCapability: 'moderate-feedback',
     },
     {
       label: 'Notes',
-      icon: <FaStickyNote />,
+      icon: <StickyNote size={14} />,
       to: '/admin/notes',
       requiredCapability: 'moderate-feedback',
     },
     {
       label: 'Feed',
-      icon: <FaRss />,
+      icon: <Rss size={14} />,
       to: '/admin/feed',
     },
     {
       label: 'GitHub Stats',
-      icon: <FaGithub />,
+      icon: <GithubIcon />,
       to: '/admin/github-stats',
     },
     {
       label: 'NPM Stats',
-      icon: <FaNpm />,
+      icon: <NpmIcon />,
       to: '/admin/npm-stats',
     },
     {
       label: 'My Account',
-      icon: <FaUser />,
+      icon: <User size={14} />,
       to: '/account',
     },
   ]
@@ -166,8 +167,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
       >
         <summary className="py-2 px-4 flex gap-2 items-center justify-between">
           <div className="flex-1 flex gap-4 items-center">
-            <CgMenuLeft className="icon-open cursor-pointer" />
-            <CgClose className="icon-close cursor-pointer" />
+            <TextAlignStart className="icon-open cursor-pointer" />
+            <X className="icon-close cursor-pointer" />
             Admin Menu
           </div>
         </summary>
diff --git a/src/routes/admin/stats.tsx b/src/routes/admin/stats.tsx
index e4b78a144..3c3a746fe 100644
--- a/src/routes/admin/stats.tsx
+++ b/src/routes/admin/stats.tsx
@@ -1,17 +1,17 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import {
-  FaUsers,
-  FaChartLine,
-  FaEyeSlash,
-  FaListUl,
-  FaArrowUp,
-  FaArrowDown,
-  FaMinus,
-} from 'react-icons/fa'
 import { getUserStats } from '~/utils/user-stats.server'
 import * as Plot from '@observablehq/plot'
 import { useEffect, useRef } from 'react'
+import {
+  ArrowDown,
+  ArrowUp,
+  ChartLine,
+  EyeOff,
+  List,
+  Minus,
+  Users,
+} from 'lucide-react'
 
 export const Route = createFileRoute('/admin/stats')({
   component: AdminStatsPage,
@@ -58,7 +58,7 @@ function AdminStatsPage() {
         {/* Header */}
         <div className="mb-6">
           <div className="flex items-center gap-3 mb-2">
-            <FaChartLine className="text-2xl text-blue-500" />
+            <ChartLine className="text-2xl text-blue-500" />
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
               Admin Statistics
             </h1>
@@ -71,7 +71,7 @@ function AdminStatsPage() {
         {/* User Statistics Section */}
         <section className="mb-8">
           <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-            <FaUsers className="text-blue-500" />
+            <Users className="text-blue-500 text-xl" />
             User Statistics
           </h2>
 
@@ -110,11 +110,11 @@ function AdminStatsPage() {
                     }`}
                   >
                     {todayVsYesterday > 0 ? (
-                      <FaArrowUp />
+                      <ArrowUp size={14} />
                     ) : todayVsYesterday < 0 ? (
-                      <FaArrowDown />
+                      <ArrowDown size={14} />
                     ) : (
-                      <FaMinus />
+                      <Minus size={14} />
                     )}
                     {Math.abs(todayVsYesterday).toFixed(0)}%
                   </div>
@@ -178,7 +178,7 @@ function AdminStatsPage() {
         {/* Ads Statistics Section */}
         <section className="mb-8">
           <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-            <FaEyeSlash className="text-purple-500" />
+            <EyeOff className="text-purple-500" />
             Ads-Related Statistics
           </h2>
 
@@ -186,7 +186,7 @@ function AdminStatsPage() {
             {/* Ads Hiding Waitlist Card */}
             <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl shadow-lg border border-purple-200 dark:border-purple-800 p-6">
               <div className="flex items-center gap-3 mb-4">
-                <FaListUl className="text-2xl text-purple-500" />
+                <List className="text-2xl text-purple-500" />
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   Ads Hiding Waitlist
                 </h3>
@@ -243,7 +243,7 @@ function AdminStatsPage() {
             {/* Ads Disabled Capability Card */}
             <div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-lg border border-green-200 dark:border-green-800 p-6">
               <div className="flex items-center gap-3 mb-4">
-                <FaEyeSlash className="text-2xl text-green-500" />
+                <EyeOff className="text-2xl text-green-500" />
                 <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                   Ads Disabled Status
                 </h3>
diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx
index b5f13cae5..b5fa58cc3 100644
--- a/src/routes/admin/users.tsx
+++ b/src/routes/admin/users.tsx
@@ -1,7 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 import { useQuery, keepPreviousData } from '@tanstack/react-query'
 import { useState, useMemo, useCallback, useEffect } from 'react'
-import { FaUser, FaEdit, FaSave, FaTimes, FaLock } from 'react-icons/fa'
 import { PaginationControls } from '~/components/PaginationControls'
 import { Spinner } from '~/components/Spinner'
 import {
@@ -41,6 +40,7 @@ import {
   getBulkEffectiveCapabilitiesQueryOptions,
 } from '~/queries/roles'
 import { getUserRoles } from '~/utils/roles.functions'
+import { Lock, Save, SquarePen, X, User } from 'lucide-react'
 
 // User type for table
 type User = {
@@ -716,7 +716,7 @@ function UsersPage() {
                   />
                 ) : (
                   <div className="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
-                    <FaUser className="text-gray-500 dark:text-gray-400" />
+                    <User className="text-gray-500 dark:text-gray-400 text-xs" />
                   </div>
                 )}
               </div>
@@ -869,13 +869,13 @@ function UsersPage() {
                 onClick={handleSaveUser}
                 className="text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-300"
               >
-                <FaSave className="w-4 h-4" />
+                <Save className="w-4 h-4" />
               </button>
               <button
                 onClick={handleCancelEdit}
                 className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
               >
-                <FaTimes className="w-4 h-4" />
+                <X className="w-4 h-4" />
               </button>
             </div>
           ) : (
@@ -883,7 +883,7 @@ function UsersPage() {
               onClick={() => handleEditUser(user)}
               className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
             >
-              <FaEdit className="w-4 h-4" />
+              <SquarePen className="w-4 h-4" />
             </button>
           )
         },
@@ -939,7 +939,7 @@ function UsersPage() {
     return (
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
-          <FaLock className="text-4xl text-red-500 mx-auto mb-4" />
+          <Lock className="text-4xl text-red-500 mx-auto mb-4" />
           <h1 className="text-2xl font-bold mb-2">Access Denied</h1>
           <p className="text-gray-600 dark:text-gray-400 mb-4">
             You don't have permission to access the admin area.
@@ -1115,7 +1115,7 @@ function UsersPage() {
 
           {(!usersQuery.data || usersQuery.data?.page.length === 0) && (
             <div className="text-center py-12">
-              <FaUser className="mx-auto h-12 w-12 text-gray-400" />
+              <User className="mx-auto h-12 w-12 text-gray-400" />
               <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">
                 No users found
               </h3>
diff --git a/src/routes/merch.tsx b/src/routes/merch.tsx
index d2c340f17..5dd34dfe7 100644
--- a/src/routes/merch.tsx
+++ b/src/routes/merch.tsx
@@ -2,15 +2,9 @@ import * as React from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { Footer } from '~/components/Footer'
 import { seo } from '~/utils/seo'
-import {
-  LuShirt,
-  LuShoppingBag,
-  LuSmartphone,
-  LuTag,
-  LuCircle,
-} from 'react-icons/lu'
-import { PiBaseballCapBold } from 'react-icons/pi'
+import { Shirt, ShoppingBag, Smartphone, Tag, Circle } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import { BaseballCapIcon } from '~/components/icons/BaseballCapIcon'
 
 export const Route = createFileRoute('/merch')({
   component: RouteComp,
@@ -29,10 +23,10 @@ const merchItems = [
     description:
       'T-shirts, sweatshirts, hoodies, onesies, hats, totes, and phone cases featuring TanStack designs',
     icons: [
-      { Icon: LuShirt, label: 'T-shirts' },
-      { Icon: PiBaseballCapBold, label: 'Hats' },
-      { Icon: LuShoppingBag, label: 'Totes' },
-      { Icon: LuSmartphone, label: 'Phone cases' },
+      { Icon: Shirt, label: 'T-shirts' },
+      { Icon: BaseballCapIcon, label: 'Hats' },
+      { Icon: ShoppingBag, label: 'Totes' },
+      { Icon: Smartphone, label: 'Phone cases' },
     ],
     href: 'https://cottonbureau.com/people/tanstack',
     iconColor: 'text-blue-500',
@@ -44,8 +38,8 @@ const merchItems = [
     description:
       'High-quality vinyl stickers and small buttons for your laptop, water bottle, and more',
     icons: [
-      { Icon: LuTag, label: 'Stickers' },
-      { Icon: LuCircle, label: 'Buttons' },
+      { Icon: Tag, label: 'Stickers' },
+      { Icon: Circle, label: 'Buttons' },
     ],
     href: 'https://www.stickermule.com/tanstack',
     iconColor: 'text-purple-500',
diff --git a/src/routes/stats/npm/index.tsx b/src/routes/stats/npm/index.tsx
index 39a57a498..058611323 100644
--- a/src/routes/stats/npm/index.tsx
+++ b/src/routes/stats/npm/index.tsx
@@ -3,20 +3,19 @@ import { Link, createFileRoute } from '@tanstack/react-router'
 import { z } from 'zod'
 import { useDebouncedValue, useThrottledCallback } from '@tanstack/react-pacer'
 import {
-  MdClose,
-  MdVisibility,
-  MdVisibilityOff,
-  MdAdd,
-  MdPushPin,
-  MdMoreVert,
-  MdSearch,
-} from 'react-icons/md'
+  X,
+  Plus,
+  Eye,
+  EyeOff,
+  Pin,
+  EllipsisVertical,
+  Search,
+} from 'lucide-react'
 import { keepPreviousData, queryOptions, useQuery } from '@tanstack/react-query'
 import * as Plot from '@observablehq/plot'
 import { ParentSize } from '@visx/responsive'
 import { Tooltip } from '~/components/Tooltip'
 import * as d3 from 'd3'
-import { FaSpinner } from 'react-icons/fa'
 import { HexColorPicker } from 'react-colorful'
 import { seo } from '~/utils/seo'
 import { getPopularComparisons, packageGroupSchema } from './-comparisons'
@@ -153,19 +152,6 @@ const binningOptionsByType = binningOptions.reduce(
 
 type TransformMode = z.infer<typeof transformModeSchema>
 
-type NpmPackage = {
-  name: string
-  description: string
-  version: string
-  publisher: {
-    username: string
-  }
-  time?: {
-    created: string
-    modified: string
-  }
-}
-
 const defaultColors = [
   '#1f77b4', // blue
   '#ff7f0e', // orange
@@ -195,20 +181,6 @@ const dropdownButtonStyles = {
   active: 'bg-gray-500/20',
 } as const
 
-type NpmQueryData = {
-  packages: {
-    downloads: any[]
-    name: string
-    hidden?: boolean | undefined
-  }[]
-  baseline?: boolean
-  start: string
-  end: string
-  color?: string | null | undefined
-  error?: string | null
-  actualStartDate?: Date
-}[]
-
 function npmQueryOptions({
   packageGroups,
   range,
@@ -785,7 +757,7 @@ function PackageSearch({
       <div className="relative">
         <Command className="w-full" shouldFilter={false}>
           <div className="flex items-center gap-1">
-            <MdSearch className="text-lg" />
+            <Search className="text-lg" />
             <Command.Input
               placeholder={placeholder}
               className="w-full bg-gray-500/10 rounded-md px-2 py-1 min-w-[200px] text-sm"
@@ -1217,7 +1189,7 @@ function RouteComponent() {
                 <DropdownMenuTrigger asChild>
                   <button className={twMerge(dropdownButtonStyles.base)}>
                     {timeRanges.find((r) => r.value === range)?.label}
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1250,7 +1222,7 @@ function RouteComponent() {
                     )}
                   >
                     {binningOptions.find((b) => b.value === binType)?.label}
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1290,7 +1262,7 @@ function RouteComponent() {
                       transformOptions.find((opt) => opt.value === transform)
                         ?.label
                     }
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1330,7 +1302,7 @@ function RouteComponent() {
                             ?.label
                         }`
                       : 'No Facet X'}
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1378,7 +1350,7 @@ function RouteComponent() {
                             ?.label
                         }`
                       : 'No Facet Y'}
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1435,7 +1407,7 @@ function RouteComponent() {
                         (opt) => opt.value === showDataModeParam,
                       )?.label
                     }
-                    <MdMoreVert className="w-3 h-3" />
+                    <EllipsisVertical className="w-3 h-3" />
                   </button>
                 </DropdownMenuTrigger>
               </Tooltip>
@@ -1500,7 +1472,7 @@ function RouteComponent() {
                             }
                             className="hover:text-blue-500"
                           >
-                            <MdPushPin className="w-3 h-3 sm:w-4 sm:h-4 text-blue-500" />
+                            <Pin className="w-3 h-3 sm:w-4 sm:h-4 text-blue-500" />
                           </button>
                         </Tooltip>
                         <span>{mainPackage.name}</span>
@@ -1532,7 +1504,7 @@ function RouteComponent() {
                           >
                             {mainPackage.name}
                             {mainPackage.hidden ? (
-                              <MdVisibilityOff className="w-3 h-3 sm:w-4 sm:h-4" />
+                              <EyeOff className="w-3 h-3 sm:w-4 sm:h-4" />
                             ) : null}
                           </button>
                         </Tooltip>
@@ -1553,7 +1525,7 @@ function RouteComponent() {
                         <Tooltip content="More options">
                           <DropdownMenuTrigger asChild>
                             <button className="px-0.5 sm:px-1 hover:text-blue-500">
-                              <MdMoreVert className="w-3 h-3 sm:w-4 sm:h-4" />
+                              <EllipsisVertical className="w-3 h-3 sm:w-4 sm:h-4" />
                             </button>
                           </DropdownMenuTrigger>
                         </Tooltip>
@@ -1573,9 +1545,9 @@ function RouteComponent() {
                               className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
                             >
                               {mainPackage.hidden ? (
-                                <MdVisibilityOff className="text-sm" />
+                                <EyeOff className="text-sm" />
                               ) : (
-                                <MdVisibility className="text-sm" />
+                                <Eye className="text-sm" />
                               )}
                               {mainPackage.hidden
                                 ? 'Show Package'
@@ -1591,7 +1563,7 @@ function RouteComponent() {
                                 pkg.baseline ? 'text-blue-500' : '',
                               )}
                             >
-                              <MdPushPin className="text-sm" />
+                              <Pin className="text-sm" />
                               {pkg.baseline
                                 ? 'Remove Baseline'
                                 : 'Set as Baseline'}
@@ -1657,7 +1629,7 @@ function RouteComponent() {
                                         }}
                                         className="p-1 text-gray-400 hover:text-red-500"
                                       >
-                                        <MdClose className="w-3 h-3" />
+                                        <X className="w-3 h-3" />
                                       </button>
                                     </div>
                                   </DropdownMenuItem>
@@ -1671,7 +1643,7 @@ function RouteComponent() {
                               }}
                               className="w-full px-2 py-1.5 text-left text-sm rounded hover:bg-gray-500/20 flex items-center gap-2 outline-none cursor-pointer"
                             >
-                              <MdAdd className="text-sm" />
+                              <Plus className="text-sm" />
                               Add Packages
                             </DropdownMenuItem>
                           </div>
@@ -1682,7 +1654,7 @@ function RouteComponent() {
                       onClick={() => handleRemovePackageName(index)}
                       className="ml-auto pl-0.5 sm:pl-1 text-gray-500 hover:text-red-500"
                     >
-                      <MdClose className="w-3 h-3 sm:w-4 sm:h-4" />
+                      <X className="w-3 h-3 sm:w-4 sm:h-4" />
                     </button>
                   </div>
                   {packageError && (
@@ -1707,7 +1679,7 @@ function RouteComponent() {
                     onClick={() => setCombiningPackage(null)}
                     className="p-0.5 sm:p-1 hover:text-red-500"
                   >
-                    <MdClose className="w-4 h-4 sm:w-5 sm:h-5" />
+                    <X className="w-4 h-4 sm:w-5 sm:h-5" />
                   </button>
                 </div>
                 <PackageSearch
@@ -1815,12 +1787,6 @@ function RouteComponent() {
                         <th className="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                           Downloads last {binOption.single}
                         </th>
-                        {/* <th className="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                          Period Growth
-                        </th>
-                        <th className="px-3 sm:px-6 py-2 sm:py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
-                          Period Growth %
-                        </th> */}
                       </tr>
                     </thead>
                     <tbody className="bg-gray-500/5 divide-y divide-gray-500/10">
@@ -1834,21 +1800,8 @@ function RouteComponent() {
                             return null
                           }
 
-                          // const flooredStartData =
-                          //   binOption.bin.floor(startDate)
-
                           const firstPackage = packageGroupDownloads.packages[0]
 
-                          // const rangeFilteredDownloads =
-                          //   packageGroupDownloads.packages.map((p) => {
-                          //     return {
-                          //       ...p,
-                          //       downloads: p.downloads.filter(
-                          //         (d) => d.day >= startDate
-                          //       ),
-                          //     }
-                          //   })
-
                           // Sort downloads by date
                           const sortedDownloads = packageGroupDownloads.packages
                             .flatMap((p) => p.downloads)
@@ -1958,7 +1911,7 @@ function RouteComponent() {
                                         }
                                         className="p-0.5 text-gray-500 hover:text-red-500"
                                       >
-                                        <MdClose className="" />
+                                        <X className="" />
                                       </button>
                                     </Tooltip>
                                   </div>
@@ -1971,42 +1924,6 @@ function RouteComponent() {
                             <td className="px-3 sm:px-6 py-1 sm:py-2 whitespace-nowrap text-xs sm:text-sm text-gray-500 dark:text-gray-400 text-right">
                               {formatNumber(stat!.binDownloads)}
                             </td>
-                            {/* <td
-                              className={`px-3 sm:px-6 py-1 sm:py-2 whitespace-nowrap text-xs sm:text-sm text-right ${
-                                stat!.growth > 0
-                                  ? 'text-green-500'
-                                  : stat!.growth < 0
-                                  ? 'text-red-500'
-                                  : 'text-gray-500'
-                              }`}
-                            >
-                              <div className="inline-flex items-center gap-1">
-                                {stat!.growth > 0 ? (
-                                  <MdArrowUpward />
-                                ) : (
-                                  <MdArrowDownward />
-                                )}
-                                {formatNumber(Math.abs(stat!.growth))}
-                              </div>
-                            </td>
-                            <td
-                              className={`px-3 sm:px-6 py-1 sm:py-2 whitespace-nowrap text-xs sm:text-sm text-right ${
-                                stat!.growthPercentage > 0
-                                  ? 'text-green-500'
-                                  : stat!.growthPercentage < 0
-                                  ? 'text-red-500'
-                                  : 'text-gray-500'
-                              }`}
-                            >
-                              <div className="inline-flex items-center gap-1">
-                                {stat!.growthPercentage > 0 ? (
-                                  <MdArrowUpward />
-                                ) : (
-                                  <MdArrowDownward />
-                                )}
-                                {Math.abs(stat!.growthPercentage).toFixed(1)}%
-                              </div>
-                            </td> */}
                           </tr>
                         ))}
                     </tbody>
diff --git a/src/styles/app.css b/src/styles/app.css
index b6ea0da1c..46bfd53fb 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -660,3 +660,14 @@ mark {
   background-color: rgba(59, 130, 246, 0.05);
   outline-color: rgba(59, 130, 246, 0.3);
 }
+
+/* Icons */
+
+.lucide-book {
+  height: 1em;
+  width: 1em;
+}
+
+.lucide {
+  stroke-width: 2.25;
+}