From baa20348cee56cf9f5b1a1e5bd3636e1a9297bb5 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 15 Oct 2026 13:47:36 +0800
Subject: [PATCH 1/2] refactor(web): centralize AppIcon business data and
 Avatar rendering

---
 oxlint-suppressions.json                      |   2 +-
 .../form/[token]/loaded-form-content.tsx      |   8 +-
 .../(commonLayout)/account-page/index.tsx     |  10 +-
 .../app-sidebar/app-detail-section.tsx        |   5 +-
 .../__tests__/app-info-trigger.spec.tsx       |  24 +---
 .../app-sidebar/app-info/app-info-header.tsx  |  21 +---
 .../app-sidebar/app-info/app-info-trigger.tsx |   5 +-
 .../app-sidebar/dataset-info/index.tsx        |   8 +-
 .../built-in-access-points/web-app-card.tsx   |  10 +-
 .../environment-web-app-card.tsx              |  14 +--
 .../config/agent/agent-tools/index.tsx        |   7 +-
 .../dataset-config/card-item/index.tsx        |   8 +-
 .../dataset-config/select-dataset/index.tsx   |  14 +--
 .../app/create-app-dialog/app-card/index.tsx  |  15 +--
 .../workflow-source-popover.tsx               |  19 +--
 .../apps/__tests__/app-card.spec.tsx          |  15 +--
 web/app/components/apps/app-card/index.tsx    |  12 +-
 ...import-from-marketplace-template-modal.tsx |  15 ++-
 web/app/components/apps/starred-app-card.tsx  |  11 +-
 .../base/app-icon/__tests__/index.spec.tsx    |  15 +++
 .../base/app-icon/index.stories.tsx           |  98 +++------------
 web/app/components/base/app-icon/index.tsx    | 113 +++++++-----------
 .../chat/chat-with-history/chat-wrapper.tsx   |  16 +--
 .../chat-with-history/header-in-mobile.tsx    |   9 +-
 .../chat/chat-with-history/header/index.tsx   |   8 +-
 .../chat/chat-with-history/sidebar/index.tsx  |   8 +-
 .../chat/embedded-chatbot/chat-wrapper.tsx    |  16 +--
 .../__tests__/image-confirmation.spec.tsx     |   9 ++
 web/app/components/base/icon-picker/index.tsx |  15 +--
 .../base/linked-apps-panel/index.tsx          |   8 +-
 .../plugins/component-picker-block/hooks.tsx  |   8 +-
 .../list/template-card/content.tsx            |   8 +-
 .../details/__tests__/index.spec.tsx          |   2 +-
 .../list/template-card/details/index.tsx      |  18 +--
 .../list/template-card/edit-pipeline-info.tsx |  10 +-
 .../datasets/create/step-three/index.tsx      |   9 +-
 .../__tests__/dataset-card-header.spec.tsx    |   4 -
 .../components/dataset-card-header.tsx        |   8 +-
 .../datasets/rename-modal/index.tsx           |  10 +-
 .../installed-app-navigation/app-nav-item.tsx |  12 +-
 .../components/explore/learn-dify/item.tsx    |  16 +--
 .../explore/try-app/app-info/index.tsx        |   8 +-
 .../components/explore/try-app/app/chat.tsx   |   9 +-
 .../explore/try-app/app/text-generation.tsx   |   6 +-
 .../try-app/preview/agent-app-preview.tsx     |   9 +-
 .../goto-anything/actions/agent.tsx           |  17 +--
 .../components/goto-anything/actions/app.tsx  |  15 +--
 .../plugins/card/base/card-icon.tsx           |  35 +++---
 .../creator-profile/creation-card.tsx         |  16 ++-
 .../marketplace/templates/template-card.tsx   |  10 +-
 .../app-selector/app-picker.tsx               |  11 +-
 .../app-selector/app-trigger.tsx              |  13 +-
 .../tool-selector/components/tool-item.tsx    |   7 +-
 .../__tests__/index.spec.tsx                  |  26 ----
 .../share/text-generation/info-modal.tsx      |   6 +-
 .../text-generation-sidebar.tsx               |   6 +-
 web/app/components/tools/mcp/modal.tsx        |  51 +++++---
 web/app/components/workflow/block-icon.tsx    |   7 +-
 .../__tests__/agent-selector.spec.tsx         |   4 -
 .../block-selector/agent-selector.tsx         |   8 +-
 .../components/agent-roster-field.tsx         |  18 +--
 .../workflow/nodes/agent-v2/node.tsx          |  17 +--
 .../agent/__tests__/integration.spec.tsx      |   6 +-
 .../components/__tests__/tool-icon.spec.tsx   |  12 --
 .../nodes/agent/components/tool-icon.tsx      |   7 +-
 .../components/dataset-item.tsx               |   8 +-
 .../nodes/knowledge-retrieval/node.tsx        |   9 +-
 .../__tests__/navigation.spec.tsx             |  20 ++--
 .../__tests__/access-surface-cards.spec.tsx   |   4 +
 .../access/components/web-app-access-card.tsx |  14 +--
 .../components/workflow-references-table.tsx  |  25 ++--
 .../publish-bar/publish-impact-details.tsx    |  23 ++--
 .../preview/__tests__/preview-avatar.spec.tsx |  29 +++--
 .../components/preview/preview-chat.tsx       |  17 +--
 .../logs/components/source-icon.tsx           |  27 ++---
 .../agent-v2/agent-detail/navigation.tsx      |  16 +--
 .../roster/components/agent-form-fields.tsx   |   2 +-
 .../roster/components/agent-roster-list.tsx   |  18 +--
 .../agent-workflow-references-dropdown.tsx    |  23 +---
 web/features/home/continue-work/item.tsx      |   8 +-
 web/features/home/template-card.tsx           |  15 +--
 .../skills/__tests__/detail-page.fixture.tsx  |   4 -
 web/features/skills/__tests__/page.spec.tsx   |   4 -
 web/features/skills/detail/skill-metadata.tsx |  50 ++++----
 84 files changed, 361 insertions(+), 922 deletions(-)
 create mode 100644 web/app/components/base/app-icon/__tests__/index.spec.tsx

diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index 4f4e5f4c12f7eb..45ec787871a6c4 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -2967,7 +2967,7 @@
   },
   "web/app/components/workflow/nodes/agent/__tests__/integration.spec.tsx": {
     "typescript/no-explicit-any": {
-      "count": 17
+      "count": 16
     }
   },
   "web/app/components/workflow/nodes/agent/default.ts": {
diff --git a/web/app/(humanInputLayout)/form/[token]/loaded-form-content.tsx b/web/app/(humanInputLayout)/form/[token]/loaded-form-content.tsx
index cd116c1a75d40d..85743c20b72401 100644
--- a/web/app/(humanInputLayout)/form/[token]/loaded-form-content.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/loaded-form-content.tsx
@@ -73,13 +73,7 @@ const LoadedFormContent = ({
   return (
     <div className={cn('mx-auto flex size-full max-w-180 flex-col items-center')}>
       <div className="mt-4 flex w-full shrink-0 items-center gap-3 py-3">
-        <AppIcon
-          size="large"
-          iconType={site.icon_type}
-          icon={site.icon}
-          background={site.icon_background}
-          imageUrl={site.icon_url}
-        />
+        <AppIcon size="large" icon={site} />
         <div className="grow system-xl-semibold text-text-primary">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index a8f85b1489e657..771cf585890c79 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
 import type { IItem } from '@/app/components/header/account-setting/collapse'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
 import { Button } from '@langgenius/dify-ui/button'
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -61,17 +60,10 @@ export default function AccountPage() {
   if (!userProfile) return null
 
   const renderAppItem = (item: AccountAppItem) => {
-    const appIconType = zIconType.safeParse(item.icon_type).data ?? null
     return (
       <div className="flex px-3 py-1">
         <div className="mr-3">
-          <AppIcon
-            size="tiny"
-            iconType={appIconType}
-            icon={item.icon ?? undefined}
-            background={item.icon_background}
-            imageUrl={item.icon_url}
-          />
+          <AppIcon size="tiny" icon={item} />
         </div>
         <div className="mt-0.75 system-sm-medium text-text-secondary">{item.name}</div>
       </div>
diff --git a/web/app/components/app-sidebar/app-detail-section.tsx b/web/app/components/app-sidebar/app-detail-section.tsx
index 32dfd53fbdf178..5f0e5eab6d61f3 100644
--- a/web/app/components/app-sidebar/app-detail-section.tsx
+++ b/web/app/components/app-sidebar/app-detail-section.tsx
@@ -185,11 +185,8 @@ function AppDetailContent({ appId, expand }: { appId: string; expand: boolean })
             expand={expand}
             appName={appTitle}
             modeLabel={appDetail ? getAppModeLabel(appDetail.mode, t) : undefined}
-            iconType={appDetail?.icon_type}
-            icon={appDetail?.icon ?? undefined}
-            background={appDetail?.icon_background}
-            imageUrl={appDetail?.icon_url}
             operationGroups={[]}
+            icon={appDetail}
           />
         )}
       </div>
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-trigger.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-trigger.spec.tsx
index 08f3da735580e7..ba63d3a1973b34 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-trigger.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-trigger.spec.tsx
@@ -31,24 +31,6 @@ vi.mock('@/context/permission-state', async () => {
   return createPermissionStateModuleMock(() => mockConsoleState.current)
 })
 
-vi.mock('../../../base/app-icon', () => ({
-  default: ({
-    size,
-    icon,
-    background,
-  }: {
-    size: string
-    icon: string
-    background: string
-    iconType?: string
-    imageUrl?: string
-  }) => (
-    <span data-size={size} data-icon={icon} data-bg={background}>
-      {icon}
-    </span>
-  ),
-}))
-
 const defaultAppPermissionKeys = [
   AppACLPermission.Edit,
   AppACLPermission.ImportExportDSL,
@@ -96,7 +78,7 @@ describe('AppInfoTrigger', () => {
     })
     render(<AppInfoTrigger {...props} />)
 
-    expect(screen.getByText('🤖')).toHaveAttribute('data-size', 'medium')
+    expect(screen.getByText('🤖')).toBeInTheDocument()
     expect(screen.getByText('My Chatbot')).toBeInTheDocument()
     expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
     expect(screen.getByText('My Chatbot').closest('button')).toBeNull()
@@ -107,10 +89,10 @@ describe('AppInfoTrigger', () => {
     expect(props.exportCheck).not.toHaveBeenCalled()
   })
 
-  it('renders only the medium app icon when collapsed', () => {
+  it('renders only the app icon when collapsed', () => {
     render(<AppInfoTrigger {...createProps({ expand: false })} />)
 
-    expect(screen.getByText('🤖')).toHaveAttribute('data-size', 'medium')
+    expect(screen.getByText('🤖')).toBeInTheDocument()
     expect(screen.queryByText('Test App')).not.toBeInTheDocument()
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/app-sidebar/app-info/app-info-header.tsx b/web/app/components/app-sidebar/app-info/app-info-header.tsx
index 1dd742b6873586..36136124ec86ba 100644
--- a/web/app/components/app-sidebar/app-info/app-info-header.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-header.tsx
@@ -1,13 +1,11 @@
-import type { ComponentProps } from 'react'
+import type { AppIconProps } from '../../base/app-icon'
 import type { Operation } from './app-operations'
 import { cn } from '@langgenius/dify-ui/cn'
 import AppIcon from '../../base/app-icon'
 import AppOperations from './app-operations'
 
-type AppInfoHeaderProps = Pick<
-  ComponentProps<typeof AppIcon>,
-  'iconType' | 'icon' | 'background' | 'imageUrl'
-> & {
+type AppInfoHeaderProps = {
+  icon: AppIconProps['icon']
   expand: boolean
   appName: string
   modeLabel?: string
@@ -18,10 +16,7 @@ export default function AppInfoHeader({
   expand,
   appName,
   modeLabel,
-  iconType,
   icon,
-  background,
-  imageUrl,
   operationGroups,
 }: AppInfoHeaderProps) {
   return (
@@ -32,15 +27,7 @@ export default function AppInfoHeader({
       )}
     >
       <div className="flex shrink-0 items-center">
-        <AppIcon
-          size="medium"
-          rounded
-          decorative
-          iconType={iconType}
-          icon={icon}
-          background={background}
-          imageUrl={imageUrl}
-        />
+        <AppIcon size="medium" shape="circle" icon={icon} />
       </div>
       {expand && (
         <div className="flex min-w-0 flex-1 flex-col items-start justify-center gap-0.5 self-stretch">
diff --git a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
index 6d97d49e0ece84..ac08c9ff877f50 100644
--- a/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-trigger.tsx
@@ -116,11 +116,8 @@ const AppInfoTrigger = ({
       expand={expand}
       appName={appDetail.name}
       modeLabel={modeLabel}
-      iconType={appDetail.icon_type}
-      icon={appDetail.icon ?? undefined}
-      background={appDetail.icon_background}
-      imageUrl={appDetail.icon_url}
       operationGroups={[mainOperations, destructiveOperations, workflowConversionOperations]}
+      icon={appDetail}
     />
   )
 }
diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index d6af45bd61e15f..32e70c8a39af61 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -38,13 +38,7 @@ const DatasetInfo = ({ expand }: DatasetInfoProps) => {
         )}
       >
         <div className="flex shrink-0 items-center">
-          <AppIcon
-            size="medium"
-            iconType={iconInfo.icon_type}
-            icon={iconInfo.icon}
-            background={iconInfo.icon_background}
-            imageUrl={iconInfo.icon_url}
-          />
+          <AppIcon size="medium" icon={iconInfo} />
         </div>
         {!expand && <span className="sr-only">{dataset.name}</span>}
         {expand && (
diff --git a/web/app/components/app/access-point/built-in-access-points/web-app-card.tsx b/web/app/components/app/access-point/built-in-access-points/web-app-card.tsx
index 47699bfb05bda7..724a989abcd2f6 100644
--- a/web/app/components/app/access-point/built-in-access-points/web-app-card.tsx
+++ b/web/app/components/app/access-point/built-in-access-points/web-app-card.tsx
@@ -173,15 +173,7 @@ export function WebAppAccessPointCard({
         description={t(($) => $['studio.accessPoint.webAppDescription'], {
           ns: 'deployments',
         })}
-        icon={
-          <AppIcon
-            size="large"
-            iconType={appInfo.icon_type}
-            icon={appInfo.icon ?? undefined}
-            background={appInfo.icon_background}
-            imageUrl={appInfo.icon_url}
-          />
-        }
+        icon={<AppIcon size="large" icon={appInfo} />}
         status={status}
         statusLabel={statusLabel}
         highlighted={highlighted}
diff --git a/web/app/components/app/access-point/deployed-environment-access-points/environment-web-app-card.tsx b/web/app/components/app/access-point/deployed-environment-access-points/environment-web-app-card.tsx
index cc8f0a2a08cf89..774dd349d0209b 100644
--- a/web/app/components/app/access-point/deployed-environment-access-points/environment-web-app-card.tsx
+++ b/web/app/components/app/access-point/deployed-environment-access-points/environment-web-app-card.tsx
@@ -166,19 +166,7 @@ export function EnvironmentWebAppCard({
         description={t(($) => $['studio.accessPoint.webAppDescription'], {
           ns: 'deployments',
         })}
-        icon={
-          appInfo ? (
-            <AppIcon
-              size="large"
-              iconType={appInfo.icon_type}
-              icon={appInfo.icon ?? undefined}
-              background={appInfo.icon_background}
-              imageUrl={appInfo.icon_url}
-            />
-          ) : (
-            'i-ri-robot-2-line'
-          )
-        }
+        icon={appInfo ? <AppIcon size="large" icon={appInfo} /> : 'i-ri-robot-2-line'}
         status={status}
         statusLabel={statusLabel}
         highlighted={highlighted}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 7336c90330af72..95703f7be31dc1 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -230,8 +230,11 @@ const AgentTools: FC = () => {
                       <AppIcon
                         className="rounded-md"
                         size="xs"
-                        icon={item.icon?.content}
-                        background={item.icon?.background}
+                        icon={{
+                          icon_type: 'emoji',
+                          icon: item.icon?.content,
+                          icon_background: item.icon?.background,
+                        }}
                       />
                     )}
                   </div>
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index 0e491e6de234ca..25d37b257382aa 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -61,13 +61,7 @@ const Item: FC<ItemProps> = ({ config, onSave, onRemove, readonly = false, edita
       )}
     >
       <div className="flex w-0 grow items-center space-x-1.5">
-        <AppIcon
-          size="tiny"
-          iconType={iconInfo.icon_type}
-          icon={iconInfo.icon}
-          background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-          imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-        />
+        <AppIcon size="tiny" icon={iconInfo} />
         <div className="w-0 grow truncate system-sm-medium text-text-secondary" title={config.name}>
           {config.name}
         </div>
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 1c4446670b0b20..28c65f75d8eba8 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -154,19 +154,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                 >
                   <div className="mr-1 flex grow items-center overflow-hidden">
                     <div className={cn('mr-2', !item.embedding_available && 'opacity-30')}>
-                      <AppIcon
-                        size="tiny"
-                        iconType={item.icon_info.icon_type}
-                        icon={item.icon_info.icon}
-                        background={
-                          item.icon_info.icon_type === 'image'
-                            ? undefined
-                            : item.icon_info.icon_background
-                        }
-                        imageUrl={
-                          item.icon_info.icon_type === 'image' ? item.icon_info.icon_url : undefined
-                        }
-                      />
+                      <AppIcon size="tiny" icon={item.icon_info} />
                     </div>
                     <div
                       className={cn(
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index bbe43d15088404..9124ffa04a4bce 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -29,12 +29,7 @@ const AppCard = ({ app, canCreate, onCreate, onPreview }: AppCardProps) => {
   const { app: appBasicInfo } = app
   const appName = appBasicInfo?.name ?? ''
   const appMode = appBasicInfo?.mode ?? ''
-  const appIconType =
-    appBasicInfo?.icon_type === 'image' ||
-    appBasicInfo?.icon_type === 'emoji' ||
-    appBasicInfo?.icon_type === 'link'
-      ? appBasicInfo.icon_type
-      : null
+
   const canViewApp = deploymentEdition === 'CLOUD'
   const handleShowTryAppPanel = useCallback(() => {
     trackEvent('preview_template', {
@@ -54,13 +49,7 @@ const AppCard = ({ app, canCreate, onCreate, onPreview }: AppCardProps) => {
     >
       <div className="flex shrink-0 grow-0 items-center gap-3 pb-2">
         <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType={appIconType}
-            icon={appBasicInfo?.icon ?? ''}
-            background={appBasicInfo?.icon_background ?? ''}
-            imageUrl={appBasicInfo?.icon_url ?? ''}
-          />
+          <AppIcon size="large" icon={appBasicInfo} />
           <AppTypeIcon
             wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
             className="size-3"
diff --git a/web/app/components/app/deploy/shared/deployment-configuration/workflow-source-popover.tsx b/web/app/components/app/deploy/shared/deployment-configuration/workflow-source-popover.tsx
index 4ac6cfb05b17f8..72f3e57e8322d0 100644
--- a/web/app/components/app/deploy/shared/deployment-configuration/workflow-source-popover.tsx
+++ b/web/app/components/app/deploy/shared/deployment-configuration/workflow-source-popover.tsx
@@ -5,7 +5,6 @@ import type {
   WorkflowPath,
   WorkflowReference,
 } from '@dify/contracts/enterprise-app-deploy/types.gen'
-import type { AppIconType } from '@/types/app'
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,29 +12,13 @@ import AppIcon from '@/app/components/base/app-icon'
 import Link from '@/next/link'
 import { uniqueWorkflowPaths, workflowPathKey } from './utils/workflow-path'
 
-function workflowReferenceIconType(reference: WorkflowReference): AppIconType | undefined {
-  if (reference.icon_type === 'emoji') return 'emoji'
-  if (reference.icon_type === 'image' || reference.icon_type === 'link') return 'image'
-
-  return undefined
-}
-
-function workflowReferenceImageUrl(reference: WorkflowReference) {
-  if (reference.icon_type !== 'image' && reference.icon_type !== 'link') return undefined
-
-  return reference.icon_url ?? reference.icon
-}
-
 export function WorkflowReferenceIcon({ reference }: { reference: WorkflowReference }) {
   return (
     <span aria-hidden className="shrink-0">
       <AppIcon
         size="xs"
-        iconType={workflowReferenceIconType(reference)}
-        icon={reference.icon}
-        background={reference.icon_background}
-        imageUrl={workflowReferenceImageUrl(reference)}
         className="size-5 rounded-md text-sm"
+        icon={{ ...reference, icon_url: reference.icon_url ?? reference.icon }}
       />
     </span>
   )
diff --git a/web/app/components/apps/__tests__/app-card.spec.tsx b/web/app/components/apps/__tests__/app-card.spec.tsx
index ceafce9e625043..40e9a3360d9aae 100644
--- a/web/app/components/apps/__tests__/app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/app-card.spec.tsx
@@ -1,6 +1,6 @@
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
 import type { InstalledAppListResponse } from '@dify/contracts/api/console/installed-apps/types.gen'
-import { fireEvent, screen, waitFor, within } from '@testing-library/react'
+import { fireEvent, isInaccessible, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { STEP_BY_STEP_TOUR_TARGETS } from '@/app/components/step-by-step-tour/target-registry'
@@ -580,22 +580,19 @@ describe('AppCard', () => {
     })
 
     it('should render app icon', () => {
-      // AppIcon component renders the emoji icon from app data
-      const { container } = render(<AppCard app={mockApp} />)
+      render(<AppCard app={mockApp} />)
       const emojiIcon = screen.getByText(mockApp.icon!)
-      const imageIcon = container.querySelector('img')
-      expect(emojiIcon || imageIcon).toBeTruthy()
-      expect(emojiIcon).toHaveAttribute('aria-hidden', 'true')
+      expect(isInaccessible(emojiIcon)).toBe(true)
     })
 
-    it('should treat a redundant image icon as decorative', () => {
+    it('should keep an image fallback decorative beside the app name', () => {
       const imageApp = createMockApp({
         icon_type: 'image',
         icon_url: 'https://example.com/app-icon.png',
       })
-      const { container } = render(<AppCard app={imageApp} />)
+      render(<AppCard app={imageApp} />)
 
-      expect(container.querySelector('img')).toHaveAttribute('alt', '')
+      expect(isInaccessible(screen.getByText('🤖'))).toBe(true)
     })
 
     it('should render app type icon', () => {
diff --git a/web/app/components/apps/app-card/index.tsx b/web/app/components/apps/app-card/index.tsx
index eb739cea2d1c49..9ab466664b3cf7 100644
--- a/web/app/components/apps/app-card/index.tsx
+++ b/web/app/components/apps/app-card/index.tsx
@@ -2,7 +2,6 @@
 
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
 import type { WorkflowOnlineUser } from '@/models/app'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
@@ -117,7 +116,7 @@ export const AppCard = memo(
     }, [app.id, onlineUsers])
     const appNameId = useId()
     const appDescriptionId = useId()
-    const appIconType = zIconType.safeParse(app.icon_type).data ?? null
+
     const appHref = getRedirectionPath(app, maintainerPermissionOptions)
     const appCardClassName = cn(
       'inline-flex h-full w-full touch-manipulation flex-col rounded-xl outline-hidden',
@@ -130,14 +129,7 @@ export const AppCard = memo(
       <>
         <div className="flex shrink-0 items-center gap-3 pt-4 pr-4 pb-2 pl-4">
           <div className="relative shrink-0">
-            <AppIcon
-              size="large"
-              iconType={appIconType}
-              icon={app.icon ?? undefined}
-              background={app.icon_background}
-              imageUrl={app.icon_url}
-              decorative
-            />
+            <AppIcon size="large" icon={app} />
             <AppTypeIcon
               type={app.mode}
               wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
diff --git a/web/app/components/apps/import-from-marketplace-template-modal.tsx b/web/app/components/apps/import-from-marketplace-template-modal.tsx
index 76fb5bab47d344..512d9ca360820c 100644
--- a/web/app/components/apps/import-from-marketplace-template-modal.tsx
+++ b/web/app/components/apps/import-from-marketplace-template-modal.tsx
@@ -113,15 +113,14 @@ const ImportFromMarketplaceTemplateModal = ({
               <div className="flex items-center gap-3">
                 <AppIcon
                   size="large"
-                  iconType={template.icon_file_key ? 'image' : 'emoji'}
-                  icon={template.icon || 'page_facing_up'}
-                  background={template.icon_file_key ? undefined : template.icon_background}
-                  decorative
-                  imageUrl={
-                    template.icon_file_key
+                  icon={{
+                    icon_type: template.icon_file_key ? 'image' : 'emoji',
+                    icon: template.icon || 'page_facing_up',
+                    icon_url: template.icon_file_key
                       ? `${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon`
-                      : undefined
-                  }
+                      : undefined,
+                    icon_background: template.icon_file_key ? undefined : template.icon_background,
+                  }}
                 />
                 <div className="flex flex-col">
                   <div className="system-md-semibold text-text-primary">
diff --git a/web/app/components/apps/starred-app-card.tsx b/web/app/components/apps/starred-app-card.tsx
index 08bd7adc6dae6e..3d43c79e30f418 100644
--- a/web/app/components/apps/starred-app-card.tsx
+++ b/web/app/components/apps/starred-app-card.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
@@ -36,7 +35,6 @@ export const StarredAppCard = memo(
     const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
     const isRbacEnabled = systemFeatures.rbac_enabled
     const isPreviewOnly = hasOnlyAppPreviewPermission(app.permission_keys)
-    const appIconType = zIconType.safeParse(app.icon_type).data ?? null
 
     const editTimeText = useMemo(() => {
       const timestamp = app.updated_at || app.created_at
@@ -65,14 +63,7 @@ export const StarredAppCard = memo(
     const cardContent = (
       <>
         <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType={appIconType}
-            icon={app.icon ?? undefined}
-            background={app.icon_background}
-            imageUrl={app.icon_url}
-            decorative
-          />
+          <AppIcon size="large" icon={app} />
           <AppTypeIcon
             type={app.mode}
             wrapperClassName="absolute -right-0.5 -bottom-0.5 h-4 w-4 shadow-sm"
diff --git a/web/app/components/base/app-icon/__tests__/index.spec.tsx b/web/app/components/base/app-icon/__tests__/index.spec.tsx
new file mode 100644
index 00000000000000..2c57b4c6cd8d9e
--- /dev/null
+++ b/web/app/components/base/app-icon/__tests__/index.spec.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import AppIcon from '..'
+
+it('resolves persisted emoji IDs and treats identity beside text as decorative', () => {
+  render(<AppIcon icon={{ icon_type: 'emoji', icon: 'robot_face', icon_background: '#FFEAD5' }} />)
+  expect(screen.getByText('🤖')).toBeInTheDocument()
+  expect(screen.queryByRole('img')).not.toBeInTheDocument()
+})
+
+it('does not use an uploaded file ID as a URL or emoji when its resolved URL is missing', () => {
+  const { container } = render(<AppIcon icon={{ icon_type: 'image', icon: 'uploaded-file-id' }} />)
+  expect(screen.getByText('🤖')).toBeInTheDocument()
+  expect(container.querySelector('img')).not.toBeInTheDocument()
+  expect(screen.queryByText('uploaded-file-id')).not.toBeInTheDocument()
+})
diff --git a/web/app/components/base/app-icon/index.stories.tsx b/web/app/components/base/app-icon/index.stories.tsx
index 2638626b5a67a5..85d0800848da71 100644
--- a/web/app/components/base/app-icon/index.stories.tsx
+++ b/web/app/components/base/app-icon/index.stories.tsx
@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { ComponentProps } from 'react'
-import { fn } from 'storybook/test'
+import type { AppIconProps } from '.'
 import AppIcon from '.'
 
-const onChooseIcon = fn()
-
 const meta = {
   title: 'Base/General/AppIcon',
   component: AppIcon,
@@ -12,16 +9,15 @@ const meta = {
     docs: {
       description: {
         component:
-          'Reusable avatar for applications and workflows. Supports emoji or uploaded imagery, rounded-sm mode, edit overlays, and multiple sizes.',
+          'Application identity display built on Avatar. Sources are emoji or image URLs; editing belongs to IconPicker.',
       },
     },
   },
   tags: ['autodocs'],
   args: {
-    icon: '🧭',
-    background: '#FFEAD5',
+    icon: { icon_type: 'emoji', icon: '🧭', icon_background: '#FFEAD5' },
     size: 'medium',
-    rounded: false,
+    shape: 'square',
   },
 } satisfies Meta<typeof AppIcon>
 
@@ -32,96 +28,36 @@ export const Default: Story = {
   render: (args) => (
     <div className="flex items-center gap-4">
       <AppIcon {...args} />
-      <AppIcon {...args} rounded icon="🧠" background="#E0F2FE" />
+      <AppIcon
+        {...args}
+        shape="circle"
+        icon={{ icon_type: 'emoji', icon: '🧠', icon_background: '#E0F2FE' }}
+      />
     </div>
   ),
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-<AppIcon icon="🧭" background="#FFEAD5" />
-<AppIcon icon="🧠" background="#E0F2FE" rounded />
-        `.trim(),
-      },
-    },
-  },
 }
 
 export const Sizes: Story = {
   render: (args) => {
-    const sizes: Array<ComponentProps<typeof AppIcon>['size']> = [
-      'xs',
-      'tiny',
-      'small',
-      'medium',
-      'large',
-      'xl',
-      'xxl',
-    ]
+    const sizes: AppIconProps['size'][] = ['xs', 'tiny', 'small', 'medium', 'large', 'xl', 'xxl']
     return (
       <div className="flex flex-wrap items-end gap-4">
         {sizes.map((size) => (
           <div key={size} className="flex flex-col items-center gap-2">
-            <AppIcon {...args} size={size} icon="🚀" background="#E5DEFF" />
+            <AppIcon {...args} size={size} />
             <span className="text-xs text-text-tertiary uppercase">{size}</span>
           </div>
         ))}
       </div>
     )
   },
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-{(['xs','tiny','small','medium','large','xl','xxl'] as const).map(size => (
-  <AppIcon key={size} size={size} icon="🚀" background="#E5DEFF" />
-))}
-        `.trim(),
-      },
-    },
-  },
 }
 
-export const WithEditOverlay: Story = {
-  render: (args) => (
-    <div className="flex items-center gap-4">
-      <button
-        type="button"
-        aria-label="Choose emoji icon"
-        className="group/edit-icon rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
-        onClick={onChooseIcon}
-      >
-        <AppIcon {...args} decorative icon="🛠️" background="#E7F5FF" showEditIcon />
-      </button>
-      <button
-        type="button"
-        aria-label="Choose image icon"
-        className="group/edit-icon rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden"
-        onClick={onChooseIcon}
-      >
-        <AppIcon
-          {...args}
-          decorative
-          iconType="image"
-          background={undefined}
-          imageUrl="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' rx='16' fill='%23CBD5F5'/><text x='50%' y='54%' dominant-baseline='middle' text-anchor='middle' font-size='30' font-family='Arial' fill='%231f2937'>AI</text></svg>"
-          showEditIcon
-        />
-      </button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        language: 'tsx',
-        code: `
-<button type="button" aria-label="Choose icon">
-  <AppIcon decorative icon="🛠️" background="#E7F5FF" showEditIcon />
-</button>
-        `.trim(),
-      },
-    },
+export const ImageFallback: Story = {
+  args: {
+    icon: { icon_type: 'image', icon_url: 'data:image/png;base64,broken' },
+    fallback: { content: '📙', background: '#FFF4ED' },
+    decorative: false,
+    label: 'Knowledge base',
   },
 }
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 84b9fd8e06b77b..660d8a03559328 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -1,98 +1,69 @@
 'use client'
-import type { FC } from 'react'
-import type { AppIconType } from '@/types/app'
+
+import type { RecommendedAppInfoResponse } from '@dify/contracts/api/console/explore/types.gen'
+import type { ReactNode } from 'react'
+import { Avatar, AvatarFallback, AvatarImage } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { cva } from 'class-variance-authority'
-import * as React from 'react'
 import { resolveEmoji } from '@/utils/emoji'
 
-type AppIconProps = {
+type AppIconData = Pick<RecommendedAppInfoResponse, 'icon' | 'icon_type' | 'icon_background'> &
+  Partial<Pick<RecommendedAppInfoResponse, 'icon_url'>>
+
+export type AppIconProps = {
+  icon?: AppIconData | null
+  fallback?: { content: ReactNode; background?: string | null }
   size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large' | 'xl' | 'xxl'
-  rounded?: boolean
-  iconType?: AppIconType | null
-  icon?: string
-  background?: string | null
-  imageUrl?: string | null
-  decorative?: boolean
+  shape?: 'square' | 'circle'
   className?: string
-  innerIcon?: React.ReactNode
-  showEditIcon?: boolean
-}
+} & ({ decorative?: true; label?: never } | { decorative: false; label: string })
+
 const appIconVariants = cva(
-  'relative flex shrink-0 grow-0 items-center justify-center overflow-hidden border-[0.5px] border-divider-regular leading-none',
+  'flex shrink-0 grow-0 border-[0.5px] border-divider-regular leading-none',
   {
     variants: {
       size: {
         xs: 'size-4 rounded-sm text-xs',
         tiny: 'size-6 rounded-md text-base',
         small: 'size-8 rounded-lg text-xl',
-        medium: 'h-9 w-9 rounded-[10px] text-[22px]',
-        large: 'h-10 w-10 rounded-[10px] text-[24px]',
-        xl: 'h-12 w-12 rounded-xl text-[28px]',
-        xxl: 'h-14 w-14 rounded-2xl text-[32px]',
+        medium: 'size-9 rounded-[10px] text-[22px]',
+        large: 'size-10 rounded-[10px] text-2xl',
+        xl: 'size-12 rounded-xl text-[28px]',
+        xxl: 'size-14 rounded-2xl text-[32px]',
       },
-      rounded: {
-        true: 'rounded-full',
+      shape: {
+        square: '',
+        circle: 'rounded-full',
       },
     },
-    defaultVariants: {
-      size: 'medium',
-      rounded: false,
-    },
   },
 )
-const EditIconVariants = cva('i-ri-edit-line text-text-primary-on-surface', {
-  variants: {
-    size: {
-      xs: 'size-3',
-      tiny: 'size-3.5',
-      small: 'size-5',
-      medium: 'size-5.5',
-      large: 'size-6',
-      xl: 'size-7',
-      xxl: 'size-8',
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-  },
-})
-const AppIcon: FC<AppIconProps> = ({
-  size = 'medium',
-  rounded = false,
-  iconType,
+
+export default function AppIcon({
   icon,
-  background,
-  imageUrl,
-  decorative = false,
+  fallback,
+  size = 'medium',
+  shape = 'square',
+  decorative = true,
+  label,
   className,
-  innerIcon,
-  showEditIcon = false,
-}) => {
-  const isValidImageIcon = iconType === 'image' && imageUrl
-  const Icon = resolveEmoji(icon)
+}: AppIconProps) {
+  const isImage = icon?.icon_type === 'image' || icon?.icon_type === 'link'
+  const src = icon?.icon_type === 'link' ? icon.icon : icon?.icon_url
+  const emoji = !icon?.icon_type || icon.icon_type === 'emoji' ? icon?.icon : undefined
+  const background = (!isImage && icon?.icon_background) || fallback?.background || '#FFEAD5'
 
   return (
-    <span
-      className={cn('group/app-icon', appIconVariants({ size, rounded }), className)}
-      style={{ background: isValidImageIcon ? undefined : background || '#FFEAD5' }}
+    <Avatar
+      className={cn(appIconVariants({ size, shape }), className)}
       aria-hidden={decorative || undefined}
+      role={decorative ? undefined : 'img'}
+      aria-label={decorative ? undefined : label}
     >
-      {isValidImageIcon ? (
-        <img src={imageUrl} className="size-full" alt={decorative ? '' : 'app icon'} />
-      ) : (
-        innerIcon || Icon
-      )}
-      {showEditIcon && (
-        <span
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-0 z-10 hidden items-center justify-center bg-background-overlay-alt group-hover/app-icon:flex group-focus-visible/edit-icon:flex"
-        >
-          <span className={EditIconVariants({ size })} />
-        </span>
-      )}
-    </span>
+      <AvatarFallback className="bg-transparent font-normal text-inherit" style={{ background }}>
+        {emoji ? resolveEmoji(emoji) : (fallback?.content ?? '🤖')}
+      </AvatarFallback>
+      {isImage && <AvatarImage src={src || undefined} alt="" className="object-fill" />}
+    </Avatar>
   )
 }
-
-export default React.memo(AppIcon)
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index c9061e303eca6a..ad58c3be4a852c 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -370,13 +370,7 @@ const ChatWrapper = () => {
       return (
         <div className="flex min-h-[50vh] items-center justify-center px-4 py-12">
           <div className="flex max-w-180 grow gap-4">
-            <AppIcon
-              size="xl"
-              iconType={appData?.site.icon_type}
-              icon={appData?.site.icon}
-              background={appData?.site.icon_background}
-              imageUrl={appData?.site.icon_url}
-            />
+            <AppIcon size="xl" icon={appData?.site} />
             <div className="w-0 grow">
               <div className="grow rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary">
                 <Markdown content={welcomeMessage.content} />
@@ -389,13 +383,7 @@ const ChatWrapper = () => {
     }
     return (
       <div className={cn('flex min-h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
-        <AppIcon
-          size="xl"
-          iconType={appData?.site.icon_type}
-          icon={appData?.site.icon}
-          background={appData?.site.icon_background}
-          imageUrl={appData?.site.icon_url}
-        />
+        <AppIcon size="xl" icon={appData?.site} />
         <div className="max-w-3xl px-4">
           <Markdown
             className="body-2xl-regular! text-text-tertiary!"
diff --git a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
index 0df5565fd50cd0..4bb82b9a19121f 100644
--- a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
+++ b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
@@ -102,14 +102,7 @@ const HeaderInMobile = () => {
           <div className="flex grow items-center justify-center">
             {!currentConversationId && (
               <>
-                <AppIcon
-                  className="mr-2"
-                  size="tiny"
-                  icon={appData?.site.icon}
-                  iconType={appData?.site.icon_type}
-                  imageUrl={appData?.site.icon_url}
-                  background={appData?.site.icon_background}
-                />
+                <AppIcon className="mr-2" size="tiny" icon={appData?.site} />
                 <div className="truncate system-md-semibold text-text-secondary">
                   {appData?.site.title}
                 </div>
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index d48d07ee79c383..cc0050fba6be3c 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -102,13 +102,7 @@ const Header = ({ toggleButtonRef }: { toggleButtonRef?: Ref<HTMLButtonElement>
             <RiLayoutRight2Line aria-hidden="true" className="h-4.5 w-4.5" />
           </IconButton>
           <div className="mr-1 shrink-0">
-            <AppIcon
-              size="large"
-              iconType={appData?.site.icon_type}
-              icon={appData?.site.icon}
-              background={appData?.site.icon_background}
-              imageUrl={appData?.site.icon_url}
-            />
+            <AppIcon size="large" icon={appData?.site} />
           </div>
           {!currentConversationId && (
             <div className={cn('grow truncate system-md-semibold text-text-secondary')}>
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 11437427669c72..623f6e34a48cfa 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -96,13 +96,7 @@ const Sidebar = ({ isPanel, toggleButtonRef }: Props) => {
     >
       <div className={cn('flex shrink-0 items-center gap-3 p-3 pr-2')}>
         <div className="shrink-0">
-          <AppIcon
-            size="large"
-            iconType={appData?.site.icon_type}
-            icon={appData?.site.icon}
-            background={appData?.site.icon_background}
-            imageUrl={appData?.site.icon_url}
-          />
+          <AppIcon size="large" icon={appData?.site} />
         </div>
         <div className={cn('grow truncate system-md-semibold text-text-secondary')}>
           {appData?.site.title}
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index fb955eb268886e..a0f6a8b2d820ec 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -372,13 +372,7 @@ const ChatWrapper = () => {
           )}
         >
           <div className="flex max-w-180 grow gap-4">
-            <AppIcon
-              size="xl"
-              iconType={appData?.site.icon_type}
-              icon={appData?.site.icon}
-              background={appData?.site.icon_background}
-              imageUrl={appData?.site.icon_url}
-            />
+            <AppIcon size="xl" icon={appData?.site} />
             <div className="grow rounded-2xl bg-chat-bubble-bg px-4 py-3 body-lg-regular text-text-primary">
               <Markdown content={welcomeMessage.content} />
               <SuggestedQuestions item={welcomeMessage} />
@@ -394,13 +388,7 @@ const ChatWrapper = () => {
           isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]',
         )}
       >
-        <AppIcon
-          size="xl"
-          iconType={appData?.site.icon_type}
-          icon={appData?.site.icon}
-          background={appData?.site.icon_background}
-          imageUrl={appData?.site.icon_url}
-        />
+        <AppIcon size="xl" icon={appData?.site} />
         <div className="max-w-3xl px-4">
           <Markdown
             className="body-2xl-regular! text-text-tertiary!"
diff --git a/web/app/components/base/icon-picker/__tests__/image-confirmation.spec.tsx b/web/app/components/base/icon-picker/__tests__/image-confirmation.spec.tsx
index 15b7ff8b2f2bfa..f4eac4baaf460e 100644
--- a/web/app/components/base/icon-picker/__tests__/image-confirmation.spec.tsx
+++ b/web/app/components/base/icon-picker/__tests__/image-confirmation.spec.tsx
@@ -284,6 +284,15 @@ it('replaces an existing image only after selecting a file and confirms the new
 })
 
 it('preserves a linked icon on cancellation and only replaces it after confirmation', async () => {
+  function loadedImage() {
+    const image = document.createElement('img')
+    Object.defineProperties(image, {
+      complete: { value: true },
+      naturalWidth: { value: 32 },
+    })
+    return image
+  }
+  vi.spyOn(window, 'Image').mockImplementation(loadedImage)
   const user = userEvent.setup()
   const client = new QueryClient()
   client.setQueryData(emojiCatalogOptions.queryKey, [])
diff --git a/web/app/components/base/icon-picker/index.tsx b/web/app/components/base/icon-picker/index.tsx
index 081c7563acbbe8..3575bd629c3fd8 100644
--- a/web/app/components/base/icon-picker/index.tsx
+++ b/web/app/components/base/icon-picker/index.tsx
@@ -75,22 +75,19 @@ export function IconPicker({ value, onValueChange, children }: IconPickerProps)
 /** Opens the picker. The caller owns its appearance. */
 export const IconPickerTrigger = DialogTrigger
 
-type IconPickerIconProps = Pick<
-  ComponentProps<typeof AppIcon>,
-  'size' | 'rounded' | 'showEditIcon' | 'innerIcon' | 'className'
->
+type IconPickerIconProps = Pick<ComponentProps<typeof AppIcon>, 'size' | 'shape' | 'className'>
 
 /** Shows the committed icon, usually inside `IconPickerTrigger`. */
 export function IconPickerIcon(props: IconPickerIconProps) {
   const { value } = useIconPicker('IconPickerIcon')
   return (
     <AppIcon
-      decorative
       {...props}
-      iconType={value?.type === 'emoji' ? 'emoji' : 'image'}
-      icon={value?.type === 'emoji' ? value.icon : undefined}
-      background={value?.type === 'emoji' ? value.background : undefined}
-      imageUrl={value && value.type !== 'emoji' ? value.url : undefined}
+      icon={
+        value?.type === 'emoji'
+          ? { icon_type: 'emoji', icon: value.icon, icon_background: value.background }
+          : { icon_type: 'image', icon_url: value?.url }
+      }
     />
   )
 }
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index a0fe82800cd0d8..37751d9b8cac4a 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -33,13 +33,7 @@ const LikedItem = ({ detail, isMobile }: ILikedItemProps) => {
     >
       <div className="flex items-center">
         <div className={cn('relative size-6 rounded-md')}>
-          <AppIcon
-            size="tiny"
-            iconType={detail.icon_type}
-            icon={detail.icon}
-            background={detail.icon_background}
-            imageUrl={detail.icon_url}
-          />
+          <AppIcon size="tiny" icon={detail} />
         </div>
         {!isMobile && (
           <div className={cn('ml-2 truncate system-sm-medium text-text-primary')}>
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
index f335617f40df4e..1814df6545cb60 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -251,13 +251,7 @@ export const useExternalToolOptions = (
           return (
             <VariableMenuItem
               title={item.name}
-              icon={
-                <AppIcon
-                  className="h-3.5! w-3.5!"
-                  icon={item.icon}
-                  background={item.icon_background}
-                />
-              }
+              icon={<AppIcon className="h-3.5! w-3.5!" icon={item} />}
               extraElement={<div className="text-xs text-text-tertiary">{item.variableName}</div>}
               queryString={queryString}
               isSelected={isSelected}
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
index ed1063da441c2e..efba74164c6961 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/content.tsx
@@ -21,13 +21,7 @@ const Content = ({ name, description, iconInfo, chunkStructure }: ContentProps)
     <>
       <div className="flex items-center gap-x-3 p-4 pb-2">
         <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType={iconInfo.icon_type}
-            icon={iconInfo.icon}
-            background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-            imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-          />
+          <AppIcon size="large" icon={iconInfo} />
           <div className="absolute -right-1 -bottom-1 z-10">
             <span aria-hidden className={cn(iconClassName, 'size-4')} />
           </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
index 979196d1e94ab2..11f75abdd2e8f9 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/__tests__/index.spec.tsx
@@ -207,7 +207,7 @@ describe('Details', () => {
       })
 
       renderDetails(<Details {...defaultProps} />)
-      expect(screen.getByText('Test Pipeline')).toBeInTheDocument()
+      expect(screen.getByText('📊')).toBeInTheDocument()
     })
 
     it('should handle image icon type', () => {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index 08f361c71a3c8a..3bfdafb86297dc 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -1,11 +1,9 @@
-import type { AppIconType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
 import { DialogClose, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { Infotip, InfotipContent, InfotipTrigger } from '@langgenius/dify-ui/infotip'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
-import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import { LoadingPlaceholder } from '@/app/components/base/loading-placeholder'
@@ -33,14 +31,6 @@ const Details = ({ id, type, name, onApplyTemplate }: DetailsProps) => {
     true,
   )
 
-  const appIcon = useMemo(() => {
-    if (!pipelineTemplateInfo) return { type: 'emoji', icon: '📙', background: '#FFF4ED' }
-    const iconInfo = pipelineTemplateInfo.icon_info
-    return iconInfo.icon_type === 'image'
-      ? { type: 'image', url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
-      : { type: 'icon', icon: iconInfo.icon || '', background: iconInfo.icon_background || '' }
-  }, [pipelineTemplateInfo])
-
   const chunkStructureConfig = useChunkStructureConfig()
 
   return (
@@ -66,13 +56,7 @@ const Details = ({ id, type, name, onApplyTemplate }: DetailsProps) => {
           </div>
           <div className="relative flex w-90 shrink-0 flex-col">
             <div className="flex items-start gap-x-3 pt-6 pr-12 pb-2 pl-4">
-              <AppIcon
-                size="large"
-                iconType={appIcon.type as AppIconType}
-                icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
-                background={appIcon.type === 'image' ? undefined : appIcon.background}
-                imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
-              />
+              <AppIcon size="large" icon={pipelineTemplateInfo.icon_info} />
               <div className="flex grow flex-col gap-y-1 overflow-hidden py-px">
                 <DialogTitle
                   className="truncate system-md-semibold text-text-secondary"
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
index dbee82070c12ea..36d237c0318e67 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -124,9 +124,15 @@ const EditPipelineInfo = ({ onClose, pipeline }: EditPipelineInfoProps) => {
           <IconPicker value={appIcon} onValueChange={handleSelectAppIcon}>
             <IconPickerTrigger
               aria-label={`${t(($) => $['operation.edit'], { ns: 'common' })} ${t(($) => $.pipelineNameAndIcon, { ns: 'datasetPipeline' })}`}
-              className="group/edit-icon shrink-0 cursor-pointer rounded-2xl"
+              className="group/edit-icon relative shrink-0 cursor-pointer rounded-2xl"
             >
-              <IconPickerIcon size="xxl" showEditIcon />
+              <IconPickerIcon size="xxl" />
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 hidden items-center justify-center rounded-[inherit] bg-background-overlay-alt group-hover/edit-icon:flex group-focus-visible/edit-icon:flex"
+              >
+                <span className="i-ri-edit-line size-8 text-text-primary-on-surface" />
+              </span>
             </IconPickerTrigger>
             <IconPickerContent />
           </IconPicker>
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 9f3dc3a23ca539..6c15653d95b340 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -49,14 +49,7 @@ const StepThree = ({
                 </div>
               </div>
               <div className="flex items-center gap-x-4">
-                <AppIcon
-                  size="xxl"
-                  iconType={iconInfo.icon_type}
-                  icon={iconInfo.icon}
-                  background={iconInfo.icon_background}
-                  imageUrl={iconInfo.icon_url}
-                  className="shrink-0"
-                />
+                <AppIcon size="xxl" className="shrink-0" icon={iconInfo} />
                 <div className="flex min-w-0 grow flex-col gap-y-1">
                   <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
                     {t(($) => $['stepThree.label'], { ns: 'datasetCreation' })}
diff --git a/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-header.spec.tsx b/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-header.spec.tsx
index c228b744761663..4cc4714082dcf0 100644
--- a/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-header.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-header.spec.tsx
@@ -5,10 +5,6 @@ import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datase
 import { RETRIEVE_METHOD } from '@/types/app'
 import DatasetCardHeader from '../dataset-card-header'
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({ icon }: { icon?: string }) => <span>{icon}</span>,
-}))
-
 vi.mock('@/hooks/use-knowledge', () => ({
   useKnowledge: () => ({
     formatIndexingTechniqueAndMethod: () => 'High Quality',
diff --git a/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx b/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
index 9f712094b701f8..1ac1a0fad38cda 100644
--- a/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/dataset-card-header.tsx
@@ -117,13 +117,7 @@ const DatasetCardHeader = ({ dataset, nameId }: DatasetCardHeaderProps) => {
       )}
     >
       <div className="relative shrink-0">
-        <AppIcon
-          size="large"
-          iconType={iconInfo.icon_type}
-          icon={iconInfo.icon}
-          background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-          imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-        />
+        <AppIcon size="large" icon={iconInfo} />
         {(isShowChunkingModeIcon || isExternalProvider) && (
           <div className="absolute -right-1 -bottom-1 z-5">
             <span aria-hidden className={cn(iconClassName, 'size-4')} />
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index c4633289cf2429..079f6105da1c70 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -127,9 +127,15 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
               <div className="flex items-center gap-x-2">
                 <IconPickerTrigger
                   aria-label={`${t(($) => $['operation.edit'], { ns: 'common' })} ${t(($) => $['form.nameAndIcon'], { ns: 'datasetSettings' })}`}
-                  className="group/edit-icon shrink-0 cursor-pointer rounded-[10px] border-0 bg-transparent p-0"
+                  className="group/edit-icon relative shrink-0 cursor-pointer rounded-[10px] border-0 bg-transparent p-0"
                 >
-                  <IconPickerIcon size="medium" showEditIcon />
+                  <IconPickerIcon size="medium" />
+                  <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 hidden items-center justify-center rounded-[inherit] bg-background-overlay-alt group-hover/edit-icon:flex group-focus-visible/edit-icon:flex"
+                  >
+                    <span className="i-ri-edit-line size-5.5 text-text-primary-on-surface" />
+                  </span>
                 </IconPickerTrigger>
                 <Input
                   value={name}
diff --git a/web/app/components/explore/installed-app-navigation/app-nav-item.tsx b/web/app/components/explore/installed-app-navigation/app-nav-item.tsx
index 5cfdc5c3c3a18b..5c404242f81090 100644
--- a/web/app/components/explore/installed-app-navigation/app-nav-item.tsx
+++ b/web/app/components/explore/installed-app-navigation/app-nav-item.tsx
@@ -21,7 +21,7 @@ export default function AppNavItem({
   const {
     id,
     is_pinned: isPinned,
-    app: { name, icon_type, icon, icon_background, icon_url },
+    app: { name },
   } = installedApp
   const url = buildInstalledAppPath(id)
 
@@ -38,15 +38,7 @@ export default function AppNavItem({
         aria-current={isSelected ? 'page' : undefined}
         className="flex min-w-0 flex-1 items-center gap-2 outline-hidden"
       >
-        <AppIcon
-          decorative
-          size="tiny"
-          className="size-5 rounded-md text-sm"
-          iconType={icon_type}
-          icon={icon ?? undefined}
-          background={icon_background}
-          imageUrl={icon_url}
-        />
+        <AppIcon size="tiny" className="size-5 rounded-md text-sm" icon={installedApp.app} />
         <div className="min-w-0 flex-1 truncate py-1 pr-1 system-sm-regular" title={name}>
           {name}
         </div>
diff --git a/web/app/components/explore/learn-dify/item.tsx b/web/app/components/explore/learn-dify/item.tsx
index 17041b0853b79e..f052a9623d6c64 100644
--- a/web/app/components/explore/learn-dify/item.tsx
+++ b/web/app/components/explore/learn-dify/item.tsx
@@ -25,12 +25,7 @@ const LearnDifyItem = ({ canCreate, item, onCreate, onTry }: LearnDifyItemProps)
   const appBasicInfo = item.app
   const appName = appBasicInfo?.name ?? ''
   const appMode = appBasicInfo?.mode ?? ''
-  const appIconType =
-    appBasicInfo?.icon_type === 'image' ||
-    appBasicInfo?.icon_type === 'emoji' ||
-    appBasicInfo?.icon_type === 'link'
-      ? appBasicInfo.icon_type
-      : null
+
   const canViewApp = deploymentEdition === 'CLOUD'
   const canShowCreate = canCreate && !!onCreate
   const isClickable = canViewApp || canShowCreate
@@ -71,14 +66,7 @@ const LearnDifyItem = ({ canCreate, item, onCreate, onTry }: LearnDifyItemProps)
         />
       )}
       <div className="flex flex-col items-start gap-2 pb-1">
-        <AppIcon
-          decorative
-          size="large"
-          iconType={appIconType}
-          icon={appBasicInfo?.icon ?? ''}
-          background={appBasicInfo?.icon_background ?? ''}
-          imageUrl={appBasicInfo?.icon_url ?? ''}
-        />
+        <AppIcon size="large" icon={appBasicInfo} />
         <h3 id={appNameId} className="w-full truncate system-md-semibold text-text-secondary">
           {appName}
         </h3>
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index e4995e62f7b772..ed71efae6d2a79 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -80,13 +80,7 @@ const AppInfo: FC<Props> = ({
       {/* name and icon */}
       <div className="flex shrink-0 grow-0 items-center gap-3">
         <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType={appDetail.site.icon_type}
-            icon={appDetail.site.icon ?? undefined}
-            background={appDetail.site.icon_background ?? undefined}
-            imageUrl={appDetail.site.icon_url ?? undefined}
-          />
+          <AppIcon size="large" icon={appDetail.site} />
           <AppTypeIcon
             wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm"
             className="size-3"
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index aa8b62464897b3..1a64d1a87ca8b9 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -60,14 +60,7 @@ const TryApp: FC<Props> = ({ appId, appDetail, className }) => {
       <div className={cn('flex h-full flex-col rounded-2xl bg-background-section-burn', className)}>
         <div className="flex shrink-0 justify-between p-3">
           <div className="flex grow items-center space-x-2">
-            <AppIcon
-              decorative
-              size="large"
-              iconType={appDetail.site.icon_type}
-              icon={appDetail.site.icon ?? undefined}
-              background={appDetail.site.icon_background ?? undefined}
-              imageUrl={appDetail.site.icon_url ?? undefined}
-            />
+            <AppIcon size="large" icon={appDetail.site} />
             <div
               className="grow truncate system-md-semibold text-text-primary"
               title={appDetail.name}
diff --git a/web/app/components/explore/try-app/app/text-generation.tsx b/web/app/components/explore/try-app/app/text-generation.tsx
index 1679ad0b5e62b3..49687cec84d4a5 100644
--- a/web/app/components/explore/try-app/app/text-generation.tsx
+++ b/web/app/components/explore/try-app/app/text-generation.tsx
@@ -200,11 +200,9 @@ const TextGeneration: FC<Props> = ({ appId, className, isWorkflow, appData }) =>
         <div className={cn('shrink-0 space-y-4 pb-2', isPC ? 'p-8 pb-0' : 'p-4 pb-0')}>
           <div className="flex items-center gap-3">
             <AppIcon
+              fallback={{ content: '🤖', background: appDefaultIconBackground }}
               size={isPC ? 'large' : 'small'}
-              iconType={siteInfo.icon_type}
-              icon={siteInfo.icon}
-              background={siteInfo.icon_background || appDefaultIconBackground}
-              imageUrl={siteInfo.icon_url}
+              icon={siteInfo}
             />
             <div className="grow truncate system-md-semibold text-text-secondary">
               {siteInfo.title}
diff --git a/web/app/components/explore/try-app/preview/agent-app-preview.tsx b/web/app/components/explore/try-app/preview/agent-app-preview.tsx
index dac0d399945d48..c94be0beb7105b 100644
--- a/web/app/components/explore/try-app/preview/agent-app-preview.tsx
+++ b/web/app/components/explore/try-app/preview/agent-app-preview.tsx
@@ -48,14 +48,7 @@ export default function AgentAppPreview({ appDetail, composer }: Props) {
               <div className="flex flex-col gap-4">
                 <div className="flex flex-col gap-2">
                   <div className="flex min-w-0 items-center gap-2">
-                    <AppIcon
-                      decorative
-                      size="tiny"
-                      iconType={appDetail.site.icon_type}
-                      icon={appDetail.site.icon ?? undefined}
-                      background={appDetail.site.icon_background ?? undefined}
-                      imageUrl={appDetail.site.icon_url ?? undefined}
-                    />
+                    <AppIcon size="tiny" icon={appDetail.site} />
                     <h3 className="min-w-0 system-xl-semibold text-text-primary">
                       {appDetail.name}
                     </h3>
diff --git a/web/app/components/goto-anything/actions/agent.tsx b/web/app/components/goto-anything/actions/agent.tsx
index a537276a5cf37c..7cf8497e931314 100644
--- a/web/app/components/goto-anything/actions/agent.tsx
+++ b/web/app/components/goto-anything/actions/agent.tsx
@@ -1,4 +1,4 @@
-import type { AgentAppPartial, AgentIconType } from '@dify/contracts/api/console/agent/types.gen'
+import type { AgentAppPartial } from '@dify/contracts/api/console/agent/types.gen'
 import type { ActionItem, AgentSearchResult, SearchQueryOptions } from './types'
 import { getI18n } from 'react-i18next'
 import { consoleQuery } from '@/service/console'
@@ -6,26 +6,13 @@ import AppIcon from '../../base/app-icon'
 
 function getAgentResults(agents: AgentAppPartial[]): AgentSearchResult[] {
   return agents.map((agent) => {
-    const imageUrl =
-      agent.icon_type === 'image' || agent.icon_type === 'link' ? agent.icon : undefined
-    const iconType = (imageUrl ? 'image' : agent.icon_type) as AgentIconType | null | undefined
-
     return {
       id: agent.id,
       title: agent.name,
       description: agent.description || agent.role || undefined,
       type: 'agent' as const,
       path: `/agents/${agent.id}/configure`,
-      icon: (
-        <AppIcon
-          size="large"
-          rounded
-          iconType={iconType}
-          icon={agent.icon ?? undefined}
-          background={agent.icon_background}
-          imageUrl={imageUrl}
-        />
-      ),
+      icon: <AppIcon size="large" shape="circle" icon={agent} />,
       data: agent,
     }
   })
diff --git a/web/app/components/goto-anything/actions/app.tsx b/web/app/components/goto-anything/actions/app.tsx
index 1211396ccc7678..37f3b80735cc43 100644
--- a/web/app/components/goto-anything/actions/app.tsx
+++ b/web/app/components/goto-anything/actions/app.tsx
@@ -1,6 +1,6 @@
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
 import type { ActionItem, AppSearchResult, SearchQueryOptions, SearchResult } from './types'
-import type { AppIconType, AppModeEnum as AppMode } from '@/types/app'
+import type { AppModeEnum as AppMode } from '@/types/app'
 import { consoleQuery } from '@/service/console'
 import { AppModeEnum } from '@/types/app'
 import { getRedirectionPath } from '@/utils/app-redirection'
@@ -9,7 +9,6 @@ import AppIcon from '../../base/app-icon'
 
 const WORKFLOW_MODES = new Set([AppModeEnum.WORKFLOW, AppModeEnum.ADVANCED_CHAT])
 const APP_MODES = new Set<string>(Object.values(AppModeEnum))
-const APP_ICON_TYPES = new Set<string>(['emoji', 'image', 'link'])
 
 type AppSection = { id: string; label: string; path: string; iconClassName: string }
 
@@ -17,10 +16,6 @@ function getAppMode(app: AppPartial): AppMode {
   return APP_MODES.has(app.mode) ? (app.mode as AppMode) : AppModeEnum.CHAT
 }
 
-function getAppIconType(app: AppPartial): AppIconType | null {
-  return app.icon_type && APP_ICON_TYPES.has(app.icon_type) ? (app.icon_type as AppIconType) : null
-}
-
 function getAppPath(app: AppPartial) {
   return getRedirectionPath({
     id: app.id,
@@ -77,13 +72,7 @@ const getAppSections = (app: AppPartial): AppSection[] => {
 
 const appIcon = (app: AppPartial) => (
   <div className="relative shrink-0">
-    <AppIcon
-      size="large"
-      iconType={getAppIconType(app)}
-      icon={app.icon ?? undefined}
-      background={app.icon_background}
-      imageUrl={app.icon_url}
-    />
+    <AppIcon size="large" icon={app} />
     <AppTypeIcon
       wrapperClassName="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-sm border border-divider-regular outline-solid outline-components-panel-on-panel-item-bg"
       className="size-3"
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index c5cfbcd16af877..115652febfe582 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,3 +1,4 @@
+import { Avatar, AvatarFallback } from '@langgenius/dify-ui/avatar'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
@@ -44,21 +45,25 @@ const Icon = ({
   if (typeof src === 'object') {
     return (
       <div className={cn('relative', className)}>
-        <AppIcon
-          size={size}
-          iconType="emoji"
-          icon={src.content}
-          background={src.background}
-          className="rounded-md"
-          innerIcon={
-            shouldUseMcpIcon(src) ? (
-              <span
-                aria-hidden
-                className="i-custom-vender-other-mcp size-8 text-text-primary-on-surface"
-              />
-            ) : undefined
-          }
-        />
+        {shouldUseMcpIcon(src) ? (
+          <Avatar
+            aria-hidden="true"
+            className={cn('rounded-md border-[0.5px] border-divider-regular', iconSizeMap[size])}
+          >
+            <AvatarFallback
+              className="text-text-primary-on-surface"
+              style={{ background: src.background || '#FFEAD5' }}
+            >
+              <span className="i-custom-vender-other-mcp size-8" />
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          <AppIcon
+            size={size}
+            icon={{ icon_type: 'emoji', icon: src.content, icon_background: src.background }}
+            className="rounded-md"
+          />
+        )}
       </div>
     )
   }
diff --git a/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx b/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx
index 73bb24a78b8c4e..ea16f2902c4dc7 100644
--- a/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx
+++ b/web/app/components/plugins/marketplace/creator-profile/creation-card.tsx
@@ -34,13 +34,21 @@ function CreationCardContent({ creation }: { creation: CreatorCreation }) {
 
       <div className="flex min-w-0 shrink-0 items-center gap-3 px-4 pt-4 pr-20 pb-2">
         {creation.icon.type === 'image' ? (
-          <AppIcon size="large" iconType="image" imageUrl={creation.icon.src} />
+          <AppIcon
+            size="large"
+            icon={{
+              icon_type: 'image',
+              icon_url: creation.icon.src,
+            }}
+          />
         ) : (
           <AppIcon
             size="large"
-            iconType="emoji"
-            icon={creation.icon.value}
-            background={creation.icon.background}
+            icon={{
+              icon_type: 'emoji',
+              icon: creation.icon.value,
+              icon_background: creation.icon.background,
+            }}
           />
         )}
         <h3 className="min-w-0 flex-1 truncate system-md-medium text-text-primary">
diff --git a/web/app/components/plugins/marketplace/templates/template-card.tsx b/web/app/components/plugins/marketplace/templates/template-card.tsx
index 40483b82f84e25..385f454448f46b 100644
--- a/web/app/components/plugins/marketplace/templates/template-card.tsx
+++ b/web/app/components/plugins/marketplace/templates/template-card.tsx
@@ -79,10 +79,12 @@ export default function TemplateCard({ template, className, partnerText }: Templ
         <div className="relative z-0 flex shrink-0 items-center gap-3 px-4 pt-4 pb-2">
           <AppIcon
             size="large"
-            iconType={imageUrl ? 'image' : 'emoji'}
-            icon={imageUrl ? undefined : template.icon || '📄'}
-            imageUrl={imageUrl}
-            background={template.icon_background}
+            icon={{
+              icon_type: imageUrl ? 'image' : 'emoji',
+              icon: template.icon || '📄',
+              icon_url: imageUrl,
+              icon_background: template.icon_background,
+            }}
           />
           <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5">
             <div className="flex items-center">
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
index eb2d6440b77896..7889b83631e082 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@@ -3,7 +3,6 @@
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
 import type { ComboboxPositionerProps } from '@langgenius/dify-ui/combobox'
 import type { ReactNode } from 'react'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
 import { Button } from '@langgenius/dify-ui/button'
 import {
   Combobox,
@@ -69,7 +68,6 @@ function getAppSearchText(app: AppPartial) {
 }
 
 function AppPickerOption({ app }: { app: AppPartial }) {
-  const appIconType = zIconType.safeParse(app.icon_type).data ?? null
   return (
     <ComboboxItem
       key={app.id}
@@ -77,14 +75,7 @@ function AppPickerOption({ app }: { app: AppPartial }) {
       className="grid-cols-[minmax(0,1fr)_auto] gap-3 py-1 pr-3 pl-2"
     >
       <ComboboxItemText className="flex items-center gap-3">
-        <AppIcon
-          className="shrink-0"
-          size="xs"
-          iconType={appIconType}
-          icon={app.icon ?? undefined}
-          background={app.icon_background}
-          imageUrl={app.icon_url}
-        />
+        <AppIcon className="shrink-0" size="xs" icon={app} />
         <span className="min-w-0 grow truncate system-sm-medium text-components-input-text-filled">
           <span className="mr-1">{app.name}</span>
           <span className="text-text-tertiary">({app.id.slice(0, 8)})</span>
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
index aeeef7491ae082..6677c7b69e4d23 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
@@ -16,7 +15,6 @@ type AppTriggerProps = {
 
 export function AppTrigger({ open, appDetail }: AppTriggerProps) {
   const { t } = useTranslation(['app'])
-  const appIconType = zIconType.safeParse(appDetail?.icon_type).data ?? null
 
   return (
     <span
@@ -26,16 +24,7 @@ export function AppTrigger({ open, appDetail }: AppTriggerProps) {
         appDetail && 'py-1.5 pl-1.5',
       )}
     >
-      {appDetail && (
-        <AppIcon
-          className="mr-2 shrink-0"
-          size="xs"
-          iconType={appIconType}
-          icon={appDetail.icon ?? undefined}
-          background={appDetail.icon_background}
-          imageUrl={appDetail.icon_url}
-        />
-      )}
+      {appDetail && <AppIcon className="mr-2 shrink-0" size="xs" icon={appDetail} />}
       {appDetail ? (
         <span className="min-w-0 grow truncate system-sm-medium text-components-input-text-filled">
           {appDetail.name}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index 2a0e5c5fbe124a..cbfef258c634c8 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -106,8 +106,11 @@ export function ToolItem({
             <AppIcon
               className="h-7 w-7 rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge"
               size="xs"
-              icon={icon?.content}
-              background={icon?.background}
+              icon={{
+                icon_type: 'emoji',
+                icon: icon?.content,
+                icon_background: icon?.background,
+              }}
             />
           )}
         </div>
diff --git a/web/app/components/plugins/plugin-mutation-model/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-mutation-model/__tests__/index.spec.tsx
index afe145e81e5e48..c35dc00943eb1f 100644
--- a/web/app/components/plugins/plugin-mutation-model/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/__tests__/index.spec.tsx
@@ -51,32 +51,6 @@ vi.mock('@/utils/mcp', () => ({
     typeof src === 'object' && src !== null && (src as { content?: string })?.content === '🔗',
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({
-    icon,
-    background,
-    innerIcon,
-    size,
-    iconType,
-  }: {
-    icon?: string
-    background?: string
-    innerIcon?: React.ReactNode
-    size?: string
-    iconType?: string
-  }) => (
-    <div
-      data-testid="app-icon"
-      data-icon={icon}
-      data-background={background}
-      data-size={size}
-      data-icon-type={iconType}
-    >
-      {!!innerIcon && <div data-testid="inner-icon">{innerIcon}</div>}
-    </div>
-  ),
-}))
-
 vi.mock('../../base/badges/partner', () => ({
   default: ({ className, text }: { className?: string; text?: string }) => (
     <div data-testid="partner-badge" className={className} title={text}>
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index 214be481d9eaeb..61aa0239b256b2 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -39,11 +39,9 @@ const InfoModal = ({ isShow, onClose, data }: Props) => {
 
         <div className={cn('flex flex-col items-center gap-4 px-4 pt-10 pb-8')}>
           <AppIcon
+            fallback={{ content: '🤖', background: appDefaultIconBackground }}
             size="xxl"
-            iconType={data?.icon_type}
-            icon={data?.icon}
-            background={data?.icon_background || appDefaultIconBackground}
-            imageUrl={data?.icon_url}
+            icon={data}
           />
           <div className="w-full text-center">
             <DialogTitle className="system-xl-semibold text-text-secondary">
diff --git a/web/app/components/share/text-generation/text-generation-sidebar.tsx b/web/app/components/share/text-generation/text-generation-sidebar.tsx
index d963f5a2e7cc08..4024348e99054e 100644
--- a/web/app/components/share/text-generation/text-generation-sidebar.tsx
+++ b/web/app/components/share/text-generation/text-generation-sidebar.tsx
@@ -95,11 +95,9 @@ const TextGenerationSidebar: FC<TextGenerationSidebarProps> = ({
       >
         <div className="flex items-center gap-3">
           <AppIcon
+            fallback={{ content: '🤖', background: appDefaultIconBackground }}
             size={isPC ? 'large' : 'small'}
-            iconType={siteInfo.icon_type}
-            icon={siteInfo.icon}
-            background={siteInfo.icon_background || appDefaultIconBackground}
-            imageUrl={siteInfo.icon_url}
+            icon={siteInfo}
           />
           <div className="grow truncate system-md-semibold text-text-secondary">
             {siteInfo.title}
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 698e08cb45ddf0..d07104413b60f9 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -1,9 +1,11 @@
 'use client'
+
 import type { FC } from 'react'
 import type { IconPickerValue } from '@/app/components/base/icon-picker'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
 import { zSsoProtocol } from '@dify/contracts/api/console/system-features/zod.gen'
+import { Avatar, AvatarFallback } from '@langgenius/dify-ui/avatar'
 import { Button } from '@langgenius/dify-ui/button'
 import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
@@ -205,24 +207,39 @@ const MCPModalContent: FC<MCPModalContentProps> = ({ data, onConfirm, onHide })
                 render={
                   <IconButton
                     aria-label={t(($) => $['mcp.modal.changeIcon'], { ns: 'tools' })}
-                    className="group/edit-icon size-14 rounded-2xl p-0"
+                    className="group/edit-icon relative size-14 rounded-2xl p-0"
                   >
-                    <IconPickerIcon
-                      innerIcon={
-                        shouldUseMcpIconForAppIcon(
-                          state.appIcon.type,
-                          state.appIcon.type === 'emoji' ? state.appIcon.icon : '',
-                        ) ? (
-                          <span
-                            aria-hidden
-                            className="i-custom-vender-other-mcp size-8 text-text-primary-on-surface"
-                          />
-                        ) : undefined
-                      }
-                      size="xxl"
-                      className="relative rounded-2xl"
-                      showEditIcon
-                    />
+                    <>
+                      {shouldUseMcpIconForAppIcon(
+                        state.appIcon.type,
+                        state.appIcon.type === 'emoji' ? state.appIcon.icon : '',
+                      ) ? (
+                        <Avatar
+                          aria-hidden="true"
+                          className="size-14 rounded-2xl border-[0.5px] border-divider-regular"
+                        >
+                          <AvatarFallback
+                            className="text-text-primary-on-surface"
+                            style={{
+                              background:
+                                state.appIcon.type === 'emoji'
+                                  ? state.appIcon.background || '#FFEAD5'
+                                  : '#FFEAD5',
+                            }}
+                          >
+                            <span className="i-custom-vender-other-mcp size-8" />
+                          </AvatarFallback>
+                        </Avatar>
+                      ) : (
+                        <IconPickerIcon size="xxl" />
+                      )}
+                      <span
+                        aria-hidden="true"
+                        className="pointer-events-none absolute inset-0 hidden items-center justify-center rounded-[inherit] bg-background-overlay-alt group-hover/edit-icon:flex group-focus-visible/edit-icon:flex"
+                      >
+                        <span className="i-ri-edit-line size-8 text-text-primary-on-surface" />
+                      </span>
+                    </>
                   </IconButton>
                 }
               />
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index f77e6bca28cb6c..0665656cfad5ab 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -187,8 +187,11 @@ const BlockIcon: FC<BlockIconProps> = ({
             <AppIcon
               className="size-full! shrink-0"
               size="tiny"
-              icon={resolvedToolIcon?.content}
-              background={resolvedToolIcon?.background}
+              icon={{
+                icon_type: 'emoji',
+                icon: resolvedToolIcon?.content,
+                icon_background: resolvedToolIcon?.background,
+              }}
             />
           )}
         </>
diff --git a/web/app/components/workflow/block-selector/__tests__/agent-selector.spec.tsx b/web/app/components/workflow/block-selector/__tests__/agent-selector.spec.tsx
index 3c07530f1c38ec..ce256df8513d97 100644
--- a/web/app/components/workflow/block-selector/__tests__/agent-selector.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/agent-selector.spec.tsx
@@ -19,10 +19,6 @@ vi.mock('@/app/components/workflow/hooks-store', () => ({
   useHooksStore: () => undefined,
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: () => null,
-}))
-
 vi.mock('@/app/notifications', () => ({
   toast: { error: mocks.toastError },
 }))
diff --git a/web/app/components/workflow/block-selector/agent-selector.tsx b/web/app/components/workflow/block-selector/agent-selector.tsx
index a1c16b83941384..1a5e28c2382ca5 100644
--- a/web/app/components/workflow/block-selector/agent-selector.tsx
+++ b/web/app/components/workflow/block-selector/agent-selector.tsx
@@ -166,13 +166,7 @@ function AgentSelectorList({
                 onClick={() => handleSelect(agent)}
               >
                 <span aria-hidden className="shrink-0">
-                  <AppIcon
-                    size="small"
-                    iconType={agent.icon_type}
-                    icon={agent.icon ?? undefined}
-                    background={agent.icon_background}
-                    imageUrl={agent.icon ?? undefined}
-                  />
+                  <AppIcon size="small" icon={{ ...agent, icon_url: agent.icon }} />
                 </span>
                 <span className="flex min-w-0 flex-1 flex-col gap-0.5">
                   <span className="truncate system-sm-medium text-text-secondary">
diff --git a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
index 1e9a7e5c86cade..caad052f6e5d47 100644
--- a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
@@ -1,6 +1,5 @@
 import type { ReactElement, ReactNode, RefObject } from 'react'
 import type { AgentRosterNodeData } from '@/app/components/workflow/block-selector/types'
-import type { AppIconType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
@@ -54,12 +53,6 @@ type AgentRosterDisplayData = {
   role?: string | null
 }
 
-const getAppIconType = (iconType?: string | null): AppIconType | null => {
-  if (iconType === 'emoji' || iconType === 'image' || iconType === 'link') return iconType
-
-  return null
-}
-
 function AgentRosterAvatar({
   agent,
   size = 'lg',
@@ -71,16 +64,7 @@ function AgentRosterAvatar({
 }) {
   const iconSize = size === 'md' ? 'medium' : size === 'xs' ? 'tiny' : 'small'
 
-  return (
-    <AppIcon
-      size={iconSize}
-      iconType={getAppIconType(agent.icon_type)}
-      icon={agent.icon ?? undefined}
-      background={agent.icon_background}
-      imageUrl={agent.icon ?? undefined}
-      className={className}
-    />
-  )
+  return <AppIcon size={iconSize} className={className} icon={{ ...agent, icon_url: agent.icon }} />
 }
 
 function InlineSetupAvatar({ className }: { className?: string }) {
diff --git a/web/app/components/workflow/nodes/agent-v2/node.tsx b/web/app/components/workflow/nodes/agent-v2/node.tsx
index 4e7149210ed867..0db8c14aa6662d 100644
--- a/web/app/components/workflow/nodes/agent-v2/node.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/node.tsx
@@ -1,6 +1,5 @@
 import type { NodeProps } from '../../types'
 import type { AgentV2NodeType } from './types'
-import type { AppIconType } from '@/types/app'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useUpdateNodeInternals } from 'reactflow'
@@ -10,12 +9,6 @@ import { SettingItem } from '../_base/components/setting-item'
 import { useAgentRosterDetail, useWorkflowInlineAgentDetail } from './hooks'
 import { hasInlineAgentBinding, hasValidRosterAgentBinding } from './types'
 
-const getAppIconType = (iconType?: string | null): AppIconType | null => {
-  if (iconType === 'emoji' || iconType === 'image' || iconType === 'link') return iconType
-
-  return null
-}
-
 function AgentNodeAvatar({
   agent,
   isInlineAgent,
@@ -34,15 +27,7 @@ function AgentNodeAvatar({
   if (!agent)
     return <span aria-hidden className="size-8 shrink-0 rounded-full bg-text-quaternary/20" />
 
-  return (
-    <AppIcon
-      size="small"
-      iconType={getAppIconType(agent.icon_type)}
-      icon={agent.icon ?? undefined}
-      background={agent.icon_background}
-      imageUrl={agent.icon ?? undefined}
-    />
-  )
+  return <AppIcon size="small" icon={{ ...agent, icon_url: agent.icon }} />
 }
 
 function AgentNodeAvatarPlaceholder() {
diff --git a/web/app/components/workflow/nodes/agent/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/agent/__tests__/integration.spec.tsx
index 4300a901e7072d..3af81888d1b228 100644
--- a/web/app/components/workflow/nodes/agent/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/agent/__tests__/integration.spec.tsx
@@ -62,10 +62,6 @@ vi.mock('@/service/use-tools', () => ({
   useAllMCPTools: () => ({ data: mockMcpTools }),
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({ icon, background }: any) => <div>{`app-icon:${background}:${icon}`}</div>,
-}))
-
 vi.mock('@/utils/get-icon', () => ({
   getIconFromMarketPlace: () => mockMarketplaceIcon,
 }))
@@ -315,7 +311,7 @@ describe('agent path', () => {
 
       unmount()
       const secondRender = render(<ToolIcon id="tool-1" providerName="author/tool-b" />)
-      expect(screen.getByText('app-icon:#fff:B')).toBeInTheDocument()
+      expect(screen.getByText('B')).toBeInTheDocument()
       expect(screen.getByText('indicator:warning')).toBeInTheDocument()
 
       mockBuiltInTools = undefined
diff --git a/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx b/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx
index cf289aef727a03..810a1771523cfe 100644
--- a/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx
+++ b/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx
@@ -21,18 +21,6 @@ vi.mock('@/service/use-tools', () => ({
   useAllMCPTools: () => ({ data: mockMcpTools }),
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({
-    icon,
-    background,
-    className,
-  }: {
-    icon?: string
-    background?: string
-    className?: string
-  }) => <div className={className}>{`app-icon:${background}:${icon}`}</div>,
-}))
-
 vi.mock('@langgenius/dify-ui/status-dot', () => ({
   StatusDot: ({ status }: { status: string }) => <div>{`indicator:${status}`}</div>,
 }))
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 66c5d1ec223df9..7aae1bdaa066e6 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -92,8 +92,11 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
       iconContent = (
         <AppIcon
           className={cn('size-3.5 size-full object-cover', notSuccess && 'opacity-50')}
-          icon={icon?.content}
-          background={icon?.background}
+          icon={{
+            icon_type: 'emoji',
+            icon: icon?.content,
+            icon_background: icon?.background,
+          }}
         />
       )
     }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index c33f7f96fdf843..25669f7051ebb6 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -87,13 +87,7 @@ const DatasetItem: FC<Props> = ({
       }`}
     >
       <div className="flex w-0 grow items-center space-x-1.5">
-        <AppIcon
-          size="tiny"
-          iconType={iconInfo.icon_type}
-          icon={iconInfo.icon}
-          background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-          imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-        />
+        <AppIcon size="tiny" icon={iconInfo} />
         <div className="w-0 grow truncate system-sm-medium text-text-secondary">{payload.name}</div>
       </div>
       {!readonly && (
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
index a4b66c2f305974..f1f3163ec82100 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -40,14 +40,7 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({ data }) => {
               key={id}
               className="flex h-6.5 items-center gap-x-1 rounded-md bg-workflow-block-parma-bg px-1"
             >
-              <AppIcon
-                size="xs"
-                iconType={iconInfo.icon_type}
-                icon={iconInfo.icon}
-                background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-                imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-                className="shrink-0"
-              />
+              <AppIcon size="xs" className="shrink-0" icon={iconInfo} />
               <div className="w-0 grow truncate system-xs-regular text-text-secondary">{name}</div>
             </div>
           )
diff --git a/web/features/agent-v2/agent-detail/__tests__/navigation.spec.tsx b/web/features/agent-v2/agent-detail/__tests__/navigation.spec.tsx
index 468d94add94045..b5798a2e52b65f 100644
--- a/web/features/agent-v2/agent-detail/__tests__/navigation.spec.tsx
+++ b/web/features/agent-v2/agent-detail/__tests__/navigation.spec.tsx
@@ -117,6 +117,8 @@ function renderAgentDetailSection(expand = true) {
 
 describe('AgentDetailSection', () => {
   beforeEach(() => {
+    vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true)
+    vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(32)
     vi.clearAllMocks()
     mocks.deleteAgent.mockResolvedValue({})
     mocks.exportAppDsl.mockResolvedValue(undefined)
@@ -124,6 +126,8 @@ describe('AgentDetailSection', () => {
     mocks.queryData = createAgent()
   })
 
+  afterEach(() => vi.restoreAllMocks())
+
   it('renders the current agent avatar, name, and role', () => {
     renderAgentDetailSection()
     const agentName = screen.getByText('Research Agent')
@@ -134,7 +138,6 @@ describe('AgentDetailSection', () => {
     expect(screen.queryByText('agent')).not.toBeInTheDocument()
     expect(screen.queryByText('agentV2.agentDetail.title')).not.toBeInTheDocument()
     expect(agentAvatar).toHaveTextContent('🧪')
-    expect(agentAvatar).toHaveClass('h-10', 'w-10', 'rounded-full')
   })
 
   it('renders an uploaded sidebar avatar using its signed URL', () => {
@@ -143,9 +146,9 @@ describe('AgentDetailSection', () => {
       icon: 'uploaded-file-id',
       icon_url: 'https://files.example.com/avatar.png?sign=signature',
     })
-    renderAgentDetailSection()
+    const { container } = renderAgentDetailSection()
 
-    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
+    expect(container.querySelector('img')).toHaveAttribute(
       'src',
       'https://files.example.com/avatar.png?sign=signature',
     )
@@ -157,12 +160,9 @@ describe('AgentDetailSection', () => {
       icon: 'https://example.com/avatar.png',
       icon_url: null,
     })
-    renderAgentDetailSection()
+    const { container } = renderAgentDetailSection()
 
-    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
-      'src',
-      'https://example.com/avatar.png',
-    )
+    expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/avatar.png')
   })
 
   it('shows a fallback without exposing the file ID when the signed URL is missing', () => {
@@ -171,9 +171,9 @@ describe('AgentDetailSection', () => {
       icon: 'uploaded-file-id',
       icon_url: null,
     })
-    renderAgentDetailSection()
+    const { container } = renderAgentDetailSection()
 
-    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument()
+    expect(container.querySelector('img')).not.toBeInTheDocument()
     expect(screen.queryByText('uploaded-file-id')).not.toBeInTheDocument()
     expect(screen.getByText('🤖')).toBeInTheDocument()
   })
diff --git a/web/features/agent-v2/agent-detail/access/components/__tests__/access-surface-cards.spec.tsx b/web/features/agent-v2/agent-detail/access/components/__tests__/access-surface-cards.spec.tsx
index 3e76cca338abec..9f17e4c1228f3c 100644
--- a/web/features/agent-v2/agent-detail/access/components/__tests__/access-surface-cards.spec.tsx
+++ b/web/features/agent-v2/agent-detail/access/components/__tests__/access-surface-cards.spec.tsx
@@ -360,12 +360,16 @@ function createDeferredPromise<T>() {
 
 describe('Agent access surface cards', () => {
   beforeEach(() => {
+    vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true)
+    vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(32)
     vi.clearAllMocks()
     mocks.agentDetailQueryFn.mockResolvedValue(createAgent())
     mocks.getUserCanAccess.mockResolvedValue({ result: true })
     mocks.accessSubjectsQueryFn.mockResolvedValue({ groups: [], members: [] })
   })
 
+  afterEach(() => vi.restoreAllMocks())
+
   describe('Web app access', () => {
     it('disables Open when the user cannot access the backing Web App', async () => {
       const user = userEvent.setup()
diff --git a/web/features/agent-v2/agent-detail/access/components/web-app-access-card.tsx b/web/features/agent-v2/agent-detail/access/components/web-app-access-card.tsx
index a3f5ee21286f27..42c1e6dd90bd3e 100644
--- a/web/features/agent-v2/agent-detail/access/components/web-app-access-card.tsx
+++ b/web/features/agent-v2/agent-detail/access/components/web-app-access-card.tsx
@@ -210,19 +210,7 @@ export function WebAppAccessCard({
         headingLevel={3}
         title={t(($) => $['agentDetail.access.webApp.title'])}
         description={t(($) => $['agentDetail.access.webApp.description'])}
-        icon={
-          icon ? (
-            <AppIcon
-              size="large"
-              iconType={icon.icon_type}
-              icon={icon.icon}
-              background={icon.icon_background}
-              imageUrl={icon.icon_url}
-            />
-          ) : (
-            'i-ri-window-line'
-          )
-        }
+        icon={icon ? <AppIcon size="large" icon={icon} /> : 'i-ri-window-line'}
         status={status}
         statusLabel={statusLabel}
         switchDisabled={isLoading || !canManageWebApp}
diff --git a/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx b/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
index 05218acd7e8278..435247eaaaf6fd 100644
--- a/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
+++ b/web/features/agent-v2/agent-detail/access/components/workflow-references-table.tsx
@@ -1,9 +1,6 @@
 'use client'
 
-import type {
-  AgentIconType,
-  AgentReferencingWorkflowResponse,
-} from '@dify/contracts/api/console/agent/types.gen'
+import type { AgentReferencingWorkflowResponse } from '@dify/contracts/api/console/agent/types.gen'
 import type { ReactNode } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
 import { useQuery } from '@tanstack/react-query'
@@ -111,14 +108,6 @@ export function WorkflowReferencesTable({ agentId, enabled = true }: WorkflowRef
 function WorkflowAccessRow({ reference }: { reference: AgentReferencingWorkflowResponse }) {
   const { t } = useTranslation(['agentV2', 'agentRoster'])
   const { formatTime } = useTimestamp()
-  const imageUrl =
-    reference.app_icon_type === 'image' || reference.app_icon_type === 'link'
-      ? reference.app_icon
-      : undefined
-  const iconType = (imageUrl ? 'image' : reference.app_icon_type) as
-    | AgentIconType
-    | null
-    | undefined
   const updatedAt =
     reference.app_updated_at != null
       ? formatTime(
@@ -135,11 +124,13 @@ function WorkflowAccessRow({ reference }: { reference: AgentReferencingWorkflowR
           <span aria-hidden className="shrink-0">
             <AppIcon
               size="small"
-              rounded
-              iconType={iconType}
-              icon={reference.app_icon ?? undefined}
-              background={reference.app_icon_background}
-              imageUrl={imageUrl}
+              shape="circle"
+              icon={{
+                icon_type: reference.app_icon_type,
+                icon: reference.app_icon,
+                icon_url: reference.app_icon,
+                icon_background: reference.app_icon_background,
+              }}
             />
           </span>
           <span className="truncate">{reference.app_name}</span>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
index 78de9b6e5aa8ff..1869d3109f336b 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/publish-impact-details.tsx
@@ -1,9 +1,6 @@
 'use client'
 
-import type {
-  AgentIconType,
-  AgentReferencingWorkflowResponse,
-} from '@dify/contracts/api/console/agent/types.gen'
+import type { AgentReferencingWorkflowResponse } from '@dify/contracts/api/console/agent/types.gen'
 import { useId } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
@@ -69,14 +66,6 @@ export function AgentPublishImpactDetails({
 
 function ReferenceLink({ reference }: { reference: AgentReferencingWorkflowResponse }) {
   const { formatTimeFromNow } = useFormatTimeFromNow()
-  const imageUrl =
-    reference.app_icon_type === 'image' || reference.app_icon_type === 'link'
-      ? reference.app_icon
-      : undefined
-  const iconType = (imageUrl ? 'image' : reference.app_icon_type) as
-    | AgentIconType
-    | null
-    | undefined
   const updatedAt =
     reference.app_updated_at == null ? null : formatTimeFromNow(reference.app_updated_at * 1000)
 
@@ -90,10 +79,12 @@ function ReferenceLink({ reference }: { reference: AgentReferencingWorkflowRespo
       <span aria-hidden className="shrink-0">
         <AppIcon
           size="tiny"
-          iconType={iconType}
-          icon={reference.app_icon ?? undefined}
-          background={reference.app_icon_background}
-          imageUrl={imageUrl}
+          icon={{
+            icon_type: reference.app_icon_type,
+            icon: reference.app_icon,
+            icon_url: reference.app_icon,
+            icon_background: reference.app_icon_background,
+          }}
         />
       </span>
       <span className="min-w-0 flex-1 truncate">{reference.app_name}</span>
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/__tests__/preview-avatar.spec.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/__tests__/preview-avatar.spec.tsx
index 29316d0e4e2348..f11c6dd6cd5e06 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/__tests__/preview-avatar.spec.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/__tests__/preview-avatar.spec.tsx
@@ -38,8 +38,15 @@ function renderPreview(agent: ReturnType<typeof createAgentFixture>) {
 }
 
 describe('Agent preview avatar', () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true)
+    vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(32)
+  })
+
+  afterEach(() => vi.restoreAllMocks())
+
   it('renders an uploaded image from its signed URL instead of its file ID', () => {
-    renderPreview(
+    const { container } = renderPreview(
       createAgentFixture({
         icon_type: 'image',
         icon: 'uploaded-file-id',
@@ -47,14 +54,15 @@ describe('Agent preview avatar', () => {
       }),
     )
 
-    expect(screen.getByRole('img', { name: 'app icon' })).toHaveAttribute(
+    expect(container.querySelector('img')).toHaveAttribute(
       'src',
       'https://files.example.com/avatar.png?sign=signature',
     )
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   it('renders an external image from the raw icon when icon_url is null', () => {
-    renderPreview(
+    const { container } = renderPreview(
       createAgentFixture({
         icon_type: 'link',
         icon: 'https://example.com/avatar.png',
@@ -62,14 +70,11 @@ describe('Agent preview avatar', () => {
       }),
     )
 
-    expect(screen.getByRole('img', { name: 'app icon' })).toHaveAttribute(
-      'src',
-      'https://example.com/avatar.png',
-    )
+    expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/avatar.png')
   })
 
   it('shows a fallback without exposing the file ID when its signed URL is unavailable', () => {
-    renderPreview(
+    const { container } = renderPreview(
       createAgentFixture({
         icon_type: 'image',
         icon: 'uploaded-file-id',
@@ -77,13 +82,13 @@ describe('Agent preview avatar', () => {
       }),
     )
 
-    expect(screen.queryByRole('img', { name: 'app icon' })).not.toBeInTheDocument()
+    expect(container.querySelector('img')).not.toBeInTheDocument()
     expect(screen.queryByText('uploaded-file-id')).not.toBeInTheDocument()
     expect(screen.getByText('🤖')).toBeInTheDocument()
   })
 
   it('updates the avatar and name when the shared Agent query changes', async () => {
-    const { queryClient } = renderPreview(
+    const { queryClient, container } = renderPreview(
       createAgentFixture({
         name: 'Original Agent',
         icon_type: 'image',
@@ -92,7 +97,7 @@ describe('Agent preview avatar', () => {
       }),
     )
 
-    expect(screen.getByRole('img', { name: 'app icon' })).toBeInTheDocument()
+    expect(container.querySelector('img')).toBeInTheDocument()
     expect(screen.getByText('Original Agent')).toBeInTheDocument()
 
     await act(async () => {
@@ -109,7 +114,7 @@ describe('Agent preview avatar', () => {
 
     expect(await screen.findByText('Updated Agent')).toBeInTheDocument()
     expect(screen.queryByText('Original Agent')).not.toBeInTheDocument()
-    expect(screen.queryByRole('img', { name: 'app icon' })).not.toBeInTheDocument()
+    expect(container.querySelector('img')).not.toBeInTheDocument()
     expect(screen.getByText('🚀')).toBeInTheDocument()
   })
 })
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/preview-chat.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/preview-chat.tsx
index 7df5be2a7aa5fc..ce429e9d61fd02 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/preview-chat.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/preview-chat.tsx
@@ -24,25 +24,10 @@ function AgentPreviewChatEmptyState({
       input: { params: { agent_id: agentId } },
     }),
   )
-  const imageUrl =
-    agent?.icon_type === 'image'
-      ? agent.icon_url
-      : agent?.icon_type === 'link'
-        ? agent.icon
-        : undefined
-  const iconType = imageUrl ? 'image' : agent?.icon_type
 
   return (
     <>
-      <AppIcon
-        size="xxl"
-        rounded
-        iconType={iconType}
-        icon={agent?.icon_type === 'emoji' ? (agent.icon ?? undefined) : undefined}
-        background={agent?.icon_background}
-        imageUrl={imageUrl}
-        className="bg-background-default"
-      />
+      <AppIcon size="xxl" className="bg-background-default" shape="circle" icon={agent} />
       <div className="mt-3 max-w-full truncate system-md-medium text-text-secondary">
         {agent?.name || t(($) => $['agentDetail.configure.preview.empty.defaultAgentName'])}
       </div>
diff --git a/web/features/agent-v2/agent-detail/logs/components/source-icon.tsx b/web/features/agent-v2/agent-detail/logs/components/source-icon.tsx
index e61a5361dd1606..7327c8e30b6723 100644
--- a/web/features/agent-v2/agent-detail/logs/components/source-icon.tsx
+++ b/web/features/agent-v2/agent-detail/logs/components/source-icon.tsx
@@ -1,19 +1,6 @@
-import type {
-  AgentIconType,
-  AgentLogSourceResponse,
-} from '@dify/contracts/api/console/agent/types.gen'
+import type { AgentLogSourceResponse } from '@dify/contracts/api/console/agent/types.gen'
 import AppIcon from '@/app/components/base/app-icon'
 
-const getLogSourceImageUrl = (source?: AgentLogSourceResponse | null) =>
-  source?.app_icon_type === 'image' || source?.app_icon_type === 'link'
-    ? source.app_icon
-    : undefined
-
-const getLogSourceIconType = (source?: AgentLogSourceResponse | null) => {
-  const imageUrl = getLogSourceImageUrl(source)
-  return (imageUrl ? 'image' : source?.app_icon_type) as AgentIconType | null | undefined
-}
-
 export function LogSourceIcon({ source }: { source?: AgentLogSourceResponse | null }) {
   if (!source)
     return <span aria-hidden className="i-ri-apps-2-line size-5 shrink-0 text-text-quaternary" />
@@ -21,12 +8,14 @@ export function LogSourceIcon({ source }: { source?: AgentLogSourceResponse | nu
   return (
     <AppIcon
       size="xs"
-      rounded
-      iconType={getLogSourceIconType(source)}
-      icon={source.app_icon ?? undefined}
-      background={source.app_icon_background}
-      imageUrl={getLogSourceImageUrl(source)}
       className="size-5 text-sm"
+      shape="circle"
+      icon={{
+        icon_type: source.app_icon_type,
+        icon: source.app_icon,
+        icon_url: source.app_icon,
+        icon_background: source.app_icon_background,
+      }}
     />
   )
 }
diff --git a/web/features/agent-v2/agent-detail/navigation.tsx b/web/features/agent-v2/agent-detail/navigation.tsx
index eb7775cdb56b86..7c6a038ac95da4 100644
--- a/web/features/agent-v2/agent-detail/navigation.tsx
+++ b/web/features/agent-v2/agent-detail/navigation.tsx
@@ -177,13 +177,6 @@ export function AgentDetailSection({ expand = true }: AgentDetailSectionProps) {
     (item) =>
       sectionAccess[item.labelKey.slice('agentDetail.sections.'.length) as AgentDetailSectionKey],
   )
-  const imageUrl =
-    agent?.icon_type === 'image'
-      ? agent.icon_url
-      : agent?.icon_type === 'link'
-        ? agent.icon
-        : undefined
-  const iconType = imageUrl ? 'image' : agent?.icon_type
 
   return (
     <div className={cn('flex min-h-0 flex-1 flex-col', expand ? 'px-2 pb-2' : 'pb-2')}>
@@ -206,14 +199,7 @@ export function AgentDetailSection({ expand = true }: AgentDetailSectionProps) {
         >
           <div className={cn('shrink-0', expand && 'mr-2')}>
             <span aria-hidden>
-              <AppIcon
-                size="large"
-                rounded
-                iconType={iconType}
-                icon={agent?.icon_type === 'emoji' ? (agent.icon ?? undefined) : undefined}
-                background={agent?.icon_background}
-                imageUrl={imageUrl}
-              />
+              <AppIcon size="large" shape="circle" icon={agent} />
             </span>
           </div>
           <div
diff --git a/web/features/agent-v2/roster/components/agent-form-fields.tsx b/web/features/agent-v2/roster/components/agent-form-fields.tsx
index 126d4ed9a42381..0fc7521ffefcdb 100644
--- a/web/features/agent-v2/roster/components/agent-form-fields.tsx
+++ b/web/features/agent-v2/roster/components/agent-form-fields.tsx
@@ -35,7 +35,7 @@ export function AgentFormFields({
       <div className="flex items-start gap-4">
         <IconPicker value={icon} onValueChange={onIconChange}>
           <IconPickerTrigger aria-label={iconAriaLabel} className="shrink-0 rounded-full">
-            <IconPickerIcon size="xxl" rounded className="size-16 cursor-pointer" />
+            <IconPickerIcon size="xxl" shape="circle" className="size-16 cursor-pointer" />
           </IconPickerTrigger>
           <IconPickerContent />
         </IconPicker>
diff --git a/web/features/agent-v2/roster/components/agent-roster-list.tsx b/web/features/agent-v2/roster/components/agent-roster-list.tsx
index cf4447bfd514e9..b5b8cdd223d094 100644
--- a/web/features/agent-v2/roster/components/agent-roster-list.tsx
+++ b/web/features/agent-v2/roster/components/agent-roster-list.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { AgentAppPartial } from '@dify/contracts/api/console/agent/types.gen'
-import { zAgentIconType } from '@dify/contracts/api/console/agent/zod.gen'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
@@ -243,14 +242,6 @@ function AgentRosterItem({ agent }: { agent: AgentAppPartial }) {
   ]
     .filter(Boolean)
     .join(' ')
-  const parsedIconType = zAgentIconType.safeParse(agent.icon_type).data
-  const imageUrl =
-    parsedIconType === 'image'
-      ? (agent.icon_url ?? agent.icon)
-      : parsedIconType === 'link'
-        ? agent.icon
-        : undefined
-  const iconType = parsedIconType === 'link' ? 'image' : parsedIconType
 
   const handleEditOpen = () => {
     setActiveDialog('edit')
@@ -290,14 +281,7 @@ function AgentRosterItem({ agent }: { agent: AgentAppPartial }) {
     <>
       <div className="flex items-center gap-3 pt-3.5 pr-4 pb-2 pl-3.5">
         <span aria-hidden className="shrink-0">
-          <AppIcon
-            size="xl"
-            rounded
-            iconType={iconType}
-            icon={agent.icon ?? undefined}
-            background={agent.icon_background}
-            imageUrl={imageUrl}
-          />
+          <AppIcon size="xl" shape="circle" icon={agent} />
         </span>
         <div className="flex min-w-0 flex-1 flex-col gap-0.5 py-px">
           <h2 id={nameId} className="truncate system-md-semibold text-text-secondary">
diff --git a/web/features/agent-v2/roster/components/agent-workflow-references-dropdown.tsx b/web/features/agent-v2/roster/components/agent-workflow-references-dropdown.tsx
index 39dbc70eafce3a..9b4048c55fa06b 100644
--- a/web/features/agent-v2/roster/components/agent-workflow-references-dropdown.tsx
+++ b/web/features/agent-v2/roster/components/agent-workflow-references-dropdown.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { AgentAppPublishedReferenceResponse } from '@dify/contracts/api/console/agent/types.gen'
-import { zAgentIconType } from '@dify/contracts/api/console/agent/zod.gen'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,16 +16,6 @@ import Link from '@/next/link'
 const getWorkflowReferenceHref = (reference: AgentAppPublishedReferenceResponse) =>
   `/app/${reference.app_id}/workflow`
 
-const getWorkflowReferenceIcon = (reference: AgentAppPublishedReferenceResponse) => {
-  const parsedIconType = zAgentIconType.safeParse(reference.app_icon_type).data
-
-  return {
-    iconType: parsedIconType === 'link' ? 'image' : parsedIconType,
-    imageUrl:
-      parsedIconType === 'image' || parsedIconType === 'link' ? reference.app_icon : undefined,
-  }
-}
-
 export function AgentWorkflowReferencesDropdown({
   agentName,
   publishedReferences,
@@ -56,8 +45,6 @@ export function AgentWorkflowReferencesDropdown({
             {t(($) => $['roster.references.label'], { ns: 'agentRoster', name: agentName })}
           </DropdownMenuGroupLabel>
           {publishedReferences.map((reference) => {
-            const { iconType, imageUrl } = getWorkflowReferenceIcon(reference)
-
             return (
               <DropdownMenuLinkItem
                 key={reference.app_id}
@@ -73,10 +60,12 @@ export function AgentWorkflowReferencesDropdown({
                 <span aria-hidden className="shrink-0">
                   <AppIcon
                     size="tiny"
-                    iconType={iconType}
-                    icon={reference.app_icon ?? undefined}
-                    background={reference.app_icon_background}
-                    imageUrl={imageUrl}
+                    icon={{
+                      icon_type: reference.app_icon_type,
+                      icon: reference.app_icon,
+                      icon_url: reference.app_icon,
+                      icon_background: reference.app_icon_background,
+                    }}
                   />
                 </span>
                 <span className="min-w-0 flex-1 truncate">{reference.app_name}</span>
diff --git a/web/features/home/continue-work/item.tsx b/web/features/home/continue-work/item.tsx
index 5b291f3e51c2bb..ef844be8cc865c 100644
--- a/web/features/home/continue-work/item.tsx
+++ b/web/features/home/continue-work/item.tsx
@@ -64,13 +64,7 @@ export function ContinueWorkItem({ app }: ContinueWorkItemProps) {
   const cardContent = (
     <>
       <div className="relative shrink-0">
-        <AppIcon
-          size="large"
-          iconType={app.icon_type}
-          icon={app.icon ?? undefined}
-          background={app.icon_background}
-          imageUrl={app.icon_url}
-        />
+        <AppIcon size="large" icon={app} />
         <AppTypeIcon
           type={app.mode}
           wrapperClassName="absolute -right-0.5 -bottom-0.5 size-4 rounded-sm border-components-panel-on-panel-item-bg shadow-xs shadow-shadow-shadow-3"
diff --git a/web/features/home/template-card.tsx b/web/features/home/template-card.tsx
index a55c7a22239c47..2ab49f36c53da4 100644
--- a/web/features/home/template-card.tsx
+++ b/web/features/home/template-card.tsx
@@ -29,12 +29,7 @@ export function TemplateCard({ app, canCreate, onCreate, onTry }: TemplateCardPr
   const appBasicInfo = app.app
   const appName = appBasicInfo?.name ?? ''
   const appMode = appBasicInfo?.mode ?? ''
-  const appIconType =
-    appBasicInfo?.icon_type === 'image' ||
-    appBasicInfo?.icon_type === 'emoji' ||
-    appBasicInfo?.icon_type === 'link'
-      ? appBasicInfo.icon_type
-      : null
+
   const canViewApp = deploymentEdition === 'CLOUD'
   const isClickable = canViewApp || canCreate
   const handleTryApp = () => {
@@ -82,13 +77,7 @@ export function TemplateCard({ app, canCreate, onCreate, onTry }: TemplateCardPr
       )}
       <div className="flex shrink-0 items-center gap-3 px-4 pt-4 pb-2">
         <div className="relative shrink-0">
-          <AppIcon
-            size="large"
-            iconType={appIconType}
-            icon={appBasicInfo?.icon ?? undefined}
-            background={appBasicInfo?.icon_background ?? undefined}
-            imageUrl={appBasicInfo?.icon_url ?? undefined}
-          />
+          <AppIcon size="large" icon={appBasicInfo} />
           <AppTypeIcon
             wrapperClassName="absolute -right-0.5 -bottom-0.5 size-4 rounded-sm border-components-panel-on-panel-item-bg shadow-sm"
             className="size-3"
diff --git a/web/features/skills/__tests__/detail-page.fixture.tsx b/web/features/skills/__tests__/detail-page.fixture.tsx
index a0ff3dad885c43..382d28063dcf8b 100644
--- a/web/features/skills/__tests__/detail-page.fixture.tsx
+++ b/web/features/skills/__tests__/detail-page.fixture.tsx
@@ -96,10 +96,6 @@ vi.mock('@/app/components/base/markdown', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({ icon }: { icon?: string }) => <span>{icon}</span>,
-}))
-
 vi.mock('@/app/components/main-nav/components/account-section', () => ({
   default: ({ compact = false }: { compact?: boolean }) => (
     <button type="button" aria-label={compact ? 'compact-account-section' : 'account-section'}>
diff --git a/web/features/skills/__tests__/page.spec.tsx b/web/features/skills/__tests__/page.spec.tsx
index 964cf931a0c0d1..df166e0a04f6f4 100644
--- a/web/features/skills/__tests__/page.spec.tsx
+++ b/web/features/skills/__tests__/page.spec.tsx
@@ -133,10 +133,6 @@ vi.mock('@/hooks/use-timestamp', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/app-icon', () => ({
-  default: ({ icon }: { icon?: string }) => <span>{icon}</span>,
-}))
-
 vi.mock('@/features/tag-management/components/skill-card-tags', () => ({
   SkillCardTags: ({ tags }: { tags: string[] }) => (
     <button type="button" aria-label={tags.join(', ')}>
diff --git a/web/features/skills/detail/skill-metadata.tsx b/web/features/skills/detail/skill-metadata.tsx
index b3d6e8544ae0af..f719c4cba5d4a9 100644
--- a/web/features/skills/detail/skill-metadata.tsx
+++ b/web/features/skills/detail/skill-metadata.tsx
@@ -6,7 +6,6 @@ import type {
 } from '@dify/contracts/api/console/workspaces/types.gen'
 import type { SkillFileMutationCoordinator } from './shared'
 import type { TagComboboxItem } from '@/features/tag-management/components/tag-combobox-item'
-import type { AppIconType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
@@ -499,11 +498,6 @@ function SkillReferenceItem({
   reference: SkillReferenceResponse
 }) {
   const isWorkflowAgent = reference.type === 'workflow_agent_node'
-  const agentIconType = reference.agent_icon_type as AppIconType | null | undefined
-  const agentImageUrl =
-    reference.agent_icon_type === 'image' || reference.agent_icon_type === 'link'
-      ? reference.agent_icon
-      : undefined
 
   if (!isWorkflowAgent) {
     const title = reference.display_name || reference.name
@@ -520,15 +514,16 @@ function SkillReferenceItem({
         <span aria-hidden className="shrink-0">
           <AppIcon
             size="tiny"
-            iconType={agentIconType}
-            icon={reference.agent_icon ?? undefined}
-            background={reference.agent_icon_background}
-            imageUrl={agentImageUrl}
-            innerIcon={
-              agentIconType ? undefined : (
-                <span className="i-ri-robot-2-line size-4 text-util-colors-blue-blue-600" />
-              )
-            }
+            icon={{
+              icon_type: reference.agent_icon_type,
+              icon: reference.agent_icon,
+              icon_url: reference.agent_icon,
+              icon_background: reference.agent_icon_background,
+            }}
+            fallback={{
+              content: <span className="i-ri-robot-2-line size-4 text-util-colors-blue-blue-600" />,
+              background: reference.agent_icon_background,
+            }}
           />
         </span>
         <span
@@ -551,25 +546,22 @@ function SkillReferenceItem({
   }
 
   const workflowName = reference.workflow_name || reference.display_name || reference.name
-  const workflowIconType = reference.workflow_icon_type as AppIconType | null | undefined
-  const workflowImageUrl =
-    reference.workflow_icon_type === 'image' || reference.workflow_icon_type === 'link'
-      ? reference.workflow_icon
-      : undefined
+
   const workflowContent = (
     <>
       <span aria-hidden className="shrink-0">
         <AppIcon
           size="tiny"
-          iconType={workflowIconType}
-          icon={reference.workflow_icon ?? undefined}
-          background={reference.workflow_icon_background}
-          imageUrl={workflowImageUrl}
-          innerIcon={
-            workflowIconType ? undefined : (
-              <span className="i-ri-flow-chart size-4 text-util-colors-blue-blue-600" />
-            )
-          }
+          icon={{
+            icon_type: reference.workflow_icon_type,
+            icon: reference.workflow_icon,
+            icon_url: reference.workflow_icon,
+            icon_background: reference.workflow_icon_background,
+          }}
+          fallback={{
+            content: <span className="i-ri-flow-chart size-4 text-util-colors-blue-blue-600" />,
+            background: reference.workflow_icon_background,
+          }}
         />
       </span>
       <span

From 068e76032fa0775364d1b1ab44aaeefd7287b7b9 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 15 Oct 2026 13:56:48 +0800
Subject: [PATCH 2/2] test(web): migrate remaining AppIcon regression
 assertions

---
 .../card-item/__tests__/index.spec.tsx               |  6 +-----
 .../app-card/__tests__/index.spec.tsx                | 12 +++++++-----
 .../import-from-marketplace-template-modal.spec.tsx  |  4 ++--
 .../header/__tests__/index.spec.tsx                  | 12 ++++++++----
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
index 48424a0322c91c..105d77835d7567 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/__tests__/index.spec.tsx
@@ -214,11 +214,7 @@ describe('dataset-config/card-item', () => {
 
     renderItem(dataset)
 
-    const nameElement = screen.getByText(dataset.name)
-    const iconElement = nameElement.parentElement?.firstElementChild as HTMLElement
-
-    expect(iconElement)!.toHaveStyle({ background: '#FFF4ED' })
-    expect(iconElement).toHaveTextContent('📙')
+    expect(screen.getByText('📙')).toBeInTheDocument()
   })
 
   it('should apply mask overlay on mobile when drawer is open', async () => {
diff --git a/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx b/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
index f8a1ea97e2cca8..cc50aefb762f4b 100644
--- a/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/__tests__/index.spec.tsx
@@ -38,6 +38,8 @@ describe('AppCard', () => {
     vi.clearAllMocks()
   })
 
+  afterEach(() => vi.restoreAllMocks())
+
   it('exposes template creation only when creation is allowed', () => {
     const { rerender } = render(
       <AppCard app={app} canCreate onCreate={vi.fn()} onPreview={vi.fn()} />,
@@ -61,7 +63,9 @@ describe('AppCard', () => {
   })
 
   it('uses the remote image URL for image icons', () => {
-    render(
+    vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true)
+    vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(32)
+    const { container } = render(
       <AppCard
         app={{
           ...app,
@@ -77,10 +81,8 @@ describe('AppCard', () => {
         onPreview={vi.fn()}
       />,
     )
-    expect(screen.getByRole('img', { name: 'app icon' })).toHaveAttribute(
-      'src',
-      'https://example.com/remote.png',
-    )
+    expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/remote.png')
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   it('tracks and opens template preview in Cloud edition', async () => {
diff --git a/web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx b/web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx
index 35cb71d124ecc3..3216e7e8c4ecb8 100644
--- a/web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx
+++ b/web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, isInaccessible, render, screen } from '@testing-library/react'
 import ImportFromMarketplaceTemplateModal from '../import-from-marketplace-template-modal'
 
 const mockUseMarketplaceTemplateDetail = vi.fn()
@@ -43,7 +43,7 @@ describe('ImportFromMarketplaceTemplateModal', () => {
 
     expect(screen.getByText('Human Input: Writing Assistant')).toBeInTheDocument()
     expect(screen.queryByText('technologist')).not.toBeInTheDocument()
-    expect(screen.getByText('🧑‍💻')).toHaveAttribute('aria-hidden', 'true')
+    expect(isInaccessible(screen.getByText('🧑‍💻'))).toBe(true)
     expect(
       screen.getByRole('dialog', { name: /marketplace\.template\.modalTitle/ }),
     ).toBeInTheDocument()
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
index 79e39eb2d55589..3ce03d58cba91f 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
@@ -2,7 +2,7 @@ import type { ChatWithHistoryContextValue } from '../../context'
 import type { AppData, ConversationItem } from '@/models/share'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import { useChatWithHistoryContext } from '../../context'
 import Header from '../index'
 
@@ -61,6 +61,8 @@ describe('Header Component', () => {
     vi.clearAllMocks()
   })
 
+  afterEach(() => vi.restoreAllMocks())
+
   describe('Rendering', () => {
     it('should render conversation name when conversation is selected', () => {
       const mockConv = { id: 'conv-1', name: 'My Chat' } as ConversationItem
@@ -298,7 +300,9 @@ describe('Header Component', () => {
     })
 
     it('should render app icon from URL when icon_url is provided', () => {
-      setup({
+      vi.spyOn(HTMLImageElement.prototype, 'complete', 'get').mockReturnValue(true)
+      vi.spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get').mockReturnValue(32)
+      const { container } = setup({
         appData: {
           ...mockAppData,
           site: {
@@ -308,8 +312,8 @@ describe('Header Component', () => {
           },
         },
       })
-      const img = screen.getByAltText('app icon')
-      expect(img)!.toHaveAttribute('src', 'https://example.com/icon.png')
+      expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/icon.png')
+      expect(screen.queryByRole('img')).not.toBeInTheDocument()
     })
 
     it('should handle undefined appData gracefully (optional chaining)', () => {