diff --git a/web/app/components/base/list-empty/index.tsx b/web/app/components/base/list-empty/index.tsx
index e925878bc1..c295ffbaec 100644
--- a/web/app/components/base/list-empty/index.tsx
+++ b/web/app/components/base/list-empty/index.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import React from 'react'
 import { Variable02 } from '../icons/src/vender/solid/development'
 import VerticalLine from './vertical-line'
@@ -5,19 +6,21 @@ import HorizontalLine from './horizontal-line'
 
 type ListEmptyProps = {
   title?: string
-  description?: React.ReactNode
+  description?: ReactNode
+  icon?: ReactNode
 }
 
 const ListEmpty = ({
   title,
   description,
+  icon,
 }: ListEmptyProps) => {
   return (
     <div className='flex w-[320px] p-4 flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg'>
       <div className='flex w-10 h-10 justify-center items-center gap-2 rounded-[10px]'>
         <div className='flex relative p-1 justify-center items-center gap-2 grow self-stretch rounded-[10px]
           border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg'>
-          <Variable02 className='w-5 h-5 shrink-0 text-text-accent' />
+          {icon || <Variable02 className='w-5 h-5 shrink-0 text-text-accent' />}
           <VerticalLine className='absolute -right-[1px] top-1/2 -translate-y-1/4'/>
           <VerticalLine className='absolute -left-[1px] top-1/2 -translate-y-1/4'/>
           <HorizontalLine className='absolute top-0 left-3/4 -translate-x-1/4 -translate-y-1/2'/>
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 3656c42b3f..7f7aeca092 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import { BlockEnum } from './types'
 import {
+  Agent,
   Answer,
   Assigner,
   Code,
@@ -53,8 +54,7 @@ const getIcon = (type: BlockEnum, className: string) => {
     [BlockEnum.ParameterExtractor]: <ParameterExtractor className={className} />,
     [BlockEnum.DocExtractor]: <DocsExtractor className={className} />,
     [BlockEnum.ListFilter]: <ListFilter className={className} />,
-    // TODO: add icon for Agent
-    [BlockEnum.Agent]: <VariableX className={className} />,
+    [BlockEnum.Agent]: <Agent className={className} />,
   }[type]
 }
 const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
index 636baaa08b..50bf260311 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
@@ -5,6 +5,7 @@ import { AgentStrategySelector } from './agent-strategy-selector'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { Agent } from '@/app/components/base/icons/src/vender/workflow'
 
 export type Strategy = {
   agent_strategy_provider_name: string
@@ -39,8 +40,8 @@ export const AgentStrategy = (props: AgentStrategyProps) => {
             fieldLabelClassName='uppercase'
           />
         </div>
-        // TODO: list empty need a icon
         : <ListEmpty
+          icon={<Agent className='w-5 h-5 shrink-0 text-text-accent' />}
           title={t('workflow.nodes.agent.strategy.configureTip')}
           description={<div className='text-text-tertiary text-xs'>
             {t('workflow.nodes.agent.strategy.configureTipDesc')} <br />