diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index abf1261ed..9ff6cf011 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -12,17 +12,18 @@
         <i class="el-step__line-inner" :style="lineStyle"></i>
       </div>
 
-      <slot
-        v-if="currentStatus !== 'success' && currentStatus !== 'error'"
-        name="icon">
-        <i v-if="icon" :class="['el-step__icon', 'el-icon-' + icon]"></i>
-        <div v-else>{{ index + 1 }}</div>
-      </slot>
-      <i
-        v-else
-        class="el-step__icon"
-        :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
-      </i>
+      <span class="el-step__icon">
+        <slot
+          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+          name="icon">
+          <i v-if="icon" :class="['el-icon-' + icon]"></i>
+          <div v-else>{{ index + 1 }}</div>
+        </slot>
+        <i
+          v-else
+          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
+        </i>
+      </span>
     </div>
     <div
       class="el-step__main"
diff --git a/packages/theme-default/src/step.css b/packages/theme-default/src/step.css
index 94bb5b7ba..75f27a307 100644
--- a/packages/theme-default/src/step.css
+++ b/packages/theme-default/src/step.css
@@ -69,6 +69,10 @@
 
     @e icon {
       line-height: 28px;
+
+      > * {
+        line-height: inherit;
+      }
     }
 
     @e head {