diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index 7f7468ece2..b4c052c13c 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,6 +1,8 @@
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
 import cn from '@/utils/classnames'
+import { shouldUseMcpIcon } from '@/utils/mcp'
 
 const iconSizeMap = {
   xs: 'w-4 h-4 text-base',
@@ -35,6 +37,7 @@ const Icon = ({
           icon={src.content}
           background={src.background}
           className='rounded-md'
+          innerIcon={shouldUseMcpIcon(src) ? <Mcp className='h-8 w-8 text-text-primary-on-surface' /> : undefined}
         />
       </div>
     )
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 1a12b3b3e9..1d888c57e8 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getDomain } from 'tldts'
 import { RiCloseLine, RiEditLine } from '@remixicon/react'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIcon from '@/app/components/base/app-icon'
@@ -17,6 +18,7 @@ import Toast from '@/app/components/base/toast'
 import { uploadRemoteFileInfo } from '@/service/common'
 import cn from '@/utils/classnames'
 import { useHover } from 'ahooks'
+import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
 
 export type DuplicateAppModalProps = {
   data?: ToolWithProvider
@@ -35,7 +37,7 @@ export type DuplicateAppModalProps = {
   onHide: () => void
 }
 
-const DEFAULT_ICON = { type: 'emoji', icon: '🧿', background: '#EFF1F5' }
+const DEFAULT_ICON = { type: 'emoji', icon: '🔗', background: '#6366F1' }
 const extractFileId = (url: string) => {
   const match = url.match(/files\/(.+?)\/file-preview/)
   return match ? match[1] : null
@@ -208,6 +210,7 @@ const MCPModal = ({
                 icon={appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId}
                 background={appIcon.type === 'emoji' ? appIcon.background : undefined}
                 imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+                innerIcon={shouldUseMcpIconForAppIcon(appIcon.type, appIcon.type === 'emoji' ? appIcon.icon : '') ? <Mcp className='h-8 w-8 text-text-primary-on-surface' /> : undefined}
                 size='xxl'
                 className='relative cursor-pointer rounded-2xl'
                 coverElement={
diff --git a/web/utils/mcp.ts b/web/utils/mcp.ts
new file mode 100644
index 0000000000..dcbb63ee8a
--- /dev/null
+++ b/web/utils/mcp.ts
@@ -0,0 +1,22 @@
+/**
+ * MCP (Model Context Protocol) utility functions
+ */
+
+/**
+ * Determines if the MCP icon should be used based on the icon source
+ * @param src - The icon source, can be a string URL or an object with content and background
+ * @returns true if the MCP icon should be used (when it's an emoji object with 🔗 content)
+ */
+export const shouldUseMcpIcon = (src: any): boolean => {
+  return typeof src === 'object' && src?.content === '🔗'
+}
+
+/**
+ * Checks if an app icon should use the MCP icon
+ * @param iconType - The type of icon ('emoji' | 'image')
+ * @param icon - The icon content (emoji or file ID)
+ * @returns true if the MCP icon should be used
+ */
+export const shouldUseMcpIconForAppIcon = (iconType: string, icon: string): boolean => {
+  return iconType === 'emoji' && icon === '🔗'
+}