[Dashboard] Remove @react-icons/all-files (#4819)

kien-ngo · kien-ngo · commit a637cab0511a · 2024-09-27T03:07:36.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on updating icon components in the `dashboard` application by replacing `react-icons` with custom SVG icons for improved performance and maintainability.

### Detailed summary
- Removed `@react-icons/all-files` dependency.
- Added new SVG components: `MediumIcon`, `YoutubeIcon`, `TiktokIcon`, `TelegramIcon`, `RedditIcon`, `MetaIcon`, `InstagramIcon`.
- Updated `SupportPage`, `PublisherSocials`, `AppFooter`, and other components to use new icons.

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -45,7 +45,6 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "8.30.0",
     "@shazow/whatsabi": "^0.14.1",
     "@stripe/react-stripe-js": "^2.7.3",
diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
@@ -1,17 +1,15 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
+import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
+import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
+import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
+import { XIcon } from "components/icons/brand-icons/XIcon";
+import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
 import Link from "next/link";
-import {
-  SiDiscord,
-  SiInstagram,
-  SiLinkedin,
-  SiReddit,
-  SiTiktok,
-  SiX,
-  SiYoutube,
-} from "react-icons/si";
 
 type AppFooterProps = {
   className?: string;
@@ -40,40 +38,40 @@ export function AppFooter(props: AppFooterProps) {
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
-                <SiTiktok className="size-5 text-muted-foreground" />
+                <TiktokIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.instagram.com/thirdweb/" target="_blank">
-                <SiInstagram className="size-5 text-muted-foreground" />
+                <InstagramIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link
                 href="hhttps://www.linkedin.com/company/third-web/"
                 target="_blank"
               >
-                <SiLinkedin className="size-5 text-muted-foreground" />
+                <LinkedInIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
-                <SiYoutube className="size-5 text-muted-foreground" />
+                <YoutubeIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://discord.gg/thirdweb" target="_blank">
-                <SiDiscord className="size-5 text-muted-foreground" />
+                <DiscordIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
-                <SiReddit className="size-5 text-muted-foreground" />
+                <RedditIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://x.com/thirdweb" target="_blank">
-                <SiX className="size-5 text-muted-foreground" />
+                <XIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
           </div>
diff --git a/apps/dashboard/src/app/(dashboard)/support/page.tsx b/apps/dashboard/src/app/(dashboard)/support/page.tsx
@@ -6,11 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { SiDiscord } from "react-icons/si";
 import accountIcon from "../../../../public/assets/support/account.svg";
 import contractsIcon from "../../../../public/assets/support/contracts.png";
 import discordIllustration from "../../../../public/assets/support/discord-illustration.png";
@@ -213,7 +213,7 @@ export default function SupportPage() {
                 asChild
               >
                 <Link href="https://discord.gg/thirdweb">
-                  <SiDiscord />
+                  <DiscordIcon className="size-4" />
                   <span>Join Discord</span>
                 </Link>
               </Button>
diff --git a/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx b/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx
@@ -1,11 +1,11 @@
 import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
-import { SiFacebook } from "@react-icons/all-files/si/SiFacebook";
-import { SiMedium } from "@react-icons/all-files/si/SiMedium";
-import { SiReddit } from "@react-icons/all-files/si/SiReddit";
-import { SiTelegram } from "@react-icons/all-files/si/SiTelegram";
 import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
+import { MediumIcon } from "components/icons/brand-icons/MediumIcon";
+import { MetaIcon } from "components/icons/brand-icons/MetaIcon";
+import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
+import { TelegramIcon } from "components/icons/brand-icons/TelegramIcon";
 import { XIcon } from "components/icons/brand-icons/XIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
@@ -98,7 +98,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="medium"
-        icon={<Icon as={SiMedium} />}
+        icon={<MediumIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="medium"
       />
@@ -115,7 +115,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="telegram"
-        icon={<Icon as={SiTelegram} />}
+        icon={<TelegramIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="telegram"
       />
@@ -128,7 +128,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         href={publisherProfile.facebook}
         bg="transparent"
         aria-label="facebook"
-        icon={<Icon as={SiFacebook} />}
+        icon={<MetaIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="facebook"
       />
@@ -145,7 +145,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="reddit"
-        icon={<Icon as={SiReddit} />}
+        icon={<RedditIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="reddit"
       />
diff --git a/apps/dashboard/src/components/footer/socialLinks.tsx b/apps/dashboard/src/components/footer/socialLinks.tsx
@@ -1,10 +1,10 @@
-import { SiInstagram } from "@react-icons/all-files/si/SiInstagram";
-import { SiTiktok } from "@react-icons/all-files/si/SiTiktok";
-import { SiYoutube } from "@react-icons/all-files/si/SiYoutube";
 import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
+import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
 import { XIcon } from "components/icons/brand-icons/XIcon";
+import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
 
 interface socialLinkInfo {
   link: string;
@@ -13,12 +13,10 @@ interface socialLinkInfo {
   label?: string;
 }
 
-const socialIconSize = "1.25rem";
-
 export const SOCIALS: socialLinkInfo[] = [
   {
     link: "https://twitter.com/thirdweb",
-    icon: <XIcon fontSize={socialIconSize} className="size-5" />,
+    icon: <XIcon className="size-5" />,
     ariaLabel: "Twitter",
   },
   {
@@ -31,30 +29,30 @@ export const SOCIALS: socialLinkInfo[] = [
     link: "https://www.youtube.com/channel/UCdzMx7Zhy5va5End1-XJFbA",
     ariaLabel: "YouTube",
     label: "youtube",
-    icon: <SiYoutube fontSize={socialIconSize} />,
+    icon: <YoutubeIcon className="size-5" />,
   },
   {
     link: "https://www.linkedin.com/company/third-web/",
     ariaLabel: "LinkedIn",
     label: "linkedin",
-    icon: <LinkedInIcon fontSize={socialIconSize} className="size-5" />,
+    icon: <LinkedInIcon className="size-5" />,
   },
   {
     link: "https://www.instagram.com/thirdweb/",
     ariaLabel: "Instagram",
     label: "instagram",
-    icon: <SiInstagram fontSize={socialIconSize} />,
+    icon: <InstagramIcon className="size-5" />,
   },
   {
     link: "https://www.tiktok.com/@thirdweb",
     ariaLabel: "TikTok",
     label: "tiktok",
-    icon: <SiTiktok fontSize={socialIconSize} />,
+    icon: <TiktokIcon className="size-5" />,
   },
   {
     link: "https://github.com/thirdweb-dev",
     ariaLabel: "GitHub",
     label: "gitHub",
-    icon: <GithubIcon fontSize={socialIconSize} className="size-5" />,
+    icon: <GithubIcon className="size-5" />,
   },
 ];
diff --git a/apps/dashboard/src/components/icons/brand-icons/InstagramIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/InstagramIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const InstagramIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>Instagram</title>
+      <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/MediumIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/MediumIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const MediumIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>Medium</title>
+      <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/MetaIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/MetaIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const MetaIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>Meta</title>
+      <path d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/RedditIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/RedditIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const RedditIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>Reddit</title>
+      <path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/TelegramIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const TelegramIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>Telegram</title>
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/TiktokIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/TiktokIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const TiktokIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>TikTok</title>
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/icons/brand-icons/YoutubeIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/YoutubeIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const YoutubeIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>YouTube</title>
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
