diff --git a/frontend/__tests__/unit/components/AnchorTitle.test.tsx b/frontend/__tests__/unit/components/AnchorTitle.test.tsx
index f0a6f3abcc..883a93f353 100644
--- a/frontend/__tests__/unit/components/AnchorTitle.test.tsx
+++ b/frontend/__tests__/unit/components/AnchorTitle.test.tsx
@@ -1,11 +1,7 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
 import { screen, render, fireEvent, waitFor } from '@testing-library/react'
 import slugifyMock from 'utils/slugify'
 import AnchorTitle from 'components/AnchorTitle'
 
-library.add(faLink)
-
 jest.mock('utils/slugify', () => ({
   __esModule: true,
   default: jest.fn((str: string) =>
@@ -101,7 +97,7 @@ describe('AnchorTitle Component', () => {
       expect(titleElement).toHaveAttribute('data-anchor-title', 'true')
     })
 
-    it('renders FontAwesome link icon', () => {
+    it('renders react-icons link icon', () => {
       render(<AnchorTitle title="Test" />)
       const link = screen.getByRole('link')
       const icon = link.querySelector('svg')
diff --git a/frontend/__tests__/unit/components/Badges.test.tsx b/frontend/__tests__/unit/components/Badges.test.tsx
index cd171deb42..87534d4f24 100644
--- a/frontend/__tests__/unit/components/Badges.test.tsx
+++ b/frontend/__tests__/unit/components/Badges.test.tsx
@@ -2,31 +2,26 @@ import { render, screen } from '@testing-library/react'
 import React from 'react'
 import Badges from 'components/Badges'
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => {
-  const RealWrapper = jest.requireActual('wrappers/FontAwesomeIconWrapper').default
-
-  const getName = (icon) => {
-    if (!icon) return 'medal'
-    if (typeof icon === 'string') {
-      const m = icon.match(/fa-([a-z0-9-]+)$/i)
-      if (m) return m[1]
-      const last = icon.trim().split(/\s+/).pop() || ''
-      return last.replace(/^fa-/, '') || 'medal'
-    }
-    if (Array.isArray(icon) && icon.length >= 2) return String(icon[1])
-    if (icon && typeof icon === 'object') return icon.iconName || String(icon[1] ?? 'medal')
-    return 'medal'
-  }
-
-  return function MockFontAwesomeIconWrapper(props) {
-    const name = getName(props.icon)
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon,
+    className,
+    ...props
+  }: {
+    icon: React.ComponentType<{ className?: string }>
+    className?: string
+  }) => {
+    let iconName = icon.name?.toLowerCase() || 'medal'
+    iconName = iconName.replace(/^fa/, '')
+    iconName = iconName.replace(/^reg/, '')
+    if (!iconName) iconName = 'medal'
     return (
-      <div data-testid={`icon-${name}`}>
-        <RealWrapper {...props} />
+      <div data-testid="badge-icon" data-icon={iconName} className={className} {...props}>
+        <svg />
       </div>
     )
-  }
-})
+  },
+}))
 
 jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({
diff --git a/frontend/__tests__/unit/components/BarChart.test.tsx b/frontend/__tests__/unit/components/BarChart.test.tsx
index 904d812225..31d29279cb 100644
--- a/frontend/__tests__/unit/components/BarChart.test.tsx
+++ b/frontend/__tests__/unit/components/BarChart.test.tsx
@@ -1,11 +1,7 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFire } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
 import React from 'react'
-
-// Register FontAwesome icon
-library.add(faFire)
+import { FaFire } from 'react-icons/fa'
+import '@testing-library/jest-dom'
 
 // Mock react-apexcharts completely
 jest.mock('react-apexcharts', () => {
@@ -170,8 +166,7 @@ describe('<BarChart />', () => {
   })
 
   it('renders with custom icon when provided', () => {
-    // cspell:ignore fas
-    renderWithTheme(<BarChart {...mockProps} icon={['fas', 'fire']} />)
+    renderWithTheme(<BarChart {...mockProps} icon={FaFire} />)
     expect(screen.getByTestId('anchor-title')).toHaveTextContent('Calories Burned')
     expect(screen.getByTestId('card-icon')).toBeInTheDocument()
   })
diff --git a/frontend/__tests__/unit/components/CalendarButton.test.tsx b/frontend/__tests__/unit/components/CalendarButton.test.tsx
index 14e8c45b0a..db66d6e144 100644
--- a/frontend/__tests__/unit/components/CalendarButton.test.tsx
+++ b/frontend/__tests__/unit/components/CalendarButton.test.tsx
@@ -1,6 +1,5 @@
-import { faCalendarDay, faCalendarPlus } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { render, screen } from '@testing-library/react'
+import { FaCalendarDay, FaCalendarPlus } from 'react-icons/fa6'
 import CalendarButton from 'components/CalendarButton'
 
 const mockEvent = {
@@ -25,7 +24,7 @@ describe('CalendarButton', () => {
       expect(link.tagName).toBe('A')
     })
 
-    it('renders default FontAwesome calendar-plus icon', () => {
+    it('renders default calendar-plus icon', () => {
       render(<CalendarButton event={mockEvent} />)
       const svg = document.querySelector('svg')
       expect(svg).toBeInTheDocument()
@@ -33,10 +32,7 @@ describe('CalendarButton', () => {
 
     it('renders custom icon when provided', () => {
       render(
-        <CalendarButton
-          event={mockEvent}
-          icon={<FontAwesomeIcon icon={faCalendarDay} data-testid="custom-icon" />}
-        />
+        <CalendarButton event={mockEvent} icon={<FaCalendarDay data-testid="custom-icon" />} />
       )
       expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
     })
@@ -185,12 +181,9 @@ describe('CalendarButton', () => {
   })
 
   describe('icon prop extensibility', () => {
-    it('accepts FontAwesome icon as JSX', () => {
+    it('accepts icon as JSX', () => {
       render(
-        <CalendarButton
-          event={mockEvent}
-          icon={<FontAwesomeIcon icon={faCalendarPlus} className="custom-icon-class" />}
-        />
+        <CalendarButton event={mockEvent} icon={<FaCalendarPlus className="custom-icon-class" />} />
       )
       const svg = document.querySelector('svg')
       expect(svg).toHaveClass('custom-icon-class')
@@ -321,12 +314,7 @@ describe('CalendarButton', () => {
       render(
         <CalendarButton
           event={mockEvent}
-          icon={
-            <FontAwesomeIcon
-              icon={faCalendarPlus}
-              className="h-6 w-6 text-blue-500 hover:text-blue-700"
-            />
-          }
+          icon={<FaCalendarPlus className="h-6 w-6 text-blue-500 hover:text-blue-700" />}
         />
       )
       const svg = document.querySelector('svg')
diff --git a/frontend/__tests__/unit/components/Card.test.tsx b/frontend/__tests__/unit/components/Card.test.tsx
index bc0c587c67..1f1ab4ac15 100644
--- a/frontend/__tests__/unit/components/Card.test.tsx
+++ b/frontend/__tests__/unit/components/Card.test.tsx
@@ -1,5 +1,6 @@
 import { screen, render, fireEvent } from '@testing-library/react'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
+import { FaLeaf, FaFire, FaCrown, FaStar, FaGithub, FaTwitter } from 'react-icons/fa6'
 import type { CardProps } from 'types/card'
 import Card from 'components/Card'
 
@@ -12,11 +13,6 @@ interface MockLinkProps {
   className?: string
 }
 
-interface MockFontAwesomeIconProps {
-  icon: unknown
-  className?: string
-}
-
 interface MockTooltipProps {
   children: ReactNode
   content: string
@@ -63,14 +59,6 @@ jest.mock('next/link', () => {
   }
 })
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: MockFontAwesomeIconProps) => (
-    <span data-testid="font-awesome-icon" className={className}>
-      {String(icon)}
-    </span>
-  ),
-}))
-
 jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({ children, content, id }: MockTooltipProps) => (
     <div data-testid="tooltip" title={content} id={id}>
@@ -79,15 +67,22 @@ jest.mock('@heroui/tooltip', () => ({
   ),
 }))
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => {
-  return function FontAwesomeIconWrapper({ icon, className }: MockFontAwesomeIconProps) {
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon,
+    className,
+  }: {
+    icon: React.ComponentType<{ className?: string }>
+    className?: string
+  }) => {
+    const iconName = icon?.name?.toLowerCase().replace('fa', '') || 'icon'
     return (
-      <span data-testid="font-awesome-wrapper" className={className}>
-        {String(icon)}
+      <span data-testid="icon-wrapper" data-icon={iconName} className={className}>
+        <svg />
       </span>
     )
-  }
-})
+  },
+}))
 
 jest.mock('components/ActionButton', () => {
   return function ActionButton({ children, onClick, tooltipLabel, url }: MockActionButtonProps) {
@@ -131,7 +126,11 @@ jest.mock('components/MarkdownWrapper', () => {
 })
 
 jest.mock('utils/urlIconMappings', () => ({
-  getSocialIcon: jest.fn().mockReturnValue('mocked-social-icon'),
+  getSocialIcon: jest.fn().mockReturnValue(({ className }: { className?: string }) => (
+    <span data-testid="social-icon" className={className}>
+      <svg />
+    </span>
+  )),
 }))
 
 jest.mock('utils/data', () => ({
@@ -179,12 +178,12 @@ describe('Card', () => {
   it('conditionally renders level badge when provided', () => {
     const propsWithLevel = {
       ...baseProps,
-      level: { level: 'Beginner', color: '#4CAF50', icon: 'leaf-icon' },
+      level: { level: 'Beginner', color: '#4CAF50', icon: FaLeaf },
     }
 
     render(<Card {...propsWithLevel} />)
     expect(screen.getByTestId('tooltip')).toBeInTheDocument()
-    expect(screen.getByTestId('font-awesome-wrapper')).toBeInTheDocument()
+    expect(screen.getByTestId('icon-wrapper')).toBeInTheDocument()
   })
 
   it('does not render level badge when not provided', () => {
@@ -229,12 +228,12 @@ describe('Card', () => {
     const propsWithSocial = {
       ...baseProps,
       social: [
-        { title: 'GitHub', url: 'https://github.com/test', icon: 'github' },
-        { title: 'Twitter', url: 'https://twitter.com/test', icon: 'twitter' },
+        { title: 'GitHub', url: 'https://github.com/test', icon: FaGithub },
+        { title: 'Twitter', url: 'https://twitter.com/test', icon: FaTwitter },
       ],
     }
     render(<Card {...propsWithSocial} />)
-    expect(screen.getAllByTestId('font-awesome-icon')).toHaveLength(2)
+    expect(screen.getAllByTestId('social-icon')).toHaveLength(2)
 
     const allLinks = screen.getAllByRole('link')
     expect(allLinks.length).toBeGreaterThan(1)
@@ -296,7 +295,7 @@ describe('Card', () => {
   it('applies different level badge colors based on props', () => {
     const propsWithLevel = {
       ...baseProps,
-      level: { level: 'Advanced', color: '#FF5722', icon: 'fire-icon' },
+      level: { level: 'Advanced', color: '#FF5722', icon: FaFire },
     }
 
     render(<Card {...propsWithLevel} />)
@@ -400,7 +399,7 @@ describe('Card', () => {
   it('has proper accessibility attributes', () => {
     const propsWithTooltip = {
       ...baseProps,
-      level: { level: 'Intermediate', color: '#2196F3', icon: 'star-icon' },
+      level: { level: 'Intermediate', color: '#2196F3', icon: FaStar },
       tooltipLabel: 'Click to contribute',
     }
 
@@ -466,11 +465,11 @@ describe('Card', () => {
   it('renders complete card with all optional props', () => {
     const fullProps = {
       ...baseProps,
-      level: { level: 'Expert', color: '#9C27B0', icon: 'crown-icon' },
+      level: { level: 'Expert', color: '#9C27B0', icon: FaCrown },
       icons: { react: 'active', typescript: 'active' },
       projectName: 'Full Stack Project',
       projectLink: 'https://fullstack.com',
-      social: [{ title: 'GitHub', url: 'https://github.com/full', icon: 'active' }],
+      social: [{ title: 'GitHub', url: 'https://github.com/full', icon: FaGithub }],
       topContributors: [
         {
           login: 'expert',
@@ -486,7 +485,7 @@ describe('Card', () => {
     expect(screen.getByTestId('tooltip')).toBeInTheDocument()
     expect(screen.getAllByTestId('display-icon')).toHaveLength(2)
     expect(screen.getByRole('link', { name: 'Full Stack Project' })).toBeInTheDocument()
-    expect(screen.getByTestId('font-awesome-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('social-icon')).toBeInTheDocument()
     expect(screen.getByTestId('contributor-avatar')).toBeInTheDocument()
   })
 })
diff --git a/frontend/__tests__/unit/components/CardDetailsPage.test.tsx b/frontend/__tests__/unit/components/CardDetailsPage.test.tsx
index ab62cbc02e..cd80c70615 100644
--- a/frontend/__tests__/unit/components/CardDetailsPage.test.tsx
+++ b/frontend/__tests__/unit/components/CardDetailsPage.test.tsx
@@ -1,10 +1,9 @@
-import { faCode, faTags } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, cleanup } from '@testing-library/react'
 import React from 'react'
 import '@testing-library/jest-dom'
+import { FaCode, FaTags } from 'react-icons/fa6'
 import type { DetailsCardProps } from 'types/card'
 import CardDetailsPage from 'components/CardDetailsPage'
-
 jest.mock('next/link', () => {
   const MockLink = ({
     children,
@@ -56,31 +55,16 @@ jest.mock('next/image', () => ({
   ),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
-    className,
-    ...props
-  }: {
-    icon: { iconName: string }
-    className?: string
-    [key: string]: unknown
-  }) => <span data-testid={`icon-${icon.iconName}`} className={className} {...props} />,
-}))
-
 jest.mock('utils/env.client', () => ({
   IS_PROJECT_HEALTH_ENABLED: true,
 }))
 
 jest.mock('utils/urlIconMappings', () => ({
   getSocialIcon: (url: string) => {
-    if (url?.includes('github')) {
-      return { iconName: 'github' }
+    const safe = encodeURIComponent(url)
+    return function MockSocialIcon(props: { className?: string }) {
+      return <span data-testid={`mock-social-icon-${safe}`} className={props.className} />
     }
-    if (url?.includes('twitter')) {
-      return { iconName: 'twitter' }
-    }
-    return { iconName: 'link' }
   },
 }))
 
@@ -134,6 +118,7 @@ jest.mock('components/HealthMetrics', () => ({
 jest.mock('components/InfoBlock', () => ({
   __esModule: true,
   default: ({
+    icon: _icon,
     pluralizedName,
     unit,
     value,
@@ -276,9 +261,10 @@ jest.mock('components/SecondaryCard', () => ({
     title,
     children,
     className,
+    icon: _icon,
     ...props
   }: {
-    _icon: unknown
+    _icon?: unknown
     title: React.ReactNode
     children: React.ReactNode
     className?: string
@@ -314,6 +300,7 @@ jest.mock('components/ToggleableList', () => ({
   __esModule: true,
   default: ({
     items,
+    icon: _icon,
     label,
     ...props
   }: {
@@ -412,13 +399,13 @@ describe('CardDetailsPage', () => {
 
   const mockStats = [
     {
-      icon: faCode,
+      icon: FaCode,
       pluralizedName: 'repositories',
       unit: '',
       value: 10,
     },
     {
-      icon: faTags,
+      icon: FaTags,
       pluralizedName: 'stars',
       unit: '',
       value: 100,
@@ -1329,9 +1316,9 @@ describe('CardDetailsPage', () => {
 
     it('handles zero and negative values in stats', () => {
       const statsWithZeroValues = [
-        { icon: faCode, value: 0, unit: 'Star' },
-        { icon: faTags, value: invalidValues.negativeNumber, unit: 'Issue' },
-        { icon: faCode, value: invalidValues.nullValue, unit: 'Fork' },
+        { icon: FaCode, value: 0, unit: 'Star' },
+        { icon: FaTags, value: -10, unit: 'Issue' },
+        { icon: FaCode, value: null, unit: 'Fork' },
       ]
 
       expect(() =>
diff --git a/frontend/__tests__/unit/components/DashboardCard.test.tsx b/frontend/__tests__/unit/components/DashboardCard.test.tsx
index 55b295f304..5d5b8e08f5 100644
--- a/frontend/__tests__/unit/components/DashboardCard.test.tsx
+++ b/frontend/__tests__/unit/components/DashboardCard.test.tsx
@@ -1,6 +1,6 @@
-import { faUser, faChartBar } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
 import React from 'react'
+import { FaUser, FaChartBar } from 'react-icons/fa'
 import '@testing-library/jest-dom'
 import DashboardCard from 'components/DashboardCard'
 
@@ -45,7 +45,7 @@ jest.mock('components/SecondaryCard', () => ({
 describe('DashboardCard', () => {
   const baseProps = {
     title: 'Test Card',
-    icon: faUser,
+    icon: FaUser,
     className: undefined,
     stats: undefined,
   }
@@ -56,7 +56,7 @@ describe('DashboardCard', () => {
 
   describe('Essential Rendering', () => {
     it('renders successfully with minimal required props', () => {
-      render(<DashboardCard title="Test Card" icon={faUser} />)
+      render(<DashboardCard title="Test Card" icon={FaUser} />)
       expect(screen.getByTestId('secondary-card')).toBeInTheDocument()
       expect(screen.getByTestId('anchor-title')).toHaveTextContent('Test Card')
       expect(screen.getByTestId('secondary-content')).toBeInTheDocument()
@@ -101,15 +101,15 @@ describe('DashboardCard', () => {
     })
 
     it('renders different icons based on prop', () => {
-      const { rerender } = render(<DashboardCard {...baseProps} icon={faUser} />)
+      const { rerender } = render(<DashboardCard {...baseProps} icon={FaUser} />)
       expect(screen.getByTestId('secondary-content').querySelector('svg')).toBeInTheDocument()
-      rerender(<DashboardCard {...baseProps} icon={faChartBar} />)
+      rerender(<DashboardCard {...baseProps} icon={FaChartBar} />)
       expect(screen.getByTestId('secondary-content').querySelector('svg')).toBeInTheDocument()
     })
   })
 
   describe('DOM Structure', () => {
-    it('renders FontAwesomeIcon with correct icon', () => {
+    it('renders icon with correct icon', () => {
       render(<DashboardCard {...baseProps} />)
       expect(screen.getByTestId('secondary-content').querySelector('svg')).toBeInTheDocument()
     })
@@ -218,7 +218,7 @@ describe('DashboardCard', () => {
 
     it('handles rapid prop changes gracefully', () => {
       const { rerender } = render(<DashboardCard {...baseProps} stats="start" />)
-      const icons = [faUser, faChartBar]
+      const icons = [FaUser, FaChartBar]
       const titles = ['A', 'B', 'C']
       for (let i = 0; i < 3; i++) {
         rerender(
diff --git a/frontend/__tests__/unit/components/DisplayIcon.test.tsx b/frontend/__tests__/unit/components/DisplayIcon.test.tsx
index 981d817239..f34eb7ae3a 100644
--- a/frontend/__tests__/unit/components/DisplayIcon.test.tsx
+++ b/frontend/__tests__/unit/components/DisplayIcon.test.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
+import { FaStar, FaCodeFork, FaUser, FaClock, FaComment, FaQuestion } from 'react-icons/fa6'
 import type { Icon } from 'types/icon'
 import DisplayIcon from 'components/DisplayIcon'
-
 interface TooltipProps {
   children: React.ReactNode
   content: string
@@ -13,11 +13,6 @@ interface TooltipProps {
   placement: string
 }
 
-interface IconWrapperProps {
-  className?: string
-  icon: string
-}
-
 jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({ children, content, delay, closeDelay, showArrow, placement }: TooltipProps) => (
     <div
@@ -42,21 +37,44 @@ jest.mock('millify', () => ({
   }),
 }))
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => {
-  return function MockFontAwesomeIconWrapper({ className, icon }: IconWrapperProps) {
-    return <span data-testid="font-awesome-icon" data-icon={icon} className={className} />
-  }
-})
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    className,
+    icon: IconComponent,
+  }: {
+    className?: string
+    icon: React.ComponentType<{ className?: string }>
+  }) => {
+    // This derives a data-icon attribute from the react-icon component name
+    let iconName = ''
+    const toKebab = (name: string) =>
+      name
+        .replaceAll('Fa', '')
+        .replaceAll(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+
+    if (IconComponent?.displayName) {
+      iconName = 'fa-' + toKebab(IconComponent.displayName)
+    } else if (IconComponent?.name) {
+      iconName = 'fa-' + toKebab(IconComponent.name)
+    }
+
+    return IconComponent ? (
+      <span data-testid="font-awesome-icon" data-icon={iconName} className={className}>
+        <IconComponent />
+      </span>
+    ) : null
+  },
+}))
 
 jest.mock('utils/data', () => ({
   ICONS: {
-    starsCount: { label: 'Stars', icon: 'fa-star' },
-    forksCount: { label: 'Forks', icon: 'fa-code-fork' },
-    contributorsCount: { label: 'Contributors', icon: 'fa-users' },
-    contributionCount: { label: 'Contributors', icon: 'fa-users' },
-    issuesCount: { label: 'Issues', icon: 'fa-exclamation-circle' },
-    license: { label: 'License', icon: 'fa-balance-scale' },
-    unknownItem: { label: 'Unknown', icon: 'fa-question' },
+    starsCount: { label: 'Stars', icon: FaStar },
+    forksCount: { label: 'Forks', icon: FaCodeFork },
+    contributorsCount: { label: 'Contributors', icon: FaUser },
+    createdAt: { label: 'Creation date', icon: FaClock },
+    commentsCount: { label: 'Comments count', icon: FaComment },
+    unknownItem: { label: 'Unknown', icon: FaQuestion },
   },
 }))
 
@@ -117,7 +135,7 @@ describe('DisplayIcon', () => {
       expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'fa-code-fork')
 
       rerender(<DisplayIcon item="contributorsCount" icons={mockIcons} />)
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'fa-users')
+      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'fa-user')
     })
 
     it('applies different container classes based on item type', () => {
diff --git a/frontend/__tests__/unit/components/DonutBarChart.test.tsx b/frontend/__tests__/unit/components/DonutBarChart.test.tsx
index b3bcb71f8f..593e187746 100644
--- a/frontend/__tests__/unit/components/DonutBarChart.test.tsx
+++ b/frontend/__tests__/unit/components/DonutBarChart.test.tsx
@@ -1,7 +1,7 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { screen } from '@testing-library/react'
 import { render } from '@testing-library/react'
 import { useTheme } from 'next-themes'
+import { FaChartPie, FaChartBar, FaChartLine, FaTachometerAlt, FaHeart } from 'react-icons/fa'
 import DonutBarChart from 'components/DonutBarChart'
 
 // Mock next-themes
@@ -47,12 +47,16 @@ jest.mock('components/AnchorTitle', () => {
 })
 
 jest.mock('components/SecondaryCard', () => {
-  const MockSecondaryCard = ({ title, icon, children }) => (
-    <div data-testid="secondary-card" data-icon={icon}>
-      <div data-testid="card-title">{title}</div>
-      <div data-testid="card-content">{children}</div>
-    </div>
-  )
+  const MockSecondaryCard = ({ title, icon, children }) => {
+    const iconName = icon?.displayName ?? icon?.name ?? icon
+
+    return (
+      <div data-testid="secondary-card" data-icon={iconName}>
+        <div data-testid="card-title">{title}</div>
+        <div data-testid="card-content">{children}</div>
+      </div>
+    )
+  }
   MockSecondaryCard.displayName = 'SecondaryCard'
   return MockSecondaryCard
 })
@@ -60,8 +64,6 @@ jest.mock('components/SecondaryCard', () => {
 describe('DonutBarChart Component Test Suite', () => {
   const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>
 
-  const iconProp = (name: string): IconProp => name as IconProp
-
   beforeEach(() => {
     mockUseTheme.mockReturnValue({
       theme: 'light',
@@ -75,28 +77,22 @@ describe('DonutBarChart Component Test Suite', () => {
 
   describe('Basic rendering functionality', () => {
     it('renders the component with required props', () => {
-      render(
-        <DonutBarChart icon={iconProp('chart-pie')} title="Test Chart" series={[50, 30, 20]} />
-      )
+      render(<DonutBarChart icon={FaChartPie} title="Test Chart" series={[50, 30, 20]} />)
 
       expect(screen.getByTestId('secondary-card')).toBeInTheDocument()
       expect(screen.getByTestId('apex-chart')).toBeInTheDocument()
     })
 
     it('renders title through AnchorTitle component', () => {
-      render(
-        <DonutBarChart icon={iconProp('chart-bar')} title="Health Metrics" series={[60, 25, 15]} />
-      )
+      render(<DonutBarChart icon={FaChartBar} title="Health Metrics" series={[60, 25, 15]} />)
 
       expect(screen.getByTestId('anchor-title')).toHaveTextContent('Health Metrics')
     })
 
     it('passes icon to SecondaryCard', () => {
-      render(
-        <DonutBarChart icon={iconProp('analytics')} title="System Status" series={[80, 15, 5]} />
-      )
+      render(<DonutBarChart icon={FaChartLine} title="System Status" series={[80, 15, 5]} />)
 
-      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'analytics')
+      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'FaChartLine')
     })
   })
 
@@ -104,7 +100,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('processes series data with rounding', () => {
       const series = [33.333, 33.333, 33.334]
 
-      render(<DonutBarChart icon={iconProp('chart-pie')} title="Balanced Data" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="Balanced Data" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -116,7 +112,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles integer values correctly', () => {
       const series = [50, 30, 20]
 
-      render(<DonutBarChart icon="chart-pie" title="Integer Data" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="Integer Data" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -127,7 +123,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles decimal values with proper rounding', () => {
       const series = [25.555, 30.777, 43.668]
 
-      render(<DonutBarChart icon="chart-pie" title="Decimal Data" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="Decimal Data" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -139,7 +135,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles zero values', () => {
       const series = [0, 50, 0]
 
-      render(<DonutBarChart icon="chart-pie" title="With Zeros" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="With Zeros" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -150,7 +146,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles single value', () => {
       const series = [100]
 
-      render(<DonutBarChart icon="chart-pie" title="Single Value" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="Single Value" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -161,7 +157,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles empty series array', () => {
       const series: number[] = []
 
-      render(<DonutBarChart icon="chart-pie" title="Empty Data" series={series} />)
+      render(<DonutBarChart icon={FaChartPie} title="Empty Data" series={series} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -172,7 +168,7 @@ describe('DonutBarChart Component Test Suite', () => {
 
   describe('Chart configuration', () => {
     it('configures chart with correct options', () => {
-      render(<DonutBarChart icon="chart-pie" title="Configuration Test" series={[40, 35, 25]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Configuration Test" series={[40, 35, 25]} />)
 
       const chart = screen.getByTestId('apex-chart')
       const options = JSON.parse(chart.dataset.options || '{}')
@@ -187,7 +183,7 @@ describe('DonutBarChart Component Test Suite', () => {
     })
 
     it('sets correct chart type and height', () => {
-      render(<DonutBarChart icon="chart-pie" title="Type and Height Test" series={[60, 25, 15]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Type and Height Test" series={[60, 25, 15]} />)
 
       const chart = screen.getByTestId('apex-chart')
 
@@ -196,7 +192,7 @@ describe('DonutBarChart Component Test Suite', () => {
     })
 
     it('uses fixed color scheme', () => {
-      render(<DonutBarChart icon="chart-pie" title="Color Test" series={[33, 33, 34]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Color Test" series={[33, 33, 34]} />)
 
       const chart = screen.getByTestId('apex-chart')
       const options = JSON.parse(chart.dataset.options || '{}')
@@ -209,7 +205,7 @@ describe('DonutBarChart Component Test Suite', () => {
     })
 
     it('uses fixed labels', () => {
-      render(<DonutBarChart icon="chart-pie" title="Labels Test" series={[70, 20, 10]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Labels Test" series={[70, 20, 10]} />)
 
       const chart = screen.getByTestId('apex-chart')
       const options = JSON.parse(chart.dataset.options || '{}')
@@ -228,7 +224,7 @@ describe('DonutBarChart Component Test Suite', () => {
         resolvedTheme: 'light',
       })
 
-      render(<DonutBarChart icon="chart-pie" title="Light Theme" series={[50, 30, 20]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Light Theme" series={[50, 30, 20]} />)
 
       const chart = screen.getByTestId('apex-chart')
       const options = JSON.parse(chart.dataset.options || '{}')
@@ -245,7 +241,7 @@ describe('DonutBarChart Component Test Suite', () => {
         resolvedTheme: 'dark',
       })
 
-      render(<DonutBarChart icon="chart-pie" title="Dark Theme" series={[45, 35, 20]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Dark Theme" series={[45, 35, 20]} />)
 
       const chart = screen.getByTestId('apex-chart')
       const options = JSON.parse(chart.dataset.options || '{}')
@@ -262,7 +258,7 @@ describe('DonutBarChart Component Test Suite', () => {
         resolvedTheme: 'dark',
       })
 
-      render(<DonutBarChart icon="chart-pie" title="Theme Key Test" series={[55, 30, 15]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Theme Key Test" series={[55, 30, 15]} />)
 
       const chart = screen.getByTestId('apex-chart')
       // The key should be applied but we can't directly test it in our mock
@@ -274,7 +270,7 @@ describe('DonutBarChart Component Test Suite', () => {
 
   describe('Component structure and accessibility', () => {
     it('maintains proper component hierarchy', () => {
-      render(<DonutBarChart icon="heart" title="Structure Test" series={[75, 15, 10]} />)
+      render(<DonutBarChart icon={FaHeart} title="Structure Test" series={[75, 15, 10]} />)
 
       const card = screen.getByTestId('secondary-card')
       const title = screen.getByTestId('anchor-title')
@@ -290,7 +286,7 @@ describe('DonutBarChart Component Test Suite', () => {
     })
 
     it('renders chart inside proper container div', () => {
-      render(<DonutBarChart icon="dashboard" title="Container Test" series={[40, 40, 20]} />)
+      render(<DonutBarChart icon={FaTachometerAlt} title="Container Test" series={[40, 40, 20]} />)
 
       const cardContent = screen.getByTestId('card-content')
       const chart = screen.getByTestId('apex-chart')
@@ -301,18 +297,14 @@ describe('DonutBarChart Component Test Suite', () => {
 
   describe('Prop validation and edge cases', () => {
     it('handles different icon types', () => {
-      const iconTypes = ['chart-pie', 'chart-bar', 'analytics', 'dashboard', 'heart']
+      const iconTypes = [FaChartPie, FaChartBar, FaChartLine, FaTachometerAlt, FaHeart]
 
       for (const iconType of iconTypes) {
         const { unmount } = render(
-          <DonutBarChart
-            icon={iconProp(iconType)}
-            title={`Test ${iconType}`}
-            series={[50, 30, 20]}
-          />
+          <DonutBarChart icon={iconType} title={`Test ${iconType.name}`} series={[50, 30, 20]} />
         )
 
-        expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', iconType)
+        expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', iconType.name)
         unmount()
       }
     })
@@ -328,7 +320,7 @@ describe('DonutBarChart Component Test Suite', () => {
 
       for (const title of titles) {
         const { unmount } = render(
-          <DonutBarChart icon="chart-pie" title={title} series={[33, 33, 34]} />
+          <DonutBarChart icon={FaChartPie} title={title} series={[33, 33, 34]} />
         )
 
         expect(screen.getByTestId('anchor-title')).toHaveTextContent(title)
@@ -339,7 +331,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles large series values', () => {
       const largeSeries = [999999.999, 1000000.001, 2000000.5]
 
-      render(<DonutBarChart icon="chart-pie" title="Large Values" series={largeSeries} />)
+      render(<DonutBarChart icon={FaChartPie} title="Large Values" series={largeSeries} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -351,7 +343,7 @@ describe('DonutBarChart Component Test Suite', () => {
     it('handles negative values', () => {
       const negativeSeries = [-10.5, 50.7, -20.3]
 
-      render(<DonutBarChart icon="chart-pie" title="Negative Values" series={negativeSeries} />)
+      render(<DonutBarChart icon={FaChartPie} title="Negative Values" series={negativeSeries} />)
 
       const chart = screen.getByTestId('apex-chart')
       const chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -363,14 +355,14 @@ describe('DonutBarChart Component Test Suite', () => {
   describe('Performance and re-rendering', () => {
     it('handles series updates correctly', () => {
       const { rerender } = render(
-        <DonutBarChart icon="chart-pie" title="Update Test" series={[50, 30, 20]} />
+        <DonutBarChart icon={FaChartPie} title="Update Test" series={[50, 30, 20]} />
       )
 
       let chart = screen.getByTestId('apex-chart')
       let chartSeries = JSON.parse(chart.dataset.series || '[]')
       expect(chartSeries).toEqual([50, 30, 20])
 
-      rerender(<DonutBarChart icon="chart-pie" title="Update Test" series={[70, 20, 10]} />)
+      rerender(<DonutBarChart icon={FaChartPie} title="Update Test" series={[70, 20, 10]} />)
 
       chart = screen.getByTestId('apex-chart')
       chartSeries = JSON.parse(chart.dataset.series || '[]')
@@ -379,31 +371,31 @@ describe('DonutBarChart Component Test Suite', () => {
 
     it('handles title updates correctly', () => {
       const { rerender } = render(
-        <DonutBarChart icon="chart-pie" title="Original Title" series={[40, 35, 25]} />
+        <DonutBarChart icon={FaChartPie} title="Original Title" series={[40, 35, 25]} />
       )
 
       expect(screen.getByTestId('anchor-title')).toHaveTextContent('Original Title')
 
-      rerender(<DonutBarChart icon="chart-pie" title="Updated Title" series={[40, 35, 25]} />)
+      rerender(<DonutBarChart icon={FaChartPie} title="Updated Title" series={[40, 35, 25]} />)
 
       expect(screen.getByTestId('anchor-title')).toHaveTextContent('Updated Title')
     })
 
     it('handles icon updates correctly', () => {
       const { rerender } = render(
-        <DonutBarChart icon="chart-pie" title="Icon Test" series={[60, 25, 15]} />
+        <DonutBarChart icon={FaChartPie} title="Icon Test" series={[60, 25, 15]} />
       )
 
-      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'chart-pie')
+      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'FaChartPie')
 
-      rerender(<DonutBarChart icon="chart-bar" title="Icon Test" series={[60, 25, 15]} />)
+      rerender(<DonutBarChart icon={FaChartBar} title="Icon Test" series={[60, 25, 15]} />)
 
-      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'chart-bar')
+      expect(screen.getByTestId('secondary-card')).toHaveAttribute('data-icon', 'FaChartBar')
     })
 
     it('handles theme changes correctly', () => {
       const { rerender } = render(
-        <DonutBarChart icon="chart-pie" title="Theme Change Test" series={[45, 35, 20]} />
+        <DonutBarChart icon={FaChartPie} title="Theme Change Test" series={[45, 35, 20]} />
       )
 
       let chart = screen.getByTestId('apex-chart')
@@ -418,7 +410,7 @@ describe('DonutBarChart Component Test Suite', () => {
         resolvedTheme: 'dark',
       })
 
-      rerender(<DonutBarChart icon="chart-pie" title="Theme Change Test" series={[45, 35, 20]} />)
+      rerender(<DonutBarChart icon={FaChartPie} title="Theme Change Test" series={[45, 35, 20]} />)
 
       chart = screen.getByTestId('apex-chart')
       options = JSON.parse(chart.dataset.options || '{}')
@@ -431,7 +423,7 @@ describe('DonutBarChart Component Test Suite', () => {
       const mockRound = jest.requireMock('utils/round').round
 
       render(
-        <DonutBarChart icon="chart-pie" title="Round Test" series={[33.333, 44.444, 22.222]} />
+        <DonutBarChart icon={FaChartPie} title="Round Test" series={[33.333, 44.444, 22.222]} />
       )
 
       expect(mockRound).toHaveBeenCalledTimes(3)
@@ -441,13 +433,13 @@ describe('DonutBarChart Component Test Suite', () => {
     })
 
     it('integrates properly with next-themes useTheme hook', () => {
-      render(<DonutBarChart icon="chart-pie" title="Theme Integration" series={[50, 30, 20]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Theme Integration" series={[50, 30, 20]} />)
 
       expect(mockUseTheme).toHaveBeenCalled()
     })
 
     it('uses dynamic import for Chart component (SSR safety)', () => {
-      render(<DonutBarChart icon="chart-pie" title="Dynamic Import Test" series={[40, 40, 20]} />)
+      render(<DonutBarChart icon={FaChartPie} title="Dynamic Import Test" series={[40, 40, 20]} />)
 
       // Chart should render (mocked) proving dynamic import works
       expect(screen.getByTestId('apex-chart')).toBeInTheDocument()
diff --git a/frontend/__tests__/unit/components/Footer.test.tsx b/frontend/__tests__/unit/components/Footer.test.tsx
index 8781e84fb2..51b7ab78d9 100644
--- a/frontend/__tests__/unit/components/Footer.test.tsx
+++ b/frontend/__tests__/unit/components/Footer.test.tsx
@@ -4,9 +4,7 @@
  */
 import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { ReactNode } from 'react'
-import { footerSections, footerIcons } from 'utils/constants'
-import Footer from 'components/Footer'
+import React, { ReactNode } from 'react'
 
 // Define proper types for mock props
 interface MockLinkProps {
@@ -18,11 +16,6 @@ interface MockLinkProps {
   'aria-label'?: string
 }
 
-interface MockFontAwesomeIconProps {
-  icon: unknown
-  className?: string
-}
-
 interface MockButtonProps {
   children: ReactNode
   onPress?: () => void
@@ -42,14 +35,6 @@ jest.mock('next/link', () => {
   }
 })
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: MockFontAwesomeIconProps) => (
-    <span data-testid="font-awesome-icon" className={className}>
-      {typeof icon === 'string' ? icon : JSON.stringify(icon)}
-    </span>
-  ),
-}))
-
 jest.mock('@heroui/button', () => ({
   Button: ({ children, onPress, className, disableAnimation, ...props }: MockButtonProps) => (
     <button
@@ -63,6 +48,17 @@ jest.mock('@heroui/button', () => ({
   ),
 }))
 
+jest.mock('react-icons/fa6', () => ({
+  FaGithub: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="github-icon" {...props} />,
+  FaSlack: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="slack-icon" {...props} />,
+  FaChevronDown: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="chevron-down" {...props} />
+  ),
+  FaChevronUp: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="chevron-up" {...props} />
+  ),
+}))
+
 jest.mock('utils/constants', () => ({
   footerSections: [
     {
@@ -83,12 +79,12 @@ jest.mock('utils/constants', () => ({
   ],
   footerIcons: [
     {
-      icon: 'faGithub',
+      icon: 'FA_GITHUB_PLACEHOLDER',
       href: 'https://github.com/owasp/nest',
       label: 'GitHub',
     },
     {
-      icon: 'faSlack',
+      icon: 'FA_SLACK_PLACEHOLDER',
       href: 'https://owasp.slack.com/archives/project-nest',
       label: 'Slack',
     },
@@ -100,6 +96,12 @@ jest.mock('utils/env.client', () => ({
   RELEASE_VERSION: '1.2.3',
 }))
 
+import { FaGithub, FaSlack } from 'react-icons/fa6'
+import { footerSections, footerIcons } from 'utils/constants'
+import Footer from 'components/Footer'
+;(footerIcons as unknown)[0].icon = FaGithub
+;(footerIcons as unknown)[1].icon = FaSlack
+
 describe('Footer', () => {
   // Use the imported mocked constants
   const mockFooterSections = footerSections
@@ -165,6 +167,23 @@ describe('Footer', () => {
     test('renders social media icons with correct attributes', () => {
       renderFooter()
 
+      // Test GitHub icon
+      const githubLink = screen.getByLabelText('OWASP Nest GitHub')
+      expect(githubLink).toBeInTheDocument()
+      expect(githubLink).toHaveAttribute('href', 'https://github.com/owasp/nest')
+      expect(githubLink).toHaveAttribute('target', '_blank')
+      expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(githubLink.querySelector('[data-testid="github-icon"]')).toBeInTheDocument()
+
+      // Test Slack icon
+      const slackLink = screen.getByLabelText('OWASP Nest Slack')
+      expect(slackLink).toBeInTheDocument()
+      expect(slackLink).toHaveAttribute('href', 'https://owasp.slack.com/archives/project-nest')
+      expect(slackLink).toHaveAttribute('target', '_blank')
+      expect(slackLink).toHaveAttribute('rel', 'noopener noreferrer')
+      expect(slackLink.querySelector('[data-testid="slack-icon"]')).toBeInTheDocument()
+
+      // Test that all icons have basic attributes
       for (const icon of mockFooterIcons) {
         const link = screen.getByLabelText(`OWASP Nest ${icon.label}`)
         expect(link).toBeInTheDocument()
@@ -172,7 +191,7 @@ describe('Footer', () => {
         expect(link).toHaveAttribute('target', '_blank')
         expect(link).toHaveAttribute('rel', 'noopener noreferrer')
 
-        const iconElement = link.querySelector('[data-testid="font-awesome-icon"]')
+        const iconElement = link.querySelector('svg')
         expect(iconElement).toBeInTheDocument()
       }
     })
@@ -219,12 +238,22 @@ describe('Footer', () => {
       const firstSection = mockFooterSections[0]
       const button = screen.getByRole('button', { name: new RegExp(firstSection.title) })
 
-      let chevronIcons = button.querySelectorAll('[data-testid="font-awesome-icon"]')
-      expect(chevronIcons).toHaveLength(1)
+      // Initial state - should show chevron down (collapsed)
+      expect(button).toHaveAttribute('aria-expanded', 'false')
+      expect(button.querySelector('[data-testid="chevron-down"]')).toBeInTheDocument()
+      expect(button.querySelector('[data-testid="chevron-up"]')).not.toBeInTheDocument()
+
+      // Click to expand - should show chevron up
+      fireEvent.click(button)
+      expect(button).toHaveAttribute('aria-expanded', 'true')
+      expect(button.querySelector('[data-testid="chevron-up"]')).toBeInTheDocument()
+      expect(button.querySelector('[data-testid="chevron-down"]')).not.toBeInTheDocument()
 
+      // Click to collapse - should show chevron down again
       fireEvent.click(button)
-      chevronIcons = button.querySelectorAll('[data-testid="font-awesome-icon"]')
-      expect(chevronIcons).toHaveLength(1)
+      expect(button).toHaveAttribute('aria-expanded', 'false')
+      expect(button.querySelector('[data-testid="chevron-down"]')).toBeInTheDocument()
+      expect(button.querySelector('[data-testid="chevron-up"]')).not.toBeInTheDocument()
     })
 
     test('handles multiple section toggles independently', () => {
@@ -376,8 +405,13 @@ describe('Footer', () => {
       const links = screen.getAllByRole('link')
       expect(links.length).toBeGreaterThan(0)
 
-      const icons = screen.getAllByTestId('font-awesome-icon')
-      expect(icons.length).toBeGreaterThan(0)
+      const socialLinks = screen.getByLabelText('OWASP Nest GitHub')
+      const svgIcon = socialLinks.querySelector('svg')
+      expect(svgIcon).toBeInTheDocument()
+
+      const slackLink = screen.getByLabelText('OWASP Nest Slack')
+      const slackSvg = slackLink.querySelector('svg')
+      expect(slackSvg).toBeInTheDocument()
 
       const buttons = screen.getAllByRole('button')
       expect(buttons.length).toBeGreaterThan(0)
diff --git a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx
index 244bc0f778..82ca64824d 100644
--- a/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx
+++ b/frontend/__tests__/unit/components/GeneralCompliantComponent.test.tsx
@@ -1,7 +1,7 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { faCertificate } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
 import React from 'react'
+import type { IconType } from 'react-icons'
+import { FaCertificate, FaAward } from 'react-icons/fa6'
 
 import '@testing-library/jest-dom'
 
@@ -14,18 +14,31 @@ jest.mock('@heroui/tooltip', () => ({
   ),
 }))
 
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon: IconComponent,
+    className,
+    ...props
+  }: {
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement> & { className?: string }>
+    className?: string
+  }) => {
+    return <IconComponent className={className} {...props} />
+  },
+}))
+
 import GeneralCompliantComponent from 'components/GeneralCompliantComponent'
 
 type GeneralCompliantComponentProps = {
   compliant: boolean
-  icon: IconProp
+  icon: IconType
   title: string
 }
 
 describe('GeneralCompliantComponent', () => {
   const baseProps: GeneralCompliantComponentProps = {
     compliant: true,
-    icon: faCertificate,
+    icon: FaCertificate,
     title: 'Test Title',
   }
 
@@ -68,14 +81,14 @@ describe('GeneralCompliantComponent', () => {
 
   it('has accessible SVG icons', () => {
     const { container } = render(<GeneralCompliantComponent {...baseProps} />)
-    const icons = container.querySelectorAll('svg[role="img"]')
+    const icons = container.querySelectorAll('svg')
     expect(icons).toHaveLength(2)
-    expect(icons[0]).toHaveAttribute('aria-hidden', 'true')
-    expect(icons[1]).toHaveAttribute('aria-hidden', 'true')
+    expect(icons[0]).toBeInTheDocument()
+    expect(icons[1]).toBeInTheDocument()
   })
 
   it('renders with custom icon', () => {
-    const customIcon = faCertificate
+    const customIcon = FaAward
     const { container } = render(<GeneralCompliantComponent {...baseProps} icon={customIcon} />)
     expect(container.querySelector('svg')).toBeInTheDocument()
   })
diff --git a/frontend/__tests__/unit/components/HealthMetrics.test.tsx b/frontend/__tests__/unit/components/HealthMetrics.test.tsx
index 2741756b2b..d33c50e78d 100644
--- a/frontend/__tests__/unit/components/HealthMetrics.test.tsx
+++ b/frontend/__tests__/unit/components/HealthMetrics.test.tsx
@@ -1,8 +1,7 @@
-import { faCodeCommit } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
+import { IconType } from 'react-icons'
 import { HealthMetricsProps } from 'types/healthMetrics'
 import HealthMetrics from 'components/HealthMetrics'
-
 const getMockHealthMetric = (): HealthMetricsProps[] => [
   {
     createdAt: '2025-07-23T00:00:00Z',
@@ -52,8 +51,14 @@ const getMockIncompleteHealthMetric = (): any[] => [
   },
 ]
 
-jest.mock('components/BarChart', () => (props: { title: string }) => (
-  <div data-testid="BarChart" data-props={JSON.stringify(props)}>
+jest.mock('components/BarChart', () => (props: { title: string; icon?: IconType }) => (
+  <div
+    data-testid="BarChart"
+    data-props={JSON.stringify({
+      ...props,
+      icon: props.icon?.name || null,
+    })}
+  >
     {props.title}
   </div>
 ))
@@ -80,7 +85,7 @@ describe('HealthMetrics', () => {
       render(<HealthMetrics data={getMockHealthMetric()} />)
       const barChart = screen.getByTestId('BarChart')
       const props = JSON.parse(barChart.dataset.props || '{}')
-      expect(props.icon).toEqual(faCodeCommit)
+      expect(props.icon).toEqual('FaCodeCommit')
       expect(props.labels).toEqual(['Days Since Last Commit', 'Days Since Last Release'])
       expect(props.days).toEqual([1, 7])
       expect(props.requirements).toEqual([10, 14])
diff --git a/frontend/__tests__/unit/components/InfoBlock.test.tsx b/frontend/__tests__/unit/components/InfoBlock.test.tsx
index 3e5952668a..adba6175ac 100644
--- a/frontend/__tests__/unit/components/InfoBlock.test.tsx
+++ b/frontend/__tests__/unit/components/InfoBlock.test.tsx
@@ -1,9 +1,9 @@
-import { faUser, faStar, faCode } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import millify from 'millify'
 import React from 'react'
+import { FaUser, FaStar, FaCode } from 'react-icons/fa6'
 import { pluralize } from 'utils/pluralize'
 import InfoBlock from 'components/InfoBlock'
 
@@ -12,16 +12,23 @@ jest.mock('utils/pluralize', () => ({
   pluralize: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
+// Update IconWrapper mock to handle react-icons properly
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon: IconComponent,
     className,
-    ...props
   }: {
-    icon: { iconName: string }
+    icon: React.ComponentType<{ className?: string }>
     className?: string
-    [key: string]: unknown
-  }) => <span data-testid={`icon-${icon.iconName}`} className={className} {...props} />,
+  }) => {
+    // Extract icon name for test id from component name
+    const iconName = IconComponent?.name?.replace('Fa', '').toLowerCase() || 'icon'
+    return IconComponent ? (
+      <span data-testid={`icon-${iconName}`} className={className}>
+        <IconComponent />
+      </span>
+    ) : null
+  },
 }))
 
 jest.mock('@heroui/tooltip', () => ({
@@ -48,7 +55,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         expect(screen.getByTestId('icon-user')).toBeInTheDocument()
         expect(screen.getByText('100 items')).toBeInTheDocument()
@@ -61,7 +68,7 @@ describe('InfoBlock Component', () => {
 
         render(
           <InfoBlock
-            icon={faStar}
+            icon={FaStar}
             value={1500}
             unit="contributor"
             pluralizedName="contributors"
@@ -82,7 +89,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('50')
         mockPluralize.mockReturnValue('projects')
 
-        render(<InfoBlock icon={faCode} value={50} label="Active Projects" />)
+        render(<InfoBlock icon={FaCode} value={50} label="Active Projects" />)
 
         expect(screen.getByText('Active Projects')).toBeInTheDocument()
         expect(screen.getByText('Active Projects')).toHaveClass('text-sm', 'font-medium')
@@ -92,7 +99,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('50')
         mockPluralize.mockReturnValue('projects')
 
-        render(<InfoBlock icon={faCode} value={50} />)
+        render(<InfoBlock icon={FaCode} value={50} />)
 
         expect(screen.queryByText('Active Projects')).not.toBeInTheDocument()
       })
@@ -101,7 +108,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={0} />)
+        render(<InfoBlock icon={FaUser} value={0} />)
 
         expect(screen.getByText('No items')).toBeInTheDocument()
       })
@@ -110,7 +117,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('5')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={5} />)
+        render(<InfoBlock icon={FaUser} value={5} />)
 
         expect(screen.getByText('5 items')).toBeInTheDocument()
         expect(screen.queryByText('No items')).not.toBeInTheDocument()
@@ -123,7 +130,7 @@ describe('InfoBlock Component', () => {
         mockPluralize.mockReturnValue('users')
 
         const { container } = render(
-          <InfoBlock icon={faUser} value={100} className="custom-spacing pb-4" />
+          <InfoBlock icon={FaUser} value={100} className="custom-spacing pb-4" />
         )
 
         const wrapper = container.firstChild as HTMLElement
@@ -134,7 +141,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('users')
 
-        const { container } = render(<InfoBlock icon={faUser} value={100} />)
+        const { container } = render(<InfoBlock icon={FaUser} value={100} />)
 
         const wrapper = container.firstChild as HTMLElement
         expect(wrapper).toHaveClass('flex')
@@ -145,7 +152,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.234k')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={1234} precision={3} />)
+        render(<InfoBlock icon={FaUser} value={1234} precision={3} />)
 
         expect(mockMillify).toHaveBeenCalledWith(1234, { precision: 3 })
       })
@@ -154,7 +161,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.2k')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={1234} />)
+        render(<InfoBlock icon={FaUser} value={1234} />)
 
         expect(mockMillify).toHaveBeenCalledWith(1234, { precision: 1 })
       })
@@ -163,7 +170,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('5')
         mockPluralize.mockReturnValue('people')
 
-        render(<InfoBlock icon={faUser} value={5} unit="person" pluralizedName="people" />)
+        render(<InfoBlock icon={FaUser} value={5} unit="person" pluralizedName="people" />)
 
         expect(mockPluralize).toHaveBeenCalledWith(5, 'person', 'people')
       })
@@ -172,7 +179,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('5')
         mockPluralize.mockReturnValue('users')
 
-        render(<InfoBlock icon={faUser} value={5} unit="user" />)
+        render(<InfoBlock icon={FaUser} value={5} unit="user" />)
 
         expect(mockPluralize).toHaveBeenCalledWith(5, 'user')
       })
@@ -184,7 +191,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         const tooltip = screen.getByTestId('tooltip')
 
@@ -208,7 +215,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         const tooltip = screen.getByTestId('tooltip')
 
@@ -230,7 +237,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         // Verify only the formatted value is rendered, no label
         expect(screen.getByText('100 items')).toBeInTheDocument()
@@ -244,7 +251,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        const { container } = render(<InfoBlock icon={faUser} value={100} />)
+        const { container } = render(<InfoBlock icon={FaUser} value={100} />)
 
         const wrapper = container.firstChild as HTMLElement
         expect(wrapper).toHaveClass('flex')
@@ -254,7 +261,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.2k')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={1234} />)
+        render(<InfoBlock icon={FaUser} value={1234} />)
 
         expect(mockMillify).toHaveBeenCalledWith(1234, { precision: 1 })
       })
@@ -265,7 +272,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('2.5k')
         mockPluralize.mockReturnValue('stars')
 
-        render(<InfoBlock icon={faStar} value={2500} />)
+        render(<InfoBlock icon={FaStar} value={2500} />)
 
         expect(screen.getByText('2.5k stars')).toBeInTheDocument()
       })
@@ -274,7 +281,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('repos')
 
-        render(<InfoBlock icon={faCode} value={100} label="Repositories" />)
+        render(<InfoBlock icon={FaCode} value={100} label="Repositories" />)
 
         const label = screen.getByText('Repositories')
         expect(label).toHaveClass('text-sm', 'font-medium')
@@ -284,7 +291,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.5k')
         mockPluralize.mockReturnValue('contributors')
 
-        render(<InfoBlock icon={faUser} value={1500} />)
+        render(<InfoBlock icon={FaUser} value={1500} />)
 
         const tooltip = screen.getByTestId('tooltip')
         expect(tooltip).toHaveAttribute('title', '1,500 contributors')
@@ -294,7 +301,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={0} />)
+        render(<InfoBlock icon={FaUser} value={0} />)
 
         const tooltip = screen.getByTestId('tooltip')
         expect(tooltip).toHaveAttribute('title', 'No items')
@@ -306,7 +313,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={0} />)
+        render(<InfoBlock icon={FaUser} value={0} />)
 
         expect(screen.getByText('No items')).toBeInTheDocument()
         expect(screen.getByTestId('tooltip')).toHaveAttribute('title', 'No items')
@@ -316,7 +323,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.2B')
         mockPluralize.mockReturnValue('users')
 
-        render(<InfoBlock icon={faUser} value={1234567890} />)
+        render(<InfoBlock icon={FaUser} value={1234567890} />)
 
         expect(screen.getByText('1.2B users')).toBeInTheDocument()
         expect(mockMillify).toHaveBeenCalledWith(1234567890, { precision: 1 })
@@ -326,7 +333,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('-100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={-100} />)
+        render(<InfoBlock icon={FaUser} value={-100} />)
 
         expect(screen.getByText('-100 items')).toBeInTheDocument()
       })
@@ -335,7 +342,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.234k')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={1234.56} precision={3} />)
+        render(<InfoBlock icon={FaUser} value={1234.56} precision={3} />)
 
         expect(mockMillify).toHaveBeenCalledWith(1234.56, { precision: 3 })
       })
@@ -344,7 +351,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('42')
         mockPluralize.mockReturnValue('answers')
 
-        render(<InfoBlock icon={faUser} value={42} />)
+        render(<InfoBlock icon={FaUser} value={42} />)
 
         expect(screen.getByText('42 answers')).toBeInTheDocument()
         expect(screen.getByTestId('icon-user')).toBeInTheDocument()
@@ -357,7 +364,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        const { container } = render(<InfoBlock icon={faUser} value={100} />)
+        const { container } = render(<InfoBlock icon={FaUser} value={100} />)
 
         const wrapper = container.firstChild as HTMLElement
         expect(wrapper).toHaveClass('flex')
@@ -374,7 +381,7 @@ describe('InfoBlock Component', () => {
         mockPluralize.mockReturnValue('items')
 
         const { container } = render(
-          <InfoBlock icon={faUser} value={100} className="custom-class pb-1" />
+          <InfoBlock icon={FaUser} value={100} className="custom-class pb-1" />
         )
 
         const wrapper = container.firstChild as HTMLElement
@@ -385,7 +392,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         const icon = screen.getByTestId('icon-user')
         expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
@@ -395,7 +402,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} label="Test Label" />)
+        render(<InfoBlock icon={FaUser} value={100} label="Test Label" />)
 
         const textContainer = screen.getByText('100 items').closest('div')
         expect(textContainer).toHaveClass('text-sm', 'md:text-base')
@@ -410,7 +417,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('1.5k')
         mockPluralize.mockReturnValue('contributors')
 
-        render(<InfoBlock icon={faUser} value={1500} />)
+        render(<InfoBlock icon={FaUser} value={1500} />)
 
         const tooltip = screen.getByTestId('tooltip')
         expect(tooltip).toHaveAttribute('title', '1,500 contributors')
@@ -420,7 +427,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={100} />)
+        render(<InfoBlock icon={FaUser} value={100} />)
 
         const tooltip = screen.getByTestId('tooltip')
 
@@ -436,7 +443,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('5.67k')
         mockPluralize.mockReturnValue('items')
 
-        render(<InfoBlock icon={faUser} value={5678} precision={2} />)
+        render(<InfoBlock icon={FaUser} value={5678} precision={2} />)
 
         expect(mockMillify).toHaveBeenCalledWith(5678, { precision: 2 })
         expect(mockMillify).toHaveBeenCalledTimes(1)
@@ -446,7 +453,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('3')
         mockPluralize.mockReturnValue('people')
 
-        render(<InfoBlock icon={faUser} value={3} unit="person" pluralizedName="people" />)
+        render(<InfoBlock icon={FaUser} value={3} unit="person" pluralizedName="people" />)
 
         expect(mockPluralize).toHaveBeenCalledWith(3, 'person', 'people')
         expect(mockPluralize).toHaveBeenCalledTimes(1)
@@ -456,7 +463,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('3')
         mockPluralize.mockReturnValue('users')
 
-        render(<InfoBlock icon={faUser} value={3} unit="user" />)
+        render(<InfoBlock icon={FaUser} value={3} unit="user" />)
 
         expect(mockPluralize).toHaveBeenCalledWith(3, 'user')
         expect(mockPluralize).toHaveBeenCalledTimes(1)
@@ -468,7 +475,7 @@ describe('InfoBlock Component', () => {
         mockMillify.mockReturnValue('2.5k')
         mockPluralize.mockReturnValue('stars')
 
-        render(<InfoBlock icon={faStar} value={2500} />)
+        render(<InfoBlock icon={FaStar} value={2500} />)
 
         const tooltip = screen.getByTestId('tooltip')
         expect(tooltip).toContainHTML('2.5k stars')
@@ -482,11 +489,11 @@ describe('InfoBlock Component', () => {
       mockMillify.mockReturnValue('100')
       mockPluralize.mockReturnValue('items')
 
-      const { rerender } = render(<InfoBlock icon={faUser} value={100} />)
+      const { rerender } = render(<InfoBlock icon={FaUser} value={100} />)
 
-      rerender(<InfoBlock icon={faUser} value={200} />)
-      rerender(<InfoBlock icon={faUser} value={300} />)
-      rerender(<InfoBlock icon={faUser} value={400} />)
+      rerender(<InfoBlock icon={FaUser} value={200} />)
+      rerender(<InfoBlock icon={FaUser} value={300} />)
+      rerender(<InfoBlock icon={FaUser} value={400} />)
 
       expect(screen.getByTestId('icon-user')).toBeInTheDocument()
       expect(screen.getByTestId('tooltip')).toBeInTheDocument()
diff --git a/frontend/__tests__/unit/components/InfoItem.test.tsx b/frontend/__tests__/unit/components/InfoItem.test.tsx
index dfbd733b48..b3d7dad063 100644
--- a/frontend/__tests__/unit/components/InfoItem.test.tsx
+++ b/frontend/__tests__/unit/components/InfoItem.test.tsx
@@ -1,7 +1,7 @@
-import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
 import millify from 'millify'
 import React from 'react'
+import { FaUser } from 'react-icons/fa'
 import { pluralize } from 'utils/pluralize'
 import InfoItem from 'components/InfoItem'
 
@@ -30,18 +30,18 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('1k')
     mockPluralize.mockReturnValue('1 user')
 
-    render(<InfoItem icon={faUser} unit="user" value={1000} />)
+    render(<InfoItem icon={FaUser} unit="user" value={1000} />)
 
     expect(screen.getByText('1k')).toBeInTheDocument()
     expect(screen.getByText('1 user')).toBeInTheDocument()
-    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument()
+    expect(document.querySelector('svg')).toBeInTheDocument()
   })
 
   it('uses pluralizedName if provided', () => {
     mockMillify.mockReturnValue('2k')
     mockPluralize.mockReturnValue('2 contributors')
 
-    render(<InfoItem icon={faUser} unit="contributor" value={2000} pluralizedName="contributors" />)
+    render(<InfoItem icon={FaUser} unit="contributor" value={2000} pluralizedName="contributors" />)
 
     expect(mockPluralize).toHaveBeenCalledWith(2000, 'contributor', 'contributors')
     expect(screen.getByText('2 contributors')).toBeInTheDocument()
@@ -51,7 +51,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('15.4k')
     mockPluralize.mockReturnValue('15430 views')
 
-    render(<InfoItem icon={faUser} unit="view" value={15430} precision={3} />)
+    render(<InfoItem icon={FaUser} unit="view" value={15430} precision={3} />)
 
     expect(mockMillify).toHaveBeenCalledWith(15430, { precision: 3 })
     expect(screen.getByText('15.4k')).toBeInTheDocument()
@@ -61,7 +61,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('0')
     mockPluralize.mockReturnValue('0 views')
 
-    render(<InfoItem icon={faUser} unit="view" value={0} />)
+    render(<InfoItem icon={FaUser} unit="view" value={0} />)
 
     expect(screen.getByText('0')).toBeInTheDocument()
     expect(screen.getByText('0 views')).toBeInTheDocument()
@@ -71,7 +71,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('5')
     mockPluralize.mockReturnValue('5 likes')
 
-    render(<InfoItem icon={faUser} unit="like" value={5} />)
+    render(<InfoItem icon={FaUser} unit="like" value={5} />)
 
     const container = screen.getByText('5 likes').closest('div')
     expect(container).toHaveClass('flex', 'items-center', 'justify-between')
@@ -79,7 +79,8 @@ describe('InfoItem', () => {
     const nameSpan = screen.getByText('5 likes').closest('span')
     expect(nameSpan).toHaveClass('flex', 'items-center')
 
-    const icon = screen.getByRole('img', { hidden: true })
+    const icon = document.querySelector('svg')
+    expect(icon).toBeInTheDocument()
     expect(icon).toHaveClass('mr-2', 'h-4', 'w-4')
 
     const valueSpan = screen.getByText('5').closest('span')
@@ -90,7 +91,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('1k')
     mockPluralize.mockReturnValue('1010 stars')
 
-    render(<InfoItem icon={faUser} unit="star" value={1010} />)
+    render(<InfoItem icon={FaUser} unit="star" value={1010} />)
 
     expect(mockMillify).toHaveBeenCalledWith(1010, { precision: 1 })
   })
@@ -99,7 +100,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('7.5k')
     mockPluralize.mockReturnValue('7.5k stars')
 
-    render(<InfoItem icon={faUser} unit="star" value={7500} />)
+    render(<InfoItem icon={FaUser} unit="star" value={7500} />)
 
     const tooltip = screen.getByTestId('tooltip')
     expect(tooltip).toHaveAttribute('title', '7,500 7.5k stars')
@@ -110,7 +111,7 @@ describe('InfoItem', () => {
     mockMillify.mockReturnValue('0')
     mockPluralize.mockReturnValue('0 items')
 
-    render(<InfoItem icon={faUser} unit="item" value={0} />)
+    render(<InfoItem icon={FaUser} unit="item" value={0} />)
 
     const tooltip = screen.getByTestId('tooltip')
     expect(tooltip).toHaveAttribute('title', 'No 0 items')
diff --git a/frontend/__tests__/unit/components/ItemCardList.test.tsx b/frontend/__tests__/unit/components/ItemCardList.test.tsx
index 12ac7cc2de..fb24c65750 100644
--- a/frontend/__tests__/unit/components/ItemCardList.test.tsx
+++ b/frontend/__tests__/unit/components/ItemCardList.test.tsx
@@ -1,5 +1,5 @@
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
 import React from 'react'
+import { FaCircleExclamation } from 'react-icons/fa6'
 import { render, screen, cleanup } from 'wrappers/testUtil'
 import type { Issue } from 'types/issue'
 import type { Milestone } from 'types/milestone'
@@ -225,7 +225,7 @@ describe('ItemCardList Component', () => {
         <ItemCardList
           title="Complete List"
           data={[mockIssue]}
-          icon={faCircleExclamation}
+          icon={FaCircleExclamation}
           renderDetails={defaultProps.renderDetails}
           showAvatar={true}
           showSingleColumn={false}
@@ -307,7 +307,7 @@ describe('ItemCardList Component', () => {
         <ItemCardList
           title="With Icon"
           data={[mockIssue]}
-          icon={faCircleExclamation}
+          icon={FaCircleExclamation}
           renderDetails={defaultProps.renderDetails}
         />
       )
diff --git a/frontend/__tests__/unit/components/Leaders.test.tsx b/frontend/__tests__/unit/components/Leaders.test.tsx
index d29de4992a..264928c84f 100644
--- a/frontend/__tests__/unit/components/Leaders.test.tsx
+++ b/frontend/__tests__/unit/components/Leaders.test.tsx
@@ -12,9 +12,14 @@ jest.mock('components/AnchorTitle', () => ({
   default: ({ title }: { title: string }) => <span>{title}</span>,
 }))
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => ({
-  __esModule: true,
-  default: () => <i className="fa" />,
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({ icon: IconComponent, className, ...props }) => {
+    return IconComponent ? (
+      <IconComponent className={className} data-testid="icon" {...props} />
+    ) : (
+      <i className="icon" />
+    )
+  },
 }))
 
 describe('Leaders Component', () => {
diff --git a/frontend/__tests__/unit/components/LineChart.test.tsx b/frontend/__tests__/unit/components/LineChart.test.tsx
index 3cea530139..3898f5f3ce 100644
--- a/frontend/__tests__/unit/components/LineChart.test.tsx
+++ b/frontend/__tests__/unit/components/LineChart.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { useTheme } from 'next-themes'
+import { FaChartLine } from 'react-icons/fa'
 import type { ApexLineChartSeries } from 'types/healthMetrics'
 import LineChart from 'components/LineChart'
 
@@ -103,7 +104,7 @@ describe('LineChart', () => {
     })
 
     it('passes icon to SecondaryCard when provided', () => {
-      const iconProp = 'chart-line'
+      const iconProp = FaChartLine
       render(<LineChart {...defaultProps} icon={iconProp} />)
 
       const secondaryCard = screen.getByTestId('secondary-card')
diff --git a/frontend/__tests__/unit/components/LoginPageContent.test.tsx b/frontend/__tests__/unit/components/LoginPageContent.test.tsx
index 5526631cfe..6118d09c2f 100644
--- a/frontend/__tests__/unit/components/LoginPageContent.test.tsx
+++ b/frontend/__tests__/unit/components/LoginPageContent.test.tsx
@@ -3,27 +3,18 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { useRouter } from 'next/navigation'
 import type { Session } from 'next-auth'
 import { useSession, signIn } from 'next-auth/react'
+import React from 'react'
 import { userAuthStatus } from 'utils/constants'
 import LoginPageContent from 'components/LoginPageContent'
 
-// Define types for mock props
-interface MockFontAwesomeIconProps {
-  icon: {
-    iconName?: string
-  }
-  spin?: boolean
-  height?: number
-  width?: number
-}
-
-interface MockRouterReturn {
-  push: jest.MockedFunction<(url: string) => void>
-  replace: jest.MockedFunction<(url: string) => void>
-  back: jest.MockedFunction<() => void>
-  forward: jest.MockedFunction<() => void>
-  refresh: jest.MockedFunction<() => void>
-  prefetch: jest.MockedFunction<(url: string) => void>
-}
+jest.mock('react-icons/fa', () => ({
+  FaGithub: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-github-icon" {...props} />
+  ),
+  FaSpinner: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-spinner-icon" {...props} />
+  ),
+}))
 
 // Mock dependencies
 jest.mock('next-auth/react', () => ({
@@ -39,19 +30,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, spin, ...props }: MockFontAwesomeIconProps) => (
-    <span
-      data-testid="font-awesome-icon"
-      data-icon={icon.iconName || 'unknown'}
-      data-spin={spin}
-      {...props}
-    >
-      {icon.iconName || 'icon'}
-    </span>
-  ),
-}))
-
 describe('LoginPageContent', () => {
   const mockPush = jest.fn()
   const mockUseSession = useSession as jest.MockedFunction<typeof useSession>
@@ -68,7 +46,7 @@ describe('LoginPageContent', () => {
       forward: jest.fn(),
       refresh: jest.fn(),
       prefetch: jest.fn(),
-    } as MockRouterReturn)
+    })
   })
 
   describe('Renders successfully with minimal required props', () => {
@@ -111,8 +89,8 @@ describe('LoginPageContent', () => {
       render(<LoginPageContent isGitHubAuthEnabled={true} />)
 
       expect(screen.getByText('Checking session...')).toBeInTheDocument()
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'spinner')
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-spin', 'true')
+      expect(screen.getByTestId('fa-spinner-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('fa-spinner-icon')).toHaveClass('animate-spin')
     })
 
     it('shows redirecting state when user is authenticated', () => {
@@ -125,8 +103,8 @@ describe('LoginPageContent', () => {
       render(<LoginPageContent isGitHubAuthEnabled={true} />)
 
       expect(screen.getByText('Redirecting...')).toBeInTheDocument()
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'spinner')
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-spin', 'true')
+      expect(screen.getByTestId('fa-spinner-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('fa-spinner-icon')).toHaveClass('animate-spin')
     })
 
     it('shows login form when user is unauthenticated and GitHub auth is enabled', () => {
@@ -140,7 +118,7 @@ describe('LoginPageContent', () => {
 
       expect(screen.getByText('Welcome back')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /sign in with github/i })).toBeInTheDocument()
-      expect(screen.getByTestId('font-awesome-icon')).toHaveAttribute('data-icon', 'github')
+      expect(screen.getByTestId('fa-github-icon')).toBeInTheDocument()
     })
 
     it('shows disabled message when GitHub auth is disabled regardless of session status', () => {
diff --git a/frontend/__tests__/unit/components/Milestones.test.tsx b/frontend/__tests__/unit/components/Milestones.test.tsx
index cd1de39854..cc7a01bb99 100644
--- a/frontend/__tests__/unit/components/Milestones.test.tsx
+++ b/frontend/__tests__/unit/components/Milestones.test.tsx
@@ -53,8 +53,9 @@ jest.mock('components/ItemCardList', () => {
   }) => {
     const getIconLabel = (iconProp: unknown): string => {
       if (!iconProp) return 'no-icon'
+      if (typeof iconProp === 'function' && iconProp.name) return iconProp.name
       if (typeof iconProp === 'string') return iconProp
-      return JSON.stringify(iconProp)
+      return typeof iconProp
     }
 
     return (
diff --git a/frontend/__tests__/unit/components/Modal.test.tsx b/frontend/__tests__/unit/components/Modal.test.tsx
index 99ebb9aad4..9b677124c0 100644
--- a/frontend/__tests__/unit/components/Modal.test.tsx
+++ b/frontend/__tests__/unit/components/Modal.test.tsx
@@ -1,7 +1,6 @@
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { render, screen, fireEvent } from '@testing-library/react'
 import React from 'react'
+import { FaCheck } from 'react-icons/fa6'
 import DialogComp from 'components/Modal'
 
 jest.mock('@/components/MarkdownWrapper', () => {
@@ -83,7 +82,7 @@ describe('DialogComp', () => {
     onClose: mockOnClose,
     button: {
       label: 'Action',
-      icon: <FontAwesomeIcon icon={faCheck} />,
+      icon: <FaCheck data-testid="fa-check-icon" />,
       url: 'https://example.com',
       onPress: mockOnClick,
     },
@@ -151,6 +150,7 @@ describe('DialogComp', () => {
     render(<DialogComp {...defaultProps} />)
     expect(screen.getByTestId('action-button')).toBeInTheDocument()
     expect(screen.getByText('Action')).toBeInTheDocument()
+    expect(screen.getByTestId('fa-check-icon')).toBeInTheDocument()
   })
 
   it('renders with minimal required props', () => {
diff --git a/frontend/__tests__/unit/components/ModeToggle.test.tsx b/frontend/__tests__/unit/components/ModeToggle.test.tsx
index b5fd4fdff1..a57c64c4f3 100644
--- a/frontend/__tests__/unit/components/ModeToggle.test.tsx
+++ b/frontend/__tests__/unit/components/ModeToggle.test.tsx
@@ -23,27 +23,19 @@ jest.mock('@heroui/tooltip', () => ({
   Tooltip: ({ children }: React.PropsWithChildren) => <>{children}</>,
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: { icon: { iconName?: string }; className?: string }) => (
-    <svg
-      data-icon={icon?.iconName || 'moon'}
-      className={className}
-      data-testid="font-awesome-icon"
-    />
+jest.mock('react-icons/md', () => ({
+  MdOutlineLightMode: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="md-outline-light-mode-icon" data-icon="light" {...props} />
   ),
-}))
-
-jest.mock('components/icons/Sun', () => ({
-  __esModule: true,
-  default: ({ className }: { className?: string }) => (
-    <svg data-testid="sun-icon" data-icon="sun" className={className} viewBox="0 0 48 48" />
+  MdOutlineDarkMode: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="md-outline-dark-mode-icon" data-icon="dark" {...props} />
   ),
 }))
 
 const useThemeMock = useTheme as jest.Mock
 
 describe('ModeToggle Component', () => {
-  test('should render correctly in light mode and show moon icon', () => {
+  test('should render correctly in light mode and show dark mode icon', () => {
     useThemeMock.mockReturnValue({
       theme: 'light',
       setTheme: jest.fn(),
@@ -54,11 +46,12 @@ describe('ModeToggle Component', () => {
     const button = screen.getByRole('button', { name: /enable dark mode/i })
     expect(button).toBeInTheDocument()
 
-    const icon = document.querySelector('[data-icon="moon"]')
+    const icon = screen.getByTestId('md-outline-dark-mode-icon')
     expect(icon).toBeInTheDocument()
+    expect(icon).toHaveAttribute('data-icon', 'dark')
   })
 
-  test('should render correctly in dark mode and show sun icon', () => {
+  test('should render correctly in dark mode and show light mode icon', () => {
     useThemeMock.mockReturnValue({
       theme: 'dark',
       setTheme: jest.fn(),
@@ -69,8 +62,9 @@ describe('ModeToggle Component', () => {
     const button = screen.getByRole('button', { name: /enable light mode/i })
     expect(button).toBeInTheDocument()
 
-    const icon = document.querySelector('[data-icon="sun"]')
+    const icon = screen.getByTestId('md-outline-light-mode-icon')
     expect(icon).toBeInTheDocument()
+    expect(icon).toHaveAttribute('data-icon', 'light')
   })
 
   test('should call setTheme to switch from light to dark when clicked', () => {
diff --git a/frontend/__tests__/unit/components/MultiSearch.test.tsx b/frontend/__tests__/unit/components/MultiSearch.test.tsx
index 1eebb354b8..7d268cd19b 100644
--- a/frontend/__tests__/unit/components/MultiSearch.test.tsx
+++ b/frontend/__tests__/unit/components/MultiSearch.test.tsx
@@ -2,6 +2,7 @@ import { sendGAEvent } from '@next/third-parties/google'
 import { screen, render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useRouter } from 'next/navigation'
+import React from 'react'
 import { fetchAlgoliaData } from 'server/fetchAlgoliaData'
 import { Chapter } from 'types/chapter'
 import { Event } from 'types/event'
@@ -30,10 +31,32 @@ jest.mock('lodash', () => ({
   }),
 }))
 
-// Mock FontAwesome
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: { icon: { iconName: string }; className?: string }) => (
-    <div data-testid="font-awesome-icon" data-icon={icon.iconName} className={className} />
+jest.mock('react-icons/fa', () => ({
+  FaSearch: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-search-icon" {...props} />
+  ),
+  FaTimes: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="fa-times-icon" {...props} />,
+}))
+
+jest.mock('react-icons/fa6', () => ({
+  FaUser: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="fa-user-icon" {...props} />,
+  FaCalendar: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-calendar-icon" {...props} />
+  ),
+  FaFolder: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-folder-icon" {...props} />
+  ),
+  FaBuilding: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-building-icon" {...props} />
+  ),
+  FaLocationDot: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-location-dot-icon" {...props} />
+  ),
+}))
+
+jest.mock('react-icons/si', () => ({
+  SiAlgolia: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="si-algolia-icon" {...props} />
   ),
 }))
 
@@ -175,7 +198,7 @@ describe('Rendering', () => {
     render(<MultiSearchBar {...defaultProps} />)
 
     expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
-    expect(screen.getByTestId('font-awesome-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('fa-search-icon')).toBeInTheDocument()
   })
 
   it('renders loading state when not loaded', () => {
@@ -239,7 +262,7 @@ describe('Rendering', () => {
       render(<MultiSearchBar {...defaultProps} />)
       const input = screen.getByPlaceholderText('Search...')
       await user.type(input, 'test')
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getByTestId('fa-times-icon')).toBeInTheDocument()
     })
 
     it('clears search when clear button is clicked', async () => {
@@ -248,7 +271,7 @@ describe('Rendering', () => {
       render(<MultiSearchBar {...defaultProps} />)
       const input = screen.getByPlaceholderText('Search...')
       await user.type(input, 'test')
-      const clearButton = screen.getByRole('button')
+      const clearButton = screen.getByLabelText('Clear search')
       await user.click(clearButton)
       expect(input).toHaveValue('')
     })
@@ -283,7 +306,7 @@ describe('Rendering', () => {
       await waitFor(() => {
         expect(mockSendGAEvent).toHaveBeenCalledWith({
           event: 'homepageSearch',
-          path: expect.any(String), // Don't rely on specific window.location.pathname
+          path: globalThis.location.pathname,
           value: 'test query',
         })
       })
@@ -312,7 +335,6 @@ describe('Rendering', () => {
 
       const input = screen.getByPlaceholderText('Search...')
 
-      // Test filtering for "JavaScript"
       await user.type(input, 'JavaScript')
 
       await waitFor(() => {
@@ -321,7 +343,6 @@ describe('Rendering', () => {
         expect(screen.queryByText('React Meetup')).not.toBeInTheDocument()
       })
 
-      // Clear and test different filter
       await user.clear(input)
       await user.type(input, 'Python')
 
@@ -369,8 +390,21 @@ describe('Rendering', () => {
       await user.type(input, 'test')
 
       await waitFor(() => {
-        const icons = screen.getAllByTestId('font-awesome-icon')
-        expect(icons.length).toBeGreaterThan(1)
+        expect(screen.getByTestId('fa-location-dot-icon')).toBeInTheDocument() // chapters
+        expect(screen.getByTestId('fa-user-icon')).toBeInTheDocument() // users
+        expect(screen.getByTestId('fa-folder-icon')).toBeInTheDocument() // projects
+      })
+    })
+
+    it('shows Algolia branding icon', async () => {
+      const user = userEvent.setup()
+      render(<MultiSearchBar {...defaultProps} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      await waitFor(() => {
+        expect(screen.getByTestId('si-algolia-icon')).toBeInTheDocument()
       })
     })
 
@@ -529,7 +563,6 @@ describe('Rendering', () => {
       })
 
       const user = userEvent.setup()
-      // Changed 'organization' to 'organizations' (plural)
       render(<MultiSearchBar {...defaultProps} indexes={['organizations']} />)
 
       const input = screen.getByPlaceholderText('Search...')
@@ -703,7 +736,7 @@ describe('Rendering', () => {
       const input = screen.getByPlaceholderText('Search...')
       await user.type(input, 'test')
 
-      const clearButton = screen.getByRole('button')
+      const clearButton = screen.getByLabelText('Clear search')
       expect(clearButton).toBeInTheDocument()
 
       await user.click(clearButton)
@@ -745,7 +778,7 @@ describe('Rendering', () => {
       const input = screen.getByPlaceholderText('Search...')
       await user.type(input, 'test')
 
-      const clearButton = screen.getByRole('button')
+      const clearButton = screen.getByLabelText('Clear search')
       await user.click(clearButton)
 
       expect(input).toHaveValue('')
diff --git a/frontend/__tests__/unit/components/NavButton.test.tsx b/frontend/__tests__/unit/components/NavButton.test.tsx
index 5db9169d48..5cd8a9afc2 100644
--- a/frontend/__tests__/unit/components/NavButton.test.tsx
+++ b/frontend/__tests__/unit/components/NavButton.test.tsx
@@ -2,17 +2,44 @@
  * @file Complete unit tests for the NavButton component.
  * @see {@link AutoScrollToTop.test.tsx} for structural reference.
  */
-import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
 import '@testing-library/jest-dom'
 import type { ComponentPropsWithoutRef } from 'react'
+import { FaHome } from 'react-icons/fa'
+import { FaUser } from 'react-icons/fa6'
 import type { NavButtonProps } from 'types/button'
 import NavButton from 'components/NavButton'
 
-// The NavButton component uses next/link internally. We mock it to isolate
-// the NavButton's behavior and prevent actual navigation during tests.
+jest.mock('react-icons/fa', () => ({
+  FaHome: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-home-icon" className="fa-house" {...props} aria-hidden="true" />
+  ),
+}))
+
+jest.mock('react-icons/fa6', () => ({
+  FaUser: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="fa-user-icon" className="fa-user" {...props} aria-hidden="true" />
+  ),
+}))
+
+// Mock IconWrapper to pass through the icon component
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon: IconComponent,
+    className,
+    style,
+  }: {
+    icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
+    className?: string
+    style?: React.CSSProperties
+  }) => {
+    return IconComponent ? <IconComponent className={className} style={style} /> : null
+  },
+}))
+
+// Mock Next.js Link
 jest.mock('next/link', () => {
-  // Mock implementation returns a simple anchor tag with the passed props.
   return function MockLink({ children, href, ...props }: ComponentPropsWithoutRef<'a'>) {
     return (
       <a href={href} {...props}>
@@ -23,16 +50,15 @@ jest.mock('next/link', () => {
 })
 
 describe('<NavButton />', () => {
-  // Define default props to reduce repetition in tests.
-  const defaultProps: NavButtonProps = {
+  const defaultProps: NavButtonProps & { defaultIcon: typeof FaHome; hoverIcon: typeof FaUser } = {
     href: '/test-path',
-    defaultIcon: faHome,
-    hoverIcon: faUser,
+    defaultIcon: FaHome,
+    hoverIcon: FaUser,
     text: 'Test Button',
   }
 
   // Helper function to render the component with optional prop overrides.
-  const renderNavButton = (props: Partial<NavButtonProps> = {}) => {
+  const renderNavButton = (props: Partial<typeof defaultProps> = {}) => {
     return render(<NavButton {...defaultProps} {...props} />)
   }
 
@@ -50,13 +76,10 @@ describe('<NavButton />', () => {
       expect(screen.getByText(customText)).toBeInTheDocument()
     })
 
-    it('should render the default FontAwesome icon', () => {
+    it('should render the default react-icons icon', () => {
       renderNavButton()
-      // FontAwesome icons are rendered as SVGs. We check for their presence.
-      const icon = screen.getByRole('img', { hidden: true })
+      const icon = screen.getByTestId('fa-home-icon')
       expect(icon).toBeInTheDocument()
-      // Check for a class associated with the default icon (faHome).
-      expect(icon.parentElement?.querySelector('.fa-house')).toBeInTheDocument()
     })
 
     it('should render text content inside a span element', () => {
@@ -87,11 +110,12 @@ describe('<NavButton />', () => {
         hoverIconColor: 'rgb(0, 255, 0)', // green
       })
 
-      const icon = screen.getByRole('img', { hidden: true })
+      const icon = screen.getByTestId('fa-home-icon')
       expect(icon).toHaveStyle({ color: 'rgb(255, 0, 0)' })
 
       fireEvent.mouseEnter(screen.getByRole('link'))
-      expect(icon).toHaveStyle({ color: 'rgb(0, 255, 0)' })
+      const hoverIcon = screen.getByTestId('fa-user-icon')
+      expect(hoverIcon).toHaveStyle({ color: 'rgb(0, 255, 0)' })
     })
 
     it('should apply custom className while preserving default classes', () => {
@@ -107,64 +131,60 @@ describe('<NavButton />', () => {
     it('should switch from default icon to hover icon on mouse enter', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      const iconContainer = link.querySelector('svg')?.parentElement
 
-      // Initially, the default icon (fa-house) should be present.
-      expect(iconContainer?.querySelector('.fa-house')).toBeInTheDocument()
-      expect(iconContainer?.querySelector('.fa-user')).not.toBeInTheDocument()
+      expect(screen.getByTestId('fa-home-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('fa-user-icon')).not.toBeInTheDocument()
 
-      // On hover, the hover icon (fa-user) should be present.
       fireEvent.mouseEnter(link)
-      expect(iconContainer?.querySelector('.fa-user')).toBeInTheDocument()
-      expect(iconContainer?.querySelector('.fa-house')).not.toBeInTheDocument()
+      expect(screen.getByTestId('fa-user-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('fa-home-icon')).not.toBeInTheDocument()
     })
 
     it('should revert to the default icon on mouse leave', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      const iconContainer = link.querySelector('svg')?.parentElement
 
       // Hover to change state
       fireEvent.mouseEnter(link)
-      expect(iconContainer?.querySelector('.fa-user')).toBeInTheDocument()
+      expect(screen.getByTestId('fa-user-icon')).toBeInTheDocument()
 
       // Leave to revert state
       fireEvent.mouseLeave(link)
-      expect(iconContainer?.querySelector('.fa-house')).toBeInTheDocument()
-      expect(iconContainer?.querySelector('.fa-user')).not.toBeInTheDocument()
+      expect(screen.getByTestId('fa-home-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('fa-user-icon')).not.toBeInTheDocument()
     })
 
     it('should apply scaling transform and yellow color on hover', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      const icon = screen.getByRole('img', { hidden: true })
 
-      // The icon should not be scaled initially
-      expect(icon).not.toHaveClass('scale-110')
-      expect(icon).not.toHaveClass('text-yellow-400')
+      const defaultIcon = screen.getByTestId('fa-home-icon')
+      expect(defaultIcon).not.toHaveClass('scale-110')
+      expect(defaultIcon).not.toHaveClass('text-yellow-400')
 
-      // On hover, it should scale up and turn yellow
       fireEvent.mouseEnter(link)
-      expect(icon).toHaveClass('scale-110')
-      expect(icon).toHaveClass('text-yellow-400')
+      const hoverIcon = screen.getByTestId('fa-user-icon')
+      expect(hoverIcon).toHaveClass('scale-110')
+      expect(hoverIcon).toHaveClass('text-yellow-400')
 
-      // On leave, it should scale back down and remove yellow
+      // On leave, should revert to default icon without hover classes
       fireEvent.mouseLeave(link)
-      expect(icon).not.toHaveClass('scale-110')
-      expect(icon).not.toHaveClass('text-yellow-400')
+      const revertedIcon = screen.getByTestId('fa-home-icon')
+      expect(revertedIcon).not.toHaveClass('scale-110')
+      expect(revertedIcon).not.toHaveClass('text-yellow-400')
     })
 
     it('should maintain hover state when mouse moves within the component', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      const icon = screen.getByRole('img', { hidden: true })
 
       fireEvent.mouseEnter(link)
-      expect(icon).toHaveClass('scale-110')
+      const hoverIcon = screen.getByTestId('fa-user-icon')
+      expect(hoverIcon).toHaveClass('scale-110')
 
       // Moving mouse within component should maintain hover state
       fireEvent.mouseMove(link)
-      expect(icon).toHaveClass('scale-110')
+      expect(screen.getByTestId('fa-user-icon')).toHaveClass('scale-110')
     })
   })
 
@@ -246,7 +266,7 @@ describe('<NavButton />', () => {
   describe('Default Values and Fallbacks', () => {
     it('should render without crashing when optional color props are not provided', () => {
       expect(() => {
-        render(<NavButton href="/test" defaultIcon={faHome} hoverIcon={faUser} text="Test" />)
+        render(<NavButton href="/test" defaultIcon={FaHome} hoverIcon={FaUser} text="Test" />)
       }).not.toThrow()
     })
 
@@ -258,7 +278,7 @@ describe('<NavButton />', () => {
     })
 
     it('should render without custom className', () => {
-      render(<NavButton href="/test" defaultIcon={faHome} hoverIcon={faUser} text="Test" />)
+      render(<NavButton href="/test" defaultIcon={FaHome} hoverIcon={FaUser} text="Test" />)
       const link = screen.getByRole('link')
       expect(link).toBeInTheDocument()
       expect(link).toHaveClass('group') // Should still have default classes
@@ -328,12 +348,12 @@ describe('<NavButton />', () => {
   })
 
   describe('Component Composition & Structure', () => {
-    it('should render Link wrapper with FontAwesome icon and span inside', () => {
+    it('should render Link wrapper with react-icons icon and span inside', () => {
       renderNavButton()
       const link = screen.getByRole('link')
 
       // Should contain both icon and text span
-      expect(link.querySelector('svg')).toBeInTheDocument() // FontAwesome renders as SVG
+      expect(screen.getByTestId('fa-home-icon')).toBeInTheDocument() // React-icons renders as SVG
       expect(link.querySelector('span')).toBeInTheDocument()
     })
 
@@ -342,9 +362,9 @@ describe('<NavButton />', () => {
       const link = screen.getByRole('link')
       const children = link.children
 
-      // Should have 2 children: FontAwesome icon and span
+      // Should have 2 children: react-icons icon and span
       expect(children).toHaveLength(2)
-      expect(children[0].tagName).toBe('svg') // FontAwesome icon
+      expect(children[0].tagName.toUpperCase()).toBe('SVG') // React-icons icon
       expect(children[1].tagName).toBe('SPAN') // Text span
     })
   })
@@ -358,7 +378,6 @@ describe('<NavButton />', () => {
     it('should handle rapid hover state changes', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      const icon = screen.getByRole('img', { hidden: true })
 
       // Rapid mouse enter/leave should work correctly
       fireEvent.mouseEnter(link)
@@ -367,8 +386,9 @@ describe('<NavButton />', () => {
       fireEvent.mouseLeave(link)
 
       // Should end up in non-hovered state
-      expect(icon).not.toHaveClass('scale-110')
-      expect(icon).not.toHaveClass('text-yellow-400')
+      const defaultIcon = screen.getByTestId('fa-home-icon')
+      expect(defaultIcon).not.toHaveClass('scale-110')
+      expect(defaultIcon).not.toHaveClass('text-yellow-400')
     })
   })
 })
diff --git a/frontend/__tests__/unit/components/NavDropDown.test.tsx b/frontend/__tests__/unit/components/NavDropDown.test.tsx
index b450bf6f91..da02f417f2 100644
--- a/frontend/__tests__/unit/components/NavDropDown.test.tsx
+++ b/frontend/__tests__/unit/components/NavDropDown.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
 import '@testing-library/jest-dom'
 import type { Link as LinkType } from 'types/link'
 import NavDropdown from 'components/NavDropDown'
@@ -22,9 +23,10 @@ jest.mock('next/link', () => {
   }
 })
 
-// Mock FontAwesome icons
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ className }) => <span data-testid="chevron-icon" className={className} />,
+jest.mock('react-icons/fa', () => ({
+  FaChevronDown: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="chevron-icon" className={props.className} {...props} />
+  ),
 }))
 
 // Mock utility function
diff --git a/frontend/__tests__/unit/components/ProgramCard.test.tsx b/frontend/__tests__/unit/components/ProgramCard.test.tsx
index 3dfc2177d1..77f8ae0707 100644
--- a/frontend/__tests__/unit/components/ProgramCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProgramCard.test.tsx
@@ -1,5 +1,3 @@
-import { faEye } from '@fortawesome/free-regular-svg-icons'
-import { faEdit } from '@fortawesome/free-solid-svg-icons'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { useRouter } from 'next/navigation'
 import React from 'react'
@@ -11,22 +9,26 @@ jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: { icon: unknown; className?: string }) => {
-    let iconName = 'unknown'
-
-    if (icon === faEye) {
-      iconName = 'eye'
-    } else if (icon === faEdit) {
-      iconName = 'edit'
-    }
-
-    return <span data-testid={`icon-${iconName}`} className={className} />
-  },
+jest.mock('react-icons/fa6', () => ({
+  FaEye: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-eye" className={props.className} {...props} />
+  ),
+  FaPencilAlt: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-edit" className={props.className} {...props} />
+  ),
 }))
 
-jest.mock('hooks/useUpdateProgramStatus', () => ({
-  useUpdateProgramStatus: () => ({ updateProgramStatus: jest.fn() }),
+// Mock IconWrapper to handle react-icons properly
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon: IconComponent,
+    className,
+  }: {
+    icon: React.ComponentType<{ className?: string }>
+    className?: string
+  }) => {
+    return IconComponent ? <IconComponent className={className} /> : null
+  },
 }))
 
 jest.mock('hooks/useUpdateProgramStatus', () => ({
@@ -80,7 +82,7 @@ describe('ProgramCard', () => {
     description: 'This is a test program description',
     status: ProgramStatusEnum.Published,
     startedAt: '2024-01-01T00:00:00Z',
-    endedAt: '2024-12-31T23:59:59Z',
+    endedAt: '2024-12-31T12:00:00Z',
     userRole: 'admin',
   }
 
diff --git a/frontend/__tests__/unit/components/ProjectTypeDashboardCard.test.tsx b/frontend/__tests__/unit/components/ProjectTypeDashboardCard.test.tsx
index 578af52472..1f59806a0c 100644
--- a/frontend/__tests__/unit/components/ProjectTypeDashboardCard.test.tsx
+++ b/frontend/__tests__/unit/components/ProjectTypeDashboardCard.test.tsx
@@ -1,7 +1,9 @@
-import { faHeartPulse, faExclamationTriangle, faSkull } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
 import React from 'react'
+import type { IconType } from 'react-icons'
+import '@testing-library/jest-dom'
+import { FaExclamationTriangle } from 'react-icons/fa'
+import { FaHeartPulse, FaSkull } from 'react-icons/fa6'
 import type { ProjectHealthType } from 'types/project'
 import ProjectTypeDashboardCard from 'components/ProjectTypeDashboardCard'
 
@@ -34,16 +36,17 @@ jest.mock('components/SecondaryCard', () => {
     ...props
   }: {
     title: string
-    icon: unknown
+    icon: IconType
     className?: string
     children: React.ReactNode
     [key: string]: unknown
   }) {
+    const iconName = icon?.name ?? (icon && typeof icon) ?? ''
     return (
       <div
         data-testid="secondary-card"
         data-title={title}
-        data-icon={JSON.stringify(icon)}
+        data-icon={iconName}
         className={className}
         {...props}
       >
@@ -58,7 +61,7 @@ describe('ProjectTypeDashboardCard', () => {
   const baseProps = {
     type: 'healthy' as const,
     count: 42,
-    icon: faHeartPulse,
+    icon: FaHeartPulse,
   }
 
   beforeEach(() => {
@@ -67,7 +70,7 @@ describe('ProjectTypeDashboardCard', () => {
 
   const expectValidTypeRendersWithoutError = (type: ProjectHealthType) => {
     expect(() => {
-      render(<ProjectTypeDashboardCard type={type} count={10} icon={faHeartPulse} />)
+      render(<ProjectTypeDashboardCard type={type} count={10} icon={FaHeartPulse} />)
     }).not.toThrow()
   }
 
@@ -102,21 +105,21 @@ describe('ProjectTypeDashboardCard', () => {
 
   describe('Conditional Rendering Logic', () => {
     it('renders correct title for healthy type', () => {
-      render(<ProjectTypeDashboardCard type="healthy" count={10} icon={faHeartPulse} />)
+      render(<ProjectTypeDashboardCard type="healthy" count={10} icon={FaHeartPulse} />)
 
       expect(screen.getByTestId('card-title')).toHaveTextContent('Healthy')
     })
 
     it('renders correct title for needsAttention type', () => {
       render(
-        <ProjectTypeDashboardCard type="needsAttention" count={5} icon={faExclamationTriangle} />
+        <ProjectTypeDashboardCard type="needsAttention" count={5} icon={FaExclamationTriangle} />
       )
 
       expect(screen.getByTestId('card-title')).toHaveTextContent('Need Attention')
     })
 
     it('renders correct title for unhealthy type', () => {
-      render(<ProjectTypeDashboardCard type="unhealthy" count={2} icon={faSkull} />)
+      render(<ProjectTypeDashboardCard type="unhealthy" count={2} icon={FaSkull} />)
 
       expect(screen.getByTestId('card-title')).toHaveTextContent('Unhealthy')
     })
@@ -135,13 +138,13 @@ describe('ProjectTypeDashboardCard', () => {
     })
 
     it('passes different icons to SecondaryCard correctly', () => {
-      const { rerender } = render(<ProjectTypeDashboardCard {...baseProps} icon={faHeartPulse} />)
+      const { rerender } = render(<ProjectTypeDashboardCard {...baseProps} icon={FaHeartPulse} />)
       let secondaryCard = screen.getByTestId('secondary-card')
-      expect(secondaryCard).toHaveAttribute('data-icon', JSON.stringify(faHeartPulse))
+      expect(secondaryCard).toHaveAttribute('data-icon', 'FaHeartPulse')
 
-      rerender(<ProjectTypeDashboardCard {...baseProps} icon={faExclamationTriangle} />)
+      rerender(<ProjectTypeDashboardCard {...baseProps} icon={FaExclamationTriangle} />)
       secondaryCard = screen.getByTestId('secondary-card')
-      expect(secondaryCard).toHaveAttribute('data-icon', JSON.stringify(faExclamationTriangle))
+      expect(secondaryCard).toHaveAttribute('data-icon', 'FaExclamationTriangle')
     })
 
     it('generates correct href for each type', () => {
@@ -217,7 +220,7 @@ describe('ProjectTypeDashboardCard', () => {
 
       for (const type of types) {
         const { unmount } = render(
-          <ProjectTypeDashboardCard type={type} count={10} icon={faHeartPulse} />
+          <ProjectTypeDashboardCard type={type} count={10} icon={FaHeartPulse} />
         )
         expect(screen.getByTestId('secondary-card')).toBeInTheDocument()
         unmount()
@@ -264,7 +267,7 @@ describe('ProjectTypeDashboardCard', () => {
     })
 
     it('applies conditional CSS classes based on type prop - healthy', () => {
-      render(<ProjectTypeDashboardCard type="healthy" count={10} icon={faHeartPulse} />)
+      render(<ProjectTypeDashboardCard type="healthy" count={10} icon={FaHeartPulse} />)
 
       const secondaryCard = screen.getByTestId('secondary-card')
       const className = secondaryCard.getAttribute('class')
@@ -282,7 +285,7 @@ describe('ProjectTypeDashboardCard', () => {
     })
 
     it('applies conditional CSS classes based on type prop - unhealthy', () => {
-      render(<ProjectTypeDashboardCard type="unhealthy" count={5} icon={faSkull} />)
+      render(<ProjectTypeDashboardCard type="unhealthy" count={5} icon={FaSkull} />)
 
       const secondaryCard = screen.getByTestId('secondary-card')
       const className = secondaryCard.getAttribute('class')
@@ -301,7 +304,7 @@ describe('ProjectTypeDashboardCard', () => {
 
     it('applies conditional CSS classes based on type prop - needsAttention', () => {
       render(
-        <ProjectTypeDashboardCard type="needsAttention" count={3} icon={faExclamationTriangle} />
+        <ProjectTypeDashboardCard type="needsAttention" count={3} icon={FaExclamationTriangle} />
       )
 
       const secondaryCard = screen.getByTestId('secondary-card')
@@ -333,7 +336,7 @@ describe('ProjectTypeDashboardCard', () => {
 
       const secondaryCard = screen.getByTestId('secondary-card')
       expect(secondaryCard).toHaveAttribute('data-title', 'Healthy')
-      expect(secondaryCard).toHaveAttribute('data-icon', JSON.stringify(faHeartPulse))
+      expect(secondaryCard).toHaveAttribute('data-icon', 'FaHeartPulse')
     })
 
     it('renders SecondaryCard with correct content structure', () => {
@@ -370,7 +373,7 @@ describe('ProjectTypeDashboardCard', () => {
     })
 
     it('handles different icon types correctly', () => {
-      const icons = [faHeartPulse, faExclamationTriangle, faSkull]
+      const icons = [FaHeartPulse, FaExclamationTriangle, FaSkull]
 
       for (const icon of icons) {
         const { unmount } = render(
@@ -399,7 +402,7 @@ describe('ProjectTypeDashboardCard', () => {
       const types: Array<ProjectHealthType> = ['healthy', 'needsAttention', 'unhealthy']
 
       for (const [index, type] of types.entries()) {
-        rerender(<ProjectTypeDashboardCard type={type} count={index} icon={faHeartPulse} />)
+        rerender(<ProjectTypeDashboardCard type={type} count={index} icon={FaHeartPulse} />)
         expect(screen.getByTestId('secondary-card')).toBeInTheDocument()
       }
     })
diff --git a/frontend/__tests__/unit/components/ProjectsDashboardDropDown.test.tsx b/frontend/__tests__/unit/components/ProjectsDashboardDropDown.test.tsx
index 40a66d20d0..e4fe0573d6 100644
--- a/frontend/__tests__/unit/components/ProjectsDashboardDropDown.test.tsx
+++ b/frontend/__tests__/unit/components/ProjectsDashboardDropDown.test.tsx
@@ -1,17 +1,32 @@
-import { faFilter, faSort } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, fireEvent } from '@testing-library/react'
 import React from 'react'
+import { FaFilter, FaSort } from 'react-icons/fa6'
 import ProjectsDashboardDropDown from 'components/ProjectsDashboardDropDown'
 
-// Mock FontAwesome components
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
-    ...props
-  }: {
-    icon?: { iconName?: string }
-    [key: string]: unknown
-  }) => <span data-testid="font-awesome-icon" data-icon={icon?.iconName || 'default'} {...props} />,
+jest.mock('react-icons/fa6', () => ({
+  FaArrowDownWideShort: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="font-awesome-icon" data-icon="arrow-down-wide-short" {...props} />
+  ),
+  FaArrowUpShortWide: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="font-awesome-icon" data-icon="arrow-up-short-wide" {...props} />
+  ),
+  FaFilter: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="font-awesome-icon" data-icon="filter" {...props} />
+  ),
+  FaSort: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="font-awesome-icon" data-icon="sort" {...props} />
+  ),
+}))
+
+// Mock IconWrapper to handle react-icons properly
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({ icon: IconComponent }: { icon?: React.ComponentType }) => {
+    return IconComponent ? (
+      <IconComponent />
+    ) : (
+      <svg data-testid="font-awesome-icon" data-icon="arrow-down-wide-short" />
+    )
+  },
 }))
 
 // Mock HeroUI components
@@ -73,7 +88,6 @@ jest.mock('@heroui/react', () => ({
     </div>
   ),
   DropdownItem: (props: { children: React.ReactNode }) => {
-    // Since key is not accessible in props, we'll use the children text as identifier
     const itemText = typeof props.children === 'string' ? props.children : 'item'
 
     return (
@@ -115,7 +129,7 @@ describe('ProjectsDashboardDropDown Component', () => {
     buttonDisplayName: 'Filter',
     onAction: jest.fn(),
     selectedKeys: ['Active'],
-    selectedLabels: ['Selected Item'], // Changed from 'Active' to avoid conflicts
+    selectedLabels: ['Selected Item'],
     selectionMode: 'single' as 'single' | 'multiple',
     sections: [
       {
@@ -133,7 +147,7 @@ describe('ProjectsDashboardDropDown Component', () => {
         ],
       },
     ],
-    icon: faFilter,
+    icon: FaFilter,
     isOrdering: false,
   }
 
@@ -143,7 +157,6 @@ describe('ProjectsDashboardDropDown Component', () => {
     mockOnAction = jest.fn()
     jest.clearAllMocks()
 
-    // Suppress React warnings that are not relevant to our tests
     jest.spyOn(console, 'error').mockImplementation((...args) => {
       const message = typeof args[0] === 'string' ? args[0] : String(args[0] || '')
       if (
@@ -153,7 +166,6 @@ describe('ProjectsDashboardDropDown Component', () => {
       ) {
         return
       }
-      // For test environment, we can ignore other console errors
       return
     })
   })
@@ -175,7 +187,7 @@ describe('ProjectsDashboardDropDown Component', () => {
 
     it('renders with icon when provided', () => {
       render(
-        <ProjectsDashboardDropDown {...defaultProps} onAction={mockOnAction} icon={faFilter} />
+        <ProjectsDashboardDropDown {...defaultProps} onAction={mockOnAction} icon={FaFilter} />
       )
 
       expect(screen.getByTestId('font-awesome-icon')).toBeInTheDocument()
@@ -187,7 +199,7 @@ describe('ProjectsDashboardDropDown Component', () => {
       )
 
       const icon = screen.getByTestId('font-awesome-icon')
-      expect(icon).toHaveAttribute('data-icon', 'default')
+      expect(icon).toHaveAttribute('data-icon', 'arrow-down-wide-short') // Default fallback
     })
   })
 
@@ -212,7 +224,7 @@ describe('ProjectsDashboardDropDown Component', () => {
           {...defaultProps}
           onAction={mockOnAction}
           isOrdering={false}
-          icon={faSort}
+          icon={FaSort}
         />
       )
 
@@ -241,7 +253,6 @@ describe('ProjectsDashboardDropDown Component', () => {
         />
       )
 
-      // Check that selected labels are not rendered when undefined
       expect(screen.queryByText('Selected Item')).not.toBeInTheDocument()
     })
   })
@@ -289,17 +300,12 @@ describe('ProjectsDashboardDropDown Component', () => {
   describe('Event handling', () => {
     it('calls onAction when dropdown item is clicked', () => {
       render(
-        <ProjectsDashboardDropDown
-          {...defaultProps}
-          onAction={mockOnAction}
-          selectedLabels={[]} // Remove selected labels to avoid duplicate text
-        />
+        <ProjectsDashboardDropDown {...defaultProps} onAction={mockOnAction} selectedLabels={[]} />
       )
 
       const items = screen.getAllByTestId('dropdown-item')
       const activeItem = items.find((item) => item.textContent === 'Active')
 
-      // Use non-conditional expect
       expect(activeItem).toBeDefined()
 
       fireEvent.click(activeItem!)
@@ -322,11 +328,7 @@ describe('ProjectsDashboardDropDown Component', () => {
 
     it('handles multiple clicks correctly', () => {
       render(
-        <ProjectsDashboardDropDown
-          {...defaultProps}
-          onAction={mockOnAction}
-          selectedLabels={[]} // Remove selected labels to avoid duplicate text
-        />
+        <ProjectsDashboardDropDown {...defaultProps} onAction={mockOnAction} selectedLabels={[]} />
       )
 
       const items = screen.getAllByTestId('dropdown-item')
@@ -337,7 +339,6 @@ describe('ProjectsDashboardDropDown Component', () => {
       expect(inactiveItem).toBeDefined()
 
       fireEvent.click(activeItem!)
-
       fireEvent.click(inactiveItem!)
 
       expect(mockOnAction).toHaveBeenCalledTimes(2)
@@ -411,7 +412,6 @@ describe('ProjectsDashboardDropDown Component', () => {
         />
       )
 
-      // Should not render selected labels when array is empty
       const labelsContainer = screen.queryByText(/,/)
       expect(labelsContainer).not.toBeInTheDocument()
     })
@@ -427,17 +427,12 @@ describe('ProjectsDashboardDropDown Component', () => {
 
     it('renders all dropdown items correctly', () => {
       render(
-        <ProjectsDashboardDropDown
-          {...defaultProps}
-          onAction={mockOnAction}
-          selectedLabels={[]} // Remove to avoid duplicate text
-        />
+        <ProjectsDashboardDropDown {...defaultProps} onAction={mockOnAction} selectedLabels={[]} />
       )
 
       const items = screen.getAllByTestId('dropdown-item')
       expect(items).toHaveLength(4)
 
-      // Check by getting text content from dropdown items specifically
       const itemTexts = items.map((item) => item.textContent)
       expect(itemTexts).toContain('Active')
       expect(itemTexts).toContain('Inactive')
@@ -528,7 +523,6 @@ describe('ProjectsDashboardDropDown Component', () => {
         />
       )
 
-      // Check that both main text and subtitle are present for screen readers
       expect(screen.getByText('Filter')).toBeInTheDocument()
       expect(screen.getByText('Selected')).toBeInTheDocument()
     })
@@ -572,7 +566,6 @@ describe('ProjectsDashboardDropDown Component', () => {
       const items = screen.getAllByTestId('dropdown-item')
       expect(items).toHaveLength(4)
 
-      // Check content without ambiguity
       const itemTexts = items.map((item) => item.textContent)
       expect(itemTexts).toContain('Active')
       expect(itemTexts).toContain('Inactive')
@@ -611,7 +604,6 @@ describe('ProjectsDashboardDropDown Component', () => {
         />
       )
 
-      // Check that the flex column structure exists
       const flexContainer = screen.getByText('Filter').parentElement
       expect(flexContainer).toHaveClass('flex', 'flex-col', 'items-center')
     })
diff --git a/frontend/__tests__/unit/components/Search.test.tsx b/frontend/__tests__/unit/components/Search.test.tsx
index fbea38db77..e7363b9127 100644
--- a/frontend/__tests__/unit/components/Search.test.tsx
+++ b/frontend/__tests__/unit/components/Search.test.tsx
@@ -374,16 +374,16 @@ describe('SearchBar Component', () => {
 
     it('has the correct class names for search icon', () => {
       render(<SearchBar {...defaultProps} isLoaded={false} />)
-      const searchIcon = screen.getByRole('img', { hidden: true })
-      expect(searchIcon).toHaveClass(
-        'pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400'
-      )
+      const searchIcon = screen.getByTestId('search-icon')
+      expect(searchIcon).toBeInTheDocument()
     })
 
     it('maintains proper DOM structure with all elements', () => {
       render(<SearchBar {...defaultProps} isLoaded={false} />)
       const input = screen.getByPlaceholderText('Search projects...')
-      const searchIcon = screen.getByRole('img', { hidden: true })
+      const searchIcon = document.querySelector(
+        String.raw`svg.pointer-events-none.absolute.left-3.top-1\/2.h-4.w-4.-translate-y-1\/2.text-gray-400`
+      )
 
       expect(input).toBeInTheDocument()
       expect(searchIcon).toBeInTheDocument()
diff --git a/frontend/__tests__/unit/components/SecondaryCard.test.tsx b/frontend/__tests__/unit/components/SecondaryCard.test.tsx
index 25a39876b0..20d9942e3e 100644
--- a/frontend/__tests__/unit/components/SecondaryCard.test.tsx
+++ b/frontend/__tests__/unit/components/SecondaryCard.test.tsx
@@ -1,11 +1,11 @@
-import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { render, screen } from '@testing-library/react'
+import { FaUser } from 'react-icons/fa6'
 import SecondaryCard from 'components/SecondaryCard'
 
 describe('SecondaryCard Component', () => {
   const defaultProps = {
     title: 'Test Title',
-    icon: faUser,
+    icon: FaUser,
     children: <p>Test children</p>,
     className: 'custom-class',
   }
@@ -51,7 +51,7 @@ describe('SecondaryCard Component', () => {
     it('renders a title and an icon when both are provided', () => {
       render(<SecondaryCard title={defaultProps.title} icon={defaultProps.icon} />)
       expect(screen.getByText(defaultProps.title)).toBeInTheDocument()
-      expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument()
+      expect(document.querySelector('svg.h-5.w-5')).toBeInTheDocument()
     })
 
     it('renders children content correctly', () => {
@@ -135,7 +135,7 @@ describe('SecondaryCard Component', () => {
 
     it('has the correct className for the icon', () => {
       render(<SecondaryCard title={defaultProps.title} icon={defaultProps.icon} />)
-      const iconElement = screen.getByRole('img', { hidden: true })
+      const iconElement = document.querySelector('svg.h-5.w-5')
       expect(iconElement).toHaveClass('h-5', 'w-5')
     })
   })
diff --git a/frontend/__tests__/unit/components/SingleModuleCard.test.tsx b/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
index 92fdd0e6f7..454273d9c7 100644
--- a/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
+++ b/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
@@ -1,4 +1,3 @@
-import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { screen } from '@testing-library/react'
 import { usePathname, useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
@@ -48,9 +47,9 @@ jest.mock('next/link', () => ({
   ),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: { icon: unknown; className?: string }) => (
-    <span data-testid={`icon-${icon === faUsers ? 'users' : 'ellipsis'}`} className={className} />
+jest.mock('react-icons/hi', () => ({
+  HiUserGroup: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-users" {...props} />
   ),
 }))
 
diff --git a/frontend/__tests__/unit/components/SortBy.test.tsx b/frontend/__tests__/unit/components/SortBy.test.tsx
index 3aa5d8db56..fe12b25e66 100644
--- a/frontend/__tests__/unit/components/SortBy.test.tsx
+++ b/frontend/__tests__/unit/components/SortBy.test.tsx
@@ -56,8 +56,8 @@ describe('<SortBy />', () => {
       render(<SortBy {...defaultProps} selectedOrder="asc" />)
     })
     // Look for the icon that indicates ascending order
-    const sortIcon = screen.getByRole('img', { hidden: true })
-    expect(sortIcon.classList.contains('fa-arrow-up-wide-short')).toBe(true)
+    const sortIcon = screen.getByLabelText(/Sort in ascending order/i).querySelector('svg')
+    expect(sortIcon).toBeInTheDocument()
   })
 
   it('renders descending icon and tooltip when order is "desc"', async () => {
@@ -65,8 +65,8 @@ describe('<SortBy />', () => {
       render(<SortBy {...defaultProps} selectedOrder="desc" />)
     })
     // Look for the icon that indicates descending order
-    const sortIcon = screen.getByRole('img', { hidden: true })
-    expect(sortIcon.classList.contains('fa-arrow-down-wide-short')).toBe(true)
+    const sortIcon = screen.getByLabelText(/Sort in descending order/i).querySelector('svg')
+    expect(sortIcon).toBeInTheDocument()
   })
 
   it('toggles order when the button is clicked', async () => {
diff --git a/frontend/__tests__/unit/components/StatusBadge.test.tsx b/frontend/__tests__/unit/components/StatusBadge.test.tsx
index 6be83e3692..d98c6720b7 100644
--- a/frontend/__tests__/unit/components/StatusBadge.test.tsx
+++ b/frontend/__tests__/unit/components/StatusBadge.test.tsx
@@ -1,9 +1,13 @@
 import { render, screen } from '@testing-library/react'
+import React from 'react'
 import StatusBadge from 'components/StatusBadge'
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ className }: { className: string }) => (
-    <svg className={className} aria-hidden="true" />
+jest.mock('react-icons/fa', () => ({
+  FaArchive: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg className={props.className} aria-hidden="true" />
+  ),
+  FaBan: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg className={props.className} aria-hidden="true" />
   ),
 }))
 
diff --git a/frontend/__tests__/unit/components/ToggleableList.test.tsx b/frontend/__tests__/unit/components/ToggleableList.test.tsx
index 93fb027baf..e6be542cad 100644
--- a/frontend/__tests__/unit/components/ToggleableList.test.tsx
+++ b/frontend/__tests__/unit/components/ToggleableList.test.tsx
@@ -1,12 +1,8 @@
-import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { render, screen, fireEvent } from '@testing-library/react'
+import React from 'react'
+import { FaUser } from 'react-icons/fa'
 import ToggleableList from 'components/ToggleableList'
 
-interface MockFontAwesomeIconProps {
-  icon: unknown
-  className?: string
-}
-
 const mockPush = jest.fn()
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
@@ -23,11 +19,13 @@ jest.mock('components/ShowMoreButton', () => ({
   ),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon, className }: MockFontAwesomeIconProps) => (
-    <span data-testid="font-awesome-icon" className={className}>
-      {String(icon)}
-    </span>
+jest.mock('wrappers/IconWrapper', () => ({
+  IconWrapper: ({
+    icon: Icon,
+    className,
+    ...props
+  }: { icon: React.ComponentType<{ className?: string }> } & React.SVGProps<SVGSVGElement>) => (
+    <Icon className={className} data-testid="react-icon" {...props} />
   ),
 }))
 
@@ -53,9 +51,9 @@ describe('ToggleableList', () => {
   })
 
   it('renders with an icon', () => {
-    render(<ToggleableList items={mockItems} label="test-label" icon={faUser} />)
+    render(<ToggleableList items={mockItems} label="test-label" icon={FaUser} />)
 
-    const iconElement = screen.getByTestId('font-awesome-icon')
+    const iconElement = screen.getByTestId('react-icon')
     expect(iconElement).toBeInTheDocument()
     expect(iconElement).toHaveClass('mr-2', 'h-5', 'w-5')
   })
diff --git a/frontend/__tests__/unit/components/TopContributorsList.test.tsx b/frontend/__tests__/unit/components/TopContributorsList.test.tsx
index 778e018f83..ebc90764c7 100644
--- a/frontend/__tests__/unit/components/TopContributorsList.test.tsx
+++ b/frontend/__tests__/unit/components/TopContributorsList.test.tsx
@@ -1,6 +1,6 @@
-import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { fireEvent, screen } from '@testing-library/react'
 import React from 'react'
+import { FaUsers } from 'react-icons/fa6'
 import { render } from 'wrappers/testUtil'
 import type { Contributor } from 'types/contributor'
 import TopContributorsList from 'components/TopContributorsList'
@@ -49,23 +49,6 @@ jest.mock('next/image', () => ({
   ),
 }))
 
-// Mock FontAwesome icons
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
-    className,
-    ...props
-  }: {
-    icon: { iconName: string }
-    className?: string
-    [key: string]: unknown
-  }) => (
-    <span data-testid={`icon-${icon.iconName}`} className={className} {...props}>
-      {icon.iconName}
-    </span>
-  ),
-}))
-
 // Mock utility functions
 jest.mock('utils/urlFormatter', () => ({
   getMemberUrl: (login: string) => `/members/${login}`,
@@ -94,22 +77,22 @@ jest.mock('components/SecondaryCard', () => ({
   default: ({
     children,
     title,
-    icon,
+    icon: Icon,
     className,
     ...props
   }: {
     children: React.ReactNode
     title?: React.ReactNode
-    icon?: { iconName: string }
+    icon?: React.ComponentType
     className?: string
     [key: string]: unknown
   }) => (
     <div className={className} data-testid="secondary-card" {...props}>
       {title && (
         <h2 className="mb-4 flex flex-row items-center gap-2 text-2xl font-semibold">
-          {icon && (
+          {Icon && (
             <span data-testid="card-icon" className="h-5 w-5">
-              {icon.iconName}
+              <Icon />
             </span>
           )}
           {title}
@@ -120,6 +103,57 @@ jest.mock('components/SecondaryCard', () => ({
   ),
 }))
 
+jest.mock('components/ShowMoreButton', () => ({
+  __esModule: true,
+  default: function ShowMoreButtonMock({ onToggle }: { onToggle: () => void }) {
+    const [isExpanded, setIsExpanded] = React.useState(false)
+
+    const handleClick = () => {
+      setIsExpanded(!isExpanded)
+      onToggle()
+    }
+
+    return (
+      <div className="mt-4 flex justify-start">
+        <button
+          onClick={handleClick}
+          className="flex items-center bg-transparent px-0 text-blue-400"
+        >
+          {isExpanded ? (
+            <>
+              Show less{' '}
+              <span data-testid="icon-chevron-up" aria-hidden="true">
+                chevron-up
+              </span>
+            </>
+          ) : (
+            <>
+              Show more{' '}
+              <span data-testid="icon-chevron-down" aria-hidden="true">
+                chevron-down
+              </span>
+            </>
+          )}
+        </button>
+      </div>
+    )
+  },
+}))
+
+jest.mock('react-icons/fa6', () => ({
+  FaChevronUp: (props: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span data-testid="icon-chevron-up" {...props}>
+      chevron-up
+    </span>
+  ),
+  FaChevronDown: (props: React.HTMLAttributes<HTMLSpanElement>) => (
+    <span data-testid="icon-chevron-down" {...props}>
+      chevron-down
+    </span>
+  ),
+  FaUsers: (props: React.HTMLAttributes<HTMLSpanElement>) => <span {...props}>users</span>,
+}))
+
 const mockContributors: Contributor[] = [
   {
     avatarUrl: 'https://github.com/developer1.avatar',
@@ -272,14 +306,12 @@ describe('TopContributorsList Component', () => {
     })
 
     it('displays icon when provided', () => {
-      render(<TopContributorsList {...defaultProps} icon={faUsers} />)
-
+      render(<TopContributorsList {...defaultProps} icon={FaUsers} />)
       expect(screen.getByTestId('card-icon')).toBeInTheDocument()
     })
 
     it('does not display icon when not provided', () => {
       render(<TopContributorsList {...defaultProps} />)
-
       expect(screen.queryByTestId('card-icon')).not.toBeInTheDocument()
     })
   })
diff --git a/frontend/__tests__/unit/components/UserCard.test.tsx b/frontend/__tests__/unit/components/UserCard.test.tsx
index bb774648eb..dca1fa0266 100644
--- a/frontend/__tests__/unit/components/UserCard.test.tsx
+++ b/frontend/__tests__/unit/components/UserCard.test.tsx
@@ -53,23 +53,20 @@ jest.mock('@heroui/button', () => {
   }
 })
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
-    className,
-    ...props
-  }: {
-    icon: { iconName: string }
-    className?: string
-    [key: string]: unknown
-  }) => <span data-testid={`icon-${icon.iconName}`} className={className} {...props} />,
+jest.mock('react-icons/fa6', () => ({
+  FaChevronRight: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-chevron-right" {...props} />
+  ),
+  FaFolderOpen: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-folder-open" {...props} />
+  ),
+  FaMedal: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-medal" {...props} />,
+  FaUser: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-user" {...props} />,
 }))
 
-jest.mock('@heroui/tooltip', () => ({
-  Tooltip: ({ children, content }: { children: React.ReactNode; content: string }) => (
-    <div data-testid="tooltip" data-tooltip-content={content}>
-      {children}
-    </div>
+jest.mock('react-icons/hi', () => ({
+  HiUserGroup: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-users" {...props} />
   ),
 }))
 
diff --git a/frontend/__tests__/unit/components/UserMenu.test.tsx b/frontend/__tests__/unit/components/UserMenu.test.tsx
index 7637ca8be4..9e1cf77a19 100644
--- a/frontend/__tests__/unit/components/UserMenu.test.tsx
+++ b/frontend/__tests__/unit/components/UserMenu.test.tsx
@@ -2,6 +2,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { useDjangoSession } from 'hooks/useDjangoSession'
 import { useLogout } from 'hooks/useLogout'
 import { signIn } from 'next-auth/react'
+import React from 'react'
 import { ExtendedSession } from 'types/auth'
 import UserMenu from 'components/UserMenu'
 
@@ -41,11 +42,9 @@ jest.mock('next/image', () => ({
   ),
 }))
 
-// Mock FontAwesome icons
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({ icon }: { icon: unknown }) => (
-    <span data-testid="github-icon" data-icon={String(icon)} />
-  ),
+// Add this react-icons mock for FaGithub:
+jest.mock('react-icons/fa', () => ({
+  FaGithub: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="github-icon" {...props} />,
 }))
 
 describe('UserMenu Component', () => {
diff --git a/frontend/__tests__/unit/pages/About.test.tsx b/frontend/__tests__/unit/pages/About.test.tsx
index 1beed73c73..ab809f5b46 100644
--- a/frontend/__tests__/unit/pages/About.test.tsx
+++ b/frontend/__tests__/unit/pages/About.test.tsx
@@ -3,7 +3,7 @@ import { addToast } from '@heroui/toast'
 import { fireEvent, screen, waitFor, within } from '@testing-library/react'
 import { mockAboutData } from '@unit/data/mockAboutData'
 import { useRouter } from 'next/navigation'
-import { act } from 'react'
+import React, { act } from 'react'
 import { render } from 'wrappers/testUtil'
 import About from 'app/about/page'
 import {
@@ -20,13 +20,32 @@ jest.mock('@apollo/client/react', () => ({
 const mockRouter = {
   push: jest.fn(),
 }
+
 jest.mock('next/navigation', () => ({
   ...jest.requireActual('next/navigation'),
   useRouter: jest.fn(() => mockRouter),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
+jest.mock('react-icons/fa', () => ({
+  FaMapSigns: () => <span data-testid="mock-icon" />,
+  FaTools: () => <span data-testid="mock-icon" />,
+}))
+
+jest.mock('react-icons/fa6', () => ({
+  FaCircleCheck: () => <span data-testid="mock-icon" />,
+  FaClock: () => <span data-testid="mock-icon" />,
+  FaScroll: () => <span data-testid="mock-icon" />,
+  FaBullseye: () => <span data-testid="mock-icon" />,
+  FaUser: () => <span data-testid="mock-icon" />,
+  FaUsersGear: () => <span data-testid="mock-icon" />,
+  FaLink: () => <span data-testid="mock-icon" />,
+  FaChevronRight: () => <span data-testid="mock-icon" />,
+  FaFolderOpen: () => <span data-testid="mock-icon" />,
+  FaMedal: () => <span data-testid="mock-icon" />,
+}))
+
+jest.mock('react-icons/hi', () => ({
+  HiUserGroup: () => <span data-testid="mock-icon" />,
 }))
 
 jest.mock('@heroui/toast', () => ({
@@ -105,6 +124,78 @@ jest.mock('components/MarkdownWrapper', () => ({
   default: ({ content }) => <div data-testid="markdown-content">{content}</div>,
 }))
 
+jest.mock('components/AnchorTitle', () => ({
+  __esModule: true,
+  default: ({ title }: { title: string }) => <span data-testid="anchor-title">{title}</span>,
+}))
+
+jest.mock('components/UserCard', () => ({
+  __esModule: true,
+  default: ({
+    name,
+    credentials,
+    description,
+    button,
+  }: {
+    name?: string
+    credentials?: string
+    description?: string
+    button?: { label?: string; onclick?: () => void }
+  }) => (
+    <div data-testid="user-card">
+      {name && <span>{name}</span>}
+      {credentials && <span>{credentials}</span>}
+      {description && <span>{description}</span>}
+      {button?.label && (
+        <button
+          onClick={() => {
+            button.onclick?.()
+          }}
+        >
+          {button.label}
+        </button>
+      )}
+    </div>
+  ),
+}))
+
+jest.mock('components/ShowMoreButton', () => ({
+  __esModule: true,
+  default: function ShowMoreButtonMock({ onToggle }: { onToggle: () => void }) {
+    const [isExpanded, setIsExpanded] = React.useState(false)
+
+    const handleClick = () => {
+      setIsExpanded(!isExpanded)
+      onToggle()
+    }
+
+    return (
+      <div className="mt-4 flex justify-start">
+        <button
+          onClick={handleClick}
+          className="flex items-center bg-transparent px-0 text-blue-400"
+        >
+          {isExpanded ? (
+            <>
+              Show less{' '}
+              <span data-testid="icon-chevron-up" aria-hidden="true">
+                chevron-up
+              </span>
+            </>
+          ) : (
+            <>
+              Show more{' '}
+              <span data-testid="icon-chevron-down" aria-hidden="true">
+                chevron-down
+              </span>
+            </>
+          )}
+        </button>
+      </div>
+    )
+  },
+}))
+
 const mockUserData = (username) => ({
   data: { user: mockAboutData.users[username] },
   loading: false,
diff --git a/frontend/__tests__/unit/pages/ApiKeysPage.test.tsx b/frontend/__tests__/unit/pages/ApiKeysPage.test.tsx
index fc150607e5..c214b06b46 100644
--- a/frontend/__tests__/unit/pages/ApiKeysPage.test.tsx
+++ b/frontend/__tests__/unit/pages/ApiKeysPage.test.tsx
@@ -34,10 +34,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: jest.fn() }),
 }))
diff --git a/frontend/__tests__/unit/pages/ChapterDetails.test.tsx b/frontend/__tests__/unit/pages/ChapterDetails.test.tsx
index 8c43fcd5d6..6c34a7c4e3 100644
--- a/frontend/__tests__/unit/pages/ChapterDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ChapterDetails.test.tsx
@@ -9,10 +9,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: () => ({
diff --git a/frontend/__tests__/unit/pages/CommitteeDetails.test.tsx b/frontend/__tests__/unit/pages/CommitteeDetails.test.tsx
index c175293a25..a24ad0447c 100644
--- a/frontend/__tests__/unit/pages/CommitteeDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/CommitteeDetails.test.tsx
@@ -10,10 +10,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 const mockRouter = {
   push: jest.fn(),
 }
diff --git a/frontend/__tests__/unit/pages/Header.test.tsx b/frontend/__tests__/unit/pages/Header.test.tsx
index fb794dcd1c..092454557c 100644
--- a/frontend/__tests__/unit/pages/Header.test.tsx
+++ b/frontend/__tests__/unit/pages/Header.test.tsx
@@ -32,19 +32,17 @@ jest.mock('next/link', () => {
   }
 })
 
-// Mock FontAwesome components with proper icon mapping
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  FontAwesomeIcon: ({ icon, className }: any) => {
-    // Map icon names to test IDs based on the actual icons used
-    const iconMap: { [key: string]: string } = {
-      bars: 'icon-bars',
-      xmark: 'icon-xmark',
-      times: 'icon-times',
-    }
-    const testId = iconMap[icon.iconName] || `icon-${icon.iconName}`
-    return <span className={className} data-testid={testId} />
-  },
+jest.mock('react-icons/fa', () => ({
+  FaBars: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-bars" {...props} />,
+  FaTimes: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-xmark" {...props} />,
+  FaRegHeart: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-heart" {...props} />,
+  FaRegStar: (props: React.SVGProps<SVGSVGElement>) => <svg data-testid="icon-star" {...props} />,
+  FaHeart: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-solid-heart" {...props} />
+  ),
+  FaStar: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg data-testid="icon-solid-star" {...props} />
+  ),
 }))
 
 // Mock HeroUI Button
diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx
index 3338d8c314..3a9893245e 100644
--- a/frontend/__tests__/unit/pages/Home.test.tsx
+++ b/frontend/__tests__/unit/pages/Home.test.tsx
@@ -17,11 +17,6 @@ jest.mock('server/fetchAlgoliaData', () => ({
   fetchAlgoliaData: jest.fn(),
 }))
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => ({
-  __esModule: true,
-  default: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
diff --git a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
index 3881dd3d55..90e97c890b 100644
--- a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
@@ -20,10 +20,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('next/navigation', () => ({
   ...jest.requireActual('next/navigation'),
   useRouter: jest.fn(() => mockRouter),
diff --git a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
index e27d14a161..000c4238bb 100644
--- a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
@@ -14,10 +14,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('react-apexcharts', () => {
   return {
     __esModule: true,
diff --git a/frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx b/frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx
index 63444cb2ce..0a7d7fd480 100644
--- a/frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectHealthDashboardMetricsDetails.test.tsx
@@ -27,10 +27,6 @@ jest.mock('hooks/useDjangoSession', () => ({
   }),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon"></span>,
-}))
-
 const mockError = {
   error: new Error('GraphQL error'),
 }
diff --git a/frontend/__tests__/unit/pages/Projects.test.tsx b/frontend/__tests__/unit/pages/Projects.test.tsx
index 8f1f8597e2..245c249fa9 100644
--- a/frontend/__tests__/unit/pages/Projects.test.tsx
+++ b/frontend/__tests__/unit/pages/Projects.test.tsx
@@ -27,10 +27,6 @@ jest.mock('components/Pagination', () =>
     </div>
   ))
 )
-jest.mock('wrappers/FontAwesomeIconWrapper', () => ({
-  __esModule: true,
-  default: () => <span data-testid="mock-icon" />,
-}))
 
 jest.mock('@/components/MarkdownWrapper', () => {
   return ({ content, className }: { content: string; className?: string }) => (
diff --git a/frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx b/frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx
index ba32623bf5..b4ec1e4a95 100644
--- a/frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectsHealthDashboardMetrics.test.tsx
@@ -12,10 +12,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 const createDropDownMockItem = (item, onAction) => (
   <button key={item.key} onClick={() => onAction(item.key)}>
     {item.label}
diff --git a/frontend/__tests__/unit/pages/ProjectsHealthDashboardOverview.test.tsx b/frontend/__tests__/unit/pages/ProjectsHealthDashboardOverview.test.tsx
index c0431ab7c3..1fde2f27f9 100644
--- a/frontend/__tests__/unit/pages/ProjectsHealthDashboardOverview.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectsHealthDashboardOverview.test.tsx
@@ -13,10 +13,6 @@ jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('hooks/useDjangoSession', () => ({
   useDjangoSession: () => ({
     isSyncing: false,
diff --git a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
index 60fe431b87..52deb285c1 100644
--- a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
@@ -10,10 +10,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: () => <span data-testid="mock-icon" />,
-}))
-
 jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index 3af7b6d26a..4dd5d476ac 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -13,22 +13,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-// Mock FontAwesome
-jest.mock('@fortawesome/react-fontawesome', () => ({
-  FontAwesomeIcon: ({
-    icon,
-    className,
-    ...props
-  }: {
-    icon: string[] | { iconName: string }
-    className?: string
-    [key: string]: unknown
-  }) => {
-    const iconName = Array.isArray(icon) ? icon[1] : icon.iconName
-    return <span data-testid={`icon-${iconName}`} className={className} {...props} />
-  },
-}))
-
 // Mock Badges component
 jest.mock('components/Badges', () => {
   const MockBadges = ({
@@ -655,7 +639,7 @@ describe('UserDetailsPage', () => {
       render(<UserDetailsPage />)
       await waitFor(() => {
         const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'fa-medal')
+        expect(badge).toHaveAttribute('data-css-class', 'medal')
       })
     })
 
@@ -685,7 +669,7 @@ describe('UserDetailsPage', () => {
       render(<UserDetailsPage />)
       await waitFor(() => {
         const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'fa-medal')
+        expect(badge).toHaveAttribute('data-css-class', 'medal')
       })
     })
 
@@ -775,7 +759,7 @@ describe('UserDetailsPage', () => {
             {
               id: '1',
               name: 'Contributor',
-              cssClass: 'fa-medal',
+              cssClass: 'medal',
               description: 'Active contributor',
               weight: 1,
             },
diff --git a/frontend/__tests__/unit/pages/Users.test.tsx b/frontend/__tests__/unit/pages/Users.test.tsx
index 025a6fae9b..c52f9eec97 100644
--- a/frontend/__tests__/unit/pages/Users.test.tsx
+++ b/frontend/__tests__/unit/pages/Users.test.tsx
@@ -28,11 +28,6 @@ jest.mock('components/Pagination', () =>
   ))
 )
 
-jest.mock('wrappers/FontAwesomeIconWrapper', () => ({
-  __esModule: true,
-  default: () => <span data-testid="mock-icon" />,
-}))
-
 describe('UsersPage Component', () => {
   let mockRouter: { push: jest.Mock }
 
diff --git a/frontend/__tests__/unit/utils/milestoneProgress.test.ts b/frontend/__tests__/unit/utils/milestoneProgress.test.ts
index e08e3b7935..e292f2df98 100644
--- a/frontend/__tests__/unit/utils/milestoneProgress.test.ts
+++ b/frontend/__tests__/unit/utils/milestoneProgress.test.ts
@@ -1,4 +1,4 @@
-import { faCircleCheck, faClock, faUserGear } from '@fortawesome/free-solid-svg-icons'
+import { FaCircleCheck, FaClock, FaUserGear } from 'react-icons/fa6'
 
 import { getMilestoneProgressIcon, getMilestoneProgressText } from 'utils/milestoneProgress'
 
@@ -18,16 +18,16 @@ describe('milestone progress helpers', () => {
   })
 
   describe('getMilestoneProgressIcon', () => {
-    test('returns faCircleCheck when progress is 100', () => {
-      expect(getMilestoneProgressIcon(100)).toBe(faCircleCheck)
+    test('returns FaCircleCheck when progress is 100', () => {
+      expect(getMilestoneProgressIcon(100)).toBe(FaCircleCheck)
     })
 
-    test('returns faUserGear when progress is between 1 and 99', () => {
-      expect(getMilestoneProgressIcon(50)).toBe(faUserGear)
+    test('returns FaUserGear when progress is between 1 and 99', () => {
+      expect(getMilestoneProgressIcon(50)).toBe(FaUserGear)
     })
 
-    test('returns faClock when progress is 0', () => {
-      expect(getMilestoneProgressIcon(0)).toBe(faClock)
+    test('returns FaClock when progress is 0', () => {
+      expect(getMilestoneProgressIcon(0)).toBe(FaClock)
     })
   })
 })
diff --git a/frontend/package.json b/frontend/package.json
index 7cee9f9a1b..a9687032bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,11 +18,6 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.10",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.1",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@heroui/button": "^2.2.28",
     "@heroui/modal": "^2.2.25",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index b6d6754fce..1959411048 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -11,21 +11,6 @@ importers:
       '@apollo/client':
         specifier: ^4.0.10
         version: 4.0.10(graphql-ws@6.0.6(graphql@16.12.0)(ws@8.18.3))(graphql@16.12.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(rxjs@7.8.2)
-      '@fortawesome/fontawesome-svg-core':
-        specifier: ^7.1.0
-        version: 7.1.0
-      '@fortawesome/free-brands-svg-icons':
-        specifier: ^7.1.0
-        version: 7.1.0
-      '@fortawesome/free-regular-svg-icons':
-        specifier: ^7.1.0
-        version: 7.1.0
-      '@fortawesome/free-solid-svg-icons':
-        specifier: ^7.1.0
-        version: 7.1.0
-      '@fortawesome/react-fontawesome':
-        specifier: ^3.1.1
-        version: 3.1.1(@fortawesome/fontawesome-svg-core@7.1.0)(react@19.2.3)
       '@graphql-typed-document-node/core':
         specifier: ^3.2.0
         version: 3.2.0(graphql@16.12.0)
@@ -634,33 +619,6 @@ packages:
   '@formatjs/intl-localematcher@0.6.2':
     resolution: {integrity: sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==}
 
-  '@fortawesome/fontawesome-common-types@7.1.0':
-    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/fontawesome-svg-core@7.1.0':
-    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-brands-svg-icons@7.1.0':
-    resolution: {integrity: sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-regular-svg-icons@7.1.0':
-    resolution: {integrity: sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/free-solid-svg-icons@7.1.0':
-    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
-    engines: {node: '>=6'}
-
-  '@fortawesome/react-fontawesome@3.1.1':
-    resolution: {integrity: sha512-EDllr9hpodc21odmUywHS1alXNiCd4E8sp5GJ5s7wYINz8vSmMiNWpALTiuYODb865YyQ/NlyiN4mbXp7HCNqg==}
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@fortawesome/fontawesome-svg-core': ~6 || ~7
-      react: ^18.0.0 || ^19.0.0
-
   '@graphql-codegen/add@6.0.0':
     resolution: {integrity: sha512-biFdaURX0KTwEJPQ1wkT6BRgNasqgQ5KbCI1a3zwtLtO7XTo7/vKITPylmiU27K5DSOWYnY/1jfSqUAEBuhZrQ==}
     engines: {node: '>=16'}
@@ -7960,29 +7918,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@fortawesome/fontawesome-common-types@7.1.0': {}
-
-  '@fortawesome/fontawesome-svg-core@7.1.0':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 7.1.0
-
-  '@fortawesome/free-brands-svg-icons@7.1.0':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 7.1.0
-
-  '@fortawesome/free-regular-svg-icons@7.1.0':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 7.1.0
-
-  '@fortawesome/free-solid-svg-icons@7.1.0':
-    dependencies:
-      '@fortawesome/fontawesome-common-types': 7.1.0
-
-  '@fortawesome/react-fontawesome@3.1.1(@fortawesome/fontawesome-svg-core@7.1.0)(react@19.2.3)':
-    dependencies:
-      '@fortawesome/fontawesome-svg-core': 7.1.0
-      react: 19.2.3
-
   '@graphql-codegen/add@6.0.0(graphql@16.12.0)':
     dependencies:
       '@graphql-codegen/plugin-helpers': 6.1.0(graphql@16.12.0)
@@ -12509,7 +12444,7 @@ snapshots:
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   camelcase@5.3.1: {}
 
@@ -12520,7 +12455,7 @@ snapshots:
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   chalk@2.4.2:
@@ -12719,7 +12654,7 @@ snapshots:
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
       upper-case: 2.0.2
 
   content-disposition@0.5.4:
@@ -12907,7 +12842,7 @@ snapshots:
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   dot-prop@5.3.0:
     dependencies:
@@ -13750,7 +13685,7 @@ snapshots:
   header-case@2.0.4:
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   hermes-estree@0.25.1: {}
 
@@ -14965,7 +14900,7 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   node-domexception@1.0.0: {}
 
@@ -15150,7 +15085,7 @@ snapshots:
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   parent-module@1.0.1:
     dependencies:
@@ -15180,12 +15115,12 @@ snapshots:
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   path-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   path-exists@4.0.0: {}
 
@@ -15653,7 +15588,7 @@ snapshots:
   sentence-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   serialize-javascript@6.0.2:
@@ -15789,7 +15724,7 @@ snapshots:
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   socks-proxy-agent@8.0.5:
     dependencies:
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index ec38eb103b..3310ee9dfa 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -1,23 +1,15 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCircleCheck,
-  faClock,
-  faMapSigns,
-  faScroll,
-  faUsers,
-  faTools,
-  faBullseye,
-  faUser,
-  faUsersGear,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import upperFirst from 'lodash/upperFirst'
 import millify from 'millify'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
+import { FaMapSigns, FaTools } from 'react-icons/fa'
+import { FaCircleCheck, FaClock, FaScroll, FaBullseye, FaUser, FaUsersGear } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import {
   GetProjectMetadataDocument,
@@ -61,12 +53,12 @@ const getMilestoneStatus = (progress: number): string => {
 
 const getMilestoneIcon = (progress: number) => {
   if (progress === 100) {
-    return faCircleCheck
+    return FaCircleCheck
   }
   if (progress > 0) {
-    return faUsersGear
+    return FaUsersGear
   }
-  return faClock
+  return FaClock
 }
 
 const About = () => {
@@ -140,16 +132,16 @@ const About = () => {
       <div className="mx-auto max-w-6xl">
         <h1 className="mt-4 mb-6 text-4xl font-bold">About</h1>
         <div className="grid gap-0 md:grid-cols-2 md:gap-6">
-          <SecondaryCard icon={faBullseye} title={<AnchorTitle title="Our Mission" />}>
+          <SecondaryCard icon={FaBullseye} title={<AnchorTitle title="Our Mission" />}>
             <p className="text-gray-600 dark:text-gray-300">{missionContent.mission}</p>
           </SecondaryCard>
 
-          <SecondaryCard icon={faUser} title={<AnchorTitle title="Who It's For" />}>
+          <SecondaryCard icon={FaUser} title={<AnchorTitle title="Who It's For" />}>
             <p className="text-gray-600 dark:text-gray-300">{missionContent.whoItsFor}</p>
           </SecondaryCard>
         </div>
 
-        <SecondaryCard icon={faCircleCheck} title={<AnchorTitle title="Key Features" />}>
+        <SecondaryCard icon={FaCircleCheck} title={<AnchorTitle title="Key Features" />}>
           <div className="grid gap-4 md:grid-cols-2">
             {keyFeatures.map((feature) => (
               <div key={feature.title} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -165,13 +157,13 @@ const About = () => {
         {topContributors && (
           <TopContributorsList
             contributors={topContributors}
-            icon={faUsers}
+            icon={HiUserGroup}
             label="Wall of Fame"
             maxInitialDisplay={12}
           />
         )}
 
-        <SecondaryCard icon={faTools} title={<AnchorTitle title="Technologies & Tools" />}>
+        <SecondaryCard icon={FaTools} title={<AnchorTitle title="Technologies & Tools" />}>
           <div className="w-full">
             <div className="grid w-full grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-4 lg:pl-8">
               {technologies.map((tech) => (
@@ -204,7 +196,7 @@ const About = () => {
           </div>
         </SecondaryCard>
 
-        <SecondaryCard icon={faUsersGear} title={<AnchorTitle title="Get Involved" />}>
+        <SecondaryCard icon={FaUsersGear} title={<AnchorTitle title="Get Involved" />}>
           <p className="mb-2 text-gray-600 dark:text-gray-300">{getInvolvedContent.description}</p>
           <ul className="mb-6 list-inside list-disc space-y-2 pl-4">
             {getInvolvedContent.ways.map((way) => (
@@ -217,7 +209,7 @@ const About = () => {
         </SecondaryCard>
 
         {projectMetadata.recentMilestones.length > 0 && (
-          <SecondaryCard icon={faMapSigns} title={<AnchorTitle title="Roadmap" />}>
+          <SecondaryCard icon={FaMapSigns} title={<AnchorTitle title="Roadmap" />}>
             <div className="grid gap-4">
               {[...projectMetadata.recentMilestones]
                 .filter((milestone) => milestone.state !== 'closed')
@@ -248,7 +240,7 @@ const About = () => {
                           showArrow
                         >
                           <span className="absolute top-0 right-0 text-xl text-gray-400">
-                            <FontAwesomeIcon icon={getMilestoneIcon(milestone.progress)} />
+                            <IconWrapper icon={getMilestoneIcon(milestone.progress)} />
                           </span>
                         </Tooltip>
                       </div>
@@ -259,7 +251,7 @@ const About = () => {
             </div>
           </SecondaryCard>
         )}
-        <SecondaryCard icon={faScroll} title={<AnchorTitle title="Our Story" />}>
+        <SecondaryCard icon={FaScroll} title={<AnchorTitle title="Our Story" />}>
           {projectStory.map((text) => (
             <div key={`story-${text.substring(0, 50).replaceAll(' ', '-')}`} className="mb-4">
               <div>
@@ -268,7 +260,7 @@ const About = () => {
             </div>
           ))}
         </SecondaryCard>
-        <SecondaryCard icon={faClock} title={<AnchorTitle title="Project Timeline" />}>
+        <SecondaryCard icon={FaClock} title={<AnchorTitle title="Project Timeline" />}>
           <div className="space-y-6">
             {[...projectTimeline].reverse().map((milestone, index) => (
               <div key={`${milestone.year}-${milestone.title}`} className="relative pl-10">
diff --git a/frontend/src/app/board/[year]/candidates/page.tsx b/frontend/src/app/board/[year]/candidates/page.tsx
index a5b87a718c..2f0c03b061 100644
--- a/frontend/src/app/board/[year]/candidates/page.tsx
+++ b/frontend/src/app/board/[year]/candidates/page.tsx
@@ -1,13 +1,5 @@
 'use client'
 import { useQuery, useApolloClient } from '@apollo/client/react'
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons'
-import {
-  faCode,
-  faCodeBranch,
-  faCodeMerge,
-  faExclamationCircle,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -16,6 +8,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { FaCode, FaExclamationCircle } from 'react-icons/fa'
+import { FaLinkedin, FaCodeBranch, FaCodeMerge } from 'react-icons/fa6'
 
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import {
@@ -346,7 +340,7 @@ const BoardCandidatesPage = () => {
                   className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                   aria-label={`${candidate.memberName}'s LinkedIn profile`}
                 >
-                  <FontAwesomeIcon icon={faLinkedin} className="h-5 w-5" />
+                  <FaLinkedin className="h-5 w-5" />
                 </a>
               )}
             </h3>
@@ -426,10 +420,7 @@ const BoardCandidatesPage = () => {
             </h4>
             <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
               <div className="flex items-center gap-2">
-                <FontAwesomeIcon
-                  icon={faCode}
-                  className="h-4 w-4 text-gray-600 dark:text-gray-400"
-                />
+                <FaCode className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                 <div>
                   <p className="text-xs text-gray-500 dark:text-gray-400">Commits</p>
                   <p className="font-semibold text-gray-900 dark:text-white">
@@ -438,10 +429,7 @@ const BoardCandidatesPage = () => {
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <FontAwesomeIcon
-                  icon={faCodeBranch}
-                  className="h-4 w-4 text-gray-600 dark:text-gray-400"
-                />
+                <FaCodeBranch className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                 <div>
                   <p className="text-xs text-gray-500 dark:text-gray-400">PRs</p>
                   <p className="font-semibold text-gray-900 dark:text-white">
@@ -450,10 +438,7 @@ const BoardCandidatesPage = () => {
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <FontAwesomeIcon
-                  icon={faExclamationCircle}
-                  className="h-4 w-4 text-gray-600 dark:text-gray-400"
-                />
+                <FaExclamationCircle className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                 <div>
                   <p className="text-xs text-gray-500 dark:text-gray-400">Issues</p>
                   <p className="font-semibold text-gray-900 dark:text-white">
@@ -462,10 +447,7 @@ const BoardCandidatesPage = () => {
                 </div>
               </div>
               <div className="flex items-center gap-2">
-                <FontAwesomeIcon
-                  icon={faCodeMerge}
-                  className="h-4 w-4 text-gray-600 dark:text-gray-400"
-                />
+                <FaCodeMerge className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                 <div>
                   <p className="text-xs text-gray-500 dark:text-gray-400">Total</p>
                   <p className="font-semibold text-gray-900 dark:text-white">
diff --git a/frontend/src/app/chapters/page.tsx b/frontend/src/app/chapters/page.tsx
index e79d3c81b0..03236429e4 100644
--- a/frontend/src/app/chapters/page.tsx
+++ b/frontend/src/app/chapters/page.tsx
@@ -2,7 +2,7 @@
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import { fetchAlgoliaData } from 'server/fetchAlgoliaData'
 import type { AlgoliaResponse } from 'types/algolia'
 import type { Chapter } from 'types/chapter'
@@ -57,7 +57,7 @@ const ChaptersPage = () => {
 
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket " />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
diff --git a/frontend/src/app/committees/[committeeKey]/page.tsx b/frontend/src/app/committees/[committeeKey]/page.tsx
index dea63a3afe..2cc02da765 100644
--- a/frontend/src/app/committees/[committeeKey]/page.tsx
+++ b/frontend/src/app/committees/[committeeKey]/page.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCode,
-  faCodeFork,
-  faExclamationCircle,
-  faStar,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCode, FaCodeFork, FaStar } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { GetCommitteeDataDocument } from 'types/__generated__/committeeQueries.generated'
 import type { Committee } from 'types/committee'
@@ -67,16 +63,16 @@ export default function CommitteeDetailsPage() {
   ]
 
   const committeeStats = [
-    { icon: faUsers, value: committee.contributorsCount, unit: 'Contributor' },
-    { icon: faCodeFork, value: committee.forksCount, unit: 'Fork' },
-    { icon: faStar, value: committee.starsCount, unit: 'Star' },
+    { icon: HiUserGroup, value: committee.contributorsCount, unit: 'Contributor' },
+    { icon: FaCodeFork, value: committee.forksCount, unit: 'Fork' },
+    { icon: FaStar, value: committee.starsCount, unit: 'Star' },
     {
-      icon: faCode,
+      icon: FaCode,
       value: committee.repositoriesCount,
       unit: 'Repository',
       pluralizedName: 'Repositories',
     },
-    { icon: faExclamationCircle, value: committee.issuesCount, unit: 'Issue' },
+    { icon: FaExclamationCircle, value: committee.issuesCount, unit: 'Issue' },
   ]
 
   return (
diff --git a/frontend/src/app/committees/page.tsx b/frontend/src/app/committees/page.tsx
index e6d59dc054..748757e269 100644
--- a/frontend/src/app/committees/page.tsx
+++ b/frontend/src/app/committees/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import type { Committee } from 'types/committee'
 import { getFilteredIcons, handleSocialUrls } from 'utils/utility'
 import Card from 'components/Card'
@@ -31,7 +31,7 @@ const CommitteesPage = () => {
 
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
diff --git a/frontend/src/app/community/snapshots/[id]/page.tsx b/frontend/src/app/community/snapshots/[id]/page.tsx
index 2cfc0f215e..94b4efcacc 100644
--- a/frontend/src/app/community/snapshots/[id]/page.tsx
+++ b/frontend/src/app/community/snapshots/[id]/page.tsx
@@ -1,10 +1,8 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import { faCalendar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter, useParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaCalendar, FaRightToBracket } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import { GetSnapshotDetailsDocument } from 'types/__generated__/snapshotQueries.generated'
 import type { Chapter } from 'types/chapter'
@@ -49,7 +47,7 @@ const SnapshotDetailsPage: React.FC = () => {
 
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
@@ -78,7 +76,7 @@ const SnapshotDetailsPage: React.FC = () => {
 
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
@@ -119,7 +117,7 @@ const SnapshotDetailsPage: React.FC = () => {
             </h1>
             <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
               <div className="flex items-center">
-                <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
+                <FaCalendar className="mr-1 h-4 w-4" />
                 <span>
                   {formatDate(snapshot.startAt)} - {formatDate(snapshot.endAt)}
                 </span>
diff --git a/frontend/src/app/community/snapshots/page.tsx b/frontend/src/app/community/snapshots/page.tsx
index ea23a3577b..11d864ca87 100644
--- a/frontend/src/app/community/snapshots/page.tsx
+++ b/frontend/src/app/community/snapshots/page.tsx
@@ -3,7 +3,7 @@ import { useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
 import { useRouter } from 'next/navigation'
 import React, { useState, useEffect } from 'react'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import { GetCommunitySnapshotsDocument } from 'types/__generated__/snapshotQueries.generated'
 import type { Snapshot } from 'types/snapshot'
 import SnapshotSkeleton from 'components/skeletons/SnapshotSkeleton'
@@ -41,8 +41,8 @@ const SnapshotsPage: React.FC = () => {
 
   const renderSnapshotCard = (snapshot: Snapshot) => {
     const SubmitButton = {
-      label: 'View Snapshot',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      label: 'View Details',
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: () => handleButtonClick(snapshot),
     }
 
diff --git a/frontend/src/app/contribute/page.tsx b/frontend/src/app/contribute/page.tsx
index 5d07bf3a52..898e982e81 100644
--- a/frontend/src/app/contribute/page.tsx
+++ b/frontend/src/app/contribute/page.tsx
@@ -1,12 +1,9 @@
 'use client'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useSearchPage } from 'hooks/useSearchPage'
 import React, { useState } from 'react'
-
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaGithub, FaWandMagicSparkles } from 'react-icons/fa6'
 import type { Issue } from 'types/issue'
 import { getFilteredIcons } from 'utils/utility'
-
 import Card from 'components/Card'
 import DialogComp from 'components/Modal'
 import SearchPageLayout from 'components/SearchPageLayout'
@@ -33,13 +30,13 @@ const ContributePage = () => {
 
     const SubmitButton = {
       label: 'Read More',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-wand-magic-sparkles" />,
+      icon: <FaWandMagicSparkles className="h-4 w-4" />,
       onclick: () => setModalOpenIndex(index),
     }
 
     const viewIssueButton = {
       label: 'View Issue',
-      icon: <FontAwesomeIconWrapper icon={faGithub} />,
+      icon: <FaGithub className="h-4 w-4" />,
       url: issue.url,
     }
 
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index e4a56e148d..6464d956f5 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -1,16 +1,11 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCodeMerge,
-  faFolderOpen,
-  faPersonWalkingArrowRight,
-  faUserPlus,
-} from '@fortawesome/free-solid-svg-icons'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import React, { useState, useEffect, useRef } from 'react'
+import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
@@ -76,7 +71,6 @@ const UserDetailsPage: React.FC = () => {
   }, [memberKey, user])
 
   const formattedBio = user?.bio?.split(' ').map((word, index) => {
-    // Regex to match GitHub usernames, but if last character is not a word character or @, it's a punctuation
     const mentionMatch = word.match(/^@([\w-]+(?:\.[\w-]+)*)([^\w@])?$/)
     if (mentionMatch && mentionMatch.length > 1) {
       const username = mentionMatch[1]
@@ -121,15 +115,15 @@ const UserDetailsPage: React.FC = () => {
   ]
 
   const userStats = [
-    { icon: faPersonWalkingArrowRight, value: user?.followersCount || 0, unit: 'Follower' },
-    { icon: faUserPlus, value: user?.followingCount || 0, unit: 'Following' },
+    { icon: FaPersonWalkingArrowRight, value: user?.followersCount || 0, unit: 'Follower' },
+    { icon: FaUserPlus, value: user?.followingCount || 0, unit: 'Following' },
     {
-      icon: faFolderOpen,
+      icon: FaFolderOpen,
       pluralizedName: 'Repositories',
       unit: 'Repository',
       value: user?.publicRepositoriesCount ?? 0,
     },
-    { icon: faCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
+    { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
   ]
 
   const Heatmap = () => {
@@ -211,7 +205,7 @@ const UserDetailsPage: React.FC = () => {
                   <React.Fragment key={badge.id}>
                     <Badges
                       name={badge.name}
-                      cssClass={badge.cssClass || 'fa-medal'}
+                      cssClass={badge.cssClass || 'medal'}
                       showTooltip={true}
                     />
                   </React.Fragment>
diff --git a/frontend/src/app/members/page.tsx b/frontend/src/app/members/page.tsx
index 9bedc9760c..5c40f5b7a7 100644
--- a/frontend/src/app/members/page.tsx
+++ b/frontend/src/app/members/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import type { User } from 'types/user'
 import SearchPageLayout from 'components/SearchPageLayout'
 import UserCard from 'components/UserCard'
@@ -29,7 +29,7 @@ const UsersPage = () => {
   const renderUserCard = (user: User) => {
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: () => handleButtonClick(user),
     }
 
diff --git a/frontend/src/app/my/mentorship/page.tsx b/frontend/src/app/my/mentorship/page.tsx
index 04bb8a0093..f622a68a66 100644
--- a/frontend/src/app/my/mentorship/page.tsx
+++ b/frontend/src/app/my/mentorship/page.tsx
@@ -1,13 +1,12 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
-import { faPlus, faGraduationCap } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { addToast } from '@heroui/toast'
 import { debounce } from 'lodash'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React, { useEffect, useMemo, useState } from 'react'
+import { FaPlus, FaGraduationCap } from 'react-icons/fa6'
 
 import { GetMyProgramsDocument } from 'types/__generated__/programsQueries.generated'
 import type { ExtendedSession } from 'types/auth'
@@ -89,7 +88,7 @@ const MyMentorshipPage: React.FC = () => {
   if (!isProjectLeader) {
     return (
       <div className="flex min-h-[80vh] flex-col items-center justify-center px-4 text-center">
-        <FontAwesomeIcon icon={faGraduationCap} className="mb-4 text-6xl text-red-400" />
+        <FaGraduationCap className="mb-4 text-6xl text-red-400" />
         <h2 className="mb-2 text-2xl font-bold text-gray-600 dark:text-white">Access Denied</h2>
         <p className="text-gray-600 dark:text-gray-400">
           Only project leaders can access this page.
@@ -106,7 +105,7 @@ const MyMentorshipPage: React.FC = () => {
           <p className="text-gray-600 dark:text-gray-400">Programs you've created or joined</p>
         </div>
         <ActionButton onClick={handleCreate}>
-          <FontAwesomeIcon icon={faPlus} className="mr-2" />
+          <FaPlus className="mr-2" />
           {'Create Program'}
         </ActionButton>
       </div>
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
index 322ef9f27b..c8bcf54c50 100644
--- a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
+++ b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/[issueId]/page.tsx
@@ -1,19 +1,12 @@
 'use client'
 
 import { useQuery } from '@apollo/client/react'
-import {
-  faCodeBranch,
-  faLink,
-  faPlus,
-  faTags,
-  faUsers,
-  faXmark,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useIssueMutations } from 'hooks/useIssueMutations'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import { FaCodeBranch, FaLink, FaPlus, FaTags, FaXmark } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { ErrorDisplay } from 'app/global-error'
 import { GetModuleIssueViewDocument } from 'types/__generated__/issueQueries.generated'
 import ActionButton from 'components/ActionButton'
@@ -134,7 +127,7 @@ const ModuleIssueDetailsPage = () => {
             </div>
           </div>
           <ActionButton url={issue.url} tooltipLabel="View on GitHub">
-            <FontAwesomeIcon icon={faLink} /> View on GitHub
+            <FaLink className="mr-2 inline-block" /> View on GitHub
           </ActionButton>
         </div>
 
@@ -232,7 +225,7 @@ const ModuleIssueDetailsPage = () => {
           <h2 className="mb-4 text-2xl font-semibold">
             <div className="flex items-center">
               <div className="flex flex-row items-center gap-2">
-                <FontAwesomeIcon icon={faTags} className="mr-2 h-5 w-5" />
+                <FaTags className="mr-2 h-5 w-5" />
               </div>
               <span>Labels</span>
             </div>
@@ -254,7 +247,7 @@ const ModuleIssueDetailsPage = () => {
             <h2 className="mb-4 text-2xl font-semibold">
               <div className="flex items-center">
                 <div className="flex flex-row items-center gap-2">
-                  <FontAwesomeIcon icon={faUsers} className="mr-2 h-5 w-5" />
+                  <HiUserGroup className="mr-2 h-5 w-5" />
                 </div>
                 <span>Assignees</span>
               </div>
@@ -300,7 +293,7 @@ const ModuleIssueDetailsPage = () => {
                     className={getButtonClassName(!issueId || unassigning)}
                     title={unassigning ? 'Unassigning…' : `Unassign @${a.login}`}
                   >
-                    <FontAwesomeIcon icon={faXmark} />
+                    <FaXmark />
                   </button>
                 </div>
               ))}
@@ -308,7 +301,7 @@ const ModuleIssueDetailsPage = () => {
           </div>
         )}
 
-        <SecondaryCard icon={faCodeBranch} title="Pull Requests">
+        <SecondaryCard icon={FaCodeBranch} title="Pull Requests">
           <div className="grid grid-cols-1 gap-3">
             {issue.pullRequests?.length ? (
               issue.pullRequests.map((pr) => (
@@ -382,7 +375,7 @@ const ModuleIssueDetailsPage = () => {
           <h2 className="mb-4 text-2xl font-semibold">
             <div className="flex items-center">
               <div className="flex flex-row items-center gap-2">
-                <FontAwesomeIcon icon={faUsers} className="mr-2 h-5 w-5" />
+                <HiUserGroup className="mr-2 h-5 w-5" />
               </div>
               <span>Interested Users</span>
             </div>
@@ -426,7 +419,7 @@ const ModuleIssueDetailsPage = () => {
                     !issueId ? 'Loading issue…' : assigning ? 'Assigning…' : 'Assign to this user'
                   }
                 >
-                  <FontAwesomeIcon icon={faPlus} className="text-gray-500" />
+                  <FaPlus className="text-gray-500" />
                   <span>Assign</span>
                 </button>
               </div>
diff --git a/frontend/src/app/organizations/[organizationKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/page.tsx
index 1541f91d95..a466dcf927 100644
--- a/frontend/src/app/organizations/[organizationKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/page.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCodeFork,
-  faExclamationCircle,
-  faFolderOpen,
-  faStar,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCodeFork, FaFolderOpen, FaStar } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import { GetOrganizationDataDocument } from 'types/__generated__/organizationQueries.generated'
 import { formatDate } from 'utils/dateFormatter'
@@ -85,27 +81,27 @@ const OrganizationDetailsPage = () => {
 
   const organizationStats = [
     {
-      icon: faStar,
+      icon: FaStar,
       value: organization.stats.totalStars,
       unit: 'Star',
     },
     {
-      icon: faCodeFork,
+      icon: FaCodeFork,
       value: organization.stats.totalForks,
       unit: 'Fork',
     },
     {
-      icon: faUsers,
+      icon: HiUserGroup,
       value: organization.stats.totalContributors,
       unit: 'Contributor',
     },
     {
-      icon: faExclamationCircle,
+      icon: FaExclamationCircle,
       value: organization.stats.totalIssues,
       unit: 'Issue',
     },
     {
-      icon: faFolderOpen,
+      icon: FaFolderOpen,
       value: organization.stats.totalRepositories,
       unit: 'Repository',
       pluralizedName: 'Repositories',
diff --git a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
index 9e4d82c3b1..0ee25859ec 100644
--- a/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
+++ b/frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/page.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCodeCommit,
-  faCodeFork,
-  faExclamationCircle,
-  faStar,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCodeCommit, FaCodeFork, FaStar } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 import { GetRepositoryDataDocument } from 'types/__generated__/repositoryQueries.generated'
 import type { Contributor } from 'types/contributor'
@@ -81,28 +77,27 @@ const RepositoryDetailsPage = () => {
 
   const RepositoryStats = [
     {
-      icon: faStar,
+      icon: FaStar,
       value: repository.starsCount,
       unit: 'Star',
     },
     {
-      icon: faCodeFork,
+      icon: FaCodeFork,
       value: repository.forksCount,
       unit: 'Fork',
     },
     {
-      icon: faUsers,
+      icon: HiUserGroup,
       value: repository.contributorsCount,
       unit: 'Contributor',
     },
-
     {
-      icon: faExclamationCircle,
+      icon: FaExclamationCircle,
       value: repository.openIssuesCount,
       unit: 'Issue',
     },
     {
-      icon: faCodeCommit,
+      icon: FaCodeCommit,
       value: repository.commitsCount,
       unit: 'Commit',
     },
diff --git a/frontend/src/app/organizations/page.tsx b/frontend/src/app/organizations/page.tsx
index 754d517045..c8056ae101 100644
--- a/frontend/src/app/organizations/page.tsx
+++ b/frontend/src/app/organizations/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import type { Organization } from 'types/organization'
 import SearchPageLayout from 'components/SearchPageLayout'
 import UserCard from 'components/UserCard'
@@ -30,7 +30,7 @@ const OrganizationPage = () => {
 
     const submitButton = {
       label: 'View Profile',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a5f8ad210b..d93c622faf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,26 +1,25 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import {
-  faBook,
-  faCalendar,
-  faCalendarAlt,
-  faCode,
-  faFileCode,
-  faFolder,
-  faGlobe,
-  faMapMarkerAlt,
-  faNewspaper,
-  faTag,
-  faUser,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { addToast } from '@heroui/toast'
 import upperFirst from 'lodash/upperFirst'
 import millify from 'millify'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
+import type { IconType } from 'react-icons'
+import { FaCalendarAlt, FaMapMarkerAlt } from 'react-icons/fa'
+import {
+  FaBook,
+  FaCalendar,
+  FaCode,
+  FaFileCode,
+  FaFolder,
+  FaGlobe,
+  FaNewspaper,
+  FaTag,
+  FaUser,
+} from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { fetchAlgoliaData } from 'server/fetchAlgoliaData'
 import { GetMainPageDataDocument } from 'types/__generated__/homeQueries.generated'
 import type { AlgoliaResponse } from 'types/algolia'
@@ -96,18 +95,18 @@ export default function Home() {
     return <LoadingSpinner />
   }
 
-  const getProjectIcon = (projectType: string) => {
+  const getProjectIcon = (projectType: string): IconType => {
     switch (projectType.toLowerCase()) {
       case 'code':
-        return faCode
+        return FaCode
       case 'documentation':
-        return faBook
+        return FaBook
       case 'other':
-        return faFileCode
+        return FaFileCode
       case 'tool':
-        return faTag
+        return FaTag
       default:
-        return faFileCode
+        return FaFileCode
     }
   }
 
@@ -156,7 +155,7 @@ export default function Home() {
           </div>
         </div>
         <SecondaryCard
-          icon={faCalendarAlt}
+          icon={FaCalendarAlt}
           title={
             <div className="flex items-center gap-2">
               <AnchorTitle title="Upcoming Events" className="flex items-center leading-none" />
@@ -196,7 +195,7 @@ export default function Home() {
                     </div>
                     {event.suggestedLocation && (
                       <div className="flex flex-1 items-center overflow-hidden">
-                        <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-1 h-4 w-4" />
+                        <FaMapMarkerAlt className="mr-1 h-4 w-4" />
                         <TruncatedText text={event.suggestedLocation} />
                       </div>
                     )}
@@ -217,7 +216,7 @@ export default function Home() {
         </SecondaryCard>
         <div className="grid gap-4 md:grid-cols-2">
           <SecondaryCard
-            icon={faMapMarkerAlt}
+            icon={FaMapMarkerAlt}
             title={
               <div className="flex items-center gap-2">
                 <AnchorTitle title="New Chapters" className="flex items-center leading-none" />
@@ -238,11 +237,11 @@ export default function Home() {
                   </h3>
                   <div className="flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
                     <div className="mr-4 flex items-center">
-                      <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+                      <FaCalendar className="mr-2 h-4 w-4" />
                       <span>{formatDate(chapter.createdAt)}</span>
                     </div>
                     <div className="flex flex-1 items-center overflow-hidden">
-                      <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 h-4 w-4" />
+                      <FaMapMarkerAlt className="mr-2 h-4 w-4" />
                       <TruncatedText text={chapter.suggestedLocation} />
                     </div>
                   </div>
@@ -250,7 +249,7 @@ export default function Home() {
                   {chapter.leaders.length > 0 && (
                     <div className="mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
                       {' '}
-                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <HiUserGroup className="mr-2 h-4 w-4 shrink-0" />
                       <LeadersList leaders={String(chapter.leaders)} />
                     </div>
                   )}
@@ -259,7 +258,7 @@ export default function Home() {
             </div>
           </SecondaryCard>
           <SecondaryCard
-            icon={faFolder}
+            icon={FaFolder}
             title={
               <div className="flex items-center gap-2">
                 <AnchorTitle title="New Projects" className="flex items-center leading-none" />
@@ -277,20 +276,17 @@ export default function Home() {
                   </Link>
                   <div className="flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
                     <div className="mr-4 flex items-center">
-                      <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+                      <FaCalendar className="mr-2 h-4 w-4" />
                       <span>{formatDate(project.createdAt)}</span>
                     </div>
                     <div className="mr-4 flex flex-1 items-center overflow-hidden">
-                      <FontAwesomeIcon
-                        icon={getProjectIcon(project.type) as IconProp}
-                        className="mr-2 h-4 w-4"
-                      />
+                      <IconWrapper icon={getProjectIcon(project.type)} className="mr-2 h-4 w-4" />
                       <TruncatedText text={upperFirst(project.type)} />
                     </div>
                   </div>
                   {project.leaders.length > 0 && (
                     <div className="mt-1 flex items-center gap-x-2 text-sm text-gray-600 dark:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <HiUserGroup className="h-4 w-4 shrink-0" />
                       <LeadersList leaders={String(project.leaders)} />
                     </div>
                   )}
@@ -301,11 +297,7 @@ export default function Home() {
         </div>
         <div className="mb-20">
           <div className="mb-4 flex items-center gap-2">
-            <FontAwesomeIcon
-              icon={faGlobe}
-              className="h-5 w-5"
-              style={{ verticalAlign: 'middle' }}
-            />
+            <FaGlobe className="h-4 w-4" style={{ verticalAlign: 'middle' }} />
             <AnchorTitle title="Chapters Worldwide" className="flex items-center leading-none" />
           </div>
           <ChapterMapWrapper
@@ -322,7 +314,7 @@ export default function Home() {
         </div>
         <TopContributorsList
           contributors={data?.topContributors}
-          icon={faUsers}
+          icon={HiUserGroup}
           maxInitialDisplay={20}
         />
         <div className="grid-cols-2 gap-4 lg:grid">
@@ -334,7 +326,7 @@ export default function Home() {
           <RecentReleases data={data?.recentReleases} showSingleColumn={true} />
         </div>
         <SecondaryCard
-          icon={faNewspaper}
+          icon={FaNewspaper}
           title={
             <div className="flex items-center gap-2">
               <AnchorTitle title="News & Opinions" className="flex items-center leading-none" />
@@ -360,11 +352,11 @@ export default function Home() {
                 </h3>
                 <div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
                   <div className="mr-4 flex items-center">
-                    <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+                    <FaCalendar className="mr-2 h-4 w-4" />
                     <span>{formatDate(post.publishedAt)}</span>
                   </div>
                   <div className="flex flex-1 items-center overflow-hidden">
-                    <FontAwesomeIcon icon={faUser} className="mr-2 h-4 w-4" />
+                    <FaUser className="mr-2 h-4 w-4" />
                     <LeadersList leaders={post.authorName} />
                   </div>
                 </div>
diff --git a/frontend/src/app/projects/[projectKey]/page.tsx b/frontend/src/app/projects/[projectKey]/page.tsx
index 77fbf46021..f7fc8a1169 100644
--- a/frontend/src/app/projects/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/[projectKey]/page.tsx
@@ -1,16 +1,12 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faCodeFork,
-  faExclamationCircle,
-  faFolderOpen,
-  faStar,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
 import upperFirst from 'lodash/upperFirst'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useState, useEffect } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCodeFork, FaFolderOpen, FaStar } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { ErrorDisplay, handleAppError } from 'app/global-error'
 import { GetProjectDocument } from 'types/__generated__/projectQueries.generated'
 import type { Contributor } from 'types/contributor'
@@ -69,20 +65,20 @@ const ProjectDetailsPage = () => {
     },
   ]
   const projectStats = [
-    { icon: faStar, value: project.starsCount, unit: 'Star' },
-    { icon: faCodeFork, value: project.forksCount, unit: 'Fork' },
+    { icon: FaStar, value: project.starsCount, unit: 'Star' },
+    { icon: FaCodeFork, value: project.forksCount, unit: 'Fork' },
     {
-      icon: faUsers,
+      icon: HiUserGroup,
       value: project.contributorsCount,
       unit: 'Contributor',
     },
     {
-      icon: faExclamationCircle,
+      icon: FaExclamationCircle,
       value: project.issuesCount,
       unit: 'Issue',
     },
     {
-      icon: faFolderOpen,
+      icon: FaFolderOpen,
       value: project.repositoriesCount,
       unit: 'Repository',
       pluralizedName: 'Repositories',
diff --git a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
index 08a934aa64..06004602ec 100644
--- a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
@@ -1,18 +1,18 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import {
-  faPeopleGroup,
-  faCodeFork,
-  faDollar,
-  faCodePullRequest,
-  faChartArea,
-  faExclamationCircle,
-  faHandshake,
-  faStar,
-  faTags,
-} from '@fortawesome/free-solid-svg-icons'
 import { useParams } from 'next/navigation'
 import { FC, useState, useEffect } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import {
+  FaPeopleGroup,
+  FaCodeFork,
+  FaDollarSign,
+  FaCodePullRequest,
+  FaChartArea,
+  FaHandshake,
+  FaStar,
+  FaTags,
+} from 'react-icons/fa6'
 import { handleAppError } from 'app/global-error'
 import { GetProjectHealthMetricsDetailsDocument } from 'types/__generated__/projectsHealthDashboardQueries.generated'
 import { HealthMetricsProps } from 'types/healthMetrics'
@@ -78,7 +78,7 @@ const ProjectHealthMetricsDetails: FC = () => {
                     ? 'Funding Requirements Compliant'
                     : 'Funding Requirements Not Compliant'
                 }
-                icon={faDollar}
+                icon={FaDollarSign}
                 compliant={metricsLatest.isFundingRequirementsCompliant}
               />
               <GeneralCompliantComponent
@@ -87,7 +87,7 @@ const ProjectHealthMetricsDetails: FC = () => {
                     ? 'Leader Requirements Compliant'
                     : 'Leader Requirements Not Compliant'
                 }
-                icon={faHandshake}
+                icon={FaHandshake}
                 compliant={metricsLatest.isLeaderRequirementsCompliant}
               />
             </div>
@@ -95,7 +95,7 @@ const ProjectHealthMetricsDetails: FC = () => {
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <LineChart
               title="Stars"
-              icon={faStar}
+              icon={FaStar}
               series={[
                 {
                   name: 'Stars',
@@ -107,7 +107,7 @@ const ProjectHealthMetricsDetails: FC = () => {
             />
             <LineChart
               title="Forks"
-              icon={faCodeFork}
+              icon={FaCodeFork}
               series={[
                 {
                   name: 'Forks',
@@ -121,7 +121,7 @@ const ProjectHealthMetricsDetails: FC = () => {
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <LineChart
               title="Issues"
-              icon={faExclamationCircle}
+              icon={FaExclamationCircle}
               series={[
                 {
                   name: 'Open Issues',
@@ -145,7 +145,7 @@ const ProjectHealthMetricsDetails: FC = () => {
             />
             <LineChart
               title="Open Pull Requests"
-              icon={faCodePullRequest}
+              icon={FaCodePullRequest}
               series={[
                 {
                   name: 'Open Pull Requests',
@@ -159,7 +159,7 @@ const ProjectHealthMetricsDetails: FC = () => {
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <LineChart
               title="Releases"
-              icon={faTags}
+              icon={FaTags}
               series={[
                 {
                   name: 'Recent Releases',
@@ -175,7 +175,7 @@ const ProjectHealthMetricsDetails: FC = () => {
             />
             <LineChart
               title="Contributors"
-              icon={faPeopleGroup}
+              icon={FaPeopleGroup}
               series={[
                 {
                   name: 'Contributors',
@@ -188,7 +188,7 @@ const ProjectHealthMetricsDetails: FC = () => {
           </div>
           <BarChart
             title="Days Metrics"
-            icon={faChartArea}
+            icon={FaChartArea}
             labels={[
               'Project Age',
               'Days Since Last Commit',
diff --git a/frontend/src/app/projects/dashboard/metrics/page.tsx b/frontend/src/app/projects/dashboard/metrics/page.tsx
index 46f1ad88e8..5a6531209b 100644
--- a/frontend/src/app/projects/dashboard/metrics/page.tsx
+++ b/frontend/src/app/projects/dashboard/metrics/page.tsx
@@ -1,10 +1,11 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import { faFilter, faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Pagination } from '@heroui/react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { FC, useState, useEffect } from 'react'
+import type { IconType } from 'react-icons'
+import { FaFilter, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { handleAppError } from 'app/global-error'
 import { Ordering } from 'types/__generated__/graphql'
 import { GetProjectHealthMetricsDocument } from 'types/__generated__/projectsHealthDashboardQueries.generated'
@@ -93,15 +94,14 @@ const SortableColumnHeader: FC<{
 
   const textAlignClass = textAlignMap[align] || textAlignMap.left
 
-  const fontAwesomeIconType = (() => {
-    if (isActiveSortDesc) {
-      return faSortDown
-    } else if (isActiveSortAsc) {
-      return faSortUp
-    } else {
-      return faSort
-    }
-  })()
+  let iconType: IconType
+  if (isActiveSortDesc) {
+    iconType = FaSortDown
+  } else if (isActiveSortAsc) {
+    iconType = FaSortUp
+  } else {
+    iconType = FaSort
+  }
 
   return (
     <div className={`flex items-center gap-1 ${alignmentClass}`}>
@@ -114,8 +114,8 @@ const SortableColumnHeader: FC<{
         aria-pressed={isActive}
       >
         <span className="truncate">{label}</span>
-        <FontAwesomeIcon
-          icon={fontAwesomeIconType}
+        <IconWrapper
+          icon={iconType}
           className={`h-3 w-3 ${isActive ? 'text-blue-600' : 'text-gray-400'}`}
         />
       </button>
@@ -272,7 +272,7 @@ const MetricsPage: FC = () => {
         <div className="flex flex-row items-center gap-2">
           <ProjectsDashboardDropDown
             buttonDisplayName="Filter By"
-            icon={faFilter}
+            icon={FaFilter}
             sections={filteringSections}
             selectionMode="multiple"
             selectedKeys={activeFilters}
diff --git a/frontend/src/app/projects/dashboard/page.tsx b/frontend/src/app/projects/dashboard/page.tsx
index 8a1017e995..885999ff29 100644
--- a/frontend/src/app/projects/dashboard/page.tsx
+++ b/frontend/src/app/projects/dashboard/page.tsx
@@ -1,19 +1,19 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCheck,
-  faWarning,
-  faRectangleXmark,
-  faChartLine,
-  faUsers,
-  faStar,
-  faCodeBranch,
-  faChartColumn,
-  faHeart,
-} from '@fortawesome/free-solid-svg-icons'
 import millify from 'millify'
 import { useState, useEffect, FC } from 'react'
+import type { IconType } from 'react-icons'
+import {
+  FaCheck,
+  FaTriangleExclamation,
+  FaRectangleXmark,
+  FaChartLine,
+  FaStar,
+  FaCodeBranch,
+  FaChartColumn,
+  FaHeart,
+} from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import { handleAppError } from 'app/global-error'
 import { GetProjectHealthStatsDocument } from 'types/__generated__/projectsHealthDashboardQueries.generated'
 import type { ProjectHealthStats } from 'types/projectHealthStats'
@@ -51,46 +51,51 @@ const ProjectsDashboardPage: FC = () => {
       </div>
     )
   }
+
   const projectsCardsItems: {
     type: 'healthy' | 'needsAttention' | 'unhealthy'
     count: number
-    icon: IconProp
+    icon: IconType
   }[] = [
     {
       type: 'healthy',
       count: stats.projectsCountHealthy,
-      icon: faCheck,
+      icon: FaCheck,
     },
     {
       type: 'needsAttention',
       count: stats.projectsCountNeedAttention,
-      icon: faWarning,
+      icon: FaTriangleExclamation,
     },
     {
       type: 'unhealthy',
       count: stats.projectsCountUnhealthy,
-      icon: faRectangleXmark,
+      icon: FaRectangleXmark,
     },
   ]
-  const dashboardCardsItems = [
+  const dashboardCardsItems: {
+    title: string
+    icon: IconType
+    stats?: string
+  }[] = [
     {
       title: 'Average Score',
-      icon: faChartLine,
+      icon: FaChartLine,
       stats: `${stats.averageScore.toFixed(1)}`,
     },
     {
       title: 'Contributors',
-      icon: faUsers,
+      icon: HiUserGroup,
       stats: millify(stats.totalContributors),
     },
     {
       title: 'Forks',
-      icon: faCodeBranch,
+      icon: FaCodeBranch,
       stats: millify(stats.totalForks),
     },
     {
       title: 'Stars',
-      icon: faStar,
+      icon: FaStar,
       stats: millify(stats.totalStars),
     },
   ]
@@ -118,7 +123,7 @@ const ProjectsDashboardPage: FC = () => {
       <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-[2fr_1fr]">
         <LineChart
           title="Overall Project Health Monthly Trend"
-          icon={faChartColumn}
+          icon={FaChartColumn}
           series={[
             {
               name: 'Project Health Score',
@@ -132,7 +137,7 @@ const ProjectsDashboardPage: FC = () => {
         />
         <DonutBarChart
           title="Project Health Distribution"
-          icon={faHeart}
+          icon={FaHeart}
           series={[
             stats.projectsPercentageHealthy,
             stats.projectsPercentageNeedAttention,
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index 74081137da..920bd3f019 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useSearchPage } from 'hooks/useSearchPage'
 import { useRouter } from 'next/navigation'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaRightToBracket } from 'react-icons/fa6'
 import type { Project } from 'types/project'
 import { level } from 'utils/data'
 import { sortOptionsProject } from 'utils/sortingOptions'
@@ -9,6 +9,7 @@ import { getFilteredIcons } from 'utils/utility'
 import Card from 'components/Card'
 import SearchPageLayout from 'components/SearchPageLayout'
 import SortBy from 'components/SortBy'
+
 const ProjectsPage = () => {
   const {
     items: projects,
@@ -39,7 +40,7 @@ const ProjectsPage = () => {
 
     const submitButton = {
       label: 'View Details',
-      icon: <FontAwesomeIconWrapper icon="fa-solid fa-right-to-bracket" />,
+      icon: <FaRightToBracket className="h-4 w-4" />,
       onclick: handleButtonClick,
     }
 
diff --git a/frontend/src/app/settings/api-keys/page.tsx b/frontend/src/app/settings/api-keys/page.tsx
index 94739c7f02..b042c21955 100644
--- a/frontend/src/app/settings/api-keys/page.tsx
+++ b/frontend/src/app/settings/api-keys/page.tsx
@@ -1,22 +1,13 @@
 'use client'
 import { useMutation, useQuery } from '@apollo/client/react'
-import {
-  faSpinner,
-  faKey,
-  faPlus,
-  faCopy,
-  faEye,
-  faEyeSlash,
-  faInfoCircle,
-  faTrash,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal'
 import { Input } from '@heroui/react'
 import { addToast } from '@heroui/toast'
 import { format, addDays } from 'date-fns'
 import { useState } from 'react'
+import { FaInfoCircle } from 'react-icons/fa'
+import { FaSpinner, FaKey, FaPlus, FaCopy, FaEye, FaEyeSlash, FaTrash } from 'react-icons/fa6'
 import {
   CreateApiKeyDocument,
   GetApiKeysDocument,
@@ -174,10 +165,7 @@ export default function Page() {
 
         <SecondaryCard>
           <div className="flex items-start gap-3">
-            <FontAwesomeIcon
-              icon={faInfoCircle}
-              className="mt-0.5 text-blue-600 dark:text-blue-400"
-            />
+            <FaInfoCircle className="mt-0.5 text-blue-600 dark:text-blue-400" />
             <div>
               <h3 className="font-semibold text-blue-800 dark:text-blue-300">API Key Limits</h3>
               <p className="mt-1 text-sm text-blue-700 dark:text-blue-400">
@@ -201,7 +189,7 @@ export default function Page() {
         <SecondaryCard>
           <div className="mb-4 flex items-center justify-between">
             <div className="flex items-center gap-3">
-              <FontAwesomeIcon icon={faKey} className="text-gray-600 dark:text-gray-400" />
+              <FaKey className="text-gray-600 dark:text-gray-400" />
               <h2 className="text-xl font-semibold">Your API Keys</h2>
             </div>
             <Button
@@ -209,7 +197,7 @@ export default function Page() {
               isDisabled={!canCreateNewKey}
               className="rounded bg-black font-medium text-white transition-colors hover:bg-gray-900/90 disabled:bg-gray-300 disabled:text-gray-500"
             >
-              <FontAwesomeIcon icon={faPlus} className="mr-1" />
+              <FaPlus className="mr-1" />
               Create New Key ({activeKeyCount}/{MAX_ACTIVE_KEYS})
             </Button>
           </div>
@@ -257,7 +245,7 @@ export default function Page() {
                           onPress={() => setKeyToRevoke(key)}
                           className="text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
                         >
-                          <FontAwesomeIcon icon={faTrash} />
+                          <FaTrash />
                         </Button>
                       </td>
                     </tr>
@@ -323,10 +311,10 @@ export default function Page() {
                       onPress={() => setShowNewKey(!showNewKey)}
                       isIconOnly
                     >
-                      <FontAwesomeIcon icon={showNewKey ? faEyeSlash : faEye} />
+                      {showNewKey ? <FaEyeSlash /> : <FaEye />}
                     </Button>
                     <Button variant="bordered" onPress={handleCopyKey} size="sm">
-                      <FontAwesomeIcon icon={faCopy} className="mr-2" />
+                      <FaCopy className="mr-2" />
                       Copy
                     </Button>
                   </div>
@@ -399,7 +387,7 @@ export default function Page() {
                   onPress={handleCreateKey}
                   isDisabled={createLoading || !newKeyName.trim()}
                 >
-                  {createLoading && <FontAwesomeIcon icon={faSpinner} spin className="mr-2" />}
+                  {createLoading && <FaSpinner className="mr-2 animate-spin" />}
                   Create API Key
                 </Button>
               </>
@@ -418,7 +406,7 @@ export default function Page() {
             </p>
             <div className="mt-3 rounded-md bg-yellow-50 p-3 dark:bg-yellow-900/20">
               <p className="text-sm text-yellow-800 dark:text-yellow-400">
-                <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
+                <FaInfoCircle className="mr-2 inline align-middle" />
                 After revoking this key, you'll be able to create a new one if needed.
               </p>
             </div>
diff --git a/frontend/src/components/AnchorTitle.tsx b/frontend/src/components/AnchorTitle.tsx
index 6482623e3f..a03cd5f6a4 100644
--- a/frontend/src/components/AnchorTitle.tsx
+++ b/frontend/src/components/AnchorTitle.tsx
@@ -1,6 +1,5 @@
-import { faLink } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useEffect, useCallback } from 'react'
+import { FaLink } from 'react-icons/fa6'
 import { scrollToAnchor, scrollToAnchorWithHistory } from 'utils/scrollToAnchor'
 import slugify from 'utils/slugify'
 
@@ -52,7 +51,7 @@ const AnchorTitle: React.FC<AnchorTitleProps> = ({ title }) => {
           onClick={handleClick}
           aria-label={`Link to ${title} section`}
         >
-          <FontAwesomeIcon icon={faLink} className="custom-icon h-7 w-5" />
+          <FaLink className="custom-icon h-7 w-5" />
         </a>
       </div>
     </div>
diff --git a/frontend/src/components/Badges.tsx b/frontend/src/components/Badges.tsx
index 1af558aa8a..d8f6b868df 100644
--- a/frontend/src/components/Badges.tsx
+++ b/frontend/src/components/Badges.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@heroui/tooltip'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { BADGE_CLASS_MAP } from 'utils/data'
 
 type BadgeProps = {
@@ -14,7 +14,6 @@ const normalizeCssClass = (cssClass: string | undefined) => {
   if (!cssClass || cssClass.trim() === '') {
     return ''
   }
-
   // Convert backend snake_case format to frontend camelCase format
   return cssClass.trim().replaceAll(/_([a-z])/g, (_, letter) => letter.toUpperCase())
 }
@@ -30,7 +29,7 @@ const Badges = ({ name, cssClass, showTooltip = true }: BadgeProps) => {
   return (
     <div className="inline-flex items-center">
       <Tooltip content={name} isDisabled={!showTooltip}>
-        <FontAwesomeIconWrapper icon={icon} className="h-4 w-4" data-testid="badge-icon" />
+        <IconWrapper icon={icon} className="h-4 w-4" data-testid="badge-icon" />
       </Tooltip>
     </div>
   )
diff --git a/frontend/src/components/BarChart.tsx b/frontend/src/components/BarChart.tsx
index ebe5b0edbd..b8c1d8f271 100644
--- a/frontend/src/components/BarChart.tsx
+++ b/frontend/src/components/BarChart.tsx
@@ -1,7 +1,7 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import dynamic from 'next/dynamic'
 import { useTheme } from 'next-themes'
 import React from 'react'
+import type { IconType } from 'react-icons'
 import { ApexBarChartDataSeries } from 'types/healthMetrics'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
@@ -13,7 +13,7 @@ const Chart = dynamic(() => import('react-apexcharts'), {
 
 const BarChart: React.FC<{
   title: string
-  icon?: IconProp
+  icon?: IconType
   labels: string[]
   days: number[]
   requirements: number[]
diff --git a/frontend/src/components/BreadCrumbs.tsx b/frontend/src/components/BreadCrumbs.tsx
index ebc27cb868..2df6047782 100644
--- a/frontend/src/components/BreadCrumbs.tsx
+++ b/frontend/src/components/BreadCrumbs.tsx
@@ -1,7 +1,6 @@
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Breadcrumbs, BreadcrumbItem as HeroUIBreadcrumbItem } from '@heroui/react'
 import Link from 'next/link'
+import { FaChevronRight } from 'react-icons/fa'
 import type { BreadcrumbItem } from 'types/breadcrumb'
 
 type BreadCrumbRendererProps = Readonly<{
@@ -14,12 +13,7 @@ export default function BreadCrumbRenderer({ items }: BreadCrumbRendererProps) {
       <div className="w-full px-8 sm:px-8 md:px-8 lg:px-8">
         <Breadcrumbs
           aria-label="breadcrumb"
-          separator={
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className="mx-1 text-xs text-gray-400 dark:text-gray-500"
-            />
-          }
+          separator={<FaChevronRight className="mx-1 text-xs text-gray-400 dark:text-gray-500" />}
           className="text-gray-800 dark:text-gray-200"
           itemClasses={{
             base: 'transition-colors duration-200',
diff --git a/frontend/src/components/BreadCrumbsWrapper.tsx b/frontend/src/components/BreadCrumbsWrapper.tsx
index 50995f1d5d..40138c117d 100644
--- a/frontend/src/components/BreadCrumbsWrapper.tsx
+++ b/frontend/src/components/BreadCrumbsWrapper.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Breadcrumbs, BreadcrumbItem as HeroUIBreadcrumbItem } from '@heroui/react'
 import { useBreadcrumbs } from 'hooks/useBreadcrumbs'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { FaChevronRight } from 'react-icons/fa6'
 
 export default function BreadCrumbsWrapper() {
   const pathname = usePathname()
@@ -18,12 +17,7 @@ export default function BreadCrumbsWrapper() {
       <div className="w-full px-8 sm:px-8 md:px-8 lg:px-8">
         <Breadcrumbs
           aria-label="breadcrumb"
-          separator={
-            <FontAwesomeIcon
-              icon={faChevronRight}
-              className="mx-1 text-xs text-gray-400 dark:text-gray-500"
-            />
-          }
+          separator={<FaChevronRight className="mx-1 text-xs text-gray-400 dark:text-gray-500" />}
           className="text-gray-800 dark:text-gray-200"
           itemClasses={{
             base: 'transition-colors duration-200',
diff --git a/frontend/src/components/CalendarButton.tsx b/frontend/src/components/CalendarButton.tsx
index 089cc5fe10..0c95745851 100644
--- a/frontend/src/components/CalendarButton.tsx
+++ b/frontend/src/components/CalendarButton.tsx
@@ -1,6 +1,5 @@
-import { faCalendar, faCalendarPlus } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
+import { FaCalendar, FaCalendarPlus } from 'react-icons/fa6'
 import type { CalendarButtonProps } from 'types/calendar'
 import getGoogleCalendarUrl from 'utils/getGoogleCalendarUrl'
 
@@ -25,13 +24,16 @@ export default function CalendarButton(props: Readonly<CalendarButtonProps>) {
       rel="noopener noreferrer"
       aria-label={ariaLabel}
       title={ariaLabel}
-      className={className}
+      className={`flex items-center ${className}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {icon || (
-        <FontAwesomeIcon icon={isHovered ? faCalendarPlus : faCalendar} className={iconClassName} />
-      )}
+      {icon ||
+        (isHovered ? (
+          <FaCalendarPlus className={iconClassName} />
+        ) : (
+          <FaCalendar className={iconClassName} />
+        ))}
       {showLabel && <span>{label}</span>}
     </a>
   )
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index 26d785a1d5..7dbb47a3c2 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -1,8 +1,7 @@
-import { faCalendar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import Link from 'next/link'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaCalendar } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import type { CardProps } from 'types/card'
 import { ICONS } from 'utils/data'
 import { formatDateRange } from 'utils/dateFormatter'
@@ -45,7 +44,7 @@ const Card = ({
                 className="flex h-8 w-8 min-w-8 items-center justify-center rounded-full text-xs shadow"
                 style={{ backgroundColor: level.color }}
               >
-                <FontAwesomeIconWrapper icon={level.icon} className="text-white" />
+                <IconWrapper icon={level.icon} className="text-white" />
               </span>
             </Tooltip>
           )}
@@ -80,7 +79,7 @@ const Card = ({
         {/* Timeline Section (Optional) */}
         {timeline?.start && timeline?.end && (
           <div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-            <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+            <FaCalendar className="mr-2 h-4 w-4" />
             <span>{formatDateRange(timeline.start, timeline.end)}</span>
           </div>
         )}
@@ -106,21 +105,21 @@ const Card = ({
         {social && social.length > 0 && (
           <div className="mb-3 flex">
             <div className="flex flex-wrap gap-3">
-              {social.map((item) => (
-                <Link
-                  key={`${item.title}-${item.url}`}
-                  href={item.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="transition-colors"
-                  aria-label={item.title || 'Social media link'}
-                >
-                  <FontAwesomeIcon
-                    icon={getSocialIcon(item.url)}
-                    className="h-5 w-5 text-blue-500 hover:text-gray-600 dark:hover:text-gray-400"
-                  />
-                </Link>
-              ))}
+              {social.map((item) => {
+                const SocialIcon = getSocialIcon(item.url)
+                return (
+                  <Link
+                    key={`${item.title}-${item.url}`}
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="transition-colors"
+                    aria-label={item.title || 'Social media link'}
+                  >
+                    <SocialIcon className="h-5 w-5 text-blue-500 hover:text-gray-600 dark:hover:text-gray-400" />
+                  </Link>
+                )
+              })}
             </div>
           </div>
         )}
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
index ab5d4a2314..a138984e7b 100644
--- a/frontend/src/components/CardDetailsPage.tsx
+++ b/frontend/src/components/CardDetailsPage.tsx
@@ -1,15 +1,14 @@
-import {
-  faCircleInfo,
-  faChartPie,
-  faFolderOpen,
-  faCode,
-  faTags,
-  faUsers,
-  faRectangleList,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import upperFirst from 'lodash/upperFirst'
 import { useSession } from 'next-auth/react'
+import {
+  FaCircleInfo,
+  FaChartPie,
+  FaFolderOpen,
+  FaCode,
+  FaTags,
+  FaRectangleList,
+} from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import type { ExtendedSession } from 'types/auth'
 import type { DetailsCardProps } from 'types/card'
 import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
@@ -120,7 +119,7 @@ const DetailsCard = ({
         </div>
         <p className="mb-6 text-xl">{description}</p>
         {summary && (
-          <SecondaryCard icon={faCircleInfo} title={<AnchorTitle title="Summary" />}>
+          <SecondaryCard icon={FaCircleInfo} title={<AnchorTitle title="Summary" />}>
             <p>{summary}</p>
           </SecondaryCard>
         )}
@@ -128,7 +127,7 @@ const DetailsCard = ({
         {userSummary && <SecondaryCard>{userSummary}</SecondaryCard>}
         <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
           <SecondaryCard
-            icon={faRectangleList}
+            icon={FaRectangleList}
             title={<AnchorTitle title={`${upperFirst(type)} Details`} />}
             className={secondaryCardStyles}
           >
@@ -154,7 +153,7 @@ const DetailsCard = ({
             type === 'user' ||
             type === 'organization') && (
             <SecondaryCard
-              icon={faChartPie}
+              icon={FaChartPie}
               title={<AnchorTitle title="Statistics" />}
               className="md:col-span-2"
             >
@@ -194,12 +193,12 @@ const DetailsCard = ({
             {languages.length !== 0 && (
               <ToggleableList
                 items={languages}
-                icon={faCode}
+                icon={FaCode}
                 label={<AnchorTitle title="Languages" />}
               />
             )}
             {topics.length !== 0 && (
-              <ToggleableList items={topics} icon={faTags} label={<AnchorTitle title="Topics" />} />
+              <ToggleableList items={topics} icon={FaTags} label={<AnchorTitle title="Topics" />} />
             )}
           </div>
         )}
@@ -212,7 +211,7 @@ const DetailsCard = ({
                 {tags?.length > 0 && (
                   <ToggleableList
                     items={tags}
-                    icon={faTags}
+                    icon={FaTags}
                     label={<AnchorTitle title="Tags" />}
                     isDisabled={true}
                   />
@@ -220,7 +219,7 @@ const DetailsCard = ({
                 {domains?.length > 0 && (
                   <ToggleableList
                     items={domains}
-                    icon={faChartPie}
+                    icon={FaChartPie}
                     label={<AnchorTitle title="Domains" />}
                     isDisabled={true}
                   />
@@ -231,7 +230,7 @@ const DetailsCard = ({
               <div className="mb-8">
                 <ToggleableList
                   items={labels}
-                  icon={faTags}
+                  icon={FaTags}
                   label={<AnchorTitle title="Labels" />}
                   isDisabled={true}
                 />
@@ -243,13 +242,13 @@ const DetailsCard = ({
         {topContributors && (
           <TopContributorsList
             contributors={topContributors}
-            icon={faUsers}
+            icon={HiUserGroup}
             maxInitialDisplay={12}
           />
         )}
         {admins && admins.length > 0 && type === 'program' && (
           <TopContributorsList
-            icon={faUsers}
+            icon={HiUserGroup}
             contributors={admins}
             maxInitialDisplay={6}
             label="Admins"
@@ -257,7 +256,7 @@ const DetailsCard = ({
         )}
         {mentors && mentors.length > 0 && (
           <TopContributorsList
-            icon={faUsers}
+            icon={HiUserGroup}
             contributors={mentors}
             maxInitialDisplay={6}
             label="Mentors"
@@ -265,7 +264,7 @@ const DetailsCard = ({
         )}
         {mentees && mentees.length > 0 && (
           <MenteeContributorsList
-            icon={faUsers}
+            icon={HiUserGroup}
             contributors={mentees}
             maxInitialDisplay={6}
             label="Mentees"
@@ -304,13 +303,13 @@ const DetailsCard = ({
         )}
         {(type === 'project' || type === 'user' || type === 'organization') &&
           repositories.length > 0 && (
-            <SecondaryCard icon={faFolderOpen} title={<AnchorTitle title="Repositories" />}>
+            <SecondaryCard icon={FaFolderOpen} title={<AnchorTitle title="Repositories" />}>
               <RepositoryCard maxInitialDisplay={4} repositories={repositories} />
             </SecondaryCard>
           )}
         {type === 'program' && modules.length > 0 && (
           <SecondaryCard
-            icon={faFolderOpen}
+            icon={FaFolderOpen}
             title={<AnchorTitle title={modules.length === 1 ? 'Module' : 'Modules'} />}
           >
             <ModuleCard modules={modules} accessLevel={accessLevel} admins={admins} />
@@ -339,17 +338,20 @@ export const SocialLinks = ({ urls }) => {
     <div>
       <strong>Social Links</strong>
       <div className="mt-2 flex flex-wrap gap-3">
-        {urls.map((url) => (
-          <a
-            key={url}
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-400 transition-colors hover:text-gray-800 dark:hover:text-gray-200"
-          >
-            <FontAwesomeIcon icon={getSocialIcon(url)} className="h-5 w-5" />
-          </a>
-        ))}
+        {urls.map((url) => {
+          const SocialIcon = getSocialIcon(url)
+          return (
+            <a
+              key={url}
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 transition-colors hover:text-gray-800 dark:hover:text-gray-200"
+            >
+              <SocialIcon className="h-5 w-5" />
+            </a>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/frontend/src/components/ChapterMap.tsx b/frontend/src/components/ChapterMap.tsx
index b471428ffe..ca27cad9ca 100644
--- a/frontend/src/components/ChapterMap.tsx
+++ b/frontend/src/components/ChapterMap.tsx
@@ -1,10 +1,10 @@
 'use client'
-import { faLocationDot, faUnlock } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
 import L, { MarkerClusterGroup } from 'leaflet'
 import React, { useEffect, useRef, useState } from 'react'
+import { FaUnlock } from 'react-icons/fa'
+import { FaLocationDot } from 'react-icons/fa6'
 import type { Chapter } from 'types/chapter'
 import type { UserLocation } from 'utils/geolocationUtils'
 import 'leaflet.markercluster'
@@ -198,7 +198,7 @@ const ChapterMap = ({
           aria-label="Unlock map"
         >
           <p className="pointer-events-auto flex items-center gap-2 rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg transition-colors hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white">
-            <FontAwesomeIcon icon={faUnlock} aria-hidden="true" />
+            <FaUnlock aria-hidden="true" />
             Unlock map
           </p>
         </button>
@@ -220,7 +220,7 @@ const ChapterMap = ({
                 userLocation ? 'Reset location filter' : 'Share location to find nearby chapters'
               }
             >
-              <FontAwesomeIcon icon={faLocationDot} size="sm" />
+              <FaLocationDot size={14} />
             </Button>
           </Tooltip>
         )}
diff --git a/frontend/src/components/DashboardCard.tsx b/frontend/src/components/DashboardCard.tsx
index 4c6787f190..365fe975cc 100644
--- a/frontend/src/components/DashboardCard.tsx
+++ b/frontend/src/components/DashboardCard.tsx
@@ -1,12 +1,12 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
 
 const DashboardCard: React.FC<{
   readonly title: string
-  readonly icon: IconProp
+  readonly icon: IconType
   readonly stats?: string
   readonly className?: string
 }> = ({ title, icon, stats, className }) => {
@@ -16,7 +16,7 @@ const DashboardCard: React.FC<{
       className={`overflow-hidden transition-colors duration-300 hover:bg-blue-100 dark:hover:bg-blue-950 ${className}`}
     >
       <span className="flex items-center gap-2 text-2xl font-light">
-        <FontAwesomeIcon icon={icon} />
+        <IconWrapper icon={icon} />
         {stats && <p>{stats}</p>}
       </span>
     </SecondaryCard>
diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index 9bb0f888f5..569e247e7e 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@heroui/tooltip'
 import { millify } from 'millify'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import type { Icon } from 'types/icon'
 import { IconKeys, ICONS } from 'utils/data'
 
@@ -19,7 +19,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
-  // className for the FontAwesome icon
+  // className for the icon
   const iconClassName = [
     'text-gray-600 dark:text-gray-300',
     item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
@@ -35,7 +35,7 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
 
   return icons[item] ? (
     <Tooltip
-      content={`${ICONS[item as keyof typeof ICONS]?.label}`}
+      content={`${ICONS[item as IconKeys]?.label}`}
       delay={150}
       closeDelay={100}
       showArrow
@@ -44,15 +44,10 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
       <div className={containerClassName}>
         {/* Display formatted number if the value is a number */}
         <span className="text-gray-600 dark:text-gray-300">
-          {typeof icons[item] === 'number'
-            ? millify(icons[item], { precision: 1 }) // Format large numbers using 'millify' library
-            : icons[item]}
+          {typeof icons[item] === 'number' ? millify(icons[item], { precision: 1 }) : icons[item]}
         </span>
         <span>
-          <FontAwesomeIconWrapper
-            className={iconClassName}
-            icon={ICONS[item as IconKeys]?.icon} // Display corresponding icon
-          />
+          <IconWrapper className={iconClassName} icon={ICONS[item as IconKeys]?.icon} />
         </span>
       </div>
     </Tooltip>
diff --git a/frontend/src/components/DonutBarChart.tsx b/frontend/src/components/DonutBarChart.tsx
index 532c8caaa1..c610275c1b 100644
--- a/frontend/src/components/DonutBarChart.tsx
+++ b/frontend/src/components/DonutBarChart.tsx
@@ -1,7 +1,7 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import dynamic from 'next/dynamic'
 import { useTheme } from 'next-themes'
 import React from 'react'
+import type { IconType } from 'react-icons'
 import { round } from 'utils/round'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
@@ -12,7 +12,7 @@ const Chart = dynamic(() => import('react-apexcharts'), {
 })
 
 const DonutBarChart: React.FC<{
-  icon: IconProp
+  icon: IconType
   title: string
   series: number[]
 }> = ({ icon, title, series }) => {
diff --git a/frontend/src/components/EntityActions.tsx b/frontend/src/components/EntityActions.tsx
index 2af5205da3..8183d0f453 100644
--- a/frontend/src/components/EntityActions.tsx
+++ b/frontend/src/components/EntityActions.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
 import { useState, useRef, useEffect } from 'react'
+import { FaEllipsisV } from 'react-icons/fa'
 import { ProgramStatusEnum } from 'types/__generated__/graphql'
 
 interface EntityActionsProps {
@@ -105,10 +104,7 @@ const EntityActions: React.FC<EntityActionsProps> = ({
         aria-expanded={dropdownOpen}
         aria-haspopup="true"
       >
-        <FontAwesomeIcon
-          className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200"
-          icon={faEllipsisV}
-        />
+        <FaEllipsisV className="text-gray-400 hover:text-gray-500 dark:hover:text-gray-200" />
       </button>
       {dropdownOpen && (
         <div className="absolute right-0 z-20 mt-2 w-40 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index abff0939ce..54e98b3bd2 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,9 +1,8 @@
 'use client'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import Link from 'next/link'
 import { useState, useCallback } from 'react'
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa6'
 import type { Section } from 'types/section'
 import { footerIcons } from 'utils/constants'
 import { footerSections } from 'utils/constants'
@@ -36,9 +35,9 @@ export default function Footer() {
                 <h3>{section.title}</h3>
                 <div className="transition-transform duration-200 lg:hidden">
                   {openSection === section.title ? (
-                    <FontAwesomeIcon icon={faChevronUp} className="h-4 w-4" />
+                    <FaChevronUp className="h-4 w-4" />
                   ) : (
-                    <FontAwesomeIcon icon={faChevronDown} className="h-4 w-4" />
+                    <FaChevronDown className="h-4 w-4" />
                   )}
                 </div>
               </Button>
@@ -70,18 +69,21 @@ export default function Footer() {
 
         {/* Social Media Icons Section */}
         <div className="mb-0 flex flex-row justify-center gap-6">
-          {footerIcons.map((social) => (
-            <Link
-              key={social.label}
-              href={social.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`OWASP Nest ${social.label}`}
-              className="text-slate-600 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
-            >
-              <FontAwesomeIcon icon={social.icon} className="h-6 w-6" />
-            </Link>
-          ))}
+          {footerIcons.map((social) => {
+            const SocialIcon = social.icon
+            return (
+              <Link
+                key={social.label}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`OWASP Nest ${social.label}`}
+                className="text-slate-600 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+              >
+                <SocialIcon className="h-4 w-4" />
+              </Link>
+            )
+          })}
         </div>
         {/* Footer bottom section with copyright and version */}
         <div className="grid w-full place-content-center">
diff --git a/frontend/src/components/GeneralCompliantComponent.tsx b/frontend/src/components/GeneralCompliantComponent.tsx
index df4c36fbe4..c7cdfaf0ad 100644
--- a/frontend/src/components/GeneralCompliantComponent.tsx
+++ b/frontend/src/components/GeneralCompliantComponent.tsx
@@ -1,22 +1,22 @@
 'use client'
 
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { faCertificate } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import clsx from 'clsx'
 import { FC } from 'react'
+import type { IconType } from 'react-icons'
+import { FaCertificate } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 
 const GeneralCompliantComponent: FC<{
   readonly compliant: boolean
-  readonly icon: IconProp
+  readonly icon: IconType
   readonly title: string
 }> = ({ icon, compliant, title }) => {
   return (
     <Tooltip content={title} placement="top">
       <div className="group pointer-events-auto relative inline-block transition-all duration-300 ease-in-out hover:scale-105">
-        <FontAwesomeIcon
-          icon={faCertificate}
+        <IconWrapper
+          icon={FaCertificate}
           className={clsx(
             'h-14 w-14 drop-shadow-md filter transition-all group-hover:drop-shadow-lg',
             {
@@ -25,7 +25,7 @@ const GeneralCompliantComponent: FC<{
             }
           )}
         />
-        <FontAwesomeIcon
+        <IconWrapper
           icon={icon}
           className={clsx('absolute top-1/2 left-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2', {
             'text-green-900/90': compliant,
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index a1852ea15c..da728e905c 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,16 +1,18 @@
 'use client'
-import { faHeart as faRegularHeart } from '@fortawesome/free-regular-svg-icons'
-import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons'
-import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { faHeart as faSolidHeart } from '@fortawesome/free-solid-svg-icons'
-import { faStar as faSolidStar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { useIsMobile } from 'hooks/useIsMobile'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import {
+  FaRegHeart,
+  FaRegStar,
+  FaHeart as FaSolidHeart,
+  FaStar as FaSolidStar,
+  FaBars,
+  FaTimes,
+} from 'react-icons/fa'
 import { desktopViewMinWidth, headerLinks } from 'utils/constants'
 import { cn } from 'utils/utility'
 import ModeToggle from 'components/ModeToggle'
@@ -107,8 +109,8 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
         <div className="flex items-center justify-normal gap-4">
           <NavButton
             href="https://github.com/OWASP/Nest"
-            defaultIcon={faRegularStar}
-            hoverIcon={faSolidStar}
+            defaultIcon={FaRegStar}
+            hoverIcon={FaSolidStar}
             defaultIconColor="#FDCE2D"
             hoverIconColor="#FDCE2D"
             text="Star"
@@ -117,8 +119,8 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
 
           <NavButton
             href="https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest"
-            defaultIcon={faRegularHeart}
-            hoverIcon={faSolidHeart}
+            defaultIcon={FaRegHeart}
+            hoverIcon={FaSolidHeart}
             defaultIconColor="#b55f95"
             hoverIconColor="#d9156c"
             text="Sponsor"
@@ -132,11 +134,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
               className="flex h-11 w-11 items-center justify-center bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus:outline-hidden"
             >
               <span className="sr-only">Open main menu</span>
-              {mobileMenuOpen ? (
-                <FontAwesomeIcon icon={faTimes} size="2x" />
-              ) : (
-                <FontAwesomeIcon icon={faBars} className="h-6 w-6" />
-              )}
+              {mobileMenuOpen ? <FaTimes className="h-6 w-6" /> : <FaBars className="h-6 w-6" />}
             </Button>
           </div>
         </div>
@@ -217,16 +215,16 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
             {isMobile && <UserMenu isGitHubAuthEnabled={isGitHubAuthEnabled} />}
             <NavButton
               href="https://github.com/OWASP/Nest"
-              defaultIcon={faRegularStar}
-              hoverIcon={faSolidStar}
+              defaultIcon={FaRegStar}
+              hoverIcon={FaSolidStar}
               defaultIconColor="#FDCE2D"
               hoverIconColor="#FDCE2D"
               text="Star On Github"
             />
             <NavButton
               href="https://owasp.org/donate/?reponame=www-project-nest&title=OWASP+Nest"
-              defaultIcon={faRegularHeart}
-              hoverIcon={faSolidHeart}
+              defaultIcon={FaRegHeart}
+              hoverIcon={FaSolidHeart}
               defaultIconColor="#b55f95"
               hoverIconColor="#d9156c"
               text="Sponsor Us"
diff --git a/frontend/src/components/HealthMetrics.tsx b/frontend/src/components/HealthMetrics.tsx
index 5d379c6b0d..64dd3c8411 100644
--- a/frontend/src/components/HealthMetrics.tsx
+++ b/frontend/src/components/HealthMetrics.tsx
@@ -1,11 +1,6 @@
-import {
-  faExclamationCircle,
-  faCodeCommit,
-  faCodeFork,
-  faCodePullRequest,
-  faStar,
-} from '@fortawesome/free-solid-svg-icons'
 import React from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCodeCommit, FaCodeFork, FaCodePullRequest, FaStar } from 'react-icons/fa6'
 import type { HealthMetricsProps } from 'types/healthMetrics'
 import BarChart from 'components/BarChart'
 import LineChart from 'components/LineChart'
@@ -40,7 +35,7 @@ const HealthMetrics: React.FC<{ data: HealthMetricsProps[] }> = ({ data }) => {
             },
           ]}
           labels={labels}
-          icon={faExclamationCircle}
+          icon={FaExclamationCircle}
         />
         <LineChart
           title="Pull Requests Trend"
@@ -52,7 +47,7 @@ const HealthMetrics: React.FC<{ data: HealthMetricsProps[] }> = ({ data }) => {
             },
           ]}
           labels={labels}
-          icon={faCodePullRequest}
+          icon={FaCodePullRequest}
         />
       </div>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -66,7 +61,7 @@ const HealthMetrics: React.FC<{ data: HealthMetricsProps[] }> = ({ data }) => {
             },
           ]}
           labels={labels}
-          icon={faStar}
+          icon={FaStar}
         />
         <LineChart
           title="Forks Trend"
@@ -78,13 +73,13 @@ const HealthMetrics: React.FC<{ data: HealthMetricsProps[] }> = ({ data }) => {
             },
           ]}
           labels={labels}
-          icon={faCodeFork}
+          icon={FaCodeFork}
         />
       </div>
 
       <BarChart
         title="Days Since Last Commit and Release"
-        icon={faCodeCommit}
+        icon={FaCodeCommit}
         labels={['Days Since Last Commit', 'Days Since Last Release']}
         days={[data[length - 1]?.lastCommitDays ?? 0, data[length - 1]?.lastReleaseDays ?? 0]}
         requirements={[
diff --git a/frontend/src/components/InfoBlock.tsx b/frontend/src/components/InfoBlock.tsx
index b8e22fd028..494cd58cab 100644
--- a/frontend/src/components/InfoBlock.tsx
+++ b/frontend/src/components/InfoBlock.tsx
@@ -1,7 +1,7 @@
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import millify from 'millify'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { pluralize } from 'utils/pluralize'
 
 const InfoBlock = ({
@@ -14,7 +14,7 @@ const InfoBlock = ({
   value,
 }: {
   className?: string
-  icon: IconProp
+  icon: IconType
   label?: string
   pluralizedName?: string
   precision?: number
@@ -27,7 +27,7 @@ const InfoBlock = ({
 
   return (
     <div className={`flex ${className}`}>
-      <FontAwesomeIcon icon={icon} className="mt-1 mr-3 w-5" />
+      <IconWrapper icon={icon} className="mt-1 mr-3 w-5" />
       <div>
         <div className="text-sm md:text-base">
           {label && <div className="text-sm font-medium">{label}</div>}
diff --git a/frontend/src/components/InfoItem.tsx b/frontend/src/components/InfoItem.tsx
index 9bc10ca295..aa268c2bd6 100644
--- a/frontend/src/components/InfoItem.tsx
+++ b/frontend/src/components/InfoItem.tsx
@@ -1,7 +1,7 @@
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import millify from 'millify'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { pluralize } from 'utils/pluralize'
 
 const InfoItem = ({
@@ -11,7 +11,7 @@ const InfoItem = ({
   unit,
   value,
 }: {
-  icon: IconDefinition
+  icon: IconType
   pluralizedName?: string
   precision?: number
   unit: string
@@ -24,7 +24,7 @@ const InfoItem = ({
   return (
     <div className="flex items-center justify-between">
       <span className="flex items-center">
-        <FontAwesomeIcon icon={icon} className="mr-2 h-4 w-4" />
+        <IconWrapper icon={icon} className="mr-2 h-4 w-4" />
         {name}
       </span>
       <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
@@ -39,13 +39,13 @@ export const TextInfoItem = ({
   label,
   value,
 }: {
-  icon: IconDefinition
+  icon: IconType
   label: string
   value: string
 }) => {
   return (
     <div className="flex items-center gap-2 text-sm text-gray-400">
-      <FontAwesomeIcon icon={icon} className="text-xs" />
+      <IconWrapper icon={icon} className="text-xs" />
       <span className="font-medium">{label}:</span> {value}
     </div>
   )
diff --git a/frontend/src/components/ItemCardList.tsx b/frontend/src/components/ItemCardList.tsx
index 99a55f97fa..c8fd4c7403 100644
--- a/frontend/src/components/ItemCardList.tsx
+++ b/frontend/src/components/ItemCardList.tsx
@@ -1,8 +1,8 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { Tooltip } from '@heroui/tooltip'
 import Image from 'next/image'
 import Link from 'next/link'
 import React, { JSX } from 'react'
+import type { IconType } from 'react-icons'
 import type { Issue } from 'types/issue'
 import type { Milestone } from 'types/milestone'
 import type { PullRequest } from 'types/pullRequest'
@@ -20,7 +20,7 @@ const ItemCardList = ({
 }: {
   title: React.ReactNode
   data: Issue[] | Milestone[] | PullRequest[] | Release[]
-  icon?: IconProp
+  icon?: IconType
   showAvatar?: boolean
   showSingleColumn?: boolean
   renderDetails: (item: {
diff --git a/frontend/src/components/Leaders.tsx b/frontend/src/components/Leaders.tsx
index e619f83355..9f824b005e 100644
--- a/frontend/src/components/Leaders.tsx
+++ b/frontend/src/components/Leaders.tsx
@@ -1,7 +1,7 @@
-import { faPersonWalkingArrowRight, faRightToBracket } from '@fortawesome/free-solid-svg-icons'
 import { useRouter } from 'next/navigation'
 import React from 'react'
-import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import { FaPersonWalkingArrowRight, FaRightToBracket } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import type { Leader } from 'types/leader'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
@@ -23,14 +23,14 @@ const Leaders: React.FC<LeadersProps> = ({ users }) => {
   }
 
   return (
-    <SecondaryCard icon={faPersonWalkingArrowRight} title={<AnchorTitle title="Leaders" />}>
+    <SecondaryCard icon={FaPersonWalkingArrowRight} title={<AnchorTitle title="Leaders" />}>
       <div className="flex w-full flex-wrap items-stretch justify-center gap-4 p-2">
         {users.map((user) => (
           <UserCard
             key={user.member?.login || user.memberName}
             avatar={user.member?.avatarUrl}
             button={{
-              icon: <FontAwesomeIconWrapper icon={faRightToBracket} />,
+              icon: <IconWrapper icon={FaRightToBracket} />,
               label: 'View Profile',
               onclick: () => handleButtonClick(user),
             }}
diff --git a/frontend/src/components/LineChart.tsx b/frontend/src/components/LineChart.tsx
index cecb5df6ec..65ba1a3700 100644
--- a/frontend/src/components/LineChart.tsx
+++ b/frontend/src/components/LineChart.tsx
@@ -1,7 +1,7 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import dynamic from 'next/dynamic'
 import { useTheme } from 'next-themes'
 import React from 'react'
+import type { IconType } from 'react-icons'
 import type { ApexLineChartSeries } from 'types/healthMetrics'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
@@ -14,7 +14,7 @@ const LineChart: React.FC<{
   title: string
   series: ApexLineChartSeries[]
   labels?: string[]
-  icon?: IconProp
+  icon?: IconType
   round?: boolean
 }> = ({ title, series, labels, icon, round }) => {
   const { theme } = useTheme()
diff --git a/frontend/src/components/LoginPageContent.tsx b/frontend/src/components/LoginPageContent.tsx
index 29e0e30e01..281200b453 100644
--- a/frontend/src/components/LoginPageContent.tsx
+++ b/frontend/src/components/LoginPageContent.tsx
@@ -1,12 +1,10 @@
 'use client'
 
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { addToast } from '@heroui/toast'
 import { useRouter } from 'next/navigation'
 import { useSession, signIn } from 'next-auth/react'
 import { FC, useCallback, useEffect } from 'react'
+import { FaGithub, FaSpinner } from 'react-icons/fa'
 import { userAuthStatus } from 'utils/constants'
 
 type LoginPageContentProps = {
@@ -45,7 +43,7 @@ const LoginPageContent: FC<LoginPageContentProps> = ({ isGitHubAuthEnabled }) =>
   if (status === userAuthStatus.LOADING) {
     return (
       <div className="flex min-h-[80vh] items-center justify-center gap-2">
-        <FontAwesomeIcon icon={faSpinner} spin height={16} width={16} />
+        <FaSpinner className="animate-spin" height={16} width={16} />
         <span className="text-lg text-gray-500">Checking session...</span>
       </div>
     )
@@ -54,7 +52,7 @@ const LoginPageContent: FC<LoginPageContentProps> = ({ isGitHubAuthEnabled }) =>
   if (status === userAuthStatus.AUTHENTICATED) {
     return (
       <div className="flex min-h-[80vh] items-center justify-center gap-2">
-        <FontAwesomeIcon icon={faSpinner} spin height={16} width={16} />
+        <FaSpinner className="animate-spin" height={16} width={16} />
         <span className="text-lg text-gray-500">Redirecting...</span>
       </div>
     )
@@ -75,7 +73,7 @@ const LoginPageContent: FC<LoginPageContentProps> = ({ isGitHubAuthEnabled }) =>
           onClick={() => signIn('github', { callbackUrl: '/' })}
           className="flex w-full items-center justify-center gap-2 rounded-lg bg-black px-4 py-2 font-medium text-white transition-colors hover:bg-gray-900/90"
         >
-          <FontAwesomeIcon icon={faGithub} />
+          <FaGithub className="h-5 w-5" />
           Sign In with GitHub
         </button>
       </div>
diff --git a/frontend/src/components/MenteeContributorsList.tsx b/frontend/src/components/MenteeContributorsList.tsx
index 9517cd38d0..9c1d94f9b4 100644
--- a/frontend/src/components/MenteeContributorsList.tsx
+++ b/frontend/src/components/MenteeContributorsList.tsx
@@ -1,8 +1,8 @@
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import upperFirst from 'lodash/upperFirst'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
+import type { IconType } from 'react-icons'
 import type { Contributor } from 'types/contributor'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
@@ -12,7 +12,7 @@ interface MenteeContributorsListProps {
   contributors: Contributor[]
   label?: string
   maxInitialDisplay?: number
-  icon?: IconProp
+  icon?: IconType
   programKey: string
   moduleKey: string
 }
diff --git a/frontend/src/components/MenteeIssues.tsx b/frontend/src/components/MenteeIssues.tsx
index b793284a06..71c4f230fd 100644
--- a/frontend/src/components/MenteeIssues.tsx
+++ b/frontend/src/components/MenteeIssues.tsx
@@ -1,7 +1,7 @@
-import { faBug, faCheckCircle, faClock } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type React from 'react'
 import { useState } from 'react'
+import { FaBug, FaCheckCircle, FaClock } from 'react-icons/fa'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import type { Issue } from 'types/issue'
 import { formatDate } from 'utils/dateFormatter'
 import SecondaryCard from 'components/SecondaryCard'
@@ -31,11 +31,11 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
   const getStateIcon = (state: string) => {
     switch (state.toLowerCase()) {
       case 'open':
-        return faBug
+        return FaBug
       case 'closed':
-        return faCheckCircle
+        return FaCheckCircle
       default:
-        return faClock
+        return FaClock
     }
   }
 
@@ -43,8 +43,8 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
     <div className="space-y-3">
       {issues.length === 0 ? (
         <div className="py-8 text-center">
-          <FontAwesomeIcon
-            icon={activeTab === 'open' ? faBug : faCheckCircle}
+          <IconWrapper
+            icon={activeTab === 'open' ? FaBug : FaCheckCircle}
             className="mx-auto mb-2 h-8 w-8 text-gray-400"
           />
           <p className="text-gray-500">No {title.toLowerCase()} issues</p>
@@ -58,7 +58,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <div className="mb-2 flex items-center space-x-2">
-                  <FontAwesomeIcon
+                  <IconWrapper
                     icon={getStateIcon(issue.state || 'open')}
                     className="h-4 w-4 text-gray-500"
                   />
@@ -113,7 +113,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
   )
 
   return (
-    <SecondaryCard icon={faBug} title={`Issues for @${menteeHandle}`} className="gap-2">
+    <SecondaryCard icon={FaBug} title={`Issues for @${menteeHandle}`} className="gap-2">
       {/* Tab Navigation */}
       <div className="mb-4 flex border-b border-gray-200">
         <button
@@ -125,7 +125,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
               : 'border-transparent text-gray-500 hover:text-gray-700'
           }`}
         >
-          <FontAwesomeIcon icon={faBug} className="mr-2 h-4 w-4" />
+          <IconWrapper icon={FaBug} className="mr-2 h-4 w-4" />
           Open Issues ({openIssues.length})
         </button>
         <button
@@ -137,7 +137,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
               : 'border-transparent text-gray-500 hover:text-gray-700'
           }`}
         >
-          <FontAwesomeIcon icon={faCheckCircle} className="mr-2 h-4 w-4" />
+          <IconWrapper icon={FaCheckCircle} className="mr-2 h-4 w-4" />
           Closed Issues ({closedIssues.length})
         </button>
       </div>
diff --git a/frontend/src/components/MetricsPDFButton.tsx b/frontend/src/components/MetricsPDFButton.tsx
index 1a1db63d0d..bfe5d88aee 100644
--- a/frontend/src/components/MetricsPDFButton.tsx
+++ b/frontend/src/components/MetricsPDFButton.tsx
@@ -1,9 +1,8 @@
 'use client'
 
-import { faFileArrowDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import { FC } from 'react'
+import { FaFileArrowDown } from 'react-icons/fa6'
 import { fetchMetricsPDF } from 'server/fetchMetricsPDF'
 
 const MetricsPDFButton: FC<{
@@ -19,8 +18,7 @@ const MetricsPDFButton: FC<{
       closeDelay={100}
       showArrow
     >
-      <FontAwesomeIcon
-        icon={faFileArrowDown}
+      <FaFileArrowDown
         className="ml-2 h-7 w-7 cursor-pointer text-gray-500 transition-colors duration-200 hover:text-gray-700"
         onClick={async () => await fetchMetricsPDF(path, fileName)}
       />
diff --git a/frontend/src/components/Milestones.tsx b/frontend/src/components/Milestones.tsx
index 2e0102fc38..ef02809d4f 100644
--- a/frontend/src/components/Milestones.tsx
+++ b/frontend/src/components/Milestones.tsx
@@ -1,13 +1,12 @@
-import {
-  faCalendar,
-  faFolderOpen,
-  faSignsPost,
-  faCircleCheck,
-  faCircleExclamation,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/navigation'
 import React from 'react'
+import {
+  FaCalendar,
+  FaFolderOpen,
+  FaSignsPost,
+  FaCircleCheck,
+  FaCircleExclamation,
+} from 'react-icons/fa6'
 import type { Milestone } from 'types/milestone'
 import { formatDate } from 'utils/dateFormatter'
 import AnchorTitle from 'components/AnchorTitle'
@@ -36,25 +35,25 @@ const Milestones: React.FC<ProjectMilestonesProps> = ({
       }
       data={data}
       showAvatar={showAvatar}
-      icon={faSignsPost}
+      icon={FaSignsPost}
       showSingleColumn={showSingleColumn}
       renderDetails={(item) => (
         <div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+            <FaCalendar className="mr-2 h-4 w-4" />
             <span>{formatDate(item.createdAt)}</span>
           </div>
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCircleCheck} className="mr-2 h-4 w-4" />
+            <FaCircleCheck className="mr-2 h-4 w-4" />
             <span>{item.closedIssuesCount} closed</span>
           </div>
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCircleExclamation} className="mr-2 h-4 w-4" />
+            <FaCircleExclamation className="mr-2 h-4 w-4" />
             <span>{item.openIssuesCount} open</span>
           </div>
           {item?.repositoryName && (
             <div className="flex flex-1 items-center overflow-hidden">
-              <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
+              <FaFolderOpen className="mr-2 h-5 w-4" />
               <button
                 type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index d78f84f545..9fafce81b5 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,8 +1,7 @@
-import { faBolt } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal'
 import React from 'react'
+import { FaBolt } from 'react-icons/fa6'
 import type { ModalProps } from 'types/modal'
 import ActionButton from 'components/ActionButton'
 import Markdown from 'components/MarkdownWrapper'
@@ -32,8 +31,8 @@ const DialogComp: React.FC<ModalProps> = ({
           <Markdown className="text-base text-gray-600 dark:text-gray-300" content={summary} />
           {hint && (
             <div className="rounded-md p-2">
-              <p className="flex flex-row gap-2 text-xl font-semibold">
-                <FontAwesomeIcon icon={faBolt} size="xs" /> How to tackle it
+              <p className="flex flex-row items-center gap-2 text-xl font-semibold">
+                <FaBolt size={14} /> How to tackle it
               </p>
               <Markdown
                 className="p-2 text-base text-gray-800 dark:border-white dark:text-gray-200"
diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
index 335dd4ddb6..489309e6a3 100644
--- a/frontend/src/components/ModeToggle.tsx
+++ b/frontend/src/components/ModeToggle.tsx
@@ -1,10 +1,8 @@
-import { faMoon } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
 import { useTheme } from 'next-themes'
 import { useState, useEffect } from 'react'
-import Sun from 'components/icons/Sun'
+import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'
 
 export default function ModeToggle() {
   const [mounted, setMounted] = useState(false)
@@ -34,13 +32,9 @@ export default function ModeToggle() {
         >
           <div className="absolute inset-0 flex items-center justify-center">
             {theme === 'dark' ? (
-              <Sun variant="regular" className="h-5 w-5 text-white transition-all duration-300" />
+              <MdOutlineLightMode className="h-5 w-5 text-white transition-all duration-300" />
             ) : (
-              <FontAwesomeIcon
-                icon={faMoon}
-                className="h-5 w-5 transform text-white transition-all duration-300 hover:rotate-12"
-                fixedWidth
-              />
+              <MdOutlineDarkMode className="h-5 w-5 text-white transition-all duration-300" />
             )}
           </div>
         </Button>
diff --git a/frontend/src/components/ModuleCard.tsx b/frontend/src/components/ModuleCard.tsx
index 75669f283d..5837b098a4 100644
--- a/frontend/src/components/ModuleCard.tsx
+++ b/frontend/src/components/ModuleCard.tsx
@@ -1,15 +1,8 @@
-import {
-  faChevronDown,
-  faChevronUp,
-  faLevelUpAlt,
-  faCalendarAlt,
-  faHourglassHalf,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import upperFirst from 'lodash/upperFirst'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useState } from 'react'
+import { FaChevronDown, FaChevronUp, FaTurnUp, FaCalendar, FaHourglassHalf } from 'react-icons/fa6'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import { TextInfoItem } from 'components/InfoItem'
@@ -49,11 +42,11 @@ const ModuleCard = ({ modules, accessLevel, admins }: ModuleCardProps) => {
           >
             {showAllModule ? (
               <>
-                Show less <FontAwesomeIcon icon={faChevronUp} className="ml-1" />
+                Show less <FaChevronUp className="ml-1" />
               </>
             ) : (
               <>
-                Show more <FontAwesomeIcon icon={faChevronDown} className="ml-1" />
+                Show more <FaChevronDown className="ml-1" />
               </>
             )}
           </button>
@@ -73,10 +66,10 @@ const ModuleItem = ({ module, isAdmin }: { module: Module; isAdmin: boolean }) =
       >
         <TruncatedText text={module?.name} />
       </Link>
-      <TextInfoItem icon={faLevelUpAlt} label="Level" value={upperFirst(module.experienceLevel)} />
-      <TextInfoItem icon={faCalendarAlt} label="Start" value={formatDate(module.startedAt)} />
+      <TextInfoItem icon={FaTurnUp} label="Level" value={upperFirst(module.experienceLevel)} />
+      <TextInfoItem icon={FaCalendar} label="Start" value={formatDate(module.startedAt)} />
       <TextInfoItem
-        icon={faHourglassHalf}
+        icon={FaHourglassHalf}
         label="Duration"
         value={getSimpleDuration(module.startedAt, module.endedAt)}
       />
diff --git a/frontend/src/components/MultiSearch.tsx b/frontend/src/components/MultiSearch.tsx
index b70fb4611a..8ea4a5cc8f 100644
--- a/frontend/src/components/MultiSearch.tsx
+++ b/frontend/src/components/MultiSearch.tsx
@@ -1,19 +1,11 @@
-import { faAlgolia } from '@fortawesome/free-brands-svg-icons'
-import {
-  faSearch,
-  faTimes,
-  faUser,
-  faCalendar,
-  faFolder,
-  faBuilding,
-  faLocationDot,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { sendGAEvent } from '@next/third-parties/google'
 import { debounce } from 'lodash'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { FaTimes, FaSearch } from 'react-icons/fa'
+import { FaUser, FaCalendar, FaFolder, FaBuilding, FaLocationDot } from 'react-icons/fa6'
+import { SiAlgolia } from 'react-icons/si'
 import { fetchAlgoliaData } from 'server/fetchAlgoliaData'
 import type { Chapter } from 'types/chapter'
 import type { Event } from 'types/event'
@@ -207,17 +199,17 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
   const getIconForIndex = (indexName: string) => {
     switch (indexName) {
       case 'chapters':
-        return faLocationDot
+        return <FaLocationDot className="mr-2 shrink-0 text-gray-400" />
       case 'events':
-        return faCalendar
+        return <FaCalendar className="mr-2 shrink-0 text-gray-400" />
       case 'organizations':
-        return faBuilding
+        return <FaBuilding className="mr-2 shrink-0 text-gray-400" />
       case 'projects':
-        return faFolder
+        return <FaFolder className="mr-2 shrink-0 text-gray-400" />
       case 'users':
-        return faUser
+        return <FaUser className="mr-2 shrink-0 text-gray-400" />
       default:
-        return faSearch
+        return <FaSearch className="mr-2 shrink-0 text-gray-400" />
     }
   }
 
@@ -226,8 +218,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
       <div className="relative">
         {isLoaded ? (
           <>
-            <FontAwesomeIcon
-              icon={faSearch}
+            <FaSearch
               className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400"
               aria-hidden="true"
             />
@@ -247,7 +238,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
-                <FontAwesomeIcon icon={faTimes} />
+                <FaTimes />
               </button>
             )}
           </>
@@ -278,10 +269,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
                         onClick={() => handleSuggestionClick(hit, suggestion.indexName)}
                         className="flex w-full cursor-pointer items-center overflow-hidden border-none bg-transparent p-0 text-left"
                       >
-                        <FontAwesomeIcon
-                          icon={getIconForIndex(suggestion.indexName)}
-                          className="mr-2 shrink-0 text-gray-400"
-                        />
+                        {getIconForIndex(suggestion.indexName)}
                         <span className="block max-w-full truncate">{hit.name || hit.login}</span>
                       </button>
                     </li>
@@ -296,7 +284,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
               rel="noopener noreferrer"
               target="_blank"
             >
-              <FontAwesomeIcon icon={faAlgolia} className="h-3 w-3" aria-hidden="true" />
+              <SiAlgolia className="h-3 w-3" aria-hidden="true" />
               <span className="text-xs">Search by Algolia</span>
             </a>
           </div>
diff --git a/frontend/src/components/NavButton.tsx b/frontend/src/components/NavButton.tsx
index 946b1f0913..bfc91998bb 100644
--- a/frontend/src/components/NavButton.tsx
+++ b/frontend/src/components/NavButton.tsx
@@ -1,6 +1,7 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useState } from 'react'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import type { NavButtonProps } from 'types/button'
 import { cn } from 'utils/utility'
 
@@ -12,7 +13,7 @@ const NavButton = ({
   hoverIconColor,
   text,
   className,
-}: NavButtonProps) => {
+}: NavButtonProps & { defaultIcon: IconType; hoverIcon: IconType }) => {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -27,7 +28,7 @@ const NavButton = ({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <FontAwesomeIcon
+      <IconWrapper
         icon={isHovered ? hoverIcon : defaultIcon}
         className={cn({
           'scale-110 text-yellow-400': isHovered,
diff --git a/frontend/src/components/NavDropDown.tsx b/frontend/src/components/NavDropDown.tsx
index a4aadab30a..687e45e6f8 100644
--- a/frontend/src/components/NavDropDown.tsx
+++ b/frontend/src/components/NavDropDown.tsx
@@ -1,7 +1,6 @@
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useState, useRef, useEffect, useId } from 'react'
+import { FaChevronDown } from 'react-icons/fa'
 import type { Link as LinkType } from 'types/link'
 import { cn } from 'utils/utility'
 
@@ -35,7 +34,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
       ref={dropdownRef}
       className={cn(
         'dropdown navlink relative px-3 py-2 text-slate-700 hover:text-slate-800 dark:text-slate-300 dark:hover:text-slate-200',
-        link.submenu.map((sub) => sub.href).includes(pathname) &&
+        link.submenu?.map((sub) => sub.href).includes(pathname) &&
           'font-bold text-blue-800 dark:text-white'
       )}
     >
@@ -60,7 +59,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
           aria-hidden="true"
           style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
         >
-          <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3" />
+          <FaChevronDown className="h-3 w-3" />
         </span>
       </button>
       {isOpen && (
@@ -68,7 +67,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
           id={dropdownId}
           className="absolute top-full left-0 z-10 mt-1 w-48 overflow-hidden rounded-md bg-white shadow-lg dark:bg-slate-800"
         >
-          {link.submenu.map((submenu, idx) => (
+          {link.submenu?.map((submenu, idx) => (
             <Link
               key={`${submenu.href}-${idx}`}
               href={submenu.href || '/'}
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 14a92203fc..79a21e8556 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -1,7 +1,6 @@
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import React from 'react'
+import { FaEllipsis } from 'react-icons/fa6'
 
 interface PaginationProps {
   currentPage: number
@@ -77,7 +76,7 @@ const Pagination: React.FC<PaginationProps> = ({
                 role="presentation"
                 aria-label="More pages"
               >
-                <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5"></FontAwesomeIcon>
+                <FaEllipsis className="h-5 w-5" />
               </span>
             ) : (
               <Button
diff --git a/frontend/src/components/ProjectTypeDashboardCard.tsx b/frontend/src/components/ProjectTypeDashboardCard.tsx
index 8a4a2450bb..d09fabbbdc 100644
--- a/frontend/src/components/ProjectTypeDashboardCard.tsx
+++ b/frontend/src/components/ProjectTypeDashboardCard.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { FC } from 'react'
+import type { IconType } from 'react-icons'
 import SecondaryCard from 'components/SecondaryCard'
 
 const ProjectTypeDashboardCard: FC<{
   type: 'healthy' | 'needsAttention' | 'unhealthy'
   count: number
-  icon: IconProp
+  icon: IconType
 }> = ({ type, count, icon }) => {
   const titleMapping = {
     healthy: 'Healthy',
diff --git a/frontend/src/components/ProjectsDashboardDropDown.tsx b/frontend/src/components/ProjectsDashboardDropDown.tsx
index 13d80a9da7..c00b54109c 100644
--- a/frontend/src/components/ProjectsDashboardDropDown.tsx
+++ b/frontend/src/components/ProjectsDashboardDropDown.tsx
@@ -1,6 +1,3 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { faArrowDownWideShort, faArrowUpShortWide } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Dropdown,
   DropdownItem,
@@ -11,13 +8,17 @@ import {
 } from '@heroui/react'
 
 import { FC } from 'react'
+import type { IconType } from 'react-icons'
+import { FaArrowDownWideShort, FaArrowUpShortWide } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import { DropDownSectionProps } from 'types/DropDownSectionProps'
+
 const ProjectsDashboardDropDown: FC<{
   onAction: (key: string) => void
   selectedKeys?: string[]
   selectedLabels?: string[]
   selectionMode: 'single' | 'multiple'
-  icon?: IconProp
+  icon?: IconType
   isOrdering?: boolean
   buttonDisplayName: string
   sections: DropDownSectionProps[]
@@ -32,14 +33,22 @@ const ProjectsDashboardDropDown: FC<{
   selectedLabels,
 }) => {
   const orderingIconsMapping = {
-    desc: faArrowDownWideShort,
-    asc: faArrowUpShortWide,
+    desc: FaArrowDownWideShort,
+    asc: FaArrowUpShortWide,
   }
+
   return (
     <Dropdown>
       <DropdownTrigger>
         <Button variant="solid">
-          <FontAwesomeIcon icon={isOrdering ? orderingIconsMapping[selectedKeys[0]] : icon} />
+          <IconWrapper
+            icon={
+              isOrdering
+                ? orderingIconsMapping[selectedKeys?.[0] as keyof typeof orderingIconsMapping] ||
+                  FaArrowDownWideShort
+                : icon || FaArrowDownWideShort
+            }
+          />
           <div className="flex flex-col items-center">
             <span className="text-md">{buttonDisplayName}</span>
             {selectedLabels && selectedLabels.length > 0 && (
diff --git a/frontend/src/components/ProjectsDashboardNavBar.tsx b/frontend/src/components/ProjectsDashboardNavBar.tsx
index c720eb21e6..012d30cf7c 100644
--- a/frontend/src/components/ProjectsDashboardNavBar.tsx
+++ b/frontend/src/components/ProjectsDashboardNavBar.tsx
@@ -1,21 +1,21 @@
 'use client'
 
-import { faChartLine, faChartBar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Navbar, NavbarItem, NavbarContent } from '@heroui/react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import React from 'react'
+import { FaChartLine, FaChartBar } from 'react-icons/fa6'
+import { IconWrapper } from 'wrappers/IconWrapper'
 
 const NAVIGATION_ITEMS = [
   {
     label: 'Overview',
-    icon: faChartLine,
+    icon: FaChartLine,
     href: '/projects/dashboard',
   },
   {
     label: 'Metrics',
-    icon: faChartBar,
+    icon: FaChartBar,
     href: '/projects/dashboard/metrics',
   },
 ] as const
@@ -46,7 +46,7 @@ const ProjectsDashboardNavBar: React.FC = () => {
               className="text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500"
             >
               <div className="flex w-full items-center gap-2 rounded p-2 transition-colors duration-200 hover:bg-gray-200 dark:hover:bg-gray-800">
-                <FontAwesomeIcon icon={icon} className="text-xl" aria-hidden="true" />
+                <IconWrapper icon={icon} className="text-xl" aria-hidden="true" />
                 <span className="text-sm font-semibold">{label}</span>
               </div>
             </Link>
diff --git a/frontend/src/components/RecentIssues.tsx b/frontend/src/components/RecentIssues.tsx
index 90bcf71a33..d705de21c0 100644
--- a/frontend/src/components/RecentIssues.tsx
+++ b/frontend/src/components/RecentIssues.tsx
@@ -1,7 +1,6 @@
-import { faCalendar, faFolderOpen, faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/navigation'
 import React from 'react'
+import { FaCalendar, FaFolderOpen, FaCircleExclamation } from 'react-icons/fa6'
 import type { Issue } from 'types/issue'
 import { formatDate } from 'utils/dateFormatter'
 import AnchorTitle from 'components/AnchorTitle'
@@ -25,16 +24,16 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
       }
       data={data}
       showAvatar={showAvatar}
-      icon={faCircleExclamation}
+      icon={FaCircleExclamation}
       renderDetails={(item) => (
         <div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+            <FaCalendar className="mr-2 h-4 w-4" />
             <span>{formatDate(item.createdAt)}</span>
           </div>
           {item?.repositoryName && (
             <div className="flex flex-1 items-center overflow-hidden">
-              <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
+              <FaFolderOpen className="mr-2 h-5 w-4" />
               <button
                 type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
diff --git a/frontend/src/components/RecentPullRequests.tsx b/frontend/src/components/RecentPullRequests.tsx
index 31962cb001..030e9eb8fd 100644
--- a/frontend/src/components/RecentPullRequests.tsx
+++ b/frontend/src/components/RecentPullRequests.tsx
@@ -1,7 +1,6 @@
-import { faCalendar, faCodePullRequest, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/navigation'
 import React from 'react'
+import { FaCalendar, FaCodePullRequest, FaFolderOpen } from 'react-icons/fa6'
 import type { PullRequest } from 'types/pullRequest'
 import { formatDate } from 'utils/dateFormatter'
 import AnchorTitle from 'components/AnchorTitle'
@@ -24,18 +23,18 @@ const RecentPullRequests: React.FC<RecentPullRequestsProps> = ({ data, showAvata
         </div>
       }
       data={data}
-      icon={faCodePullRequest}
+      icon={FaCodePullRequest}
       showAvatar={showAvatar}
       renderDetails={(item) => (
         <div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+            <FaCalendar className="mr-2 h-4 w-4" />
             <span>{formatDate(item.createdAt)}</span>
           </div>
 
           {item?.repositoryName && (
             <div className="mr-4 flex flex-1 items-center overflow-hidden">
-              <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
+              <FaFolderOpen className="mr-2 h-5 w-4" />
               <button
                 type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
diff --git a/frontend/src/components/RecentReleases.tsx b/frontend/src/components/RecentReleases.tsx
index e98aa828c4..ae84320c94 100644
--- a/frontend/src/components/RecentReleases.tsx
+++ b/frontend/src/components/RecentReleases.tsx
@@ -1,5 +1,5 @@
-import { faTag } from '@fortawesome/free-solid-svg-icons'
 import React from 'react'
+import { FaTag } from 'react-icons/fa6'
 import type { Release as ReleaseType } from 'types/release'
 import AnchorTitle from 'components/AnchorTitle'
 import Release from 'components/Release'
@@ -18,7 +18,7 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
 }) => {
   return (
     <SecondaryCard
-      icon={faTag}
+      icon={FaTag}
       title={
         <div className="flex items-center gap-2">
           <AnchorTitle title="Recent Releases" className="flex items-center leading-none" />
diff --git a/frontend/src/components/Release.tsx b/frontend/src/components/Release.tsx
index 3069f411f1..8999978858 100644
--- a/frontend/src/components/Release.tsx
+++ b/frontend/src/components/Release.tsx
@@ -1,10 +1,9 @@
-import { faCalendar, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import React from 'react'
+import { FaCalendar, FaFolderOpen } from 'react-icons/fa6'
 import type { Release as ReleaseType } from 'types/release'
 import { formatDate } from 'utils/dateFormatter'
 import { TruncatedText } from 'components/TruncatedText'
@@ -68,11 +67,11 @@ const Release: React.FC<ReleaseProps> = ({
         </div>
         <div className="mt-2 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-400">
           <div className="mr-4 flex items-center">
-            <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
+            <FaCalendar className="mr-2 h-4 w-4" aria-hidden="true" />
             <span>{formatDate(release.publishedAt)}</span>
           </div>
           <div className="flex flex-1 items-center overflow-hidden">
-            <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
+            <FaFolderOpen className="mr-2 h-5 w-4" aria-hidden="true" />
             <button
               type="button"
               className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
diff --git a/frontend/src/components/RepositoryCard.tsx b/frontend/src/components/RepositoryCard.tsx
index c41da1e341..d43af56e1e 100644
--- a/frontend/src/components/RepositoryCard.tsx
+++ b/frontend/src/components/RepositoryCard.tsx
@@ -1,7 +1,9 @@
-import { faCodeFork, faStar, faUsers, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
 import { useState } from 'react'
+import { FaExclamationCircle } from 'react-icons/fa'
+import { FaCodeFork, FaStar } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import type { RepositoryCardListProps, RepositoryCardProps } from 'types/project'
 import InfoItem from 'components/InfoItem'
 import ShowMoreButton from 'components/ShowMoreButton'
@@ -60,16 +62,16 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
       </div>
 
       <div className="flex flex-col gap-2 text-sm">
-        <InfoItem icon={faStar} pluralizedName="Stars" unit="Star" value={details.starsCount} />
-        <InfoItem icon={faCodeFork} pluralizedName="Forks" unit="Fork" value={details.forksCount} />
+        <InfoItem icon={FaStar} pluralizedName="Stars" unit="Star" value={details.starsCount} />
+        <InfoItem icon={FaCodeFork} pluralizedName="Forks" unit="Fork" value={details.forksCount} />
         <InfoItem
-          icon={faUsers}
+          icon={HiUserGroup}
           pluralizedName="Contributors"
           unit="Contributor"
           value={details.contributorsCount}
         />
         <InfoItem
-          icon={faExclamationCircle}
+          icon={FaExclamationCircle}
           pluralizedName="Issues"
           unit="Issue"
           value={details.openIssuesCount}
diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
index 3d8f845f3d..537be9d76e 100644
--- a/frontend/src/components/ScrollToTop.tsx
+++ b/frontend/src/components/ScrollToTop.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState, useEffect, useCallback } from 'react'
+import { FaArrowUp } from 'react-icons/fa6'
 
 export default function ScrollToTop() {
   const [isVisible, setIsVisible] = useState(false)
@@ -38,7 +37,7 @@ export default function ScrollToTop() {
       aria-label="Scroll to top"
       className={`bg-owasp-blue/70 hover:bg-owasp-blue dark:bg-owasp-blue/30 hover:dark:bg-owasp-blue/50 fixed right-4 bottom-4 z-50 flex h-11 w-11 items-center justify-center rounded-full text-white shadow-lg transition-all duration-400 hover:scale-105 active:scale-100 dark:text-slate-300 ${isVisible ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'} `}
     >
-      <FontAwesomeIcon icon={faArrowUp} className="text-xl" />
+      <FaArrowUp className="text-xl" />
     </button>
   )
 }
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index 0d514e66f4..565db57798 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -1,10 +1,9 @@
-import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Skeleton } from '@heroui/skeleton'
 import { sendGTMEvent } from '@next/third-parties/google'
 import { debounce } from 'lodash'
 import { usePathname } from 'next/navigation'
 import React, { useEffect, useRef, useState, useMemo } from 'react'
+import { FaSearch, FaTimes } from 'react-icons/fa'
 
 interface SearchProps {
   isLoaded: boolean
@@ -72,9 +71,10 @@ const SearchBar: React.FC<SearchProps> = ({
       <div className="relative">
         {!isLoaded ? (
           <>
-            <FontAwesomeIcon
-              icon={faSearch}
+            <FaSearch
+              data-testid="search-icon"
               className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400"
+              aria-hidden="true"
             />
             <input
               ref={inputRef}
@@ -91,7 +91,7 @@ const SearchBar: React.FC<SearchProps> = ({
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
-                <FontAwesomeIcon icon={faTimes} />
+                <FaTimes className="h-4 w-4" aria-hidden="true" />
               </button>
             )}
           </>
diff --git a/frontend/src/components/SecondaryCard.tsx b/frontend/src/components/SecondaryCard.tsx
index 652f2535e0..750f9a4e41 100644
--- a/frontend/src/components/SecondaryCard.tsx
+++ b/frontend/src/components/SecondaryCard.tsx
@@ -1,6 +1,6 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 
 const SecondaryCard = ({
   title = '',
@@ -9,14 +9,14 @@ const SecondaryCard = ({
   className = '',
 }: {
   title?: React.ReactNode
-  icon?: IconProp
+  icon?: IconType
   children?: React.ReactNode
   className?: string
 } = {}) => (
   <div className={`mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800 ${className}`}>
     {title && (
       <h2 className="mb-4 flex flex-row items-center gap-2 text-2xl font-semibold">
-        {icon && <FontAwesomeIcon icon={icon} className="h-5 w-5" />}
+        {icon && <IconWrapper icon={icon} className="h-5 w-5" />}
         {title}
       </h2>
     )}
diff --git a/frontend/src/components/ShowMoreButton.tsx b/frontend/src/components/ShowMoreButton.tsx
index a5cc235b7a..e490355747 100644
--- a/frontend/src/components/ShowMoreButton.tsx
+++ b/frontend/src/components/ShowMoreButton.tsx
@@ -1,7 +1,6 @@
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { useState } from 'react'
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 
 const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
   const [isExpanded, setIsExpanded] = useState(false)
@@ -21,11 +20,11 @@ const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
       >
         {isExpanded ? (
           <>
-            Show less <FontAwesomeIcon icon={faChevronUp} className="ml-2 text-sm" />
+            Show less <FaChevronUp aria-hidden="true" className="ml-2 text-sm" />
           </>
         ) : (
           <>
-            Show more <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-sm" />
+            Show more <FaChevronDown area-hidden="true" className="ml-2 text-sm" />
           </>
         )}
       </Button>
diff --git a/frontend/src/components/SingleModuleCard.tsx b/frontend/src/components/SingleModuleCard.tsx
index 9f6a3a4a80..729b38b878 100644
--- a/frontend/src/components/SingleModuleCard.tsx
+++ b/frontend/src/components/SingleModuleCard.tsx
@@ -1,12 +1,11 @@
 'use client'
 
-import { faUsers } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { capitalize } from 'lodash'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useSession } from 'next-auth/react'
 import React from 'react'
+import { HiUserGroup } from 'react-icons/hi'
 import { ExtendedSession } from 'types/auth'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
@@ -44,7 +43,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
     <div className="flex flex-col gap-4 rounded-xl border border-gray-200 p-5 shadow-md dark:border-gray-700">
       <div className="flex items-center justify-between">
         <div className="flex cursor-pointer items-center gap-2">
-          <FontAwesomeIcon icon={faUsers} className="text-gray-500 dark:text-gray-300" />
+          <HiUserGroup className="text-gray-500 dark:text-gray-300" />
           <Link
             href={`${pathname}/modules/${module.key}`}
             target="_blank"
@@ -82,7 +81,7 @@ const SingleModuleCard: React.FC<SingleModuleCardProps> = ({ module, accessLevel
       {/* Mentors */}
       {module.mentors?.length > 0 && (
         <TopContributorsList
-          icon={faUsers}
+          icon={HiUserGroup}
           contributors={module.mentors}
           maxInitialDisplay={6}
           label="Mentors"
diff --git a/frontend/src/components/SnapshotCard.tsx b/frontend/src/components/SnapshotCard.tsx
index f431826bee..94e1ba733c 100644
--- a/frontend/src/components/SnapshotCard.tsx
+++ b/frontend/src/components/SnapshotCard.tsx
@@ -1,6 +1,5 @@
-import { faChevronRight, faCalendar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
+import { FaChevronRight, FaCalendar } from 'react-icons/fa6'
 import type { SnapshotCardProps } from 'types/card'
 import { formatDate } from 'utils/dateFormatter'
 
@@ -18,7 +17,7 @@ const SnapshotCard = ({ title, button, startAt, endAt }: SnapshotCardProps) => {
 
       <div className="flex flex-wrap items-center gap-2 text-gray-600 dark:text-gray-300">
         <div className="flex items-center">
-          <FontAwesomeIcon icon={faCalendar} className="mr-1 h-4 w-4" />
+          <FaCalendar className="mr-1 h-4 w-4" />
           <span>
             {formatDate(startAt)} - {formatDate(endAt)}
           </span>
@@ -27,10 +26,7 @@ const SnapshotCard = ({ title, button, startAt, endAt }: SnapshotCardProps) => {
 
       <div className="mt-auto inline-flex items-center text-sm font-medium text-blue-400">
         View Snapshot
-        <FontAwesomeIcon
-          icon={faChevronRight}
-          className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1"
-        />
+        <FaChevronRight className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1" />
       </div>
     </Button>
   )
diff --git a/frontend/src/components/SortBy.tsx b/frontend/src/components/SortBy.tsx
index c4230c318a..55ff6bc3e9 100644
--- a/frontend/src/components/SortBy.tsx
+++ b/frontend/src/components/SortBy.tsx
@@ -1,7 +1,6 @@
-import { faArrowDownWideShort, faArrowUpWideShort } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Select, SelectItem } from '@heroui/select'
 import { Tooltip } from '@heroui/tooltip'
+import { FaArrowDownWideShort, FaArrowUpWideShort } from 'react-icons/fa6'
 import type { SortByProps } from 'types/sortBy'
 
 const SortBy = ({
@@ -69,15 +68,9 @@ const SortBy = ({
             }
           >
             {selectedOrder === 'asc' ? (
-              <FontAwesomeIcon
-                icon={faArrowUpWideShort}
-                className="h-4 w-4 text-gray-600 dark:text-gray-300"
-              />
+              <FaArrowUpWideShort className="h-4 w-4 text-gray-600 dark:text-gray-300" />
             ) : (
-              <FontAwesomeIcon
-                icon={faArrowDownWideShort}
-                className="h-4 w-4 text-gray-600 dark:text-gray-300"
-              />
+              <FaArrowDownWideShort className="h-4 w-4 text-gray-600 dark:text-gray-300" />
             )}
           </button>
         </Tooltip>
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index e3cab00461..e4197813c5 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -1,13 +1,12 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { faArchive, faBan } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type React from 'react'
+import type { IconType } from 'react-icons'
+import { FaArchive, FaBan } from 'react-icons/fa'
 
 export type StatusType = 'archived' | 'inactive'
 
 interface StatusConfig {
   text: string
-  icon: IconDefinition
+  icon: IconType
   bgColor: string
   textColor: string
   borderColor: string
@@ -24,14 +23,14 @@ interface StatusBadgeProps {
   showIcon?: boolean
   size?: 'sm' | 'md' | 'lg'
   customText?: string
-  customIcon?: IconDefinition
+  customIcon?: IconType
   customTooltip?: string
 }
 
 const statusConfig: Record<StatusType, StatusConfig> = {
   archived: {
     text: 'Archived',
-    icon: faArchive,
+    icon: FaArchive,
     bgColor: 'bg-yellow-50',
     textColor: 'text-yellow-800',
     borderColor: 'border-yellow-600',
@@ -43,7 +42,7 @@ const statusConfig: Record<StatusType, StatusConfig> = {
   },
   inactive: {
     text: 'Inactive',
-    icon: faBan,
+    icon: FaBan,
     bgColor: 'bg-red-50',
     textColor: 'text-red-800',
     borderColor: 'border-red-600',
@@ -66,7 +65,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
 }) => {
   const config = statusConfig[status]
   const displayText = customText ?? config.text
-  const displayIcon = customIcon ?? config.icon
+  const DisplayIcon = customIcon ?? config.icon
   const displayTooltip = customTooltip ?? config.tooltip
 
   const sizeClasses = {
@@ -81,7 +80,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
       title={displayTooltip}
       aria-label={config.ariaLabel}
     >
-      {showIcon && <FontAwesomeIcon icon={displayIcon} className="h-3 w-3" />}
+      {showIcon && <DisplayIcon className="h-3 w-3" />}
       {displayText}
     </span>
   )
diff --git a/frontend/src/components/ToggleableList.tsx b/frontend/src/components/ToggleableList.tsx
index 85c0e65c38..27c506fc0f 100644
--- a/frontend/src/components/ToggleableList.tsx
+++ b/frontend/src/components/ToggleableList.tsx
@@ -1,8 +1,8 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
 import { useState } from 'react'
+import type { IconType } from 'react-icons'
+import { IconWrapper } from 'wrappers/IconWrapper'
 import ShowMoreButton from 'components/ShowMoreButton'
 
 const ToggleableList = ({
@@ -15,7 +15,7 @@ const ToggleableList = ({
   items: string[]
   label: React.ReactNode
   limit?: number
-  icon?: IconDefinition
+  icon?: IconType
   isDisabled?: boolean
 }) => {
   const [showAll, setShowAll] = useState(false)
@@ -30,7 +30,7 @@ const ToggleableList = ({
       <h2 className="mb-4 text-2xl font-semibold">
         <div className="flex items-center">
           <div className="flex flex-row items-center gap-2">
-            {icon && <FontAwesomeIcon icon={icon} className="mr-2 h-5 w-5" />}
+            {icon && <IconWrapper icon={icon} className="mr-2 h-5 w-5" />}
           </div>
           <span>{label}</span>
         </div>
diff --git a/frontend/src/components/TopContributorsList.tsx b/frontend/src/components/TopContributorsList.tsx
index 70d24e3dc3..d3bc34ca7f 100644
--- a/frontend/src/components/TopContributorsList.tsx
+++ b/frontend/src/components/TopContributorsList.tsx
@@ -1,8 +1,8 @@
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import upperFirst from 'lodash/upperFirst'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
+import type { IconType } from 'react-icons'
 import type { Contributor } from 'types/contributor'
 import { getMemberUrl } from 'utils/urlFormatter'
 import AnchorTitle from 'components/AnchorTitle'
@@ -18,7 +18,7 @@ const TopContributorsList = ({
   contributors: Contributor[]
   label?: string
   maxInitialDisplay?: number
-  icon?: IconProp
+  icon?: IconType
 }) => {
   const [showAllContributors, setShowAllContributors] = useState(false)
 
diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
index 7c7dec06f9..0ef856b39c 100644
--- a/frontend/src/components/UserCard.tsx
+++ b/frontend/src/components/UserCard.tsx
@@ -1,15 +1,9 @@
-import {
-  faChevronRight,
-  faFolderOpen,
-  faMedal,
-  faUser,
-  faUsers,
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button } from '@heroui/button'
 import { Tooltip } from '@heroui/tooltip'
 import millify from 'millify'
 import Image from 'next/image'
+import { FaChevronRight, FaFolderOpen, FaMedal, FaUser } from 'react-icons/fa6'
+import { HiUserGroup } from 'react-icons/hi'
 import type { UserCardProps } from 'types/card'
 
 const UserCard = ({
@@ -42,10 +36,7 @@ const UserCard = ({
             />
           ) : (
             <div className="flex h-full w-full items-center justify-center bg-gray-200 dark:bg-gray-700">
-              <FontAwesomeIcon
-                icon={faUser}
-                className="h-12 w-12 text-gray-400 dark:text-gray-500"
-              />
+              <FaUser className="h-12 w-12 text-gray-400 dark:text-gray-500" />
             </div>
           )}
         </div>
@@ -72,19 +63,19 @@ const UserCard = ({
           <div className="flex flex-wrap justify-center gap-3 px-2">
             {followersCount > 0 && (
               <div className="flex items-center gap-1 text-xs text-gray-600 sm:text-sm dark:text-gray-400">
-                <FontAwesomeIcon icon={faUsers} className="h-3.5 w-3.5" />
+                <HiUserGroup className="h-4 w-4" />
                 <span>{millify(followersCount, { precision: 1 })}</span>
               </div>
             )}
             {repositoriesCount > 0 && (
               <div className="flex items-center gap-1 text-xs text-gray-600 sm:text-sm dark:text-gray-400">
-                <FontAwesomeIcon icon={faFolderOpen} className="h-3.5 w-3.5" />
+                <FaFolderOpen className="h-3.5 w-3.5" />
                 <span>{millify(repositoriesCount, { precision: 1 })}</span>
               </div>
             )}
             {badgeCount > 0 && (
               <div className="flex items-center gap-1 text-xs text-gray-600 sm:text-sm dark:text-gray-400">
-                <FontAwesomeIcon icon={faMedal} className="h-3.5 w-3.5" aria-label="badges" />
+                <FaMedal className="h-3.5 w-3.5" aria-label="badges" />
                 <span>{millify(badgeCount, { precision: 1 })}</span>
               </div>
             )}
@@ -94,10 +85,7 @@ const UserCard = ({
 
       <div className="flex items-center justify-center text-sm font-medium text-blue-400">
         {button.label}
-        <FontAwesomeIcon
-          icon={faChevronRight}
-          className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1"
-        />
+        <FaChevronRight className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1" />
       </div>
     </Button>
   )
diff --git a/frontend/src/components/UserMenu.tsx b/frontend/src/components/UserMenu.tsx
index 086d9aa0a9..95d96f7fa1 100644
--- a/frontend/src/components/UserMenu.tsx
+++ b/frontend/src/components/UserMenu.tsx
@@ -1,13 +1,12 @@
 'use client'
 
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useDjangoSession } from 'hooks/useDjangoSession'
 import { useLogout } from 'hooks/useLogout'
 import Image from 'next/image'
 import Link from 'next/link'
 import { signIn } from 'next-auth/react'
 import { useEffect, useId, useRef, useState } from 'react'
+import { FaGithub } from 'react-icons/fa'
 import { ExtendedSession } from 'types/auth'
 
 export default function UserMenu({
@@ -50,7 +49,7 @@ export default function UserMenu({
         onClick={() => signIn('github', { callbackUrl: '/', prompt: 'login' })}
         className="group relative flex h-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-[#87a1bc] p-4 text-sm font-medium text-black hover:ring-1 hover:ring-[#b0c7de] dark:bg-slate-900 dark:text-white dark:hover:bg-slate-900/90 dark:hover:ring-[#46576b]"
       >
-        <FontAwesomeIcon icon={faGithub} />
+        <FaGithub className="h-4 w-4" />
         Sign In
       </button>
     )
diff --git a/frontend/src/types/button.ts b/frontend/src/types/button.ts
index bded6c19db..7ddeb7161a 100644
--- a/frontend/src/types/button.ts
+++ b/frontend/src/types/button.ts
@@ -1,5 +1,5 @@
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import type { JSX } from 'react'
+import type { IconType } from 'react-icons'
 
 export type Button = {
   icon?: JSX.Element
@@ -10,9 +10,9 @@ export type Button = {
 
 export type NavButtonProps = {
   className?: string
-  defaultIcon: IconDefinition
+  defaultIcon: IconType
   defaultIconColor?: string
-  hoverIcon: IconDefinition
+  hoverIcon: IconType
   hoverIconColor?: string
   href: string
   text: string
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
index 67c276df11..787c66e4a0 100644
--- a/frontend/src/types/card.ts
+++ b/frontend/src/types/card.ts
@@ -1,5 +1,5 @@
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 import type { JSX } from 'react'
+import type { IconType } from 'react-icons'
 import type { Badge } from 'types/badge'
 import type { Button } from 'types/button'
 import type { Chapter } from 'types/chapter'
@@ -22,7 +22,7 @@ export type CardProps = {
   level?: Level
   projectLink?: string
   projectName?: string
-  social?: { title: string; icon: string; url: string }[]
+  social?: { title: string; icon: IconType; url: string }[]
   summary: string
   title: string
   timeline?: {
@@ -35,7 +35,7 @@ export type CardProps = {
 }
 
 type Stats = {
-  icon: IconDefinition
+  icon: IconType
   pluralizedName?: string
   unit?: string
   value: number
diff --git a/frontend/src/types/level.ts b/frontend/src/types/level.ts
index 27f252d020..2760796409 100644
--- a/frontend/src/types/level.ts
+++ b/frontend/src/types/level.ts
@@ -1,5 +1,7 @@
+import type { IconType } from 'react-icons'
+
 export type Level = {
   color: string
-  icon: string
+  icon: IconType
   level?: string
 }
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 95f1e54f1e..2e0a970685 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -1,4 +1,6 @@
-import { faGithub, faSlack, faBluesky, faLinkedin } from '@fortawesome/free-brands-svg-icons'
+import type { IconType } from 'react-icons'
+import { FaGithub, FaSlack, FaLinkedin } from 'react-icons/fa'
+import { FaBluesky } from 'react-icons/fa6'
 import type { Link } from 'types/link'
 import type { Section } from 'types/section'
 
@@ -26,24 +28,28 @@ export const headerLinks: Link[] = [
   },
 ]
 
-export const footerIcons = [
+export const footerIcons: Array<{
+  icon: IconType
+  href: string
+  label: string
+}> = [
   {
-    icon: faBluesky,
+    icon: FaBluesky,
     href: 'https://bsky.app/profile/nest.owasp.org',
     label: 'Bluesky',
   },
   {
-    icon: faGithub,
+    icon: FaGithub,
     href: 'https://github.com/owasp/nest',
     label: 'GitHub',
   },
   {
-    icon: faLinkedin,
+    icon: FaLinkedin,
     href: 'https://www.linkedin.com/groups/14656108/',
     label: 'LinkedIn',
   },
   {
-    icon: faSlack,
+    icon: FaSlack,
     href: 'https://owasp.slack.com/archives/project-nest',
     label: 'Slack',
   },
diff --git a/frontend/src/utils/data.ts b/frontend/src/utils/data.ts
index 837ac1d829..92aef45d00 100644
--- a/frontend/src/utils/data.ts
+++ b/frontend/src/utils/data.ts
@@ -1,109 +1,58 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import type { IconType } from 'react-icons'
 import {
-  faDiscord,
-  faFacebook,
-  faGoogle,
-  faLinkedin,
-  faMeetup,
-  faSlack,
-  faXTwitter,
-  faYoutube,
-} from '@fortawesome/free-brands-svg-icons'
-import {
-  faClock,
-  faComment,
-  faLightbulb,
-  faStar,
-  faUser,
-} from '@fortawesome/free-regular-svg-icons'
-import {
-  faArrowsRotate,
-  faAward,
-  faBug,
-  faCertificate,
-  faCity,
-  faCode,
-  faCodeFork,
-  faEgg,
-  faFlag,
-  faFlask,
-  faGlobe,
-  faMedal,
-  faMoon,
-  faPeopleGroup,
-  faRibbon,
-  faRightToBracket,
-  faStar as faSolidStar,
-  faSun,
-  faWandMagicSparkles,
-  faX,
-} from '@fortawesome/free-solid-svg-icons'
+  FaDiscord,
+  FaFacebook,
+  FaGoogle,
+  FaLinkedin,
+  FaMeetup,
+  FaSlack,
+  FaXTwitter,
+  FaYoutube,
+  FaRegClock,
+  FaRegComment,
+  FaRegStar,
+  FaRegUser,
+  FaAward,
+  FaBug,
+  FaCertificate,
+  FaCity,
+  FaCodeFork,
+  FaEgg,
+  FaFlag,
+  FaFlask,
+  FaMedal,
+  FaRibbon,
+} from 'react-icons/fa6'
 
-library.add(
-  faArrowsRotate,
-  faAward,
-  faBug,
-  faCertificate,
-  faCity,
-  faClock,
-  faCode,
-  faCodeFork,
-  faComment,
-  faDiscord,
-  faEgg,
-  faFacebook,
-  faFlag,
-  faFlask,
-  faGlobe,
-  faGoogle,
-  faLightbulb,
-  faLinkedin,
-  faMedal,
-  faMeetup,
-  faMoon,
-  faPeopleGroup,
-  faRibbon,
-  faRightToBracket,
-  faSlack,
-  faStar,
-  faSun,
-  faUser,
-  faWandMagicSparkles,
-  faX,
-  faXTwitter,
-  faYoutube
-)
-
-export const BADGE_CLASS_MAP: Record<string, IconDefinition> = {
-  award: faAward,
-  bugSlash: faBug,
-  certificate: faCertificate,
-  medal: faMedal,
-  ribbon: faRibbon,
-  star: faSolidStar,
+export const BADGE_CLASS_MAP: Record<string, IconType> = {
+  award: FaAward,
+  bugSlash: FaBug,
+  certificate: FaCertificate,
+  medal: FaMedal,
+  ribbon: FaRibbon,
+  star: FaRegStar,
 } as const
 
 export const ICONS = {
   starsCount: {
     label: 'GitHub stars',
-    icon: 'fa-regular fa-star',
+    icon: FaRegStar,
   },
   forksCount: {
     label: 'GitHub forks',
-    icon: 'fa-solid fa-code-fork',
+    icon: FaCodeFork,
   },
   contributorsCount: {
     label: 'GitHub contributors',
-    icon: 'fa-regular fa-user',
+    icon: FaRegUser,
   },
   createdAt: {
     label: 'Creation date',
-    icon: 'fa-regular fa-clock',
+    icon: FaRegClock,
   },
   commentsCount: {
     label: 'Comments count',
-    icon: 'fa-regular fa-comment',
+    icon: FaRegComment,
   },
 } as const
 
@@ -112,37 +61,33 @@ export type IconKeys = keyof typeof ICONS
 export const level = {
   incubator: {
     color: '#53AAE5',
-    icon: ' text-white fa-solid fa-egg ',
+    icon: FaEgg,
     level: 'Incubator',
   },
   lab: {
     color: '#FFA500',
-    icon: ' text-white fa-solid fa-flask',
+    icon: FaFlask,
     level: 'Lab',
   },
   production: {
     color: '#800080',
-    icon: ' text-white fa-solid fa-city',
+    icon: FaCity,
     level: 'Production',
   },
   flagship: {
     color: '#38a047',
-    icon: ' text-white fa-solid fa-flag',
+    icon: FaFlag,
     level: 'Flagship',
   },
 }
 
 export const urlMappings = [
-  { key: 'youtube.com', title: 'YouTube', icon: 'fa-brands fa-youtube' },
-  {
-    key: 'x.com',
-    title: 'X (formerly Twitter)',
-    icon: 'fa-brands fa-x-twitter',
-  },
-  { key: 'google.com', title: 'Google', icon: 'fa-brands fa-google' },
-  { key: 'meetup.com', title: 'Meetup', icon: 'fa-brands fa-meetup' },
-  { key: 'linkedin.com', title: 'LinkedIn', icon: 'fa-brands fa-linkedin' },
-  { key: 'facebook.com', title: 'Facebook', icon: 'fa-brands fa-facebook' },
-  { key: 'discord.com', title: 'Discord', icon: 'fa-brands fa-discord' },
-  { key: 'slack.com', title: 'Slack', icon: 'fa-brands fa-slack' },
+  { key: 'youtube.com', title: 'YouTube', icon: FaYoutube },
+  { key: 'x.com', title: 'X (formerly Twitter)', icon: FaXTwitter },
+  { key: 'google.com', title: 'Google', icon: FaGoogle },
+  { key: 'meetup.com', title: 'Meetup', icon: FaMeetup },
+  { key: 'linkedin.com', title: 'LinkedIn', icon: FaLinkedin },
+  { key: 'facebook.com', title: 'Facebook', icon: FaFacebook },
+  { key: 'discord.com', title: 'Discord', icon: FaDiscord },
+  { key: 'slack.com', title: 'Slack', icon: FaSlack },
 ]
diff --git a/frontend/src/utils/milestoneProgress.ts b/frontend/src/utils/milestoneProgress.ts
index 544c547149..819702a1f7 100644
--- a/frontend/src/utils/milestoneProgress.ts
+++ b/frontend/src/utils/milestoneProgress.ts
@@ -1,5 +1,5 @@
-import { faCircleCheck, faClock, faUserGear } from '@fortawesome/free-solid-svg-icons'
-
+import type { IconType } from 'react-icons'
+import { FaCircleCheck, FaClock, FaUserGear } from 'react-icons/fa6'
 // helper functions used in about/page.tsx
 export const getMilestoneProgressText = (progress: number): string => {
   if (progress === 100) {
@@ -11,12 +11,12 @@ export const getMilestoneProgressText = (progress: number): string => {
   }
 }
 
-export const getMilestoneProgressIcon = (progress: number) => {
+export const getMilestoneProgressIcon = (progress: number): IconType => {
   if (progress === 100) {
-    return faCircleCheck
+    return FaCircleCheck
   } else if (progress > 0) {
-    return faUserGear
+    return FaUserGear
   } else {
-    return faClock
+    return FaClock
   }
 }
diff --git a/frontend/src/utils/urlIconMappings.ts b/frontend/src/utils/urlIconMappings.ts
index 11c5a0248a..a23a37dfda 100644
--- a/frontend/src/utils/urlIconMappings.ts
+++ b/frontend/src/utils/urlIconMappings.ts
@@ -1,50 +1,50 @@
+import type { IconType } from 'react-icons'
 import {
-  faDiscord,
-  faInstagram,
-  faLinkedin,
-  faYoutube,
-  faXTwitter,
-  faMeetup,
-  faSlack,
-  faFacebook,
-  faTelegram,
-  faGoogle,
-  faBluesky,
-  faWhatsapp,
-  faTiktok,
-  faGithub,
-  faSlideshare,
-  faSpeakerDeck,
-  faVimeo,
-  faTwitch,
-  faMedium,
-} from '@fortawesome/free-brands-svg-icons'
-import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+  FaDiscord,
+  FaInstagram,
+  FaLinkedin,
+  FaYoutube,
+  FaMeetup,
+  FaSlack,
+  FaFacebook,
+  FaTelegram,
+  FaGoogle,
+  FaWhatsapp,
+  FaTiktok,
+  FaGithub,
+  FaSlideshare,
+  FaSpeakerDeck,
+  FaVimeo,
+  FaTwitch,
+  FaMedium,
+  FaGlobe,
+} from 'react-icons/fa'
+import { FaXTwitter, FaBluesky } from 'react-icons/fa6'
 
-export const getSocialIcon = (url: string) => {
+export const getSocialIcon = (url: string): IconType => {
   const hostname = new URL(url).hostname.toLowerCase()
 
-  if (hostname.includes('discord')) return faDiscord
-  if (hostname.includes('instagram')) return faInstagram
-  if (hostname.includes('linkedin')) return faLinkedin
-  if (hostname.includes('youtube')) return faYoutube
-  if (hostname.includes('meetup')) return faMeetup
-  if (hostname.includes('slack')) return faSlack
-  if (hostname.includes('facebook')) return faFacebook
-  if (hostname.includes('telegram') || hostname.includes('t.me')) return faTelegram
-  if (hostname.includes('google')) return faGoogle
-  if (hostname.includes('bsky')) return faBluesky
-  if (hostname.includes('whatsapp')) return faWhatsapp
-  if (hostname.includes('tiktok')) return faTiktok
-  if (hostname.includes('github')) return faGithub
-  if (hostname.includes('slideshare')) return faSlideshare
-  if (hostname.includes('speakerdeck')) return faSpeakerDeck
-  if (hostname.includes('vimeo')) return faVimeo
-  if (hostname.includes('twitch')) return faTwitch
-  if (hostname.includes('medium')) return faMedium
+  if (hostname.includes('discord')) return FaDiscord
+  if (hostname.includes('instagram')) return FaInstagram
+  if (hostname.includes('linkedin')) return FaLinkedin
+  if (hostname.includes('youtube')) return FaYoutube
+  if (hostname.includes('meetup')) return FaMeetup
+  if (hostname.includes('slack')) return FaSlack
+  if (hostname.includes('facebook')) return FaFacebook
+  if (hostname.includes('telegram') || hostname.includes('t.me')) return FaTelegram
+  if (hostname.includes('google')) return FaGoogle
+  if (hostname.includes('bsky')) return FaBluesky
+  if (hostname.includes('whatsapp')) return FaWhatsapp
+  if (hostname.includes('tiktok')) return FaTiktok
+  if (hostname.includes('github')) return FaGithub
+  if (hostname.includes('slideshare')) return FaSlideshare
+  if (hostname.includes('speakerdeck')) return FaSpeakerDeck
+  if (hostname.includes('vimeo')) return FaVimeo
+  if (hostname.includes('twitch')) return FaTwitch
+  if (hostname.includes('medium')) return FaMedium
   if (hostname === 'x.com' || hostname.endsWith('.x.com') || hostname.includes('twitter')) {
-    return faXTwitter
+    return FaXTwitter
   }
 
-  return faGlobe
+  return FaGlobe
 }
diff --git a/frontend/src/utils/utility.ts b/frontend/src/utils/utility.ts
index 1fde60e2ee..21b1b25ed0 100644
--- a/frontend/src/utils/utility.ts
+++ b/frontend/src/utils/utility.ts
@@ -1,6 +1,7 @@
 import { type ClassValue, clsx } from 'clsx'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { FaGlobe } from 'react-icons/fa6'
 import { twMerge } from 'tailwind-merge'
 import { fetchCsrfToken } from 'server/fetchCsrfToken'
 
@@ -40,7 +41,7 @@ export const handleSocialUrls = (relatedUrls: string[]) => {
 
     return match
       ? { title: match.title, icon: match.icon, url }
-      : { title: 'Social Links', icon: 'fa-solid fa-globe', url }
+      : { title: 'Social Links', icon: FaGlobe, url }
   })
 }
 
diff --git a/frontend/src/wrappers/FontAwesomeIconWrapper.tsx b/frontend/src/wrappers/FontAwesomeIconWrapper.tsx
deleted file mode 100644
index f37728fe2b..0000000000
--- a/frontend/src/wrappers/FontAwesomeIconWrapper.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { IconDefinition } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
-
-type IconProp = FontAwesomeIconProps['icon']
-
-interface MyIconProps extends Omit<FontAwesomeIconProps, 'icon'> {
-  icon: string | IconDefinition
-}
-
-const FontAwesomeIconWrapper = ({ icon, ...props }: MyIconProps) => (
-  <FontAwesomeIcon icon={icon as IconProp} {...props} />
-)
-
-export default FontAwesomeIconWrapper
diff --git a/frontend/src/wrappers/IconWrapper.tsx b/frontend/src/wrappers/IconWrapper.tsx
new file mode 100644
index 0000000000..3022235019
--- /dev/null
+++ b/frontend/src/wrappers/IconWrapper.tsx
@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react'
+import type { IconType } from 'react-icons'
+
+export interface IconWrapperProps extends ComponentProps<'svg'> {
+  icon: IconType
+  size?: string | number
+}
+
+const IconWrapper = ({ icon: Icon, className, ...props }: IconWrapperProps) => (
+  <Icon className={className} {...props} />
+)
+
+export { IconWrapper }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 72ccd27a56..457f077a06 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "sourceMap": true,
     "inlineSources": true,