diff --git a/README.md b/README.md
index 769b205..84a0677 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,12 @@ online example: http://react-component.github.io/steps/examples/
       <td>{ finish: ReactNode, error: ReactNode }</td>
       <td></td>
       <td>specify the default finish icon and error icon</td>
+    </tr>
+        <tr>
+      <td>showNumber</td>
+      <td>boolean</td>
+      <td></td>
+      <td>display step number, It will be ignored if icons is provided</td>
     </tr>
     <tr>
       <td>onChange</td>
@@ -151,6 +157,12 @@ online example: http://react-component.github.io/steps/examples/
       <td>ReactNode</td>
       <td></td>
       <td>set icon of step item</td>
+    </tr>
+      <tr>
+      <td>showNumber</td>
+      <td>boolean</td>
+      <td></td>
+      <td>display step number, It will be ignored if icon/icons is provided</td>
     </tr>
     <tr>
       <td>status</td>
diff --git a/src/Step.jsx b/src/Step.jsx
index cdeae61..1a71b5f 100644
--- a/src/Step.jsx
+++ b/src/Step.jsx
@@ -28,12 +28,15 @@ export default class Step extends React.Component {
       icon,
       iconPrefix,
       icons,
+      showNumber,
     } = this.props;
     let iconNode;
     const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
       [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
-      [`${iconPrefix}icon-check`]: !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
-      [`${iconPrefix}icon-cross`]: !icon && status === 'error' && ((icons && !icons.error) || !icons),
+      [`${iconPrefix}icon-check`]:
+        !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
+      [`${iconPrefix}icon-cross`]:
+        !icon && status === 'error' && ((icons && !icons.error) || !icons),
     });
     const iconDot = <span className={`${prefixCls}-icon-dot`} />;
     // `progressDot` enjoy the highest priority
@@ -59,7 +62,7 @@ export default class Step extends React.Component {
     } else if (icons && icons.error && status === 'error') {
       iconNode = <span className={`${prefixCls}-icon`}>{icons.error}</span>;
     } else if (icon || status === 'finish' || status === 'error') {
-      iconNode = <span className={iconClassName} />;
+      iconNode = <span className={iconClassName}>{showNumber ? stepNumber : ''}</span>;
     } else {
       iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
     }
diff --git a/src/Steps.jsx b/src/Steps.jsx
index f52fac4..5cfbb98 100644
--- a/src/Steps.jsx
+++ b/src/Steps.jsx
@@ -100,6 +100,7 @@ export default class Steps extends Component {
       initial,
       icons,
       onChange,
+      showNumber,
       ...restProps
     } = this.props;
     const isNav = type === 'navigation';
@@ -130,6 +131,7 @@ export default class Steps extends Component {
             wrapperStyle: style,
             progressDot,
             icons,
+            showNumber,
             onStepClick: onChange && this.onStepClick,
             ...child.props,
           };
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
index c022c81..9e4bccd 100644
--- a/tests/__snapshots__/index.test.js.snap
+++ b/tests/__snapshots__/index.test.js.snap
@@ -242,6 +242,154 @@ exports[`Steps render renders current correctly 1`] = `
 </div>
 `;
 
+exports[`Steps render renders final correctly 1`] = `
+<Steps
+  current={2}
+  direction="horizontal"
+  iconPrefix="rc"
+  initial={0}
+  labelPlacement="horizontal"
+  prefixCls="rc-steps"
+  progressDot={false}
+  showNumber={true}
+  size=""
+  status="process"
+  type="default"
+>
+  <div
+    className="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
+    style={Object {}}
+  >
+    <Step
+      active={false}
+      iconPrefix="rc"
+      key=".$.0"
+      prefixCls="rc-steps"
+      progressDot={false}
+      showNumber={true}
+      status="finish"
+      stepIndex={0}
+      stepNumber="1"
+      wrapperStyle={Object {}}
+    >
+      <div
+        className="rc-steps-item rc-steps-item-finish"
+        showNumber={true}
+        style={Object {}}
+      >
+        <div
+          className="rc-steps-item-container"
+        >
+          <div
+            className="rc-steps-item-tail"
+          />
+          <div
+            className="rc-steps-item-icon"
+          >
+            <span
+              className="rc-steps-icon rcicon rcicon-check"
+            >
+              1
+            </span>
+          </div>
+          <div
+            className="rc-steps-item-content"
+          >
+            <div
+              className="rc-steps-item-title"
+            />
+          </div>
+        </div>
+      </div>
+    </Step>
+    <Step
+      active={false}
+      iconPrefix="rc"
+      key=".$.1"
+      prefixCls="rc-steps"
+      progressDot={false}
+      showNumber={true}
+      status="finish"
+      stepIndex={1}
+      stepNumber="2"
+      wrapperStyle={Object {}}
+    >
+      <div
+        className="rc-steps-item rc-steps-item-finish"
+        showNumber={true}
+        style={Object {}}
+      >
+        <div
+          className="rc-steps-item-container"
+        >
+          <div
+            className="rc-steps-item-tail"
+          />
+          <div
+            className="rc-steps-item-icon"
+          >
+            <span
+              className="rc-steps-icon rcicon rcicon-check"
+            >
+              2
+            </span>
+          </div>
+          <div
+            className="rc-steps-item-content"
+          >
+            <div
+              className="rc-steps-item-title"
+            />
+          </div>
+        </div>
+      </div>
+    </Step>
+    <Step
+      active={true}
+      iconPrefix="rc"
+      key=".$.2"
+      prefixCls="rc-steps"
+      progressDot={false}
+      showNumber={true}
+      status="process"
+      stepIndex={2}
+      stepNumber="3"
+      wrapperStyle={Object {}}
+    >
+      <div
+        className="rc-steps-item rc-steps-item-process rc-steps-item-active"
+        showNumber={true}
+        style={Object {}}
+      >
+        <div
+          className="rc-steps-item-container"
+        >
+          <div
+            className="rc-steps-item-tail"
+          />
+          <div
+            className="rc-steps-item-icon"
+          >
+            <span
+              className="rc-steps-icon"
+            >
+              3
+            </span>
+          </div>
+          <div
+            className="rc-steps-item-content"
+          >
+            <div
+              className="rc-steps-item-title"
+            />
+          </div>
+        </div>
+      </div>
+    </Step>
+  </div>
+</Steps>
+`;
+
 exports[`Steps render renders labelPlacement correctly 1`] = `
 <div
   class="rc-steps rc-steps-horizontal rc-steps-label-vertical"
diff --git a/tests/index.test.js b/tests/index.test.js
index 3f408f1..0cb2961 100644
--- a/tests/index.test.js
+++ b/tests/index.test.js
@@ -28,6 +28,24 @@ describe('Steps', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
+    it('renders final correctly', () => {
+      const wrapper = mount(
+        <Steps current={2} showNumber>
+          <Step />
+          <Step />
+          <Step />
+        </Steps>,
+      );
+
+      expect(
+        wrapper
+          .find('.rc-steps-icon')
+          .at(2)
+          .text(),
+      ).toBe('3');
+      expect(wrapper).toMatchSnapshot();
+    });
+
     it('renders vertical correctly', () => {
       const wrapper = render(React.cloneElement(steps, { direction: 'vertical' }));
       expect(wrapper).toMatchSnapshot();
@@ -55,7 +73,7 @@ describe('Steps', () => {
           <Step title="进行中" description="xx" />
           <Step title="待运行" description="xx" />
           <Step title="待运行" description="xx" />
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
@@ -67,7 +85,7 @@ describe('Steps', () => {
           <Step title="进行中" description="xx" status="wait" />
           <Step title="待运行" description="xx" status="process" />
           <Step title="待运行" description="xx" status="finish" />
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
@@ -82,7 +100,7 @@ describe('Steps', () => {
           {false}
           <Step title="待运行" disabled description="xx" status="finish" />
           {null}
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
@@ -94,25 +112,29 @@ describe('Steps', () => {
           <Step title="进行中" description="xx" tailContent={<div>content</div>} />
           <Step title="待运行" description="xx" tailContent={3} />
           <Step title="待运行" description="xx" tailContent="text" />
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
 
-
     it('renders step with type navigation', () => {
       const wrapper = render(
         <Steps type="navigation" current={1} onChange={() => {}}>
-          <Step title="Step 1" subTitle="剩余 00:00:05 超长隐藏" description="This is a description." />
+          <Step
+            title="Step 1"
+            subTitle="剩余 00:00:05 超长隐藏"
+            description="This is a description."
+          />
           <Step title="Step 2" description="This is a description." />
           <Step title="Step 3" disabled description="This is a description." />
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
 
     function getFinishIcon() {
-      const path = 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
+      const path =
+        'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
         '5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' +
         '.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' +
         '-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' +
@@ -136,7 +158,8 @@ describe('Steps', () => {
     }
 
     function getErrorIcon() {
-      const path1 = 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
+      const path1 =
+        'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
         '.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' +
         '4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' +
         '.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' +
@@ -145,7 +168,8 @@ describe('Steps', () => {
         '4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' +
         '940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' +
         '9.5-94.4 139.9z';
-      const path2 = 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
+      const path2 =
+        'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
         '.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' +
         '-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' +
         '-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' +
@@ -173,7 +197,7 @@ describe('Steps', () => {
           <Step title="Finished" description="This is a description" />
           <Step title="In Process" description="This is a description" />
           <Step title="Waiting" description="This is a description" />
-        </Steps>
+        </Steps>,
       );
       expect(wrapper).toMatchSnapshot();
     });
@@ -186,10 +210,13 @@ describe('Steps', () => {
         <Step />
         <Step />
         <Step />
-      </Steps>
+      </Steps>,
     );
 
-    wrapper.find('.rc-steps-item-container').at(1).simulate('click');
+    wrapper
+      .find('.rc-steps-item-container')
+      .at(1)
+      .simulate('click');
     expect(onChange).toBeCalledWith(1);
   });
 
@@ -199,11 +226,14 @@ describe('Steps', () => {
       <Steps onChange={onChange}>
         <Step />
         <Step />
-        <Step disabled/>
-      </Steps>
+        <Step disabled />
+      </Steps>,
     );
 
-    wrapper.find('.rc-steps-item-container').at(2).simulate('click');
+    wrapper
+      .find('.rc-steps-item-container')
+      .at(2)
+      .simulate('click');
     expect(onChange).not.toBeCalled();
   });
 });