Updated icons + Minor UI Tweaks (#5427)

* feat: 💄 updated icons + minor ui tweaks * revert: 💄 removes ui tweaks * revert: 💄 removed more ui tweaks removed more ui tweaks and a commented-out icon import * style: 🚨 satisfy the linter --------- Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
2024-08-30 20:32:17 +00:00 · 2024-01-06 20:14:44 -07:00 · 2024-01-06 20:14:44 -07:00 · 5779542084
commit 5779542084
parent ebda81e96e
57 changed files with 281 additions and 234 deletions
--- a/invokeai/frontend/web/src/common/components/InvTabs/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvTabs/theme.ts
@ -42,9 +42,9 @@ const line = definePartsStyle(() => ({
    px: 4,
    py: 1,
    fontSize: 'sm',
-    color: 'base.400',
+    color: 'base.200',
    _selected: {
-      color: 'blue.400',
+      color: 'blue.200',
    },
  },
  tabpanel: {
--- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
@ -6,7 +6,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { PiTrashSimpleFill } from 'react-icons/pi';

 const ClearCanvasHistoryButtonModal = () => {
  const isStaging = useAppSelector(isStagingSelector);
@ -23,7 +23,7 @@ const ClearCanvasHistoryButtonModal = () => {
      <InvButton
        onClick={onOpen}
        size="sm"
-        leftIcon={<FaTrash />}
+        leftIcon={<PiTrashSimpleFill />}
        isDisabled={isStaging}
      >
        {t('unifiedCanvas.clearCanvasHistory')}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@ -19,14 +19,14 @@ import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaCheck,
-  FaEye,
-  FaEyeSlash,
-  FaSave,
-  FaTimes,
-} from 'react-icons/fa';
+  PiArrowLeftBold,
+  PiArrowRightBold,
+  PiCheckBold,
+  PiEyeBold,
+  PiEyeSlashBold,
+  PiFloppyDiskBold,
+  PiXBold,
+} from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';

 const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
@ -140,7 +140,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.previous')} (Left)`}
          aria-label={`${t('unifiedCanvas.previous')} (Left)`}
-          icon={<FaArrowLeft />}
+          icon={<PiArrowLeftBold />}
          onClick={handlePrevImage}
          colorScheme="invokeBlue"
          isDisabled={!shouldShowStagingImage}
@ -154,7 +154,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.next')} (Right)`}
          aria-label={`${t('unifiedCanvas.next')} (Right)`}
-          icon={<FaArrowRight />}
+          icon={<PiArrowRightBold />}
          onClick={handleNextImage}
          colorScheme="invokeBlue"
          isDisabled={!shouldShowStagingImage}
@ -164,7 +164,7 @@ const IAICanvasStagingAreaToolbar = () => {
        <InvIconButton
          tooltip={`${t('unifiedCanvas.accept')} (Enter)`}
          aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
-          icon={<FaCheck />}
+          icon={<PiCheckBold />}
          onClick={handleAccept}
          colorScheme="invokeBlue"
        />
@ -180,7 +180,7 @@ const IAICanvasStagingAreaToolbar = () => {
              : t('unifiedCanvas.showResultsOff')
          }
          data-alert={!shouldShowStagingImage}
-          icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
+          icon={shouldShowStagingImage ? <PiEyeBold /> : <PiEyeSlashBold />}
          onClick={handleToggleShouldShowStagingImage}
          colorScheme="invokeBlue"
        />
@ -188,14 +188,14 @@ const IAICanvasStagingAreaToolbar = () => {
          tooltip={t('unifiedCanvas.saveToGallery')}
          aria-label={t('unifiedCanvas.saveToGallery')}
          isDisabled={!imageDTO || !imageDTO.is_intermediate}
-          icon={<FaSave />}
+          icon={<PiFloppyDiskBold />}
          onClick={handleSaveToGallery}
          colorScheme="invokeBlue"
        />
        <InvIconButton
          tooltip={t('unifiedCanvas.discardAll')}
          aria-label={t('unifiedCanvas.discardAll')}
-          icon={<FaTimes />}
+          icon={<PiXBold />}
          onClick={handleDiscardStagingArea}
          colorScheme="error"
          fontSize={20}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@ -25,7 +25,11 @@ import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaMask, FaSave, FaTrash } from 'react-icons/fa';
+import {
+  PiExcludeBold,
+  PiFloppyDiskBackFill,
+  PiTrashSimpleFill,
+} from 'react-icons/pi';

 const IAICanvasMaskOptions = () => {
  const dispatch = useAppDispatch();
@ -110,7 +114,7 @@ const IAICanvasMaskOptions = () => {
        <InvIconButton
          aria-label={t('unifiedCanvas.maskingOptions')}
          tooltip={t('unifiedCanvas.maskingOptions')}
-          icon={<FaMask />}
+          icon={<PiExcludeBold />}
          isChecked={layer === 'mask'}
          isDisabled={isStaging}
        />
@ -136,12 +140,16 @@ const IAICanvasMaskOptions = () => {
                onChange={handleChangeMaskColor}
              />
            </Box>
-            <InvButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
+            <InvButton
+              size="sm"
+              leftIcon={<PiFloppyDiskBackFill />}
+              onClick={handleSaveMask}
+            >
              {t('unifiedCanvas.saveMask')}
            </InvButton>
            <InvButton
              size="sm"
-              leftIcon={<FaTrash />}
+              leftIcon={<PiTrashSimpleFill />}
              onClick={handleClearMask}
            >
              {t('unifiedCanvas.clearMask')}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaRedo } from 'react-icons/fa';
+import { PiArrowClockwiseBold } from 'react-icons/pi';

 const IAICanvasRedoButton = () => {
  const dispatch = useAppDispatch();
@ -34,7 +34,7 @@ const IAICanvasRedoButton = () => {
    <InvIconButton
      aria-label={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
      tooltip={`${t('unifiedCanvas.redo')} (Ctrl+Shift+Z)`}
-      icon={<FaRedo />}
+      icon={<PiArrowClockwiseBold />}
      onClick={handleRedo}
      isDisabled={!canRedo}
    />
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
@ -24,7 +24,7 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaWrench } from 'react-icons/fa';
+import { PiGearSixBold } from 'react-icons/pi';

 const IAICanvasSettingsButtonPopover = () => {
  const dispatch = useAppDispatch();
@ -114,7 +114,7 @@ const IAICanvasSettingsButtonPopover = () => {
        <InvIconButton
          tooltip={t('unifiedCanvas.canvasSettings')}
          aria-label={t('unifiedCanvas.canvasSettings')}
-          icon={<FaWrench />}
+          icon={<PiGearSixBold />}
        />
      </InvPopoverTrigger>
      <InvPopoverContent>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@ -26,13 +26,13 @@ import type { RgbaColor } from 'react-colorful';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaEraser,
-  FaEyeDropper,
-  FaFillDrip,
-  FaPaintBrush,
-  FaSlidersH,
-  FaTimes,
-} from 'react-icons/fa';
+  PiEraserBold,
+  PiEyedropperBold,
+  PiPaintBrushBold,
+  PiPaintBucketBold,
+  PiSlidersHorizontalBold,
+  PiXBold,
+} from 'react-icons/pi';

 const IAICanvasToolChooserOptions = () => {
  const dispatch = useAppDispatch();
@ -198,7 +198,7 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.brush')} (B)`}
        tooltip={`${t('unifiedCanvas.brush')} (B)`}
-        icon={<FaPaintBrush />}
+        icon={<PiPaintBrushBold />}
        isChecked={tool === 'brush' && !isStaging}
        onClick={handleSelectBrushTool}
        isDisabled={isStaging}
@ -206,7 +206,7 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.eraser')} (E)`}
        tooltip={`${t('unifiedCanvas.eraser')} (E)`}
-        icon={<FaEraser />}
+        icon={<PiEraserBold />}
        isChecked={tool === 'eraser' && !isStaging}
        isDisabled={isStaging}
        onClick={handleSelectEraserTool}
@ -214,21 +214,21 @@ const IAICanvasToolChooserOptions = () => {
      <InvIconButton
        aria-label={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
        tooltip={`${t('unifiedCanvas.fillBoundingBox')} (Shift+F)`}
-        icon={<FaFillDrip />}
+        icon={<PiPaintBucketBold />}
        isDisabled={isStaging}
        onClick={handleFillRect}
      />
      <InvIconButton
        aria-label={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
        tooltip={`${t('unifiedCanvas.eraseBoundingBox')} (Del/Backspace)`}
-        icon={<FaTimes />}
+        icon={<PiXBold />}
        isDisabled={isStaging}
        onClick={handleEraseBoundingBox}
      />
      <InvIconButton
        aria-label={`${t('unifiedCanvas.colorPicker')} (C)`}
        tooltip={`${t('unifiedCanvas.colorPicker')} (C)`}
-        icon={<FaEyeDropper />}
+        icon={<PiEyedropperBold />}
        isChecked={tool === 'colorPicker' && !isStaging}
        isDisabled={isStaging}
        onClick={handleSelectColorPickerTool}
@ -238,7 +238,7 @@ const IAICanvasToolChooserOptions = () => {
          <InvIconButton
            aria-label={t('unifiedCanvas.brushOptions')}
            tooltip={t('unifiedCanvas.brushOptions')}
-            icon={<FaSlidersH />}
+            icon={<PiSlidersHorizontalBold />}
          />
        </InvPopoverTrigger>
        <InvPopoverContent>
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@ -30,15 +30,15 @@ import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaArrowsAlt,
-  FaCopy,
-  FaCrosshairs,
-  FaDownload,
-  FaLayerGroup,
-  FaSave,
-  FaTrash,
-  FaUpload,
-} from 'react-icons/fa';
+  PiCopyBold,
+  PiCrosshairSimpleBold,
+  PiDownloadSimpleBold,
+  PiFloppyDiskBold,
+  PiHandGrabbingBold,
+  PiStackBold,
+  PiTrashSimpleBold,
+  PiUploadSimpleBold,
+} from 'react-icons/pi';

 import IAICanvasMaskOptions from './IAICanvasMaskOptions';
 import IAICanvasRedoButton from './IAICanvasRedoButton';
@ -217,14 +217,14 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.move')} (V)`}
          tooltip={`${t('unifiedCanvas.move')} (V)`}
-          icon={<FaArrowsAlt />}
+          icon={<PiHandGrabbingBold />}
          isChecked={tool === 'move' || isStaging}
          onClick={handleSelectMoveTool}
        />
        <InvIconButton
          aria-label={`${t('unifiedCanvas.resetView')} (R)`}
          tooltip={`${t('unifiedCanvas.resetView')} (R)`}
-          icon={<FaCrosshairs />}
+          icon={<PiCrosshairSimpleBold />}
          onClick={handleClickResetCanvasView}
        />
      </InvButtonGroup>
@ -233,14 +233,14 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
          tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-          icon={<FaLayerGroup />}
+          icon={<PiStackBold />}
          onClick={handleMergeVisible}
          isDisabled={isStaging}
        />
        <InvIconButton
          aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
          tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-          icon={<FaSave />}
+          icon={<PiFloppyDiskBold />}
          onClick={handleSaveToGallery}
          isDisabled={isStaging}
        />
@ -248,7 +248,7 @@ const IAICanvasToolbar = () => {
          <InvIconButton
            aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
            tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-            icon={<FaCopy />}
+            icon={<PiCopyBold />}
            onClick={handleCopyImageToClipboard}
            isDisabled={isStaging}
          />
@ -256,7 +256,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
          tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-          icon={<FaDownload />}
+          icon={<PiDownloadSimpleBold />}
          onClick={handleDownloadAsImage}
          isDisabled={isStaging}
        />
@ -270,7 +270,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('common.upload')}`}
          tooltip={`${t('common.upload')}`}
-          icon={<FaUpload />}
+          icon={<PiUploadSimpleBold />}
          isDisabled={isStaging}
          {...getUploadButtonProps()}
        />
@ -278,7 +278,7 @@ const IAICanvasToolbar = () => {
        <InvIconButton
          aria-label={`${t('unifiedCanvas.clearCanvas')}`}
          tooltip={`${t('unifiedCanvas.clearCanvas')}`}
-          icon={<FaTrash />}
+          icon={<PiTrashSimpleBold />}
          onClick={handleResetCanvas}
          colorScheme="error"
          isDisabled={isStaging}
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
@ -5,7 +5,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaUndo } from 'react-icons/fa';
+import { PiArrowCounterClockwiseBold } from 'react-icons/pi';

 const IAICanvasUndoButton = () => {
  const dispatch = useAppDispatch();
@ -33,7 +33,7 @@ const IAICanvasUndoButton = () => {
    <InvIconButton
      aria-label={`${t('unifiedCanvas.undo')} (Ctrl+Z)`}
      tooltip={`${t('unifiedCanvas.undo')} (Ctrl+Z)`}
-      icon={<FaUndo />}
+      icon={<PiArrowCounterClockwiseBold />}
      onClick={handleUndo}
      isDisabled={!canUndo}
    />
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@ -16,7 +16,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaCopy, FaTrash } from 'react-icons/fa';
+import { PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { useToggle } from 'react-use';

 import ControlAdapterImagePreview from './ControlAdapterImagePreview';
@ -106,7 +106,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
          tooltip={t('controlnet.duplicate')}
          aria-label={t('controlnet.duplicate')}
          onClick={handleDuplicate}
-          icon={<FaCopy />}
+          icon={<PiCopyBold />}
        />
        <InvIconButton
          size="sm"
@ -114,7 +114,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
          aria-label={t('controlnet.delete')}
          colorScheme="error"
          onClick={handleDelete}
-          icon={<FaTrash />}
+          icon={<PiTrashSimpleBold />}
        />
        <InvIconButton
          size="sm"
@ -132,8 +132,6 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
          variant="ghost"
          icon={
            <ChevronUpIcon
-              boxSize={4}
-              color="base.300"
              transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
              transitionProperty="common"
              transitionDuration="normal"
@ -143,7 +141,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
      </Flex>

      <Flex w="full" flexDir="column" gap={4}>
-        <Flex gap={4} w="full" alignItems="center">
+        <Flex gap={8} w="full" alignItems="center">
          <Flex flexDir="column" gap={2} h={32} w="full">
            <ParamControlAdapterWeight id={id} />
            <ParamControlAdapterBeginEnd id={id} />
--- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
@ -7,7 +7,7 @@ import {
 } from 'features/canvas/store/actions';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaImage, FaMask } from 'react-icons/fa';
+import { PiExcludeBold, PiImageSquareBold } from 'react-icons/pi';

 type ControlNetCanvasImageImportsProps = {
  id: string;
@ -29,17 +29,17 @@ const ControlNetCanvasImageImports = (
  }, [id, dispatch]);

  return (
-    <Flex gap={2}>
+    <Flex gap={4}>
      <InvIconButton
        size="sm"
-        icon={<FaImage />}
+        icon={<PiImageSquareBold />}
        tooltip={t('controlnet.importImageFromCanvas')}
        aria-label={t('controlnet.importImageFromCanvas')}
        onClick={handleImportImageFromCanvas}
      />
      <InvIconButton
        size="sm"
-        icon={<FaMask />}
+        icon={<PiExcludeBold />}
        tooltip={t('controlnet.importMaskFromCanvas')}
        aria-label={t('controlnet.importMaskFromCanvas')}
        onClick={handleImportMaskFromCanvas}
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
@ -3,7 +3,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { PiTrashSimpleBold } from 'react-icons/pi';

 type DeleteImageButtonProps = Omit<InvIconButtonProps, 'aria-label'> & {
  onClick: () => void;
@ -17,7 +17,7 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
  return (
    <InvIconButton
      onClick={onClick}
-      icon={<FaTrash />}
+      icon={<PiTrashSimpleBold />}
      tooltip={`${t('gallery.deleteImage')} (Del)`}
      aria-label={`${t('gallery.deleteImage')} (Del)`}
      isDisabled={isDisabled || !isConnected}
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
@ -1,7 +1,7 @@
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPlus } from 'react-icons/fa';
+import { PiPlusBold } from 'react-icons/pi';
 import { useCreateBoardMutation } from 'services/api/endpoints/boards';

 const AddBoardButton = () => {
@ -14,7 +14,7 @@ const AddBoardButton = () => {

  return (
    <InvIconButton
-      icon={<FaPlus />}
+      icon={<PiPlusBold />}
      isLoading={isLoading}
      tooltip={t('boards.addBoard')}
      aria-label={t('boards.addBoard')}
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
@ -1,4 +1,3 @@
-import { CloseIcon } from '@chakra-ui/icons';
 import { Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
@ -6,6 +5,7 @@ import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';

 const BoardsSearch = () => {
  const dispatch = useAppDispatch();
@ -66,7 +66,7 @@ const BoardsSearch = () => {
            size="sm"
            variant="ghost"
            aria-label={t('boards.clearSearch')}
-            icon={<CloseIcon boxSize={3} />}
+            icon={<PiXBold />}
          />
        </InputRightElement>
      )}
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
@ -151,7 +151,7 @@ const DeleteBoardModal = (props: Props) => {
            </Flex>
          </InvAlertDialogBody>
          <InvAlertDialogFooter>
-            <Flex w="full" gap={2} justifyContent="space-between">
+            <Flex w="full" gap={2} justifyContent="end">
              <InvButton ref={cancelRef} onClick={handleClose}>
                {t('boards.cancel')}
              </InvButton>
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@ -29,14 +29,15 @@ import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
-  FaAsterisk,
-  FaCode,
-  FaHourglassHalf,
-  FaQuoteRight,
-  FaRulerVertical,
-  FaSeedling,
-} from 'react-icons/fa';
-import { FaCircleNodes, FaEllipsis } from 'react-icons/fa6';
+  PiAsteriskBold,
+  PiDotsThreeOutlineFill,
+  PiFlowArrowBold,
+  PiHourglassHighBold,
+  PiInfoBold,
+  PiPlantBold,
+  PiQuotesBold,
+  PiRulerBold,
+} from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';

@ -210,7 +211,7 @@ const CurrentImageButtons = () => {
              aria-label={t('parameters.imageActions')}
              tooltip={t('parameters.imageActions')}
              isDisabled={!imageDTO}
-              icon={<FaEllipsis />}
+              icon={<PiDotsThreeOutlineFill />}
            />
            <InvMenuList>
              {imageDTO && <SingleSelectionMenuItems imageDTO={imageDTO} />}
@ -220,7 +221,7 @@ const CurrentImageButtons = () => {

        <InvButtonGroup isDisabled={shouldDisableToolbarButtons}>
          <InvIconButton
-            icon={<FaCircleNodes />}
+            icon={<PiFlowArrowBold />}
            tooltip={`${t('nodes.loadWorkflow')} (W)`}
            aria-label={`${t('nodes.loadWorkflow')} (W)`}
            isDisabled={!imageDTO?.has_workflow}
@ -229,7 +230,7 @@ const CurrentImageButtons = () => {
          />
          <InvIconButton
            isLoading={isLoadingMetadata}
-            icon={<FaQuoteRight />}
+            icon={<PiQuotesBold />}
            tooltip={`${t('parameters.usePrompt')} (P)`}
            aria-label={`${t('parameters.usePrompt')} (P)`}
            isDisabled={!metadata?.positive_prompt}
@ -237,7 +238,7 @@ const CurrentImageButtons = () => {
          />
          <InvIconButton
            isLoading={isLoadingMetadata}
-            icon={<FaSeedling />}
+            icon={<PiPlantBold />}
            tooltip={`${t('parameters.useSeed')} (S)`}
            aria-label={`${t('parameters.useSeed')} (S)`}
            isDisabled={metadata?.seed === null || metadata?.seed === undefined}
@ -245,7 +246,7 @@ const CurrentImageButtons = () => {
          />
          <InvIconButton
            isLoading={isLoadingMetadata}
-            icon={<FaRulerVertical />}
+            icon={<PiRulerBold />}
            tooltip={`${t('parameters.useSize')} (D)`}
            aria-label={`${t('parameters.useSize')} (D)`}
            isDisabled={
@ -258,7 +259,7 @@ const CurrentImageButtons = () => {
          />
          <InvIconButton
            isLoading={isLoadingMetadata}
-            icon={<FaAsterisk />}
+            icon={<PiAsteriskBold />}
            tooltip={`${t('parameters.useAll')} (A)`}
            aria-label={`${t('parameters.useAll')} (A)`}
            isDisabled={!metadata}
@ -274,7 +275,7 @@ const CurrentImageButtons = () => {

        <InvButtonGroup>
          <InvIconButton
-            icon={<FaCode />}
+            icon={<PiInfoBold />}
            tooltip={`${t('parameters.info')} (I)`}
            aria-label={`${t('parameters.info')} (I)`}
            isChecked={shouldShowImageDetails}
@ -286,7 +287,7 @@ const CurrentImageButtons = () => {
          <InvIconButton
            aria-label={t('settings.displayInProgress')}
            tooltip={t('settings.displayInProgress')}
-            icon={<FaHourglassHalf />}
+            icon={<PiHourglassHighBold />}
            isChecked={shouldShowProgressInViewer}
            onClick={handleClickProgressImagesToggle}
          />
--- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
@ -19,7 +19,7 @@ import {
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaWrench } from 'react-icons/fa';
+import { RiSettings4Fill } from 'react-icons/ri';

 import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';

@ -61,7 +61,7 @@ const GallerySettingsPopover = () => {
          tooltip={t('gallery.gallerySettings')}
          aria-label={t('gallery.gallerySettings')}
          size="sm"
-          icon={<FaWrench />}
+          icon={<RiSettings4Fill />}
        />
      </InvPopoverTrigger>
      <InvPopoverContent>
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
+import { InvMenuDivider } from 'common/components/InvMenu/wrapper';
 import {
  imagesToChangeSelected,
  isModalOpenChanged,
@ -11,8 +12,13 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { addToast } from 'features/system/store/systemSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaDownload, FaFolder, FaTrash } from 'react-icons/fa';
-import { MdStar, MdStarBorder } from 'react-icons/md';
+import {
+  PiDownloadSimpleBold,
+  PiFoldersBold,
+  PiStarBold,
+  PiStarFill,
+  PiTrashSimpleBold,
+} from 'react-icons/pi';
 import {
  useBulkDownloadImagesMutation,
  useStarImagesMutation,
@ -90,7 +96,7 @@ const MultipleSelectionMenuItems = () => {
    <>
      {areAllStarred && (
        <InvMenuItem
-          icon={customStarUi ? customStarUi.on.icon : <MdStarBorder />}
+          icon={customStarUi ? customStarUi.on.icon : <PiStarBold />}
          onClickCapture={handleUnstarSelection}
        >
          {customStarUi ? customStarUi.off.text : `Unstar All`}
@ -98,23 +104,27 @@ const MultipleSelectionMenuItems = () => {
      )}
      {(areAllUnstarred || (!areAllStarred && !areAllUnstarred)) && (
        <InvMenuItem
-          icon={customStarUi ? customStarUi.on.icon : <MdStar />}
+          icon={customStarUi ? customStarUi.on.icon : <PiStarFill />}
          onClickCapture={handleStarSelection}
        >
          {customStarUi ? customStarUi.on.text : `Star All`}
        </InvMenuItem>
      )}
      {isBulkDownloadEnabled && (
-        <InvMenuItem icon={<FaDownload />} onClickCapture={handleBulkDownload}>
+        <InvMenuItem
+          icon={<PiDownloadSimpleBold />}
+          onClickCapture={handleBulkDownload}
+        >
          {t('gallery.downloadSelection')}
        </InvMenuItem>
      )}
-      <InvMenuItem icon={<FaFolder />} onClickCapture={handleChangeBoard}>
+      <InvMenuItem icon={<PiFoldersBold />} onClickCapture={handleChangeBoard}>
        {t('boards.changeBoard')}
      </InvMenuItem>
+      <InvMenuDivider />
      <InvMenuItem
        color="error.300"
-        icon={<FaTrash />}
+        icon={<PiTrashSimpleBold />}
        onClickCapture={handleDeleteSelection}
      >
        {t('gallery.deleteSelection')}
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@ -4,6 +4,7 @@ import { useAppToaster } from 'app/components/Toaster';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
+import { InvMenuDivider } from 'common/components/InvMenu/wrapper';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
@ -25,18 +26,18 @@ import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
-  FaAsterisk,
-  FaCopy,
-  FaDownload,
-  FaExternalLinkAlt,
-  FaFolder,
-  FaQuoteRight,
-  FaSeedling,
-  FaShare,
-  FaTrash,
-} from 'react-icons/fa';
-import { FaCircleNodes } from 'react-icons/fa6';
-import { MdStar, MdStarBorder } from 'react-icons/md';
+  PiAsteriskBold,
+  PiCopyBold,
+  PiDownloadSimpleBold,
+  PiFlowArrowBold,
+  PiFoldersBold,
+  PiPlantBold,
+  PiQuotesBold,
+  PiShareFatBold,
+  PiStarBold,
+  PiStarFill,
+  PiTrashSimpleBold,
+} from 'react-icons/pi';
 import {
  useStarImagesMutation,
  useUnstarImagesMutation,
@ -155,12 +156,12 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
        as="a"
        href={imageDTO.image_url}
        target="_blank"
-        icon={<FaExternalLinkAlt />}
+        icon={<PiShareFatBold />}
      >
        {t('common.openInNewTab')}
      </InvMenuItem>
      {isClipboardAPIAvailable && (
-        <InvMenuItem icon={<FaCopy />} onClickCapture={handleCopyImage}>
+        <InvMenuItem icon={<PiCopyBold />} onClickCapture={handleCopyImage}>
          {t('parameters.copyImage')}
        </InvMenuItem>
      )}
@ -169,17 +170,18 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
        download={true}
        href={imageDTO.image_url}
        target="_blank"
-        icon={<FaDownload />}
+        icon={<PiDownloadSimpleBold />}
        w="100%"
      >
        {t('parameters.downloadImage')}
      </InvMenuItem>
+      <InvMenuDivider />
      <InvMenuItem
        icon={
          getAndLoadEmbeddedWorkflowResult.isLoading ? (
            <SpinnerIcon />
          ) : (
-            <FaCircleNodes />
+            <PiFlowArrowBold />
          )
        }
        onClickCapture={handleLoadWorkflow}
@ -188,7 +190,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
        {t('nodes.loadWorkflow')}
      </InvMenuItem>
      <InvMenuItem
-        icon={isLoadingMetadata ? <SpinnerIcon /> : <FaQuoteRight />}
+        icon={isLoadingMetadata ? <SpinnerIcon /> : <PiQuotesBold />}
        onClickCapture={handleRecallPrompt}
        isDisabled={
          isLoadingMetadata ||
@ -199,21 +201,22 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
        {t('parameters.usePrompt')}
      </InvMenuItem>
      <InvMenuItem
-        icon={isLoadingMetadata ? <SpinnerIcon /> : <FaSeedling />}
+        icon={isLoadingMetadata ? <SpinnerIcon /> : <PiPlantBold />}
        onClickCapture={handleRecallSeed}
        isDisabled={isLoadingMetadata || metadata?.seed === undefined}
      >
        {t('parameters.useSeed')}
      </InvMenuItem>
      <InvMenuItem
-        icon={isLoadingMetadata ? <SpinnerIcon /> : <FaAsterisk />}
+        icon={isLoadingMetadata ? <SpinnerIcon /> : <PiAsteriskBold />}
        onClickCapture={handleUseAllParameters}
        isDisabled={isLoadingMetadata || !metadata}
      >
        {t('parameters.useAll')}
      </InvMenuItem>
+      <InvMenuDivider />
      <InvMenuItem
-        icon={<FaShare />}
+        icon={<PiShareFatBold />}
        onClickCapture={handleSendToImageToImage}
        id="send-to-img2img"
      >
@ -221,34 +224,36 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
      </InvMenuItem>
      {isCanvasEnabled && (
        <InvMenuItem
-          icon={<FaShare />}
+          icon={<PiShareFatBold />}
          onClickCapture={handleSendToCanvas}
          id="send-to-canvas"
        >
          {t('parameters.sendToUnifiedCanvas')}
        </InvMenuItem>
      )}
-      <InvMenuItem icon={<FaFolder />} onClickCapture={handleChangeBoard}>
+      <InvMenuDivider />
+      <InvMenuItem icon={<PiFoldersBold />} onClickCapture={handleChangeBoard}>
        {t('boards.changeBoard')}
      </InvMenuItem>
      {imageDTO.starred ? (
        <InvMenuItem
-          icon={customStarUi ? customStarUi.off.icon : <MdStar />}
+          icon={customStarUi ? customStarUi.off.icon : <PiStarFill />}
          onClickCapture={handleUnstarImage}
        >
          {customStarUi ? customStarUi.off.text : t('gallery.unstarImage')}
        </InvMenuItem>
      ) : (
        <InvMenuItem
-          icon={customStarUi ? customStarUi.on.icon : <MdStarBorder />}
+          icon={customStarUi ? customStarUi.on.icon : <PiStarBold />}
          onClickCapture={handleStarImage}
        >
          {customStarUi ? customStarUi.on.text : t('gallery.starImage')}
        </InvMenuItem>
      )}
+      <InvMenuDivider />
      <InvMenuItem
        color="error.300"
-        icon={<FaTrash />}
+        icon={<PiTrashSimpleBold />}
        onClickCapture={handleDelete}
      >
        {t('gallery.deleteImage')}
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@ -15,7 +15,8 @@ import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup'
 import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaImages, FaServer } from 'react-icons/fa';
+import { PiImagesBold } from 'react-icons/pi';
+import { RiServerLine } from 'react-icons/ri';

 import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
@ -83,7 +84,7 @@ const ImageGalleryContent = () => {
                  isChecked={galleryView === 'images'}
                  onClick={handleClickImages}
                  w="full"
-                  leftIcon={<FaImages />}
+                  leftIcon={<PiImagesBold size="16px" />}
                  data-testid="images-tab"
                >
                  {t('parameters.images')}
@ -94,7 +95,7 @@ const ImageGalleryContent = () => {
                  isChecked={galleryView === 'assets'}
                  onClick={handleClickAssets}
                  w="full"
-                  leftIcon={<FaServer />}
+                  leftIcon={<RiServerLine size="16px" />}
                  data-testid="assets-tab"
                >
                  {t('gallery.assets')}
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@ -19,8 +19,7 @@ import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
-import { MdStar, MdStarBorder } from 'react-icons/md';
+import { PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi';
 import {
  useGetImageDTOQuery,
  useStarImagesMutation,
@ -112,10 +111,10 @@ const GalleryImage = (props: HoverableImageProps) => {

  const starIcon = useMemo(() => {
    if (imageDTO?.starred) {
-      return customStarUi ? customStarUi.on.icon : <MdStar size="20" />;
+      return customStarUi ? customStarUi.on.icon : <PiStarFill size="20" />;
    }
    if (!imageDTO?.starred && isHovered) {
-      return customStarUi ? customStarUi.off.icon : <MdStarBorder size="20" />;
+      return customStarUi ? customStarUi.off.icon : <PiStarBold size="20" />;
    }
  }, [imageDTO?.starred, isHovered, customStarUi]);

@ -177,7 +176,7 @@ const GalleryImage = (props: HoverableImageProps) => {
            {isHovered && shift && (
              <IAIDndImageIcon
                onClick={handleDelete}
-                icon={<FaTrash />}
+                icon={<PiTrashSimpleFill size="16px" />}
                tooltip={t('gallery.deleteImage')}
                styleOverrides={imageIconStyleOverrides}
              />
--- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsButton.tsx
@ -3,7 +3,7 @@ import type { InvButtonProps } from 'common/components/InvButton/types';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSync } from 'react-icons/fa';
+import { PiArrowsClockwiseBold } from 'react-icons/pi';

 import { useSyncModels } from './useSyncModels';

@ -21,7 +21,7 @@ export const SyncModelsButton = memo(
      <InvButton
        isLoading={isLoading}
        onClick={syncModels}
-        leftIcon={<FaSync />}
+        leftIcon={<PiArrowsClockwiseBold />}
        minW="max-content"
        {...props}
      >
--- a/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/components/SyncModels/SyncModelsIconButton.tsx
@ -3,7 +3,7 @@ import type { InvIconButtonProps } from 'common/components/InvIconButton/types';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSync } from 'react-icons/fa';
+import { PiArrowsClockwiseBold } from 'react-icons/pi';

 import { useSyncModels } from './useSyncModels';

@ -19,7 +19,7 @@ export const SyncModelsIconButton = memo(

    return (
      <InvIconButton
-        icon={<FaSync />}
+        icon={<PiArrowsClockwiseBold />}
        tooltip={t('modelManager.syncModels')}
        aria-label={t('modelManager.syncModels')}
        isLoading={isLoading}
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
@ -1,4 +1,3 @@
-import { DeleteIcon } from '@chakra-ui/icons';
 import { Badge, Flex, useDisclosure } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InvButton } from 'common/components/InvButton/InvButton';
@ -11,6 +10,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiTrashSimpleBold } from 'react-icons/pi';
 import type {
  LoRAModelConfigEntity,
  MainModelConfigEntity,
@ -109,7 +109,7 @@ const ModelListItem = (props: ModelListItemProps) => {
      </Flex>
      <InvIconButton
        onClick={onOpen}
-        icon={<DeleteIcon />}
+        icon={<PiTrashSimpleBold />}
        aria-label={t('modelManager.deleteConfig')}
        colorScheme="error"
      />
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/ViewportControls.tsx
@ -8,11 +8,11 @@ import {
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  FaExpand,
-  // FaInfo,
-  FaMapMarkerAlt,
-} from 'react-icons/fa';
-import { FaMagnifyingGlassMinus, FaMagnifyingGlassPlus } from 'react-icons/fa6';
+  PiFrameCornersBold,
+  PiMagnifyingGlassMinusBold,
+  PiMagnifyingGlassPlusBold,
+  PiMapPinBold,
+} from 'react-icons/pi';
 import { useReactFlow } from 'reactflow';

 const ViewportControls = () => {
@ -52,19 +52,19 @@ const ViewportControls = () => {
        tooltip={t('nodes.zoomInNodes')}
        aria-label={t('nodes.zoomInNodes')}
        onClick={handleClickedZoomIn}
-        icon={<FaMagnifyingGlassPlus />}
+        icon={<PiMagnifyingGlassPlusBold />}
      />
      <InvIconButton
        tooltip={t('nodes.zoomOutNodes')}
        aria-label={t('nodes.zoomOutNodes')}
        onClick={handleClickedZoomOut}
-        icon={<FaMagnifyingGlassMinus />}
+        icon={<PiMagnifyingGlassMinusBold />}
      />
      <InvIconButton
        tooltip={t('nodes.fitViewportNodes')}
        aria-label={t('nodes.fitViewportNodes')}
        onClick={handleClickedFitView}
-        icon={<FaExpand />}
+        icon={<PiFrameCornersBold />}
      />
      {/* <InvTooltip
        label={
@ -93,7 +93,7 @@ const ViewportControls = () => {
        }
        isChecked={shouldShowMinimapPanel}
        onClick={handleClickedToggleMiniMapPanel}
-        icon={<FaMapMarkerAlt />}
+        icon={<PiMapPinBold />}
      />
    </InvButtonGroup>
  );
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/AddNodeButton.tsx
@ -3,7 +3,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPlus } from 'react-icons/fa';
+import { PiPlusBold } from 'react-icons/pi';

 const AddNodeButton = () => {
  const dispatch = useAppDispatch();
@ -16,7 +16,7 @@ const AddNodeButton = () => {
    <InvIconButton
      tooltip={t('nodes.addNodeToolTip')}
      aria-label={t('nodes.addNode')}
-      icon={<FaPlus />}
+      icon={<PiPlusBold />}
      onClick={handleOpenAddNodePopover}
      pointerEvents="auto"
    />
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/ReloadSchemaButton.tsx
@ -2,7 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSyncAlt } from 'react-icons/fa';
+import { PiArrowsClockwiseBold } from 'react-icons/pi';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';

 const ReloadNodeTemplatesButton = () => {
@ -15,7 +15,7 @@ const ReloadNodeTemplatesButton = () => {

  return (
    <InvButton
-      leftIcon={<FaSyncAlt />}
+      leftIcon={<PiArrowsClockwiseBold />}
      tooltip={t('nodes.reloadNodeTemplates')}
      aria-label={t('nodes.reloadNodeTemplates')}
      onClick={handleReloadSchema}
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/LockAspectRatioButton.tsx
@ -2,7 +2,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaLock, FaLockOpen } from 'react-icons/fa6';
+import { PiLockSimpleFill, PiLockSimpleOpenBold } from 'react-icons/pi';

 export const LockAspectRatioButton = memo(() => {
  const { t } = useTranslation();
@ -18,7 +18,13 @@ export const LockAspectRatioButton = memo(() => {
      onClick={onClick}
      variant={ctx.aspectRatioState.isLocked ? 'outline' : 'ghost'}
      size="sm"
-      icon={ctx.aspectRatioState.isLocked ? <FaLock /> : <FaLockOpen />}
+      icon={
+        ctx.aspectRatioState.isLocked ? (
+          <PiLockSimpleFill />
+        ) : (
+          <PiLockSimpleOpenBold />
+        )
+      }
    />
  );
 });
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SetOptimalSizeButton.tsx
@ -8,7 +8,7 @@ import {
 } from 'features/parameters/util/optimalDimension';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoSparkles } from 'react-icons/io5';
+import { RiSparklingFill } from 'react-icons/ri';

 export const SetOptimalSizeButton = memo(() => {
  const { t } = useTranslation();
@ -42,7 +42,7 @@ export const SetOptimalSizeButton = memo(() => {
      onClick={onClick}
      variant="ghost"
      size="sm"
-      icon={<IoSparkles />}
+      icon={<RiSparklingFill />}
      colorScheme={isSizeTooSmall || isSizeTooLarge ? 'warning' : 'base'}
    />
  );
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/SwapDimensionsButton.tsx
@ -2,7 +2,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IoSwapVertical } from 'react-icons/io5';
+import { PiArrowsDownUpBold } from 'react-icons/pi';

 export const SwapDimensionsButton = memo(() => {
  const { t } = useTranslation();
@ -17,7 +17,7 @@ export const SwapDimensionsButton = memo(() => {
      onClick={onClick}
      variant="ghost"
      size="sm"
-      icon={<IoSwapVertical />}
+      icon={<PiArrowsDownUpBold />}
    />
  );
 });
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
@ -12,7 +12,11 @@ import {
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaRulerVertical, FaUndo, FaUpload } from 'react-icons/fa';
+import {
+  PiArrowCounterClockwiseBold,
+  PiRulerBold,
+  PiUploadSimpleBold,
+} from 'react-icons/pi';
 import type { PostUploadAction } from 'services/api/types';

 import InitialImage from './InitialImage';
@ -80,20 +84,20 @@ const InitialImageDisplay = () => {
        <InvIconButton
          tooltip="Upload Initial Image"
          aria-label="Upload Initial Image"
-          icon={<FaUpload />}
+          icon={<PiUploadSimpleBold />}
          {...getUploadButtonProps()}
        />
        <InvIconButton
          tooltip={`${t('parameters.useSize')} (Shift+D)`}
          aria-label={`${t('parameters.useSize')} (Shift+D)`}
-          icon={<FaRulerVertical />}
+          icon={<PiRulerBold />}
          onClick={handleUseSizeInitialImage}
          isDisabled={!initialImage}
        />
        <InvIconButton
          tooltip="Reset Initial Image"
          aria-label="Reset Initial Image"
-          icon={<FaUndo />}
+          icon={<PiArrowCounterClockwiseBold />}
          onClick={handleReset}
          isDisabled={!initialImage}
        />
--- a/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedShuffle.tsx
@ -5,7 +5,7 @@ import randomInt from 'common/util/randomInt';
 import { setSeed } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaShuffle } from 'react-icons/fa6';
+import { PiShuffleBold } from 'react-icons/pi';

 export const ParamSeedShuffle = memo(() => {
  const dispatch = useAppDispatch();
@ -24,7 +24,7 @@ export const ParamSeedShuffle = memo(() => {
      size="sm"
      isDisabled={shouldRandomizeSeed}
      onClick={handleClickRandomizeSeed}
-      leftIcon={<FaShuffle />}
+      leftIcon={<PiShuffleBold />}
      flexShrink={0}
    >
      {t('parameters.shuffle')}
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
@ -13,7 +13,7 @@ import { useIsAllowedToUpscale } from 'features/parameters/hooks/useIsAllowedToU
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaExpand } from 'react-icons/fa';
+import { PiFrameCornersBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';

 import ParamESRGANModel from './ParamRealESRGANModel';
@ -42,7 +42,7 @@ const ParamUpscalePopover = (props: Props) => {
        <InvIconButton
          tooltip={t('parameters.upscale')}
          onClick={onOpen}
-          icon={<FaExpand />}
+          icon={<PiFrameCornersBold />}
          aria-label={t('parameters.upscale')}
        />
      </InvPopoverTrigger>
--- a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemIconButton.tsx
@ -3,7 +3,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTimes } from 'react-icons/fa';
+import { PiXBold } from 'react-icons/pi';
 type Props = {
  sx?: ChakraProps['sx'];
 };
@ -19,7 +19,7 @@ const CancelCurrentQueueItemIconButton = ({ sx }: Props) => {
      isLoading={isLoading}
      aria-label={t('queue.cancel')}
      tooltip={t('queue.cancelTooltip')}
-      icon={<FaTimes />}
+      icon={<PiXBold size="16px" />}
      onClick={cancelQueueItem}
      colorScheme="error"
      sx={sx}
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
@ -5,7 +5,7 @@ import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQu
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { PiTrashSimpleFill } from 'react-icons/pi';

 type Props = InvButtonProps;

@ -20,7 +20,7 @@ const ClearQueueButton = (props: Props) => {
        isDisabled={isDisabled}
        isLoading={isLoading}
        tooltip={t('queue.clearTooltip')}
-        leftIcon={<FaTrash />}
+        leftIcon={<PiTrashSimpleFill />}
        colorScheme="error"
        onClick={disclosure.onOpen}
        data-testid={t('queue.clear')}
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@ -5,7 +5,7 @@ import ClearQueueConfirmationAlertDialog from 'features/queue/components/ClearQu
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaTrash } from 'react-icons/fa';
+import { PiTrashSimpleBold } from 'react-icons/pi';

 type Props = Omit<InvIconButtonProps, 'aria-label'>;

@ -21,7 +21,7 @@ const ClearQueueIconButton = (props: Props) => {
        isLoading={isLoading}
        aria-label={t('queue.clear')}
        tooltip={t('queue.clearTooltip')}
-        icon={<FaTrash />}
+        icon={<PiTrashSimpleBold size="16px" />}
        colorScheme="error"
        onClick={disclosure.onOpen}
        data-testid={t('queue.clear')}
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@ -4,7 +4,7 @@ import { InvButton } from 'common/components/InvButton/InvButton';
 import { QueueIterationsNumberInput } from 'features/queue/components/QueueIterationsNumberInput';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import { memo } from 'react';
-import { IoSparkles } from 'react-icons/io5';
+import { RiSparkling2Fill } from 'react-icons/ri';

 import { QueueButtonTooltip } from './QueueButtonTooltip';

@ -24,7 +24,7 @@ export const InvokeQueueBackButton = memo(() => {
        isLoading={isLoading || isLoadingDynamicPrompts}
        loadingText={invoke}
        isDisabled={isDisabled}
-        rightIcon={<IoSparkles />}
+        rightIcon={<RiSparkling2Fill />}
        tooltip={<QueueButtonTooltip />}
        variant="solid"
        zIndex={1}
--- a/invokeai/frontend/web/src/features/queue/components/PauseProcessorButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/PauseProcessorButton.tsx
@ -1,7 +1,7 @@
 import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPause } from 'react-icons/fa';
+import { PiPauseFill } from 'react-icons/pi';

 import QueueButton from './common/QueueButton';

@ -20,7 +20,7 @@ const PauseProcessorButton = ({ asIconButton }: Props) => {
      tooltip={t('queue.pauseTooltip')}
      isDisabled={isDisabled}
      isLoading={isLoading}
-      icon={<FaPause />}
+      icon={<PiPauseFill />}
      onClick={pauseProcessor}
      colorScheme="gold"
    />
--- a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx
@ -1,7 +1,7 @@
 import { usePruneQueue } from 'features/queue/hooks/usePruneQueue';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BsStars } from 'react-icons/bs';
+import { RiSparklingFill } from 'react-icons/ri';

 import QueueButton from './common/QueueButton';

@ -20,7 +20,7 @@ const PruneQueueButton = ({ asIconButton }: Props) => {
      asIconButton={asIconButton}
      label={t('queue.prune')}
      tooltip={t('queue.pruneTooltip', { item_count: finishedCount })}
-      icon={<BsStars />}
+      icon={<RiSparklingFill />}
      onClick={pruneQueue}
      colorScheme="invokeBlue"
    />
--- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
@ -17,8 +17,8 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPause, FaPlay, FaTimes } from 'react-icons/fa';
-import { FaList } from 'react-icons/fa6';
+import { PiPauseFill, PiPlayFill, PiXBold } from 'react-icons/pi';
+import { RiListCheck, RiPlayList2Fill } from 'react-icons/ri';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';

 export const QueueActionsMenuButton = memo(() => {
@ -64,12 +64,12 @@ export const QueueActionsMenuButton = memo(() => {
        <InvMenuButton
          as={InvIconButton}
          aria-label="Queue Actions Menu"
-          icon={<FaList />}
+          icon={<RiListCheck />}
        />
        <InvMenuList>
          <InvMenuItem
            isDestructive
-            icon={<FaTimes size="16px" />}
+            icon={<PiXBold size="16px" />}
            onClick={cancelQueueItem}
            isLoading={isLoadingCancelQueueItem}
            isDisabled={isDisabledCancelQueueItem}
@ -78,7 +78,7 @@ export const QueueActionsMenuButton = memo(() => {
          </InvMenuItem>
          {isResumeEnabled && (
            <InvMenuItem
-              icon={<FaPlay size="14px" />}
+              icon={<PiPlayFill size="14px" />}
              onClick={resumeProcessor}
              isLoading={isLoadingResumeProcessor}
              isDisabled={isDisabledResumeProcessor}
@ -88,7 +88,7 @@ export const QueueActionsMenuButton = memo(() => {
          )}
          {isPauseEnabled && (
            <InvMenuItem
-              icon={<FaPause size="14px" />}
+              icon={<PiPauseFill size="14px" />}
              onClick={pauseProcessor}
              isLoading={isLoadingPauseProcessor}
              isDisabled={isDisabledPauseProcessor}
@ -97,7 +97,9 @@ export const QueueActionsMenuButton = memo(() => {
            </InvMenuItem>
          )}
          <InvMenuDivider />
-          <InvMenuItem onClick={openQueue}>{t('queue.openQueue')}</InvMenuItem>
+          <InvMenuItem icon={<RiPlayList2Fill />} onClick={openQueue}>
+            {t('queue.openQueue')}
+          </InvMenuItem>
        </InvMenuList>
      </InvMenu>
      {queueSize > 0 && (
--- a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
@ -2,7 +2,7 @@ import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { useQueueFront } from 'features/queue/hooks/useQueueFront';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaBoltLightning } from 'react-icons/fa6';
+import { AiFillThunderbolt } from 'react-icons/ai';

 import { QueueButtonTooltip } from './QueueButtonTooltip';

@ -16,7 +16,7 @@ const QueueFrontButton = () => {
      isLoading={isLoading}
      onClick={queueFront}
      tooltip={<QueueButtonTooltip prepend />}
-      icon={<FaBoltLightning />}
+      icon={<AiFillThunderbolt />}
      size="lg"
    />
  );
--- a/invokeai/frontend/web/src/features/queue/components/ResumeProcessorButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ResumeProcessorButton.tsx
@ -1,7 +1,7 @@
 import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPlay } from 'react-icons/fa';
+import { PiPlayFill } from 'react-icons/pi';

 import QueueButton from './common/QueueButton';

@ -20,7 +20,7 @@ const ResumeProcessorButton = ({ asIconButton }: Props) => {
      tooltip={t('queue.resumeTooltip')}
      isDisabled={isDisabled}
      isLoading={isLoading}
-      icon={<FaPlay />}
+      icon={<PiPlayFill />}
      onClick={resumeProcessor}
      colorScheme="green"
    />
--- a/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx
@ -20,7 +20,7 @@ import {
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { Fragment, memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaPlus } from 'react-icons/fa';
+import { PiPlusBold } from 'react-icons/pi';

 const selector = createMemoizedSelector(
  selectControlAdaptersSlice,
@ -103,7 +103,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
        >
          <InvButton
            tooltip={t('controlnet.addControlNet')}
-            leftIcon={<FaPlus />}
+            leftIcon={<PiPlusBold />}
            onClick={addControlNet}
            data-testid="add controlnet"
            flexGrow={1}
@ -113,7 +113,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
          </InvButton>
          <InvButton
            tooltip={t('controlnet.addIPAdapter')}
-            leftIcon={<FaPlus />}
+            leftIcon={<PiPlusBold />}
            onClick={addIPAdapter}
            data-testid="add ip adapter"
            flexGrow={1}
@ -123,7 +123,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
          </InvButton>
          <InvButton
            tooltip={t('controlnet.addT2IAdapter')}
-            leftIcon={<FaPlus />}
+            leftIcon={<PiPlusBold />}
            onClick={addT2IAdapter}
            data-testid="add t2i adapter"
            flexGrow={1}
--- a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
@ -63,7 +63,7 @@ export const GenerationSettingsAccordion = memo(() => {
        </InvTabList>
        <InvTabPanels>
          <InvTabPanel overflow="visible" px={4} pt={4}>
-            <Flex gap={4}>
+            <Flex gap={4} alignItems="center">
              <ParamMainModelSelect />
              <SyncModelsIconButton />
            </Flex>
--- a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@ -88,7 +88,7 @@ export const ImageSettingsAccordion = memo(() => {
        )}
        <InvExpander>
          <Flex gap={4} pb={4} flexDir="column">
-            <Flex gap={4}>
+            <Flex gap={4} alignItems="center">
              <ParamSeedNumberInput />
              <ParamSeedShuffle />
              <ParamSeedRandomize />
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
@ -12,8 +12,12 @@ import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaBug, FaCog, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
-import { FaWrench } from 'react-icons/fa6';
+import {
+  PiBugBeetleBold,
+  PiKeyboardBold,
+  PiToggleRightFill,
+} from 'react-icons/pi';
+import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';

 import SettingsModal from './SettingsModal';
 const SettingsMenu = () => {
@ -34,7 +38,7 @@ const SettingsMenu = () => {
        as={InvIconButton}
        variant="link"
        aria-label={t('accessibility.menu')}
-        icon={<FaCog fontSize={20} />}
+        icon={<RiSettings4Line fontSize={20} />}
        boxSize={8}
      />

@ -45,7 +49,7 @@ const SettingsMenu = () => {
              as="a"
              href={githubLink}
              target="_blank"
-              icon={<FaGithub />}
+              icon={<RiGithubFill />}
            >
              {t('common.githubLabel')}
            </InvMenuItem>
@ -55,7 +59,7 @@ const SettingsMenu = () => {
              as="a"
              href={`${githubLink}/issues`}
              target="_blank"
-              icon={<FaBug />}
+              icon={<PiBugBeetleBold />}
            >
              {t('common.reportBugLabel')}
            </InvMenuItem>
@ -65,7 +69,7 @@ const SettingsMenu = () => {
              as="a"
              href={discordLink}
              target="_blank"
-              icon={<FaDiscord />}
+              icon={<RiDiscordFill />}
            >
              {t('common.discordLabel')}
            </InvMenuItem>
@ -73,12 +77,12 @@ const SettingsMenu = () => {
        </InvMenuGroup>
        <InvMenuGroup title={t('common.settingsLabel')}>
          <HotkeysModal>
-            <InvMenuItem as="button" icon={<FaKeyboard />}>
+            <InvMenuItem as="button" icon={<PiKeyboardBold />}>
              {t('common.hotkeysLabel')}
            </InvMenuItem>
          </HotkeysModal>
          <SettingsModal>
-            <InvMenuItem as="button" icon={<FaWrench />}>
+            <InvMenuItem as="button" icon={<PiToggleRightFill />}>
              {t('common.settingsLabel')}
            </InvMenuItem>
          </SettingsModal>
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@ -5,7 +5,7 @@ import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MdPhotoLibrary } from 'react-icons/md';
+import { PiImagesSquareBold } from 'react-icons/pi';

 type Props = {
  panelApi: UsePanelReturn;
@ -34,7 +34,7 @@ const FloatingGalleryButton = (props: Props) => {
          <InvIconButton
            aria-label={t('accessibility.showGalleryPanel')}
            onClick={props.panelApi.expand}
-            icon={<MdPhotoLibrary />}
+            icon={<PiImagesSquareBold size="20px" />}
            p={0}
            h={48}
            borderEndRadius={0}
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@ -10,8 +10,8 @@ import { useQueueBack } from 'features/queue/hooks/useQueueBack';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSlidersH } from 'react-icons/fa';
-import { IoSparkles } from 'react-icons/io5';
+import { PiSlidersHorizontalBold } from 'react-icons/pi';
+import { RiSparklingFill } from 'react-icons/ri';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 import { spinAnimationSlow } from 'theme/animations';

@ -34,7 +34,7 @@ const FloatingSidePanelButtons = (props: Props) => {
      !isDisabled && queueStatus?.processor.is_processing ? (
        <SpinnerIcon animation={spinAnimationSlow} />
      ) : (
-        <IoSparkles />
+        <RiSparklingFill size="16px" />
      ),
    [isDisabled, queueStatus?.processor.is_processing]
  );
@ -61,7 +61,7 @@ const FloatingSidePanelButtons = (props: Props) => {
            aria-label={t('accessibility.showOptionsPanel')}
            onClick={props.panelApi.expand}
            sx={floatingButtonStyles}
-            icon={<FaSlidersH />}
+            icon={<PiSlidersHorizontalBold size="16px" />}
          />
          <InvIconButton
            aria-label={t('queue.queueBack')}
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@ -33,9 +33,14 @@ import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { FaCube, FaFont, FaImage } from 'react-icons/fa';
-import { FaCircleNodes, FaList } from 'react-icons/fa6';
-import { MdGridOn } from 'react-icons/md';
+import { PiFlowArrowBold } from 'react-icons/pi';
+import {
+  RiBox2Line,
+  RiBrushLine,
+  RiImage2Line,
+  RiInputMethodLine,
+  RiPlayList2Fill,
+} from 'react-icons/ri';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';

@ -59,37 +64,37 @@ const tabs: InvokeTabInfo[] = [
  {
    id: 'txt2img',
    translationKey: 'common.txt2img',
-    icon: <FaFont />,
+    icon: <RiInputMethodLine />,
    content: <TextToImageTab />,
  },
  {
    id: 'img2img',
    translationKey: 'common.img2img',
-    icon: <FaImage />,
+    icon: <RiImage2Line />,
    content: <ImageTab />,
  },
  {
    id: 'unifiedCanvas',
    translationKey: 'common.unifiedCanvas',
-    icon: <MdGridOn />,
+    icon: <RiBrushLine />,
    content: <UnifiedCanvasTab />,
  },
  {
    id: 'nodes',
    translationKey: 'common.nodes',
-    icon: <FaCircleNodes />,
+    icon: <PiFlowArrowBold />,
    content: <NodesTab />,
  },
  {
    id: 'modelManager',
    translationKey: 'modelManager.modelManager',
-    icon: <FaCube />,
+    icon: <RiBox2Line />,
    content: <ModelManagerTab />,
  },
  {
    id: 'queue',
    translationKey: 'queue.queue',
-    icon: <FaList />,
+    icon: <RiPlayList2Fill />,
    content: <QueueTab />,
  },
 ];
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@ -3,7 +3,7 @@ import { InvButton } from 'common/components/InvButton/InvButton';
 import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaFolderOpen } from 'react-icons/fa';
+import { PiBooksBold } from 'react-icons/pi';

 import WorkflowLibraryModal from './WorkflowLibraryModal';

@ -14,7 +14,7 @@ const WorkflowLibraryButton = () => {
  return (
    <WorkflowLibraryModalContext.Provider value={disclosure}>
      <InvButton
-        leftIcon={<FaFolderOpen />}
+        leftIcon={<PiBooksBold />}
        onClick={disclosure.onOpen}
        pointerEvents="auto"
      >
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/DownloadWorkflowMenuItem.tsx
@ -2,14 +2,18 @@ import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
 import { useDownloadWorkflow } from 'features/workflowLibrary/hooks/useDownloadWorkflow';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaDownload } from 'react-icons/fa';
+import { PiDownloadSimpleBold } from 'react-icons/pi';

 const DownloadWorkflowMenuItem = () => {
  const { t } = useTranslation();
  const downloadWorkflow = useDownloadWorkflow();

  return (
-    <InvMenuItem as="button" icon={<FaDownload />} onClick={downloadWorkflow}>
+    <InvMenuItem
+      as="button"
+      icon={<PiDownloadSimpleBold />}
+      onClick={downloadWorkflow}
+    >
      {t('workflows.downloadWorkflow')}
    </InvMenuItem>
  );
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/NewWorkflowMenuItem.tsx
@ -8,7 +8,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaCircleNodes } from 'react-icons/fa6';
+import { PiFlowArrowBold } from 'react-icons/pi';

 const NewWorkflowMenuItem = () => {
  const { t } = useTranslation();
@ -41,7 +41,7 @@ const NewWorkflowMenuItem = () => {

  return (
    <>
-      <InvMenuItem as="button" icon={<FaCircleNodes />} onClick={onClick}>
+      <InvMenuItem as="button" icon={<PiFlowArrowBold />} onClick={onClick}>
        {t('nodes.newWorkflow')}
      </InvMenuItem>

--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx
@ -9,7 +9,7 @@ import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCo
 import type { ChangeEvent } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaClone } from 'react-icons/fa';
+import { PiCopyBold } from 'react-icons/pi';

 const SaveWorkflowAsButton = () => {
  const currentName = useAppSelector((s) => s.workflow.name);
@ -35,7 +35,7 @@ const SaveWorkflowAsButton = () => {

  return (
    <>
-      <InvMenuItem as="button" icon={<FaClone />} onClick={onOpenCallback}>
+      <InvMenuItem as="button" icon={<PiCopyBold />} onClick={onOpenCallback}>
        {t('workflows.saveWorkflowAs')}
      </InvMenuItem>

--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx
@ -2,13 +2,13 @@ import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
 import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaSave } from 'react-icons/fa';
+import { PiFloppyDiskBold } from 'react-icons/pi';

 const SaveLibraryWorkflowMenuItem = () => {
  const { t } = useTranslation();
  const { saveWorkflow } = useSaveLibraryWorkflow();
  return (
-    <InvMenuItem as="button" icon={<FaSave />} onClick={saveWorkflow}>
+    <InvMenuItem as="button" icon={<PiFloppyDiskBold />} onClick={saveWorkflow}>
      {t('workflows.saveWorkflow')}
    </InvMenuItem>
  );
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/SettingsMenuItem.tsx
@ -2,7 +2,7 @@ import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
 import WorkflowEditorSettings from 'features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaCog } from 'react-icons/fa';
+import { RiSettings4Line } from 'react-icons/ri';

 const DownloadWorkflowMenuItem = () => {
  const { t } = useTranslation();
@ -10,7 +10,7 @@ const DownloadWorkflowMenuItem = () => {
  return (
    <WorkflowEditorSettings>
      {({ onOpen }) => (
-        <InvMenuItem as="button" icon={<FaCog />} onClick={onOpen}>
+        <InvMenuItem as="button" icon={<RiSettings4Line />} onClick={onOpen}>
          {t('nodes.workflowSettings')}
        </InvMenuItem>
      )}
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem.tsx
@ -3,7 +3,7 @@ import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadW
 import { memo, useCallback, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
-import { FaUpload } from 'react-icons/fa';
+import { PiUploadSimpleBold } from 'react-icons/pi';

 const UploadWorkflowMenuItem = () => {
  const { t } = useTranslation();
@ -27,7 +27,7 @@ const UploadWorkflowMenuItem = () => {
    multiple: false,
  });
  return (
-    <InvMenuItem as="button" icon={<FaUpload />} {...getRootProps()}>
+    <InvMenuItem as="button" icon={<PiUploadSimpleBold />} {...getRootProps()}>
      {t('workflows.uploadWorkflow')}
      <input {...getInputProps()} />
    </InvMenuItem>
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu.tsx
@ -16,7 +16,7 @@ import SettingsMenuItem from 'features/workflowLibrary/components/WorkflowLibrar
 import UploadWorkflowMenuItem from 'features/workflowLibrary/components/WorkflowLibraryMenu/UploadWorkflowMenuItem';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaEllipsis } from 'react-icons/fa6';
+import { PiDotsThreeOutlineFill } from 'react-icons/pi';

 const WorkflowLibraryMenu = () => {
  const { t } = useTranslation();
@ -31,7 +31,7 @@ const WorkflowLibraryMenu = () => {
      <InvMenuButton
        as={InvIconButton}
        aria-label={t('workflows.workflowEditorMenu')}
-        icon={<FaEllipsis />}
+        icon={<PiDotsThreeOutlineFill />}
        pointerEvents="auto"
      />
      <InvMenuList pointerEvents="auto">