Merge pull request #886 from notmd/lucide

Migrate all icons to Lucide
2026-06-27 16:10:30 +08:00 · 2023-01-22 22:12:45 +01:00
parent b8672e5986 204e11b400
commit 9328fa53d2
19 changed files with 93 additions and 74 deletions
@@ -33,6 +33,7 @@
        "focus-visible": "^5.2.0",
        "framer-motion": "^6.5.1",
        "install": "^0.13.0",
+        "lucide-react": "^0.105.0",
        "next": "13.0.6",
        "next-auth": "^4.18.6",
        "next-i18next": "^13.0.3",
@@ -45,7 +46,6 @@
        "react-feature-flags": "^1.0.0",
        "react-hook-form": "^7.42.1",
        "react-i18next": "^12.1.4",
-        "react-icons": "^4.7.1",
        "react-table": "^7.8.0",
        "sharp": "^0.31.3",
        "swr": "^2.0.0",
@@ -26726,6 +26726,14 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.105.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.105.0.tgz",
+      "integrity": "sha512-iHaIkd4Wq6aNIVrFMXt3If8E/+2lnJd4WlCyntoJNIzZ8nWhdSSHWpsw7XM4rlw2319LZ2t4WLdnM8Z0ECDTOQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/lz-string": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -32657,14 +32665,6 @@
        }
      }
    },
-    "node_modules/react-icons": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
-      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -57914,6 +57914,12 @@
        "yallist": "^3.0.2"
      }
    },
+    "lucide-react": {
+      "version": "0.105.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.105.0.tgz",
+      "integrity": "sha512-iHaIkd4Wq6aNIVrFMXt3If8E/+2lnJd4WlCyntoJNIzZ8nWhdSSHWpsw7XM4rlw2319LZ2t4WLdnM8Z0ECDTOQ==",
+      "requires": {}
+    },
    "lz-string": {
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -62143,12 +62149,6 @@
        "html-parse-stringify": "^3.0.1"
      }
    },
-    "react-icons": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
-      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
-      "requires": {}
-    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -50,6 +50,7 @@
    "focus-visible": "^5.2.0",
    "framer-motion": "^6.5.1",
    "install": "^0.13.0",
+    "lucide-react": "^0.105.0",
    "next": "13.0.6",
    "next-auth": "^4.18.6",
    "next-i18next": "^13.0.3",
@@ -62,7 +63,6 @@
    "react-feature-flags": "^1.0.0",
    "react-hook-form": "^7.42.1",
    "react-i18next": "^12.1.4",
-    "react-icons": "^4.7.1",
    "react-table": "^7.8.0",
    "sharp": "^0.31.3",
    "swr": "^2.0.0",
@@ -1,9 +1,10 @@
 import { Box, Link, Text, useColorMode } from "@chakra-ui/react";
+import { Github } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useId } from "react";
-import { FaDiscord, FaGithub } from "react-icons/fa";

 import { Container } from "./Container";
+import { Discord } from "./Icons/Discord";

 const CIRCLE_HEIGHT = 558;
 const CIRCLE_WIDTH = 558;
@@ -70,7 +71,7 @@ export function CallToAction() {
                type="button"
                className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              >
-                <FaDiscord size={25} />
+                <Discord size={25} />
                <Text as="span" className="text-lg ml-3">
                  {t("discord")}
                </Text>
@@ -81,7 +82,7 @@ export function CallToAction() {
                type="button"
                className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              >
-                <FaGithub size={25} />
+                <Github size={25} />
                <Text as="span" className="text-lg ml-3">
                  {t("github")}
                </Text>
@@ -25,8 +25,8 @@ import {
  useDisclosure,
 } from "@chakra-ui/react";
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { Filter } from "lucide-react";
 import { ChangeEvent, ReactNode } from "react";
-import { FaFilter } from "react-icons/fa";
 import { useDebouncedCallback } from "use-debounce";

 export type DataTableColumnDef<T> = ColumnDef<T> & {
@@ -148,7 +148,7 @@ const FilterModal = ({
    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
      <PopoverTrigger>
        <Button variant={"unstyled"} ml="2">
-          <FaFilter></FaFilter>
+          <Filter size="1em"></Filter>
        </Button>
      </PopoverTrigger>
      <PopoverContent w="fit-content">
@@ -1,11 +1,10 @@
 import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import { AlertTriangle, LucideIcon } from "lucide-react";
 import NextLink from "next/link";
-import { FiAlertTriangle } from "react-icons/fi";
-import { IconType } from "react-icons/lib";

 type EmptyStateProps = {
  text: string;
-  icon: IconType;
+  icon: LucideIcon;
 };

 export const EmptyState = (props: EmptyStateProps) => {
@@ -25,5 +24,5 @@ export const EmptyState = (props: EmptyStateProps) => {
 };

 export const TaskEmptyState = () => {
-  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+  return <EmptyState text="Looks like no tasks were found." icon={AlertTriangle} />;
 };
@@ -22,8 +22,8 @@ import {
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import { AlertCircle } from "lucide-react";
 import { useEffect, useReducer } from "react";
-import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message } from "src/types/Conversation";
@@ -154,7 +154,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
          <Box>
            <PopoverTrigger>
              <Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
-                <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
+                <AlertCircle size="20" className="text-red-400" aria-hidden="true" />
              </Box>
            </PopoverTrigger>
          </Box>
@@ -1,10 +1,10 @@
 import { Box, Button, Flex, Text } from "@chakra-ui/react";
+import { User } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
-import { FaUser } from "react-icons/fa";
 import { LanguageSelector } from "src/components/LanguageSelector";

 import { UserMenu } from "./UserMenu";
@@ -17,7 +17,7 @@ function AccountButton() {
  return (
    <Link href="/auth/signin" aria-label="Home">
      <Flex alignItems="center">
-        <Button variant="outline" leftIcon={<FaUser />}>
+        <Button variant="outline" leftIcon={<User size={"20"} />}>
          Sign in
        </Button>
      </Flex>
@@ -11,11 +11,11 @@ import {
  Text,
  useColorModeValue,
 } from "@chakra-ui/react";
+import { AlertTriangle, Layout, LogOut, Settings, Shield } from "lucide-react";
 import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
-import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";

 interface MenuOption {
  name: string;
@@ -41,21 +41,21 @@ export function UserMenu() {
      name: t("dashboard"),
      href: "/dashboard",
      desc: t("dashboard"),
-      icon: FiLayout,
+      icon: Layout,
      isExternal: false,
    },
    {
      name: t("account_settings"),
      href: "/account",
      desc: t("account_settings"),
-      icon: FiSettings,
+      icon: Settings,
      isExternal: false,
    },
    {
      name: t("report_a_bug"),
      href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
      desc: t("report_a_bug"),
-      icon: FiAlertTriangle,
+      icon: AlertTriangle,
      isExternal: true,
    },
  ];
@@ -65,7 +65,7 @@ export function UserMenu() {
      name: t("admin_dashboard"),
      href: "/admin",
      desc: t("admin_dashboard"),
-      icon: FiShield,
+      icon: Shield,
      isExternal: false,
    });
  }
@@ -98,7 +98,7 @@ export function UserMenu() {
              _hover={{ textDecoration: "none" }}
            >
              <MenuItem gap="3" borderRadius="md" p="4">
-                <item.icon className="text-blue-500" aria-hidden="true" />
+                <item.icon size="1em" className="text-blue-500" aria-hidden="true" />
                <Text>{item.name}</Text>
              </MenuItem>
            </Link>
@@ -106,7 +106,7 @@ export function UserMenu() {
        </MenuGroup>
        <MenuDivider />
        <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
-          <FiLogOut className="text-blue-500" aria-hidden="true" />
+          <LogOut size="1em" className="text-blue-500" aria-hidden="true" />
          <Text>{t("sign_out")}</Text>
        </MenuItem>
      </MenuList>
@@ -0,0 +1,16 @@
+import { LucideIcon } from "lucide-react";
+
+export const Discord: LucideIcon = ({ size = 24, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 127.14 96.36"
+      fill="currentColor"
+      height={size}
+      width={size}
+      {...rest}
+    >
+      <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
+    </svg>
+  );
+};
@@ -1,8 +1,8 @@
 // https://nextjs.org/docs/basic-features/layouts

 import { Box, Grid } from "@chakra-ui/react";
+import { Activity, BarChart2, Layout, MessageSquare, Users } from "lucide-react";
 import type { NextPage } from "next";
-import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers, FiActivity } from "react-icons/fi";
 import { Header } from "src/components/Header";

 import { SlimFooter } from "./Dashboard/SlimFooter";
@@ -38,19 +38,19 @@ export const getDashboardLayout = (page: React.ReactElement) => (
          label: "Dashboard",
          pathname: "/dashboard",
          desc: "Dashboard Home",
-          icon: FiLayout,
+          icon: Layout,
        },
        {
          label: "Messages",
          pathname: "/messages",
          desc: "Messages Dashboard",
-          icon: FiMessageSquare,
+          icon: MessageSquare,
        },
        {
          label: "Leaderboard",
          pathname: "/leaderboard",
          desc: "User Leaderboard",
-          icon: FiBarChart2,
+          icon: BarChart2,
        },
      ]}
    >
@@ -73,13 +73,13 @@ export const getAdminLayout = (page: React.ReactElement) => (
          label: "Users",
          pathname: "/admin",
          desc: "Users Dashboard",
-          icon: FiUsers,
+          icon: Users,
        },
        {
          label: "Status",
          pathname: "/admin/status",
          desc: "Status Dashboard",
-          icon: FiActivity,
+          icon: Activity,
        },
      ]}
    >
@@ -1,15 +1,14 @@
 import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { LucideIcon, Sun } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { FiSun } from "react-icons/fi";
-import { IconType } from "react-icons/lib";
 import { colors } from "styles/Theme/colors";

 export interface MenuButtonOption {
  label: string;
  pathname: string;
  desc: string;
-  icon: IconType;
+  icon: LucideIcon;
 }

 export interface SideMenuProps {
@@ -47,7 +46,7 @@ export function SideMenu(props: SideMenuProps) {
                  bg={router.pathname === item.pathname ? "blue.500" : null}
                  _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
                >
-                  <item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                  <item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : null} />
                  <Text
                    fontWeight="normal"
                    color={router.pathname === item.pathname ? "white" : null}
@@ -63,7 +62,7 @@ export function SideMenu(props: SideMenuProps) {
        <div>
          <Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
            <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
-              <FiSun />
+              <Sun size={"1em"} />
              <Text fontWeight="normal" className="hidden lg:block">
                {colorMode === "light" ? "Dark Mode" : "Light Mode"}
              </Text>
@@ -1,8 +1,8 @@
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
 import { PropsWithChildren, useState } from "react";
-import { RxDragHandleDots2 } from "react-icons/rx";

 export const SortableItem = ({
  children,
@@ -45,7 +45,7 @@ export const SortableItem = ({
      style={style}
      shadow="base"
    >
-      <Box pr="4">{isEditable ? <RxDragHandleDots2 size="20px" /> : `${index + 1}.`}</Box>
+      <Box pr="4">{isEditable ? <GripVertical size="20px" /> : `${index + 1}.`}</Box>
      {children}
    </Box>
  );
@@ -1,5 +1,5 @@
 import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
-import { FiEdit2 } from "react-icons/fi";
+import { Edit2 } from "lucide-react";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -36,7 +36,13 @@ export const TaskControls = (props: TaskControlsProps) => {
        {props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
          <>
            <Tooltip label="Edit">
-              <IconButton size="lg" data-cy="edit" aria-label="edit" onClick={props.onEdit} icon={<FiEdit2 />} />
+              <IconButton
+                size="lg"
+                data-cy="edit"
+                aria-label="edit"
+                onClick={props.onEdit}
+                icon={<Edit2 size="1em" />}
+              />
            </Tooltip>
            <SubmitButton
              colorScheme="green"
@@ -1,5 +1,5 @@
 import { HStack, IconButton, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
-import { FiHelpCircle } from "react-icons/fi";
+import { HelpCircle } from "lucide-react";
 import type { TaskInfo } from "src/components/Tasks/TaskTypes";

 interface TaskHeaderProps {
@@ -22,7 +22,7 @@ const TaskHeader = ({ taskType }: TaskHeaderProps) => {
          {taskType.label}
        </Text>
        <Link href={taskType.help_link} isExternal>
-          <IconButton variant="ghost" aria-label="More Information" icon={<FiHelpCircle />} />
+          <IconButton variant="ghost" aria-label="More Information" icon={<HelpCircle size="1em" />} />
        </Link>
      </HStack>
      <Text fontSize="md" color={labelColor}>
@@ -1,8 +1,8 @@
 import { IconButton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
+import { Pencil } from "lucide-react";
 import Link from "next/link";
 import { memo, useState } from "react";
-import { FaPen } from "react-icons/fa";
 import { get } from "src/lib/api";
 import { FetchUsersResponse } from "src/lib/oasst_api_client";
 import type { User } from "src/types/Users";
@@ -49,7 +49,7 @@ const columns: DataTableColumnDef<User>[] = [
        as={Link}
        href={`/admin/manage_user/${getValue()}`}
        aria-label="Manage"
-        icon={<FaPen></FaPen>}
+        icon={<Pencil size="1em"></Pencil>}
      ></IconButton>
    ),
    header: "Update",
@@ -1,6 +1,6 @@
 import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
 import Head from "next/head";
-import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -13,12 +13,12 @@ function Error() {
        <meta name="404" content="Sorry, this page doesn't exist." />
      </Head>
      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
-        <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />
+        <EmptyState text="Sorry, the page you are looking for does not exist." icon={AlertTriangle} />
        <Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
          <Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
          <Button
            width="fit-content"
-            leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
+            leftIcon={<AlertTriangle size={"1em"} className="text-blue-500" aria-hidden="true" />}
            variant="solid"
            size="xs"
          >
@@ -1,6 +1,6 @@
 import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
+import { AlertTriangle } from "lucide-react";
 import Head from "next/head";
-import { FiAlertTriangle } from "react-icons/fi";
 import { EmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -13,15 +13,12 @@ function ServerError() {
        <meta name="404" content="Sorry, this page doesn't exist." />
      </Head>
      <Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
-        <EmptyState
-          text="Sorry, we encountered a server error. We're not sure what went wrong."
-          icon={FiAlertTriangle}
-        />
+        <EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={AlertTriangle} />
        <Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
          <Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
          <Button
            width="fit-content"
-            leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
+            leftIcon={<AlertTriangle size="1em" className="text-blue-500" aria-hidden="true" />}
            variant="solid"
            size="xs"
          >
@@ -1,10 +1,10 @@
-import { Button, Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
+import { Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import React from "react";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
-import { MdOutlineEdit } from "react-icons/md";
+import { Pencil } from "lucide-react";
 import { SurveyCard } from "src/components/Survey/SurveyCard";

 export default function Account() {
@@ -34,7 +34,7 @@ export default function Account() {
              <Flex gap={2}>
                {session.user.name ?? "(No username)"}
                <Link href="/account/edit">
-                  <Icon boxSize={5} as={MdOutlineEdit} />
+                  <Icon boxSize={5} as={Pencil} size="1em" />
                </Link>
              </Flex>
              <Text as="b">Email</Text>
@@ -1,17 +1,18 @@
 import { Button, ButtonProps, Input, Stack, useColorModeValue } from "@chakra-ui/react";
 import { useColorMode } from "@chakra-ui/react";
+import { Bug, Github, Mail } from "lucide-react";
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ClientSafeProvider, getProviders, signIn } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { AuthLayout } from "src/components/AuthLayout";
 import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
+import { Discord } from "src/components/Icons/Discord";
 import { Role, RoleSelect } from "src/components/RoleSelect";

 export type SignInErrorTypes =
@@ -89,7 +90,7 @@ function Signin({ providers }: SigninProps) {
                  placeholder="Email Address"
                  {...register("email")}
                />
-                <SigninButton data-cy="signin-email-button" leftIcon={<FaEnvelope />}>
+                <SigninButton data-cy="signin-email-button" leftIcon={<Mail />}>
                  Continue with Email
                </SigninButton>
              </Stack>
@@ -103,7 +104,7 @@ function Signin({ providers }: SigninProps) {
                bg: "#454FBF",
              }}
              size="lg"
-              leftIcon={<FaDiscord />}
+              leftIcon={<Discord />}
              color="white"
              onClick={() => signIn(discord.id, { callbackUrl: "/" })}
              // isDisabled="false"
@@ -119,7 +120,7 @@ function Signin({ providers }: SigninProps) {
                bg: "#101010",
              }}
              size={"lg"}
-              leftIcon={<FaGithub />}
+              leftIcon={<Github />}
              colorScheme="blue"
              // isDisabled="false"
            >
@@ -165,7 +166,7 @@ const SigninButton = (props: ButtonProps) => {
  return (
    <Button
      size={"lg"}
-      leftIcon={<FaEnvelope />}
+      leftIcon={<Mail />}
      type="submit"
      colorScheme={buttonColorScheme}
      color="white"
@@ -203,7 +204,7 @@ const DebugSigninForm = ({ credentials, bgColorClass }: { credentials: ClientSaf
      <Stack>
        <Input variant="outline" size="lg" placeholder="Username" {...register("username")} />
        <RoleSelect {...register("role")}></RoleSelect>
-        <SigninButton leftIcon={<FaBug />}>Continue with Debug User</SigninButton>
+        <SigninButton leftIcon={<Bug />}>Continue with Debug User</SigninButton>
      </Stack>
    </form>
  );