diff --git a/package.json b/package.json
index e2b6d3e3..264101a9 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "dependencies": {
         "@auth/core": "^0.40.0",
         "@headlessui/react": "^2.2.9",
-        "@heroicons/react": "^2.2.0",
         "@react-three/postprocessing": "^3.0.4",
         "@tanstack/react-query": "^5.90.19",
         "@uidotdev/usehooks": "^2.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b93a7aa..d6abf3a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,9 +18,6 @@ importers:
       '@headlessui/react':
         specifier: ^2.2.9
         version: 2.2.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@heroicons/react':
-        specifier: ^2.2.0
-        version: 2.2.0(react@19.2.3)
       '@react-three/postprocessing':
         specifier: ^3.0.4
         version: 3.0.4(@react-three/fiber@9.1.2(@types/react@19.2.9)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.176.0))(@types/three@0.176.0)(react@19.2.3)(three@0.176.0)
@@ -745,10 +742,7 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  '@heroicons/react@2.2.0':
-    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
-    peerDependencies:
-      react: '>= 16 || ^19.0.0-rc'
+ 
 
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -5613,9 +5607,7 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       use-sync-external-store: 1.6.0(react@19.2.3)
 
-  '@heroicons/react@2.2.0(react@19.2.3)':
-    dependencies:
-      react: 19.2.3
+
 
   '@humanfs/core@0.19.1': {}
 
diff --git a/src/app/donate/[form]/page.tsx b/src/app/donate/[form]/page.tsx
index a0bfcadf..1afe9602 100644
--- a/src/app/donate/[form]/page.tsx
+++ b/src/app/donate/[form]/page.tsx
@@ -2,8 +2,8 @@
 
 import styles from './page.module.css'
 import { useCurrentUser } from '@/util/hooks'
-import { ArrowPathIcon } from '@heroicons/react/24/outline'
 import { useParams, useSearchParams } from 'next/navigation'
+import { FaArrowsRotate } from 'react-icons/fa6'
 
 export default function Page() {
     const routeParams = useParams()
@@ -35,7 +35,7 @@ export default function Page() {
     return (
         <div className={styles.page}>
             <div className={styles.content}>
-                <ArrowPathIcon className={styles.spinner} />
+                <FaArrowsRotate className={styles.spinner} />
                 <p className={styles.text}>Redirecting...</p>
             </div>
         </div>
diff --git a/src/app/login/LoginPage.tsx b/src/app/login/LoginPage.tsx
index 757c5a3c..3dbe4b58 100644
--- a/src/app/login/LoginPage.tsx
+++ b/src/app/login/LoginPage.tsx
@@ -4,9 +4,9 @@ import { LoginCard } from './LoginCard'
 import styles from './login.module.css'
 import { HalftoneBackground } from '@/components/halftone/HalftoneBackground'
 import { MainLayout } from '@/components/layout'
-import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import { Suspense } from 'react'
+import { FaCircleInfo } from 'react-icons/fa6'
 
 export default function Login() {
     return (
@@ -19,7 +19,7 @@ export default function Login() {
                     <LoginCard />
                 </Suspense>
                 <div className={styles.footer}>
-                    <InformationCircleIcon className={styles.infoIcon} />
+                    <FaCircleInfo className={styles.infoIcon} />
                     By signing in you agree to our
                     <Link
                         href="/privacy"
diff --git a/src/app/volunteer/stages/CompleteStage.tsx b/src/app/volunteer/stages/CompleteStage.tsx
index 2c2f325a..a7a6efe5 100644
--- a/src/app/volunteer/stages/CompleteStage.tsx
+++ b/src/app/volunteer/stages/CompleteStage.tsx
@@ -1,6 +1,6 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
-import { CakeIcon, TrophyIcon } from '@heroicons/react/24/solid'
+import { FaCakeCandles, FaTrophy } from 'react-icons/fa6'
 
 export interface CompleteStageProps {
     isInServer: boolean
@@ -13,7 +13,7 @@ export function CompleteStage({
     isPending,
     onRejoin,
 }: CompleteStageProps) {
-    const Icon = isInServer ? CakeIcon : TrophyIcon
+    const Icon = isInServer ? FaCakeCandles : FaTrophy
     const subtitle = isInServer
         ? 'Congrats, you are in the server!'
         : "Looks like you're no longer in the server!"
diff --git a/src/app/volunteer/stages/JoiningStage.tsx b/src/app/volunteer/stages/JoiningStage.tsx
index b1c1c8c2..ddca0217 100644
--- a/src/app/volunteer/stages/JoiningStage.tsx
+++ b/src/app/volunteer/stages/JoiningStage.tsx
@@ -1,7 +1,7 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
 import { useInit } from '@/util/hooks'
-import { ArrowPathIcon } from '@heroicons/react/24/solid'
+import { FaArrowsRotate } from 'react-icons/fa6'
 
 export interface JoiningStageProps {
     isPending: boolean
@@ -33,7 +33,11 @@ export function JoiningStage({ isPending, error, onJoin }: JoiningStageProps) {
                 </>
             ) : (
                 <>
-                    <ArrowPathIcon className={cn(styles.icon, styles.spin)} />
+                    {
+                        <FaArrowsRotate
+                            className={cn(styles.icon, styles.spin)}
+                        />
+                    }
                     <p className={styles.subtitle}>
                         Joining you to the server...
                     </p>
diff --git a/src/app/volunteer/stages/UnderageStage.tsx b/src/app/volunteer/stages/UnderageStage.tsx
index 136ae618..f7e1cfd9 100644
--- a/src/app/volunteer/stages/UnderageStage.tsx
+++ b/src/app/volunteer/stages/UnderageStage.tsx
@@ -1,7 +1,7 @@
 import styles from './stages.module.css'
 import { cn } from '@/util'
 import { useInit } from '@/util/hooks'
-import { CalendarIcon } from '@heroicons/react/24/solid'
+import { FaCalendar } from 'react-icons/fa6'
 
 export interface UnderageStageProps {
     isPending: boolean
@@ -13,7 +13,7 @@ export function UnderageStage({ isPending, onAgeUp }: UnderageStageProps) {
 
     return (
         <div className={styles.container}>
-            <CalendarIcon className={cn(styles.icon, styles.success)} />
+            <FaCalendar className={cn(styles.icon, styles.success)} />
             <p className={styles.subtitle}>
                 Sorry! You have to be 18 years old or older to volunteer with
                 Progressive Victory.
diff --git a/src/app/volunteer/stages/components/Toggle.tsx b/src/app/volunteer/stages/components/Toggle.tsx
index 1b949818..6c7da3cb 100644
--- a/src/app/volunteer/stages/components/Toggle.tsx
+++ b/src/app/volunteer/stages/components/Toggle.tsx
@@ -1,7 +1,7 @@
 import styles from './components.module.css'
 import { cn } from '@/util'
-import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import { ReactElement } from 'react'
+import { FaCircleInfo } from 'react-icons/fa6'
 
 export function Toggle({
     name,
@@ -22,7 +22,7 @@ export function Toggle({
         <div className={styles.toggleContainer}>
             <div className={styles.toggleLabelContainer}>
                 <div tabIndex={0} className={styles.tooltipContainer}>
-                    <InformationCircleIcon className={styles.tooltipIcon} />
+                    <FaCircleInfo className={styles.tooltipIcon} />
                     <div className={styles.tooltipElement}>
                         <span className={styles.tooltipContent}>{tooltip}</span>
                     </div>
diff --git a/src/components/DropdownQuestion.tsx b/src/components/DropdownQuestion.tsx
index 912d03b0..d3ce0ba5 100644
--- a/src/components/DropdownQuestion.tsx
+++ b/src/components/DropdownQuestion.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import styles from '@/components/content_sections/ContentSections.module.css'
-import { PlusIcon, MinusIcon } from '@heroicons/react/24/solid'
 import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
+import { FaPlus, FaMinus } from 'react-icons/fa6'
 
 export interface DropdownQuestionProps {
     question: string
@@ -58,9 +58,9 @@ export function DropdownQuestion({
 
                 <span style={iconWrapperStyle}>
                     {isOpen ? (
-                        <MinusIcon style={iconStyle} />
+                        <FaMinus style={iconStyle} />
                     ) : (
-                        <PlusIcon style={iconStyle} />
+                        <FaPlus style={iconStyle} />
                     )}
                 </span>
             </div>
diff --git a/src/components/common/dropdown/DropdownButton.tsx b/src/components/common/dropdown/DropdownButton.tsx
index af11f5d4..ed326be4 100644
--- a/src/components/common/dropdown/DropdownButton.tsx
+++ b/src/components/common/dropdown/DropdownButton.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import styles from './DropdownButton.module.css'
-import { EllipsisVerticalIcon } from '@heroicons/react/24/outline'
 import {
     forwardRef,
     useEffect,
@@ -9,6 +8,7 @@ import {
     useState,
     type MouseEvent as ReactMouseEvent,
 } from 'react'
+import { FaEllipsisVertical } from 'react-icons/fa6'
 import { FiChevronDown } from 'react-icons/fi'
 import { IoClose } from 'react-icons/io5'
 
@@ -193,7 +193,7 @@ export const DropdownButton = forwardRef<
                         icon
                     )
                 ) : variant.showEllipsisIcon ? (
-                    <EllipsisVerticalIcon
+                    <FaEllipsisVertical
                         className={styles.shortIcon}
                         aria-hidden="true"
                     />
diff --git a/src/components/common/twitter_card_element/Card.tsx b/src/components/common/twitter_card_element/Card.tsx
index aa0add19..3bf8757e 100644
--- a/src/components/common/twitter_card_element/Card.tsx
+++ b/src/components/common/twitter_card_element/Card.tsx
@@ -3,17 +3,6 @@
 import styles from './Card.module.css'
 import { BaseButton } from '@/components/common/buttons/Button'
 import { cn } from '@/util'
-import {
-    HeartIcon,
-    ChatBubbleLeftRightIcon,
-    ArrowUpOnSquareIcon,
-    EllipsisHorizontalIcon,
-} from '@heroicons/react/24/outline'
-import {
-    HeartIcon as SolidHeartIcon,
-    ChatBubbleLeftRightIcon as SolidChatBubbleLeftRightIcon,
-    ArrowUpOnSquareIcon as SolidArrowUpOnSquareIcon,
-} from '@heroicons/react/24/solid'
 import {
     motion,
     useSpring,
@@ -24,6 +13,13 @@ import {
 import Image from 'next/image'
 import type React from 'react'
 import { useState, useMemo } from 'react'
+import {
+    FaHeart as SolidHeart,
+    FaRegHeart as Heart,
+    FaRegComment as FaComment,
+    FaRegShareFromSquare as FaShare,
+    FaEllipsis,
+} from 'react-icons/fa6'
 
 interface MotionProps {
     initial?: TargetAndTransition
@@ -350,7 +346,7 @@ export function Message({
                                                     e.stopPropagation()
                                                 }
                                             >
-                                                <EllipsisHorizontalIcon
+                                                <FaEllipsis
                                                     className={
                                                         styles.ellipsisIcon
                                                     }
@@ -399,7 +395,7 @@ export function Message({
                                         aria-label="Comment"
                                     >
                                         {clickedBubble ? (
-                                            <SolidChatBubbleLeftRightIcon
+                                            <FaComment
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.bubbleActive,
@@ -407,7 +403,7 @@ export function Message({
                                                 )}
                                             />
                                         ) : (
-                                            <ChatBubbleLeftRightIcon
+                                            <FaComment
                                                 className={styles.icon}
                                             />
                                         )}
@@ -423,7 +419,7 @@ export function Message({
                                         aria-label="Share"
                                     >
                                         {clickedShare ? (
-                                            <SolidArrowUpOnSquareIcon
+                                            <FaShare
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.shareActive,
@@ -431,9 +427,7 @@ export function Message({
                                                 )}
                                             />
                                         ) : (
-                                            <ArrowUpOnSquareIcon
-                                                className={styles.icon}
-                                            />
+                                            <FaShare className={styles.icon} />
                                         )}
                                     </button>
 
@@ -447,7 +441,7 @@ export function Message({
                                         aria-label="Like"
                                     >
                                         {clickedHeart ? (
-                                            <SolidHeartIcon
+                                            <SolidHeart
                                                 className={cn(
                                                     styles.iconSolid,
                                                     styles.heartActive,
@@ -455,9 +449,7 @@ export function Message({
                                                 )}
                                             />
                                         ) : (
-                                            <HeartIcon
-                                                className={styles.icon}
-                                            />
+                                            <Heart className={styles.icon} />
                                         )}
                                     </button>
                                 </div>