From c8b86ed2cd9cd0801fb6b799f2b9e3ef120e80fb Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com.>
Date: Mon, 25 Aug 2025 15:01:09 +0100
Subject: [PATCH] icons!

---
 .../src/components/shared/LandingPage.tsx     |   6 +-
 .../components/shared/LanguageSelector.tsx    |   6 +-
 frontend/src/components/shared/LocalIcon.tsx  |  39 ++++---
 .../src/components/shared/QuickAccessBar.tsx  |  15 +--
 frontend/src/components/shared/RightRail.tsx  |  24 ++--
 frontend/src/components/shared/TextInput.tsx  |   2 +-
 frontend/src/components/shared/Tooltip.tsx    |   2 +-
 .../src/components/tools/shared/ToolStep.tsx  |   2 +-
 .../tools/shared/ToolWorkflowTitle.tsx        |   2 +-
 .../tools/toolPicker/ToolSearch.tsx           |   2 +-
 .../src/data/useTranslatedToolRegistry.tsx    | 110 +++++++++---------
 .../tools/automate/useSuggestedAutomations.ts |  12 +-
 12 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx
index 937e9cfbd..14322076e 100644
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import AddIcon from '@mui/icons-material/Add';
+import LocalIcon from './LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
@@ -138,7 +138,7 @@ const LandingPage = () => {
                 onClick={handleOpenFilesModal}
                 onMouseEnter={() => setIsUploadHover(false)}
               >
-                <AddIcon className="text-[var(--accent-interactive)]" />
+                <LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
                 {!isUploadHover && (
                   <span>
                     {t('landing.addFiles', 'Add Files')}
@@ -165,7 +165,7 @@ const LandingPage = () => {
                 onClick={handleNativeUploadClick}
                 onMouseEnter={() => setIsUploadHover(true)}
               >
-                <span className="material-symbols-rounded" style={{ fontSize: '1.25rem', color: 'var(--accent-interactive)' }}>upload</span>
+                <LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
                 {isUploadHover && (
                   <span style={{ marginLeft: '.5rem' }}>
                     {t('landing.uploadFromComputer', 'Upload from computer')}
diff --git a/frontend/src/components/shared/LanguageSelector.tsx b/frontend/src/components/shared/LanguageSelector.tsx
index 1d9e5b2dc..d3a346a8e 100644
--- a/frontend/src/components/shared/LanguageSelector.tsx
+++ b/frontend/src/components/shared/LanguageSelector.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
-import LanguageIcon from '@mui/icons-material/Language';
+import LocalIcon from './LocalIcon';
 import styles from './LanguageSelector.module.css';
 
 interface LanguageSelectorProps {
@@ -105,13 +105,13 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
               }
             }}
           >
-            <span className="material-symbols-rounded">language</span>
+            <LocalIcon icon="language" width="1.5rem" height="1.5rem" />
           </ActionIcon>
         ) : (
           <Button
             variant="subtle"
             size="sm"
-            leftSection={<LanguageIcon style={{ fontSize: 18 }} />}
+            leftSection={<LocalIcon icon="language" width="1.5rem" height="1.5rem" />}
             styles={{
               root: {
                 border: 'none',
diff --git a/frontend/src/components/shared/LocalIcon.tsx b/frontend/src/components/shared/LocalIcon.tsx
index c4d857502..d3330d9c0 100644
--- a/frontend/src/components/shared/LocalIcon.tsx
+++ b/frontend/src/components/shared/LocalIcon.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
 import { addCollection, Icon } from '@iconify/react';
 
-// Try to import the icon set - it will be auto-generated
-let iconSet: any = null;
+// Try to load icons at import time
 let iconsLoaded = false;
+let localIconCount = 0;
 
-try {
-  iconSet = require('../../assets/material-symbols-icons.json');
-  if (!iconsLoaded && iconSet) {
-    addCollection(iconSet);
-    iconsLoaded = true;
+// Use a simple try/catch for the icon loading
+(async () => {
+  try {
+    const iconModule = await import('../../assets/material-symbols-icons.json');
+    const iconSet = iconModule.default || iconModule;
+    if (iconSet) {
+      addCollection(iconSet);
+      iconsLoaded = true;
+      localIconCount = Object.keys(iconSet.icons || {}).length;
+      console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
+    }
+  } catch (error) {
+    // Silently fail - icons will fallback to CDN
+    console.info('ℹ️  Local icons not available - using CDN fallback');
   }
-} catch (error) {
-  console.warn('Local icon set not found. Run `npm run generate-icons` to create it.');
-}
+})();
 
 interface LocalIconProps {
   icon: string;
@@ -33,11 +40,17 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
     ? icon 
     : `material-symbols:${icon}`;
   
-  // Fallback if icons haven't been loaded yet
-  if (!iconsLoaded || !iconSet) {
-    return <span style={{ display: 'inline-block', width: props.width || 24, height: props.height || 24 }} />;
+  // Development logging (only in dev mode)
+  if (process.env.NODE_ENV === 'development') {
+    const logKey = `icon-${iconName}`;
+    if (!sessionStorage.getItem(logKey)) {
+      const source = iconsLoaded ? 'local' : 'CDN';
+      console.debug(`🎯 Icon: ${iconName} (${source})`);
+      sessionStorage.setItem(logKey, 'logged');
+    }
   }
   
+  // Always render the icon - Iconify will use local if available, CDN if not
   return <Icon icon={iconName} {...props} />;
 };
 
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index fedcff614..80013d519 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -2,9 +2,6 @@ import React, { useState, useRef, forwardRef, useEffect } from "react";
 import { ActionIcon, Stack, Divider } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import LocalIcon from './LocalIcon';
-import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
-import SettingsIcon from "@mui/icons-material/SettingsRounded";
-import FolderIcon from "@mui/icons-material/FolderRounded";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import AppConfigModal from './AppConfigModal';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
@@ -45,7 +42,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'read',
       name: t("quickAccess.read", "Read"),
-      icon: <MenuBookIcon sx={{ fontSize: "1.5rem" }} />,
+      icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -58,7 +55,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'sign',
       name: t("quickAccess.sign", "Sign"),
-      icon: <LocalIcon icon="signature-rounded" width="20" height="20" />,
+      icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -70,7 +67,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
-      icon: <LocalIcon icon="automation" width="20" height="20" />,
+      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -82,7 +79,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'files',
       name: t("quickAccess.files", "Files"),
-      icon: <FolderIcon sx={{ fontSize: "1.25rem" }} />,
+      icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
       size: 'lg',
       type: 'modal',
@@ -91,7 +88,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'activity',
       name: t("quickAccess.activity", "Activity"),
-      icon: <LocalIcon icon="vital-signs-rounded" width="20" height="20" />,
+      icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
       size: 'lg',
       type: 'navigation',
@@ -100,7 +97,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'config',
       name: t("quickAccess.config", "Config"),
-      icon: <SettingsIcon sx={{ fontSize: "1rem" }} />,
+      icon: <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
       size: 'lg',
       type: 'modal',
       onClick: () => {
diff --git a/frontend/src/components/shared/RightRail.tsx b/frontend/src/components/shared/RightRail.tsx
index 46a6b97de..eade0a066 100644
--- a/frontend/src/components/shared/RightRail.tsx
+++ b/frontend/src/components/shared/RightRail.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { ActionIcon, Divider, Popover } from '@mantine/core';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import LocalIcon from './LocalIcon';
 import './rightRail/RightRail.css';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useRightRail } from '../../contexts/RightRailContext';
@@ -234,9 +234,7 @@ export default function RightRail() {
                   onClick={handleSelectAll}
                   disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems}
                 >
-                  <span className="material-symbols-rounded">
-                    select_all
-                  </span>
+                  <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />
                 </ActionIcon>
               </div>
             </Tooltip>
@@ -251,9 +249,7 @@ export default function RightRail() {
                   onClick={handleDeselectAll}
                   disabled={currentView === 'viewer' || selectedCount === 0}
                 >
-                  <span className="material-symbols-rounded">
-                    crop_square
-                  </span>
+                  <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />
                 </ActionIcon>
               </div>
             </Tooltip>
@@ -273,9 +269,7 @@ export default function RightRail() {
                           disabled={!pageControlsVisible || totalItems === 0}
                           aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'}
                         >
-                          <span className="material-symbols-rounded">
-                            pin_end
-                          </span>
+                          <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
                         </ActionIcon>
                       </div>
                   </Popover.Target>
@@ -309,7 +303,7 @@ export default function RightRail() {
                       disabled={!pageControlsVisible || (Array.isArray(selectedPageNumbers) ? selectedPageNumbers.length === 0 : true)}
                       aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'}
                     >
-                      <span className="material-symbols-rounded">delete</span>
+                      <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />
                     </ActionIcon>
                   </div>
               </div>
@@ -331,7 +325,7 @@ export default function RightRail() {
                     (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf))
                   }
                 >
-                  <CloseRoundedIcon />
+                  <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />
                 </ActionIcon>
               </div>
             </Tooltip>
@@ -349,7 +343,7 @@ export default function RightRail() {
               className="right-rail-icon"
               onClick={toggleTheme}
             >
-              <span className="material-symbols-rounded">contrast</span>
+              <LocalIcon icon="contrast" width="1.5rem" height="1.5rem" />
             </ActionIcon>
           </Tooltip>
 
@@ -368,9 +362,7 @@ export default function RightRail() {
                 onClick={handleExportAll}
                 disabled={currentView === 'viewer' || totalItems === 0}
               >
-                <span className="material-symbols-rounded">
-                  download
-                </span>
+                <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
               </ActionIcon>
             </div>
           </Tooltip>
diff --git a/frontend/src/components/shared/TextInput.tsx b/frontend/src/components/shared/TextInput.tsx
index 075261835..fc3e99015 100644
--- a/frontend/src/components/shared/TextInput.tsx
+++ b/frontend/src/components/shared/TextInput.tsx
@@ -97,7 +97,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
           style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
           aria-label="Clear input"
         >
-          <LocalIcon icon="close-rounded" width="20" height="20" />
+          <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
         </button>
       )}
     </div>
diff --git a/frontend/src/components/shared/Tooltip.tsx b/frontend/src/components/shared/Tooltip.tsx
index d2e6b2391..7940112ca 100644
--- a/frontend/src/components/shared/Tooltip.tsx
+++ b/frontend/src/components/shared/Tooltip.tsx
@@ -172,7 +172,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
           }}
           title="Close tooltip"
         >
-          <LocalIcon icon="close-rounded" width="20" height="20" />
+          <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
         </button>
       )}
       {arrow && getArrowClass() && (
diff --git a/frontend/src/components/tools/shared/ToolStep.tsx b/frontend/src/components/tools/shared/ToolStep.tsx
index f8c36bdd5..c28625cfb 100644
--- a/frontend/src/components/tools/shared/ToolStep.tsx
+++ b/frontend/src/components/tools/shared/ToolStep.tsx
@@ -55,7 +55,7 @@ const renderTooltipTitle = (
           <Text fw={500} size="lg">
             {title}
           </Text>
-          <LocalIcon icon="gpp-maybe-rounded" width="20" height="20" style={{ color: 'var(--icon-files-color)' }} />
+          <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
         </Flex>
       </Tooltip>
     );
diff --git a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
index 6c12ddac9..6ed949442 100644
--- a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
+++ b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
@@ -30,7 +30,7 @@ export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
               <Text fw={500} size="xl" p="md">
                 {title}
               </Text>
-              <LocalIcon icon="gpp-maybe-rounded" width="20" height="20" style={{ color: 'var(--icon-files-color)' }} />
+              <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
             </Flex>
           </Tooltip>
         </Flex>
diff --git a/frontend/src/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
index adc1d95fe..774126aa2 100644
--- a/frontend/src/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -75,7 +75,7 @@ const ToolSearch = ({
         value={value}
         onChange={handleSearchChange}
         placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
-        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="24" height="24" />}
+        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
         autoComplete="off"
 
       />
diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx
index 6d09b8c31..db8b2cf23 100644
--- a/frontend/src/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/data/useTranslatedToolRegistry.tsx
@@ -51,7 +51,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Signing
 
     "certSign": {
-        icon: <LocalIcon icon="workspace-premium-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="workspace-premium-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.certSign.title", "Sign with Certificate"),
         component: null,
         view: "sign",
@@ -60,7 +60,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.SIGNING
     },
     "sign": {
-        icon: <LocalIcon icon="signature-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.sign.title", "Sign"),
         component: null,
         view: "sign",
@@ -73,7 +73,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Document Security
 
     "addPassword": {
-        icon: <LocalIcon icon="password-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="password-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addPassword.title", "Add Password"),
         component: AddPassword,
         view: "security",
@@ -86,7 +86,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: AddPasswordSettings
     },
     "watermark": {
-        icon: <LocalIcon icon="branding-watermark-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="branding-watermark-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.watermark.title", "Add Watermark"),
         component: AddWatermark,
         view: "format",
@@ -99,7 +99,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: AddWatermarkSingleStepSettings
     },
     "add-stamp": {
-        icon: <LocalIcon icon="approval-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="approval-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.AddStampRequest.title", "Add Stamp to PDF"),
         component: null,
         view: "format",
@@ -108,7 +108,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "sanitize": {
-        icon: <LocalIcon icon="cleaning-services-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="cleaning-services-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.sanitize.title", "Sanitize"),
         component: Sanitize,
         view: "security",
@@ -121,7 +121,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: SanitizeSettings
     },
     "flatten": {
-        icon: <LocalIcon icon="layers-clear-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="layers-clear-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.flatten.title", "Flatten"),
         component: null,
         view: "format",
@@ -130,7 +130,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "unlock-pdf-forms": {
-        icon: <LocalIcon icon="preview-off-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="preview-off-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.unlockPDFForms.title", "Unlock PDF Forms"),
         component: UnlockPdfForms,
         view: "security",
@@ -143,7 +143,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: UnlockPdfFormsSettings
     },
     "manage-certificates": {
-        icon: <LocalIcon icon="license-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="license-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.manageCertificates.title", "Manage Certificates"),
         component: null,
         view: "security",
@@ -152,7 +152,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.DOCUMENT_SECURITY
     },
     "change-permissions": {
-        icon: <LocalIcon icon="lock-outline" width="24" height="24" />,
+        icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
         name: t("home.changePermissions.title", "Change Permissions"),
         component: ChangePermissions,
         view: "security",
@@ -167,7 +167,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Verification
 
     "get-all-info-on-pdf": {
-        icon: <LocalIcon icon="fact-check-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="fact-check-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.getPdfInfo.title", "Get ALL Info on PDF"),
         component: null,
         view: "extract",
@@ -176,7 +176,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.VERIFICATION
     },
     "validate-pdf-signature": {
-        icon: <LocalIcon icon="verified-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="verified-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.validateSignature.title", "Validate PDF Signature"),
         component: null,
         view: "security",
@@ -189,7 +189,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Document Review
 
     "read": {
-        icon: <LocalIcon icon="article-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="article-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.read.title", "Read"),
         component: null,
         view: "view",
@@ -198,7 +198,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.DOCUMENT_REVIEW
     },
     "change-metadata": {
-        icon: <LocalIcon icon="assignment-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="assignment-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.changeMetadata.title", "Change Metadata"),
         component: null,
         view: "format",
@@ -209,7 +209,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Page Formatting
 
     "cropPdf": {
-        icon: <LocalIcon icon="crop-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="crop-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.crop.title", "Crop PDF"),
         component: null,
         view: "format",
@@ -218,7 +218,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "rotate": {
-        icon: <LocalIcon icon="rotate-right-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.rotate.title", "Rotate"),
         component: null,
         view: "format",
@@ -227,7 +227,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "splitPdf": {
-        icon: <LocalIcon icon="content-cut-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.split.title", "Split"),
         component: SplitPdfPanel,
         view: "split",
@@ -238,7 +238,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: SplitSettings
     },
     "reorganize-pages": {
-        icon: <LocalIcon icon="move-down-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.reorganizePages.title", "Reorganize Pages"),
         component: null,
         view: "pageEditor",
@@ -247,7 +247,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "adjust-page-size-scale": {
-        icon: <LocalIcon icon="crop-free-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="crop-free-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.scalePages.title", "Adjust page size/scale"),
         component: null,
         view: "format",
@@ -256,7 +256,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "addPageNumbers": {
-        icon: <LocalIcon icon="123-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="123-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addPageNumbers.title", "Add Page Numbers"),
         component: null,
         view: "format",
@@ -265,7 +265,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "multi-page-layout": {
-        icon: <LocalIcon icon="dashboard-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pageLayout.title", "Multi-Page Layout"),
         component: null,
         view: "format",
@@ -274,7 +274,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.PAGE_FORMATTING
     },
     "single-large-page": {
-        icon: <LocalIcon icon="looks-one-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="looks-one-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
         component: SingleLargePage,
         view: "format",
@@ -286,7 +286,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         operationConfig: singleLargePageOperationConfig
     },
     "add-attachments": {
-        icon: <LocalIcon icon="attachment-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.attachments.title", "Add Attachments"),
         component: null,
         view: "format",
@@ -299,7 +299,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Extraction
 
     "extractPages": {
-        icon: <LocalIcon icon="upload-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="upload-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.extractPages.title", "Extract Pages"),
         component: null,
         view: "extract",
@@ -308,7 +308,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.EXTRACTION
     },
     "extract-images": {
-        icon: <LocalIcon icon="filter-alt" width="24" height="24" />,
+        icon: <LocalIcon icon="filter-alt" width="1.5rem" height="1.5rem" />,
         name: t("home.extractImages.title", "Extract Images"),
         component: null,
         view: "extract",
@@ -321,7 +321,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Removal
 
     "removePages": {
-        icon: <LocalIcon icon="delete-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removePages.title", "Remove Pages"),
         component: null,
         view: "remove",
@@ -330,7 +330,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-blank-pages": {
-        icon: <LocalIcon icon="scan-delete-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="scan-delete-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeBlanks.title", "Remove Blank Pages"),
         component: null,
         view: "remove",
@@ -339,7 +339,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-annotations": {
-        icon: <LocalIcon icon="thread-unread-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="thread-unread-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeAnnotations.title", "Remove Annotations"),
         component: null,
         view: "remove",
@@ -348,7 +348,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-image": {
-        icon: <LocalIcon icon="remove-selection-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeImagePdf.title", "Remove Image"),
         component: null,
         view: "format",
@@ -357,7 +357,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.REMOVAL
     },
     "remove-password": {
-        icon: <LocalIcon icon="lock-open-right-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="lock-open-right-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removePassword.title", "Remove Password"),
         component: RemovePassword,
         view: "security",
@@ -370,7 +370,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: RemovePasswordSettings
     },
     "remove-certificate-sign": {
-        icon: <LocalIcon icon="remove-moderator-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="remove-moderator-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeCertSign.title", "Remove Certificate Sign"),
         component: RemoveCertificateSign,
         view: "security",
@@ -386,7 +386,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Automation
 
     "automate": {
-        icon: <LocalIcon icon="automation" width="24" height="24" />,
+        icon: <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />,
         name: t("home.automate.title", "Automate"),
         component: React.lazy(() => import('../tools/Automate')),
         view: "format",
@@ -397,7 +397,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         endpoints: ["handleData"]
     },
     "auto-rename-pdf-file": {
-        icon: <LocalIcon icon="match-word-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="match-word-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.auto-rename.title", "Auto Rename PDF File"),
         component: null,
         view: "format",
@@ -406,7 +406,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-pages": {
-        icon: <LocalIcon icon="split-scene-right-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="split-scene-right-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.autoSplitPDF.title", "Auto Split Pages"),
         component: null,
         view: "format",
@@ -415,7 +415,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.AUTOMATION
     },
     "auto-split-by-size-count": {
-        icon: <LocalIcon icon="content-cut-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.autoSizeSplitPDF.title", "Auto Split by Size/Count"),
         component: null,
         view: "format",
@@ -428,7 +428,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Advanced Formatting
 
     "adjustContrast": {
-        icon: <LocalIcon icon="palette" width="24" height="24" />,
+        icon: <LocalIcon icon="palette" width="1.5rem" height="1.5rem" />,
         name: t("home.adjustContrast.title", "Adjust Colors/Contrast"),
         component: null,
         view: "format",
@@ -437,7 +437,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "repair": {
-        icon: <LocalIcon icon="build-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="build-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.repair.title", "Repair"),
         component: Repair,
         view: "format",
@@ -450,7 +450,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: RepairSettings
     },
     "detect-split-scanned-photos": {
-        icon: <LocalIcon icon="scanner-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.ScannerImageSplit.title", "Detect & Split Scanned Photos"),
         component: null,
         view: "format",
@@ -459,7 +459,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "overlay-pdfs": {
-        icon: <LocalIcon icon="layers-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="layers-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.overlay-pdfs.title", "Overlay PDFs"),
         component: null,
         view: "format",
@@ -468,7 +468,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "replace-and-invert-color": {
-        icon: <LocalIcon icon="format-color-fill-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.replaceColorPdf.title", "Replace & Invert Color"),
         component: null,
         view: "format",
@@ -477,7 +477,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "add-image": {
-        icon: <LocalIcon icon="image-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addImage.title", "Add Image"),
         component: null,
         view: "format",
@@ -486,7 +486,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "edit-table-of-contents": {
-        icon: <LocalIcon icon="bookmark-add-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="bookmark-add-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.editTableOfContents.title", "Edit Table of Contents"),
         component: null,
         view: "format",
@@ -495,7 +495,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING
     },
     "scanner-effect": {
-        icon: <LocalIcon icon="scanner-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.fakeScan.title", "Scanner Effect"),
         component: null,
         view: "format",
@@ -508,7 +508,7 @@ export function useFlatToolRegistry(): ToolRegistry {
     // Developer Tools
 
     "show-javascript": {
-        icon: <LocalIcon icon="javascript-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="javascript-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.showJS.title", "Show JavaScript"),
         component: null,
         view: "extract",
@@ -517,7 +517,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.DEVELOPER_TOOLS
     },
     "dev-api": {
-        icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devApi.title", "API"),
         component: null,
         view: "external",
@@ -527,7 +527,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html"
     },
     "dev-folder-scanning": {
-        icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devFolderScanning.title", "Automated Folder Scanning"),
         component: null,
         view: "external",
@@ -537,7 +537,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Folder%20Scanning/"
     },
     "dev-sso-guide": {
-        icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devSsoGuide.title", "SSO Guide"),
         component: null,
         view: "external",
@@ -547,7 +547,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Single%20Sign-On%20Configuration",
     },
     "dev-airgapped": {
-        icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />,
+        icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
         name: t("home.devAirgapped.title", "Air-gapped Setup"),
         component: null,
         view: "external",
@@ -560,7 +560,7 @@ export function useFlatToolRegistry(): ToolRegistry {
 
     // Recommended Tools
     "compare": {
-        icon: <LocalIcon icon="compare-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="compare-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.compare.title", "Compare"),
         component: null,
         view: "format",
@@ -569,7 +569,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.GENERAL
     },
     "compress": {
-        icon: <LocalIcon icon="zoom-in-map-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="zoom-in-map-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.compress.title", "Compress"),
         component: CompressPdfPanel,
         view: "compress",
@@ -581,7 +581,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: CompressSettings
     },
     "convert": {
-        icon: <LocalIcon icon="sync-alt-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="sync-alt-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.convert.title", "Convert"),
         component: ConvertPanel,
         view: "convert",
@@ -627,7 +627,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: ConvertSettings
     },
     "mergePdfs": {
-        icon: <LocalIcon icon="library-add-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.merge.title", "Merge"),
         component: null,
         view: "merge",
@@ -637,7 +637,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         maxFiles: -1
     },
     "multi-tool": {
-        icon: <LocalIcon icon="dashboard-customize-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.multiTool.title", "Multi-Tool"),
         component: null,
         view: "pageEditor",
@@ -647,7 +647,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         maxFiles: -1
     },
     "ocr": {
-        icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.ocr.title", "OCR"),
         component: OCRPanel,
         view: "convert",
@@ -659,7 +659,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: OCRSettings
     },
     "redact": {
-        icon: <LocalIcon icon="visibility-off-rounded" width="24" height="24" />,
+        icon: <LocalIcon icon="visibility-off-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.redact.title", "Redact"),
         component: null,
         view: "redact",
diff --git a/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
index 9ddce1e0b..006c9f179 100644
--- a/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
+++ b/frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
@@ -1,11 +1,15 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import StarIcon from '@mui/icons-material/Star';
-import CompressIcon from '@mui/icons-material/Compress';
-import SecurityIcon from '@mui/icons-material/Security';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
+import React from 'react';
+import LocalIcon from '../../../components/shared/LocalIcon';
 import { SuggestedAutomation } from '../../../types/automation';
 
+// Create icon components
+const CompressIcon = () => React.createElement(LocalIcon, { icon: 'compress', width: '1.5rem', height: '1.5rem' });
+const TextFieldsIcon = () => React.createElement(LocalIcon, { icon: 'text-fields', width: '1.5rem', height: '1.5rem' });
+const SecurityIcon = () => React.createElement(LocalIcon, { icon: 'security', width: '1.5rem', height: '1.5rem' });
+const StarIcon = () => React.createElement(LocalIcon, { icon: 'star', width: '1.5rem', height: '1.5rem' });
+
 export function useSuggestedAutomations(): SuggestedAutomation[] {
   const { t } = useTranslation();