diff --git a/frontend/src/core/hooks/useFileActionIcons.tsx b/frontend/src/core/hooks/useFileActionIcons.tsx
index ec1cdbfca..3f67a2ddf 100644
--- a/frontend/src/core/hooks/useFileActionIcons.tsx
+++ b/frontend/src/core/hooks/useFileActionIcons.tsx
@@ -1,13 +1,33 @@
+import React from 'react';
 import LocalIcon from '@app/components/shared/LocalIcon';
 
+// Type for icon wrapper props (matches MUI fontSize convention)
+interface FileActionIconProps {
+  fontSize?: 'small' | 'medium' | 'large';
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+// Type for icon wrapper component
+type FileActionIconComponent = React.FC<FileActionIconProps>;
+
 /**
  * File action icons for web builds
  * Desktop builds override this with different icons
  */
 export function useFileActionIcons() {
   // Create wrapper components for LocalIcon that match the MUI icon interface
-  const UploadIcon = (props: any) => <LocalIcon icon="upload-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
-  const DownloadIcon = (props: any) => <LocalIcon icon="download-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+  const UploadIcon: FileActionIconComponent = (props) => {
+    const size = props.fontSize === 'small' ? 20 : 24;
+    return <LocalIcon icon="upload-rounded" width={size} height={size} {...props} />;
+  };
+
+  const DownloadIcon: FileActionIconComponent = (props) => {
+    const size = props.fontSize === 'small' ? 20 : 24;
+    return <LocalIcon icon="download-rounded" width={size} height={size} {...props} />;
+  };
 
   return {
     upload: UploadIcon,
diff --git a/frontend/src/core/hooks/useSuggestedTools.tsx b/frontend/src/core/hooks/useSuggestedTools.tsx
index e41f9cb84..c0d06fbd4 100644
--- a/frontend/src/core/hooks/useSuggestedTools.tsx
+++ b/frontend/src/core/hooks/useSuggestedTools.tsx
@@ -1,21 +1,32 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useNavigationState } from '@app/contexts/NavigationContext';
 import { useToolNavigation } from '@app/hooks/useToolNavigation';
 import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
 import { ToolId } from '@app/types/toolId';
 import LocalIcon from '@app/components/shared/LocalIcon';
 
-// Icon wrapper components
-const CompressIcon = (props: any) => <LocalIcon icon="compress-rounded" width={24} height={24} {...props} />;
-const SwapHorizIcon = (props: any) => <LocalIcon icon="swap-horiz-rounded" width={24} height={24} {...props} />;
-const CleaningServicesIcon = (props: any) => <LocalIcon icon="cleaning-services-rounded" width={24} height={24} {...props} />;
-const CropIcon = (props: any) => <LocalIcon icon="crop-rounded" width={24} height={24} {...props} />;
-const TextFieldsIcon = (props: any) => <LocalIcon icon="text-fields-rounded" width={24} height={24} {...props} />;
+// Type for the props that icon wrapper components accept
+interface IconWrapperProps {
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+// Type for an icon wrapper component
+type IconWrapperComponent = React.FC<IconWrapperProps>;
+
+// Factory function to create icon wrapper components
+function createIconComponent(iconName: string): IconWrapperComponent {
+  return (props: IconWrapperProps) => (
+    <LocalIcon icon={iconName} width={24} height={24} {...props} />
+  );
+}
 
 export interface SuggestedTool {
   id: ToolId;
   title: string;
-  icon: React.ComponentType<any>;
+  icon: IconWrapperComponent;
   href: string;
   onClick: (e: React.MouseEvent) => void;
 }
@@ -24,27 +35,27 @@ const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'href' | 'onClick'>[] = [
   {
     id: 'compress',
     title: 'Compress',
-    icon: CompressIcon
+    icon: createIconComponent('compress-rounded'),
   },
   {
     id: 'convert',
     title: 'Convert',
-    icon: SwapHorizIcon
+    icon: createIconComponent('swap-horiz-rounded'),
   },
   {
     id: 'sanitize',
     title: 'Sanitize',
-    icon: CleaningServicesIcon
+    icon: createIconComponent('cleaning-services-rounded'),
   },
   {
     id: 'split',
     title: 'Split',
-    icon: CropIcon
+    icon: createIconComponent('crop-rounded'),
   },
   {
     id: 'ocr',
     title: 'OCR',
-    icon: TextFieldsIcon
+    icon: createIconComponent('text-fields-rounded'),
   }
 ];
 
@@ -68,7 +79,7 @@ export function useSuggestedTools(): SuggestedTool[] {
           onClick: (e: React.MouseEvent) => { e.preventDefault(); }
         };
       }
-      
+
       const navProps = getToolNavigation(tool.id, toolRegistryEntry);
       return {
         ...tool,
diff --git a/frontend/src/desktop/hooks/useFileActionIcons.tsx b/frontend/src/desktop/hooks/useFileActionIcons.tsx
index 97ee110c6..da6391015 100644
--- a/frontend/src/desktop/hooks/useFileActionIcons.tsx
+++ b/frontend/src/desktop/hooks/useFileActionIcons.tsx
@@ -1,13 +1,33 @@
+import React from 'react';
 import LocalIcon from '@app/components/shared/LocalIcon';
 
+// Type for icon wrapper props (matches MUI fontSize convention)
+interface FileActionIconProps {
+  fontSize?: 'small' | 'medium' | 'large';
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+// Type for icon wrapper component
+type FileActionIconComponent = React.FC<FileActionIconProps>;
+
 /**
  * File action icons for desktop builds
  * Overrides core implementation with desktop-appropriate icons
  */
 export function useFileActionIcons() {
   // Create wrapper components for LocalIcon that match the MUI icon interface
-  const FolderOpenIcon = (props: any) => <LocalIcon icon="folder-open-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
-  const SaveIcon = (props: any) => <LocalIcon icon="save-rounded" width={props.fontSize === 'small' ? 20 : 24} height={props.fontSize === 'small' ? 20 : 24} {...props} />;
+  const FolderOpenIcon: FileActionIconComponent = (props) => {
+    const size = props.fontSize === 'small' ? 20 : 24;
+    return <LocalIcon icon="folder-open-rounded" width={size} height={size} {...props} />;
+  };
+
+  const SaveIcon: FileActionIconComponent = (props) => {
+    const size = props.fontSize === 'small' ? 20 : 24;
+    return <LocalIcon icon="save-rounded" width={size} height={size} {...props} />;
+  };
 
   return {
     upload: FolderOpenIcon,