diff --git a/src/Step.tsx b/src/Step.tsx
index 098db38..ecb8a99 100644
--- a/src/Step.tsx
+++ b/src/Step.tsx
@@ -139,7 +139,7 @@ export default function Step(props: StepProps) {
     itemClassNames.root,
   );
 
-  let iconNode = <StepIcon />;
+  let iconNode = <StepIcon>{icon}</StepIcon>;
   if (iconRender) {
     iconNode = iconRender(iconNode, {
       ...renderInfo,
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 36a560c..250ea1b 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -1342,7 +1342,11 @@ exports[`Steps should render customIcon correctly 1`] = `
     >
       <div
         class="rc-steps-item-icon"
-      />
+      >
+        <i
+          class="rcicon rcicon-cloud"
+        />
+      </div>
       <div
         class="rc-steps-item-section"
       >
@@ -1369,7 +1373,9 @@ exports[`Steps should render customIcon correctly 1`] = `
     >
       <div
         class="rc-steps-item-icon"
-      />
+      >
+        apple
+      </div>
       <div
         class="rc-steps-item-section"
       >
@@ -1396,7 +1402,9 @@ exports[`Steps should render customIcon correctly 1`] = `
     >
       <div
         class="rc-steps-item-icon"
-      />
+      >
+        github
+      </div>
       <div
         class="rc-steps-item-section"
       >
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index f31d169..3d793d0 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -186,6 +186,10 @@ describe('Steps', () => {
         ]}
       />,
     );
+    const iconNodes = container.querySelectorAll('.rc-steps-item-icon');
+    expect(iconNodes[0].querySelector('.rcicon-cloud')).toBeInTheDocument();
+    expect(iconNodes[1]).toHaveTextContent('apple');
+    expect(iconNodes[2]).toHaveTextContent('github');
     expect(container.firstChild).toMatchSnapshot();
   });