diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index e401c639319c..23f48cfd6659 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -286,6 +286,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     showSuffixIcon,
     multiple,
     prefixCls,
+    componentName: 'Cascader',
   });
 
   // ===================== Placement =====================
@@ -298,6 +299,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);
 
+  const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+
   // ==================== Render =====================
   const renderNode = (
     <RcCascader
@@ -325,12 +328,11 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
       direction={mergedDirection}
       placement={memoPlacement}
       notFoundContent={mergedNotFoundContent}
-      allowClear={allowClear}
+      allowClear={mergedAllowClear}
       showSearch={mergedShowSearch}
       expandIcon={mergedExpandIcon}
       suffixIcon={suffixIcon}
       removeIcon={removeIcon}
-      clearIcon={clearIcon}
       loadingIcon={loadingIcon}
       checkable={checkable}
       dropdownClassName={mergedDropdownClassName}
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index e2b0c748e446..f929dc0c824b 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -49,6 +49,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       popupClassName,
       dropdownClassName,
       status: customStatus,
+      clearIcon,
       ...restProps
     } = props;
 
@@ -116,12 +117,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
         placeholder={getRangePlaceholder(locale, picker, placeholder)}
         suffixIcon={suffixNode}
-        clearIcon={<CloseCircleFilled />}
         prevIcon={<span className={`${prefixCls}-prev-icon`} />}
         nextIcon={<span className={`${prefixCls}-next-icon`} />}
         superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
         superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-        allowClear
         transitionName={`${rootPrefixCls}-slide-up`}
         {...restProps}
         {...additionalOverrideProps}
@@ -142,6 +141,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         components={Components}
         direction={direction}
         dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
+        allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
       />,
     );
   });
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 25ae6b7aef7e..c6b8073b2abf 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -54,6 +54,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           dropdownClassName,
           disabled: customDisabled,
           status: customStatus,
+          clearIcon,
           ...restProps
         } = props;
 
@@ -139,12 +140,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
             placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
             suffixIcon={suffixNode}
             dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-            clearIcon={<CloseCircleFilled />}
             prevIcon={<span className={`${prefixCls}-prev-icon`} />}
             nextIcon={<span className={`${prefixCls}-next-icon`} />}
             superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
             superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-            allowClear
             transitionName={`${rootPrefixCls}-slide-up`}
             {...additionalProps}
             {...restProps}
@@ -178,6 +177,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               rootClassName,
               popupClassName || dropdownClassName,
             )}
+            allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
           />,
         );
       },
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 98bdc4770d55..ac07efdafa91 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -99,6 +99,7 @@ const InternalSelect = <
     popupMatchSelectWidth,
     direction: propDirection,
     style,
+    allowClear,
     ...props
   }: SelectProps<ValueType, OptionType>,
   ref: React.Ref<BaseSelectRef>,
@@ -170,8 +171,11 @@ const InternalSelect = <
     showSuffixIcon,
     prefixCls,
     showArrow: props.showArrow,
+    componentName: 'Select',
   });
 
+  const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+
   const selectProps = omit(props as typeof props & { itemIcon: React.ReactNode }, [
     'suffixIcon',
     'itemIcon',
@@ -259,7 +263,7 @@ const InternalSelect = <
       suffixIcon={suffixIcon}
       menuItemSelectedIcon={itemIcon}
       removeIcon={removeIcon}
-      clearIcon={clearIcon}
+      allowClear={mergedAllowClear}
       notFoundContent={mergedNotFound}
       className={mergedClassName}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
diff --git a/components/select/utils/iconUtil.tsx b/components/select/utils/iconUtil.tsx
index a5718b8a2339..d93dafe095f6 100644
--- a/components/select/utils/iconUtil.tsx
+++ b/components/select/utils/iconUtil.tsx
@@ -6,6 +6,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import type { ReactNode } from 'react';
 import * as React from 'react';
+import warning from '../../_util/warning';
 
 type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
 
@@ -21,6 +22,7 @@ export default function getIcons({
   showSuffixIcon,
   feedbackIcon,
   showArrow,
+  componentName,
 }: {
   suffixIcon?: React.ReactNode;
   clearIcon?: RenderNode;
@@ -33,7 +35,16 @@ export default function getIcons({
   prefixCls: string;
   showSuffixIcon?: boolean;
   showArrow?: boolean;
+  componentName: string;
 }) {
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !clearIcon,
+      componentName,
+      '`clearIcon` is deprecated, please use `allowClear={{ clearIcon: React.ReactNode }}` instead.',
+    );
+  }
+
   // Clear Icon
   const mergedClearIcon = clearIcon ?? <CloseCircleFilled />;
 
diff --git a/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
index c06bfe119098..45137dee427d 100644
--- a/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
@@ -41,6 +41,31 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
         </svg>
       </span>
     </span>
+    <span
+      class="ant-picker-clear"
+      role="button"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
 </div>
 `;
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 2c88ca9639bd..7391c9993e37 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -106,6 +106,7 @@ const InternalTreeSelect = <
     builtinPlacements,
     dropdownMatchSelectWidth,
     popupMatchSelectWidth,
+    allowClear,
     ...props
   }: TreeSelectProps<ValueType, OptionType>,
   ref: React.Ref<BaseSelectRef>,
@@ -188,8 +189,11 @@ const InternalTreeSelect = <
     hasFeedback,
     feedbackIcon,
     prefixCls,
+    componentName: 'TreeSelect',
   });
 
+  const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+
   // ===================== Empty =====================
   let mergedNotFound: React.ReactNode;
   if (notFoundContent !== undefined) {
@@ -268,7 +272,7 @@ const InternalTreeSelect = <
       multiple={isMultiple}
       placement={memoizedPlacement}
       removeIcon={removeIcon}
-      clearIcon={clearIcon}
+      allowClear={mergedAllowClear}
       switcherIcon={renderSwitcherIcon}
       showTreeIcon={treeIcon as any}
       notFoundContent={mergedNotFound}