Main

package.json

@@ -22,6 +22,7 @@
     "workbox-strategies": "^6.5.4"
   },
   "devDependencies": {
+    "@iconify/react": "^4.1.0",
     "react-scripts": "^5.0.1"
   },
   "scripts": {

src/components/Hero.jsx

@@ -3,7 +3,7 @@ import { selectData } from "../pages/homeSlice";
 import { Link } from "react-scroll";
 import styled from "styled-components";
 // Icons
-import { FaChevronCircleDown } from "react-icons/fa";
+import { Icon } from '@iconify/react';
 // Media
 import Logo from "../images/logo.svg";
 import { Light, Dark } from "../data";
@@ -104,7 +104,7 @@ export default function Hero() {
         <Row className="align-items-end down-container">
           <Col className="m-4 text-center">
             <Link to={"About"} className="link-icons">
-              <FaChevronCircleDown />
+            <Icon icon="fa6-solid:circle-chevron-down" />
             </Link>
           </Col>
         </Row>

src/components/Projects.jsx

@@ -12,7 +12,7 @@ import styled from "styled-components";
 // Data
 import { filteredProjects } from "../data";
 // Icons
-import { FaGithub } from "react-icons/fa";
+import { Icon } from '@iconify/react';
 // Components
 import { Button, Col, Container, Row } from "react-bootstrap";
 import { Title, Loading } from "./globalStyledComponents";
@@ -98,7 +98,7 @@ export default function Projects() {
                         theme === "light" ? "outline-dark" : "outline-light"
                       }
                     >
-                      All <FaGithub /> Projects
+                      All <Icon icon="icomoon-free:github" /> Projects
                     </Button>
                   </Link>
                 </Container>

src/components/SocialLinks.jsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 // Data
 import { Blog } from "../data";
 // Icons
-import { FaGithub } from "react-icons/fa";
+import { Icon } from '@iconify/react';
 
 const StyledSocialLinks = styled.div`
   a {
@@ -23,7 +23,7 @@ export default function SocialLinks() {
         aria-label="Check out my GitHub profile."
         className="link-icons"
       >
-        <FaGithub />
+        <Icon icon="icomoon-free:github" />
       </a>
       {blog && (
         <a href={blog} aria-label="External link" className="link-icons">

src/components/StyledCard.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 // Icons
-import { FaGithub } from "react-icons/fa";
+import { Icon } from '@iconify/react';
 // Media
 import GH from "../images/GH.svg";
 // Components
@@ -40,7 +40,7 @@ export default function StyledCard({ theme, image, name, description, url }) {
         <Card.Footer className="text-center">
           <Card.Link href={url}>
             {"View on GitHub "}
-            <FaGithub />
+            <Icon icon="icomoon-free:github" />
           </Card.Link>
         </Card.Footer>
       </Card>

src/components/globalStyledComponents.jsx

@@ -3,8 +3,7 @@ import { useAppContext } from "../appContext";
 import styled, { keyframes } from "styled-components";
 import { Link } from "react-scroll/modules";
 // Icons
-import { GiSunflower, GiMoon } from "react-icons/gi";
-import { FaChevronCircleUp } from "react-icons/fa";
+import { Icon } from '@iconify/react';
 
 // Animations
 export const Spin = keyframes`
@@ -83,7 +82,7 @@ export function ToggleSwitch() {
           closeExpanded();
         }}
       />
-      <div>{theme === "light" ? <GiSunflower /> : <GiMoon />}</div>
+      <div>{theme === "light" ? <Icon icon="game-icons:sunflower" /> : <Icon icon="game-icons:moon" />}</div>
     </StyledSwitch>
   );
 }
@@ -151,7 +150,7 @@ export function BackToTop({ home }) {
   return (
     <StyledDiv ref={up}>
       <Link to={home} className="link-icons">
-        <FaChevronCircleUp />
+        <Icon icon="fa6-solid:circle-chevron-up" />
       </Link>
     </StyledDiv>
   );

src/data.js

@@ -1,14 +1,5 @@
 // Skills icons - https://react-icons.github.io/react-icons/
-import {
-  FaHtml5,
-  FaCss3Alt,
-  FaBootstrap,
-  FaReact,
-  FaGitAlt,
-  FaGithubSquare,
-  FaLink,
-} from "react-icons/fa";
-import { SiJavascript, SiStyledcomponents, SiRedux } from "react-icons/si";
+import { Icon } from "@iconify/react";
 
 // Projects Images (add your images to the images directory and import below)
 import Logo from "./images/logo.svg";
@@ -27,7 +18,7 @@ export { HeroDark as Dark };
 export const githubUsername = "Your GitHub username here";
 
 // Blog link icon (imported above)
-export const Blog = <FaLink />;
+export const Blog = <Icon icon="ph:link-bold" />;
 
 /* About Me
  **************************************************************
@@ -43,47 +34,47 @@ export const moreInfo =
 export const skillData = [
   {
     id: 1,
-    skill: <FaHtml5 className="display-4" />,
+    skill: <Icon icon="mdi:language-html5" className="display-4" />,
     name: "HTML5",
   },
   {
     id: 2,
-    skill: <FaCss3Alt className="display-4" />,
+    skill: <Icon icon="ion:logo-css3" className="display-4" />,
     name: "CSS3",
   },
   {
     id: 3,
-    skill: <SiJavascript className="display-4" />,
+    skill: <Icon icon="fa6-brands:js" className="display-4" />,
     name: "JavaScript",
   },
   {
     id: 4,
-    skill: <FaBootstrap className="display-4" />,
+    skill: <Icon icon="ri:bootstrap-fill" className="display-4" />,
     name: "BootStrap",
   },
   {
     id: 5,
-    skill: <FaReact className="display-4" />,
+    skill: <Icon icon="mdi:react" className="display-4" />,
     name: "React",
   },
   {
     id: 6,
-    skill: <SiStyledcomponents className="display-4" />,
+    skill: <Icon icon="file-icons:styledcomponents" className="display-4" />,
     name: "Styled Components",
   },
   {
     id: 7,
-    skill: <SiRedux className="display-4" />,
+    skill: <Icon icon="akar-icons:redux-fill" className="display-4" />,
     name: "Redux",
   },
   {
     id: 8,
-    skill: <FaGitAlt className="display-4" />,
+    skill: <Icon icon="bi:git" className="display-4" />,
     name: "Git",
   },
   {
     id: 9,
-    skill: <FaGithubSquare className="display-4" />,
+    skill: <Icon icon="fa6-brands:square-github" className="display-4" />,
     name: "GitHub",
   },
 ];

src/pages/AllProjects.jsx

@@ -6,7 +6,7 @@ import { selectData, selectError, selectIsLoading } from "./allProjectsSlice";
 import { Element } from "react-scroll";
 import styled from "styled-components";
 // Icons
-import { FaGithub, FaSearch } from "react-icons/fa";
+import { Icon } from "@iconify/react";
 // Components
 import {
   Col,
@@ -134,7 +134,7 @@ export default function AllProjects() {
             <Container className="d-flex">
               <Title>
                 <h2>
-                  All <FaGithub /> Projects
+                  All <Icon icon="mdi:github" /> Projects
                 </h2>
                 <div className="underline"></div>
               </Title>
@@ -154,7 +154,7 @@ export default function AllProjects() {
             <Container className="d-flex">
               <Title>
                 <h2>
-                  All <FaGithub /> Projects
+                  All <Icon icon="mdi:github" /> Projects
                 </h2>
                 <div className="underline"></div>
               </Title>
@@ -176,15 +176,15 @@ export default function AllProjects() {
             <Container className="d-flex">
               <Title>
                 <h2>
-                  All <FaGithub /> Projects
+                  All <Icon icon="mdi:github" /> Projects
                 </h2>
                 <div className="underline"></div>
               </Title>
             </Container>
             <Container>
               <InputGroup className="mx-auto mb-3">
                 <InputGroup.Text id="search">
-                  <FaSearch />
+                <Icon icon="ic:round-search" />
                 </InputGroup.Text>
                 <FormControl
                   placeholder="Project name"