diff --git a/packages/devui-vue/devui/search/src/components/search-close-icon.tsx b/packages/devui-vue/devui/search/src/components/search-close-icon.tsx
new file mode 100644
index 0000000000..15cc1e88e1
--- /dev/null
+++ b/packages/devui-vue/devui/search/src/components/search-close-icon.tsx
@@ -0,0 +1,11 @@
+const SearchCloseIcon = (): JSX.Element => (
+  <svg viewBox="0 0 1024 1024" width="12px" height="12px">
+    <path
+      d="M940.8 207.530667L818.602667 85.333333l-305.493334 305.493334L207.616 85.333333 \
+      85.333333 207.530667l305.493334 305.493333L85.333333 818.517333l122.282667 122.282667 \
+      305.493333-305.493333 305.493334 305.493333 122.197333-122.282667-305.493333-305.493333z"
+      p-id="30810"
+    ></path>
+  </svg>
+);
+export default SearchCloseIcon;
diff --git a/packages/devui-vue/devui/search/src/components/search-icon.tsx b/packages/devui-vue/devui/search/src/components/search-icon.tsx
new file mode 100644
index 0000000000..616065e652
--- /dev/null
+++ b/packages/devui-vue/devui/search/src/components/search-icon.tsx
@@ -0,0 +1,10 @@
+const SearchIcon = (): JSX.Element => (
+  <svg viewBox="0 0 1024 1024" version="1.1" width="12px" height="12px">
+    <path
+      d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288 \
+      358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z"
+      fill="#262626" p-id="32547"
+    ></path>
+  </svg>
+);
+export default SearchIcon;
diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss
index ac654e09a3..59cbad5404 100644
--- a/packages/devui-vue/devui/search/src/search.scss
+++ b/packages/devui-vue/devui/search/src/search.scss
@@ -44,18 +44,23 @@
     }
   }
 
-  svg.svg-icon-clear path,
-  svg.svg-icon-search path {
-    fill: $devui-icon-text;
+  &__clear,
+  &__icon {
+    @include size($devui-size-md, $devui-size-md);
+    @include flex;
+
+    & svg {
+      path {
+        fill: $devui-icon-fill;
+      }
+      @include size($devui-font-size-md, $devui-font-size-md);
+    }
   }
 
   &__clear {
     position: absolute;
     right: $devui-size-md;
     cursor: pointer;
-    height: 100%;
-    @include size($devui-size-md, $devui-size-md);
-    @include flex;
 
     &::after {
       content: '';
@@ -76,9 +81,6 @@
     z-index: 1;
     right: 0;
     top: 0;
-    width: $devui-size-md;
-    height: $devui-size-md;
-    @include flex;
   }
 
   &--sm {
@@ -91,15 +93,15 @@
       }
     }
 
-    .#{$devui-prefix}-search__icon {
-      font-size: $devui-font-size-sm;
+    .#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear {
       @include size($devui-size-sm, $devui-size-sm);
+
+      svg {
+        @include size($devui-font-size-sm, $devui-font-size-sm);
+      }
     }
 
     .#{$devui-prefix}-search__clear {
-      font-size: $devui-font-size-sm;
-      @include size($devui-size-sm, $devui-size-sm);
-
       right: $devui-size-sm;
     }
   }
@@ -114,15 +116,15 @@
       }
     }
 
-    .#{$devui-prefix}-search__icon {
-      font-size: $devui-font-size-lg;
+    .#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear {
       @include size($devui-size-lg, $devui-size-lg);
+
+      svg {
+        @include size($devui-font-size-lg, $devui-font-size-lg);
+      }
     }
 
     .#{$devui-prefix}-search__clear {
-      font-size: $devui-font-size-lg;
-      @include size($devui-size-lg, $devui-size-lg);
-
       right: $devui-size-lg;
     }
   }
diff --git a/packages/devui-vue/devui/search/src/search.tsx b/packages/devui-vue/devui/search/src/search.tsx
index 7c285ff5b4..aa0ad38641 100644
--- a/packages/devui-vue/devui/search/src/search.tsx
+++ b/packages/devui-vue/devui/search/src/search.tsx
@@ -4,10 +4,11 @@ import { getRootClass } from './composables/use-search-class';
 import { keywordsHandles } from './composables/use-search-keywords';
 import { keydownHandles } from './composables/use-search-keydown';
 import DInput from '../../input/src/input';
-import { Icon } from '../../icon';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import './search.scss';
 import { createI18nTranslate } from '../../locale/create';
+import SearchCloseIcon from './components/search-close-icon';
+import SearchIcon from './components/search-icon';
 
 export default defineComponent({
   name: 'DSearch',
@@ -54,18 +55,18 @@ export default defineComponent({
         <label class={rootClasses.value}>
           {props.iconPosition === 'left' && (
             <div class={ns.e('icon')} onClick={onClickHandle}>
-              <Icon name="search" size="inherit" key="search"></Icon>
+              <SearchIcon></SearchIcon>
             </div>
           )}
           <DInput {...inputProps}></DInput>
           {clearIconShow.value && (
             <div class={ns.e('clear')} onClick={onClearHandle}>
-              <Icon name="close" size="inherit" key="close"></Icon>
+              <SearchCloseIcon></SearchCloseIcon>
             </div>
           )}
           {props.iconPosition === 'right' && (
             <div class={ns.e('icon')} onClick={onClickHandle}>
-              <Icon name="search" size="inherit" key="search"></Icon>
+              <SearchIcon></SearchIcon>
             </div>
           )}
         </label>