From 09b6f25fb97b1ba5a5349e3c3c1751743205614f Mon Sep 17 00:00:00 2001
From: Jingyi <jingyi.qi@dify.ai>
Date: Fri, 12 Jun 2026 19:50:53 -0700
Subject: [PATCH] fix: render marketplace template icons with AppIcon (#37401)

---
 ...t-from-marketplace-template-modal.spec.tsx | 46 +++++++++++++++++++
 ...import-from-marketplace-template-modal.tsx | 24 ++++------
 2 files changed, 54 insertions(+), 16 deletions(-)
 create mode 100644 web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx

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
new file mode 100644
index 0000000000..77faa314de
--- /dev/null
+++ b/web/app/components/apps/__tests__/import-from-marketplace-template-modal.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import ImportFromMarketplaceTemplateModal from '../import-from-marketplace-template-modal'
+
+const mockUseMarketplaceTemplateDetail = vi.fn()
+const mockFetchMarketplaceTemplateDSL = vi.fn()
+
+vi.mock('@/service/marketplace-templates', () => ({
+  useMarketplaceTemplateDetail: (...args: unknown[]) => mockUseMarketplaceTemplateDetail(...args),
+  fetchMarketplaceTemplateDSL: (...args: unknown[]) => mockFetchMarketplaceTemplateDSL(...args),
+}))
+
+describe('ImportFromMarketplaceTemplateModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseMarketplaceTemplateDetail.mockReturnValue({
+      data: {
+        data: {
+          id: 'human-input-writing',
+          template_name: 'Human Input: Writing Assistant',
+          overview: 'Send your creative brief, get a high-quality draft, and review before publishing.',
+          icon: 'technologist',
+          icon_background: '#D1FAE5',
+          icon_file_key: '',
+          publisher_unique_handle: 'langgenius',
+          usage_count: 261,
+          categories: ['operations'],
+        },
+      },
+      isLoading: false,
+      isError: false,
+    })
+  })
+
+  it('renders marketplace emoji icons without exposing the emoji id as text', () => {
+    render(
+      <ImportFromMarketplaceTemplateModal
+        templateId="human-input-writing"
+        onClose={vi.fn()}
+        onConfirm={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByText('Human Input: Writing Assistant')).toBeInTheDocument()
+    expect(screen.queryByText('technologist')).not.toBeInTheDocument()
+  })
+})
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 5c45b420af..bf7a226078 100644
--- a/web/app/components/apps/import-from-marketplace-template-modal.tsx
+++ b/web/app/components/apps/import-from-marketplace-template-modal.tsx
@@ -6,6 +6,7 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { RiCloseLine } from '@remixicon/react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import AppIcon from '@/app/components/base/app-icon'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import {
   fetchMarketplaceTemplateDSL,
@@ -100,22 +101,13 @@ const ImportFromMarketplaceTemplateModal = ({
           {template && (
             <div className="flex flex-col gap-4">
               <div className="flex items-center gap-3">
-                {template.icon_file_key
-                  ? (
-                      <img
-                        src={`${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon`}
-                        alt={template.template_name}
-                        className="size-10 rounded-lg object-cover"
-                      />
-                    )
-                  : (
-                      <div
-                        className="flex size-10 items-center justify-center rounded-lg text-xl"
-                        style={{ background: template.icon_background || '#F3F4F6' }}
-                      >
-                        {template.icon || '📄'}
-                      </div>
-                    )}
+                <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}
+                  imageUrl={template.icon_file_key ? `${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon` : undefined}
+                />
                 <div className="flex flex-col">
                   <div className="system-md-semibold text-text-primary">{template.template_name}</div>
                   <div className="flex items-center gap-1 system-xs-regular text-text-tertiary">