Created shared component

frontend/src/components/shared/ToolIcon.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface ToolIconProps {
+  icon: React.ReactNode;
+  opacity?: number;
+  color?: string;
+  marginRight?: string;
+}
+
+/**
+ * Shared icon component for consistent tool icon styling across the application.
+ * Uses the same visual pattern as ToolButton: scaled to 0.8, centered transform, consistent spacing.
+ */
+export const ToolIcon: React.FC<ToolIconProps> = ({
+  icon,
+  opacity = 1,
+  color = "var(--tools-text-and-icon-color)",
+  marginRight = "0.5rem"
+}) => {
+  return (
+    <div
+      className="tool-button-icon"
+      style={{
+        color,
+        marginRight,
+        transform: "scale(0.8)",
+        transformOrigin: "center",
+        opacity
+      }}
+    >
+      {icon}
+    </div>
+  );
+};

frontend/src/components/tools/automate/AutomationEntry.tsx

@@ -6,6 +6,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Tooltip } from '../../shared/Tooltip';
+import { ToolIcon } from '../../shared/ToolIcon';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
 
 interface AutomationEntryProps {
@@ -114,10 +115,9 @@ export default function AutomationEntry({
       return (
         <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
           {BadgeIcon && (
-            <BadgeIcon
-              style={{
-                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
-              }}
+            <ToolIcon
+              icon={<BadgeIcon />}
+              color={keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'}
             />
           )}
           <Text size="xs" style={{ flex: 1, textAlign: 'left', color: 'var(--mantine-color-text)' }}>
@@ -130,10 +130,9 @@ export default function AutomationEntry({
       return (
         <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
           {BadgeIcon && (
-            <BadgeIcon
-              style={{
-                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
-              }}
+            <ToolIcon
+              icon={<BadgeIcon />}
+              color={keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'}
             />
           )}
           <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>

frontend/src/components/tools/shared/SuggestedToolsSection.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
+import { ToolIcon } from '../../shared/ToolIcon';
 
 export function SuggestedToolsSection(): React.ReactElement {
   const { t } = useTranslation();
@@ -31,7 +32,7 @@ export function SuggestedToolsSection(): React.ReactElement {
                 style={{ cursor: 'pointer' }}
               >
                 <Group gap="xs">
-                  <IconComponent fontSize="small" />
+                  <ToolIcon icon={<IconComponent />} />
                   <Text size="sm" fw={500}>
                     {tool.title}
                   </Text>