diff --git a/src/components/icons/assets/TwitterIcon.tsx b/src/components/icons/assets/TwitterIcon.tsx
new file mode 100644
index 000000000..6ff19009e
--- /dev/null
+++ b/src/components/icons/assets/TwitterIcon.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from "react";
+import { useTheme } from "@contexts/ThemeContext";
+
+export function TwitterIcon({
+  color,
+  ...props
+}: SVGProps<SVGSVGElement>): JSX.Element {
+  const { theme } = useTheme();
+  const fill = theme === "dark" ? "#ffffff" : "#000000";
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" {...props}>
+      <path
+        d="M10.0681 10.8965L20.8786 25.3514L10 37.1035H12.4485L21.9729 26.8141L29.6681 37.1035H38L26.581 21.8358L36.7069 10.8965H34.2584L25.4872 20.3726L18.4 10.8965H10.0681ZM13.6688 12.7004H17.4964L34.3989 35.3001H30.5712L13.6688 12.7004Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
diff --git a/src/layouts/components/Footer.tsx b/src/layouts/components/Footer.tsx
index 0dfbe1ee7..b11d5902e 100644
--- a/src/layouts/components/Footer.tsx
+++ b/src/layouts/components/Footer.tsx
@@ -8,7 +8,6 @@ import {
   FaLinkedin,
   FaReddit,
   FaTelegram,
-  FaTwitterSquare,
   FaYoutube,
 } from "react-icons/fa";
 import { Container } from "@components/commons/Container";
@@ -16,6 +15,7 @@ import { NetlifyLightLogo } from "@components/icons/NetlifyLightLogo";
 import { useSelector } from "react-redux";
 import { RootState } from "@store/index";
 import { HoverPopover } from "@components/commons/popover/HoverPopover";
+import { TwitterIcon } from "@components/icons/assets/TwitterIcon";
 
 export function Footer(): JSX.Element {
   return (
@@ -79,7 +79,7 @@ function FooterSectionSocial(): JSX.Element {
           text="Twitter"
           testId="FooterSectionSocial.Twitter"
         >
-          <FaTwitterSquare size={24} />
+          <TwitterIcon width={24} height={24} />
         </FooterSocialRow>
         <FooterSocialRow
           url="https://github.com/DeFiCh"