diff --git a/web/app/(commonLayout)/remark-directive-test/page.tsx b/web/app/(commonLayout)/remark-directive-test/page.tsx
index 64fac9283f..7d75063185 100644
--- a/web/app/(commonLayout)/remark-directive-test/page.tsx
+++ b/web/app/(commonLayout)/remark-directive-test/page.tsx
@@ -8,18 +8,16 @@ We’re speaking with technical teams to better understand:
 - What resonated — and what didn’t
 - How we can improve the experience
 
-::::withiconlist{.mt-4}
+::::withIconCardList
 
-:::withiconitem {icon="amazon"} {b="3"}
+:::withIconCardItem {icon="https://assets.dify.ai/images/gift-card.png"}
 $100 Amazon gift card
 :::
 
-:::withiconitem {icon="amazon2"}
-$100 Amazon gift card2
+:::withIconCardItem {icon="https://assets.dify.ai/images/dify-swag.png"}
+Dify swag
 :::
 
-::withiconitem[Exclusive Dify swag]{icon="dify"}
-
 ::::
 `
 
diff --git a/web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.ts b/web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.ts
new file mode 100644
index 0000000000..2dbd0be8fb
--- /dev/null
+++ b/web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+const commonSchema = {
+  className: z.string().min(1).optional(),
+}
+export const withIconCardListPropsSchema = z.object(commonSchema).strict()
+
+export const withIconCardItemPropsSchema = z.object({
+  ...commonSchema,
+  icon: z.string().trim(),
+}).strict()
+
+export const directivePropsSchemas = {
+  withIconCardListPropsSchema,
+  withIconCardItemPropsSchema,
+} as const
+
+export type WithIconCardListProps = z.infer<typeof withIconCardListPropsSchema>
+export type WithIconCardItemProps = z.infer<typeof withIconCardItemPropsSchema>
diff --git a/web/app/components/base/markdown-with-directive/index.tsx b/web/app/components/base/markdown-with-directive/index.tsx
index 7eb896b6a3..e26932737f 100644
--- a/web/app/components/base/markdown-with-directive/index.tsx
+++ b/web/app/components/base/markdown-with-directive/index.tsx
@@ -2,8 +2,9 @@ import type { Components } from 'react-markdown'
 import ReactMarkdown from 'react-markdown'
 import remarkDirective from 'remark-directive'
 import { visit } from 'unist-util-visit'
-import { WithIconItem, WithIconList } from './markdown-with-directive-components'
-import { directivePropsSchemas } from './markdown-with-directive-schema'
+import { directivePropsSchemas } from './components/markdown-with-directive-schema'
+import WithIconCardItem from './components/with-icon-card-item'
+import WithIconCardList from './components/with-icon-card-list'
 
 type DirectiveNode = {
   type?: string
@@ -173,8 +174,8 @@ function directivePlugin() {
 }
 
 const directiveComponents = {
-  withiconlist: WithIconList,
-  withiconitem: WithIconItem,
+  withIconCardList: WithIconCardList,
+  withIconCardItem: WithIconCardItem,
 } as unknown as Components
 
 type MarkdownWithDirectiveProps = {
diff --git a/web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx b/web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx
deleted file mode 100644
index 3b8ee21aeb..0000000000
--- a/web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ReactNode } from 'react'
-import type { WithIconItemDirectiveProps, WithIconListDirectiveProps } from './markdown-with-directive-schema'
-
-type WithIconListProps = WithIconListDirectiveProps & {
-  children?: ReactNode
-  className?: string
-}
-
-type WithIconItemProps = WithIconItemDirectiveProps & {
-  children?: ReactNode
-}
-
-export function WithIconList({ children, mt, className }: WithIconListProps) {
-  const classValue = className || ''
-  const classMarginTop = classValue.includes('mt-4') ? 16 : 0
-
-  return (
-    <div style={{ marginTop: Number(mt || classMarginTop) }}>
-      <div style={{ padding: 16 }}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export function WithIconItem({ icon, b, children }: WithIconItemProps) {
-  return (
-    <div style={{ display: 'flex', border: '1px solid #ddd', gap: 8 }}>
-      <span>🔹</span>
-      {b && <span>{b}</span>}
-      <span>{children}</span>
-      <small style={{ color: '#999' }}>
-        {`(${icon})`}
-      </small>
-    </div>
-  )
-}
diff --git a/web/app/components/base/markdown-with-directive/markdown-with-directive-schema.ts b/web/app/components/base/markdown-with-directive/markdown-with-directive-schema.ts
deleted file mode 100644
index e31a7a12d4..0000000000
--- a/web/app/components/base/markdown-with-directive/markdown-with-directive-schema.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { z } from 'zod'
-
-export const withIconListDirectivePropsSchema = z.object({
-  class: z.string().trim().min(1).optional(),
-  mt: z.string().trim().min(1).optional(),
-}).strict()
-
-export const withIconItemDirectivePropsSchema = z.object({
-  icon: z.string().trim().min(1),
-  b: z.string().trim().min(1).optional(),
-}).strict()
-
-export const directivePropsSchemas = {
-  withiconlist: withIconListDirectivePropsSchema,
-  withiconitem: withIconItemDirectivePropsSchema,
-} as const
-
-export type WithIconListDirectiveProps = z.infer<typeof withIconListDirectivePropsSchema>
-export type WithIconItemDirectiveProps = z.infer<typeof withIconItemDirectivePropsSchema>