diff --git a/website/package-lock.json b/website/package-lock.json
index 5c5dc795..65fde28e 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -32,6 +32,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",
@@ -26694,6 +26695,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",
@@ -57869,6 +57878,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",
diff --git a/website/package.json b/website/package.json
index 8866a9e2..c0195163 100644
--- a/website/package.json
+++ b/website/package.json
@@ -49,6 +49,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",
diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index e374a471..ddeed6b7 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -1,7 +1,8 @@
 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 { FaDiscord } from "react-icons/fa";
 
 import { Container } from "./Container";
 
@@ -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>
diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
index 14715518..d2acea7f 100644
--- a/website/src/components/EmptyState.tsx
+++ b/website/src/components/EmptyState.tsx
@@ -1,11 +1,10 @@
 import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { AlertTriangle, LucideIcon } from "lucide-react";
 import { useRouter } from "next/router";
-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) => {
@@ -26,5 +25,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} />;
 };
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index 64614578..0d70a442 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -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>
diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 6fdde69e..bc2a377e 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -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>
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index 55085550..1b5bf430 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -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,
         },
       ]}
     >
diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
index 3722eaa8..10e83ce4 100644
--- a/website/src/components/SideMenu.tsx
+++ b/website/src/components/SideMenu.tsx
@@ -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>
diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx
index ca6176c1..615bfb3f 100644
--- a/website/src/components/Sortable/SortableItem.tsx
+++ b/website/src/components/Sortable/SortableItem.tsx
@@ -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>
   );
diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx
index c45b5ce0..81c8df2a 100644
--- a/website/src/components/Survey/TaskControls.tsx
+++ b/website/src/components/Survey/TaskControls.tsx
@@ -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"
diff --git a/website/src/components/Tasks/TaskHeader/TaskHeader.tsx b/website/src/components/Tasks/TaskHeader/TaskHeader.tsx
index 33c2bd97..b2dbd817 100644
--- a/website/src/components/Tasks/TaskHeader/TaskHeader.tsx
+++ b/website/src/components/Tasks/TaskHeader/TaskHeader.tsx
@@ -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}>
diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx
index d4c58b54..0af430b0 100644
--- a/website/src/pages/404.tsx
+++ b/website/src/pages/404.tsx
@@ -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"
           >
diff --git a/website/src/pages/500.tsx b/website/src/pages/500.tsx
index 378bdfff..cb326168 100644
--- a/website/src/pages/500.tsx
+++ b/website/src/pages/500.tsx
@@ -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"
           >
diff --git a/website/src/pages/account/index.tsx b/website/src/pages/account/index.tsx
index 88964b3b..25d28bd0 100644
--- a/website/src/pages/account/index.tsx
+++ b/website/src/pages/account/index.tsx
@@ -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>