diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 0184c81702..517fbd114b 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -25,6 +25,7 @@ import {
   VariableX,
 } from '@/app/components/base/icons/src/vender/workflow'
 import AppIcon from '@/app/components/base/app-icon'
+import cn from '@/utils/classnames'
 
 type BlockIconProps = {
   type: BlockEnum
@@ -97,13 +98,14 @@ const BlockIcon: FC<BlockIconProps> = ({
   toolIcon,
 }) => {
   return (
-    <div className={`
-      flex items-center justify-center border-[0.5px] border-white/2 text-white
-      ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]}
-      ${ICON_CONTAINER_BG_COLOR_MAP[type]}
-      ${toolIcon && '!shadow-none'}
-      ${className}
-    `}
+    <div className={
+      cn(
+        'flex items-center justify-center border-[0.5px] border-white/2 text-white',
+        ICON_CONTAINER_CLASSNAME_SIZE_MAP[size],
+        !toolIcon && ICON_CONTAINER_BG_COLOR_MAP[type],
+        toolIcon && '!shadow-none',
+        className,
+      )}
     >
       {
         type !== BlockEnum.Tool && (