diff --git a/package.json b/package.json
index 48e9c71..32e7ea5 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   "dependencies": {
     "@rc-component/portal": "^2.2.0",
     "@rc-component/trigger": "^3.0.0",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
diff --git a/src/hooks/useClosable.tsx b/src/hooks/useClosable.tsx
index 55d27c3..dee1fef 100644
--- a/src/hooks/useClosable.tsx
+++ b/src/hooks/useClosable.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isReactRenderable } from '@rc-component/util';
 import type { TourProps } from '../interface';
 import type { TourStepInfo } from '../TourStep';
 
@@ -31,7 +32,8 @@ function getClosableConfig(
 ): ClosableConfig | 'empty' {
   if (
     closable === false ||
-    (closeIcon === false && (!isConfigObj(closable) || !closable.closeIcon))
+    (closeIcon === false &&
+      (!isConfigObj(closable) || !isReactRenderable(closable.closeIcon)))
   ) {
     return null;
   }
@@ -47,7 +49,7 @@ function getClosableConfig(
   }
 
   // When StepClosable no need auto fill, but RootClosable need this.
-  return preset || closable || closeIcon
+  return preset || closable || isReactRenderable(closeIcon)
     ? {
         closeIcon: mergedCloseIcon,
       }
diff --git a/tests/renderability.test.tsx b/tests/renderability.test.tsx
new file mode 100644
index 0000000..8e7802f
--- /dev/null
+++ b/tests/renderability.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Tour from '../src';
+
+it('uses the zero step icon instead of the root icon', () => {
+  const { baseElement } = render(
+    <Tour open closeIcon="ROOT" steps={[{ title: 'Step', closeIcon: 0 }]} />,
+  );
+  expect(baseElement.querySelector('.rc-tour-close').textContent).toBe('0');
+});
+
+it('lets a configured zero icon override closeIcon=false', () => {
+  const { baseElement } = render(
+    <Tour
+      open
+      steps={[{ title: 'Step', closeIcon: false, closable: { closeIcon: 0 } }]}
+    />,
+  );
+  expect(baseElement.querySelector('.rc-tour-close').textContent).toBe('0');
+});
+
+it('preserves closable=false even with a zero icon', () => {
+  const { baseElement } = render(
+    <Tour open steps={[{ title: 'Step', closable: false, closeIcon: 0 }]} />,
+  );
+  expect(baseElement.querySelector('.rc-tour-close')).toBeNull();
+});