diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index b94258855a..8616f34200 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -2,10 +2,11 @@ import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import classNames from '@/utils/classnames'
 import { memo, useMemo, useRef, useState } from 'react'
-import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
 import { useTranslation } from 'react-i18next'
 import { Group } from '@/app/components/base/icons/src/vender/other'
+import AppIcon from '@/app/components/base/app-icon'
 
 type Status = 'not-installed' | 'not-authorized' | undefined
 
@@ -19,19 +20,21 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
-  const isDataReady = !!buildInTools && !!customTools && !!workflowTools
+  const { data: mcpTools } = useAllMCPTools()
+  const isDataReady = !!buildInTools && !!customTools && !!workflowTools && !!mcpTools
   const currentProvider = useMemo(() => {
-    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
     return mergedTools.find((toolWithProvider) => {
-      return toolWithProvider.name === providerName
+      return toolWithProvider.name === providerName || toolWithProvider.id === providerName
     })
-  }, [buildInTools, customTools, providerName, workflowTools])
+  }, [buildInTools, customTools, providerName, workflowTools, mcpTools])
+
   const providerNameParts = providerName.split('/')
   const author = providerNameParts[0]
   const name = providerNameParts[1]
   const icon = useMemo(() => {
     if (!isDataReady) return ''
-    if (currentProvider) return currentProvider.icon as string
+    if (currentProvider) return currentProvider.icon
     const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
     return iconFromMarketPlace
   }, [author, currentProvider, name, isDataReady])
@@ -62,19 +65,32 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
       )}
       ref={containerRef}
     >
-      {(!iconFetchError && isDataReady)
-
-        ? <img
-          src={icon}
-          alt='tool icon'
-          className={classNames(
-            'w-full h-full size-3.5 object-cover',
-            notSuccess && 'opacity-50',
-          )}
-          onError={() => setIconFetchError(true)}
-        />
-        : <Group className="h-3 w-3 opacity-35" />
-      }
+      {(() => {
+        if (iconFetchError || !icon)
+          return <Group className="h-3 w-3 opacity-35" />
+        if (typeof icon === 'string') {
+          return <img
+            src={icon}
+            alt='tool icon'
+            className={classNames(
+              'w-full h-full size-3.5 object-cover',
+              notSuccess && 'opacity-50',
+            )}
+            onError={() => setIconFetchError(true)}
+          />
+        }
+        if (typeof icon === 'object') {
+          return <AppIcon
+            className={classNames(
+              'w-full h-full size-3.5 object-cover',
+              notSuccess && 'opacity-50',
+            )}
+            icon={icon?.content}
+            background={icon?.background}
+          />
+        }
+        return <Group className="h-3 w-3 opacity-35" />
+      })()}
       {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
     </div>
   </Tooltip>