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>

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: {

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')}

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,
+  PiArrowLeftBold,
-  FaArrowRight,
+  PiArrowRightBold,
-  FaCheck,
+  PiCheckBold,
-  FaEye,
+  PiEyeBold,
-  FaEyeSlash,
+  PiEyeSlashBold,
-  FaSave,
+  PiFloppyDiskBold,
-  FaTimes,
+  PiXBold,
-} from 'react-icons/fa';
+} 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}

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')}

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}
     />

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>

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,
+  PiEraserBold,
-  FaEyeDropper,
+  PiEyedropperBold,
-  FaFillDrip,
+  PiPaintBrushBold,
-  FaPaintBrush,
+  PiPaintBucketBold,
-  FaSlidersH,
+  PiSlidersHorizontalBold,
-  FaTimes,
+  PiXBold,
-} from 'react-icons/fa';
+} 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>

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,
+  PiCopyBold,
-  FaCopy,
+  PiCrosshairSimpleBold,
-  FaCrosshairs,
+  PiDownloadSimpleBold,
-  FaDownload,
+  PiFloppyDiskBold,
-  FaLayerGroup,
+  PiHandGrabbingBold,
-  FaSave,
+  PiStackBold,
-  FaTrash,
+  PiTrashSimpleBold,
-  FaUpload,
+  PiUploadSimpleBold,
-} from 'react-icons/fa';
+} 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}

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}
     />

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} />

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}

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}

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')}

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>
       )}

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>

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,
+  PiAsteriskBold,
-  FaCode,
+  PiDotsThreeOutlineFill,
-  FaHourglassHalf,
+  PiFlowArrowBold,
-  FaQuoteRight,
+  PiHourglassHighBold,
-  FaRulerVertical,
+  PiInfoBold,
-  FaSeedling,
+  PiPlantBold,
-} from 'react-icons/fa';
+  PiQuotesBold,
-import { FaCircleNodes, FaEllipsis } from 'react-icons/fa6';
+  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}
           />

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>

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 {
-import { MdStar, MdStarBorder } from 'react-icons/md';
+  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')}

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,
+  PiAsteriskBold,
-  FaCopy,
+  PiCopyBold,
-  FaDownload,
+  PiDownloadSimpleBold,
-  FaExternalLinkAlt,
+  PiFlowArrowBold,
-  FaFolder,
+  PiFoldersBold,
-  FaQuoteRight,
+  PiPlantBold,
-  FaSeedling,
+  PiQuotesBold,
-  FaShare,
+  PiShareFatBold,
-  FaTrash,
+  PiStarBold,
-} from 'react-icons/fa';
+  PiStarFill,
-import { FaCircleNodes } from 'react-icons/fa6';
+  PiTrashSimpleBold,
-import { MdStar, MdStarBorder } from 'react-icons/md';
+} 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')}

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')}

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 { PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi';
-import { MdStar, MdStarBorder } from 'react-icons/md';
 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}
               />

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}
       >

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}

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"
       />

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,
+  PiFrameCornersBold,
-  // FaInfo,
+  PiMagnifyingGlassMinusBold,
-  FaMapMarkerAlt,
+  PiMagnifyingGlassPlusBold,
-} from 'react-icons/fa';
+  PiMapPinBold,
-import { FaMagnifyingGlassMinus, FaMagnifyingGlassPlus } from 'react-icons/fa6';
+} 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>
   );

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"
     />

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}

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 />
+        )
+      }
     />
   );
 });

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'}
     />
   );

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 />}
     />
   );
 });

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}
         />

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')}

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>

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}

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')}

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')}

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}

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"
     />

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"
     />

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 { PiPauseFill, PiPlayFill, PiXBold } from 'react-icons/pi';
-import { FaList } from 'react-icons/fa6';
+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 && (

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"
     />
   );

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"
     />

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}

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>

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 />

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 {
-import { FaWrench } from 'react-icons/fa6';
+  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>

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}

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 { PiSlidersHorizontalBold } from 'react-icons/pi';
-import { IoSparkles } from 'react-icons/io5';
+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')}

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 { PiFlowArrowBold } from 'react-icons/pi';
-import { FaCircleNodes, FaList } from 'react-icons/fa6';
+import {
-import { MdGridOn } from 'react-icons/md';
+  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 />,
   },
 ];

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"
       >

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>
   );

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>
 

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>
 

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>
   );

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>
       )}

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>

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">