diff --git a/packages/rate/index.less b/packages/rate/index.less
index 01795e0fb..e01cbd56b 100644
--- a/packages/rate/index.less
+++ b/packages/rate/index.less
@@ -4,8 +4,8 @@
   user-select: none;
 
   &__item {
+    width: 1em;
     padding: 0 2px;
-    display: inline-block;
     box-sizing: content-box;
   }
 }
diff --git a/packages/rate/index.vue b/packages/rate/index.vue
index 9a261fe02..0365edb01 100644
--- a/packages/rate/index.vue
+++ b/packages/rate/index.vue
@@ -3,17 +3,16 @@
     :class="b()"
     @touchmove="onTouchMove"
   >
-    <svg
-      v-for="(isFull, index) in list"
-      :fill="disabled ? disabledColor : isFull ? color : voidColor"
-      viewBox="0 0 32 32"
-      :style="style"
+    <icon
+      v-for="(full, index) in list"
+      :key="index"
       :class="b('item')"
+      :size="size + 'px'"
       :data-index="index"
+      :name="full ? 'star' : 'star-o'"
+      :color="disabled ? disabledColor : full ? color : voidColor"
       @click="onSelect(index)"
-    >
-      <path :d="isFull ? 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z' : 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z'" />
-    </svg>
+    />
   </div>
 </template>
 
@@ -53,12 +52,6 @@ export default create({
   },
 
   computed: {
-    style() {
-      return {
-        width: this.size + 'px'
-      };
-    },
-
     list() {
       return Array.apply(null, { length: this.count }).map((value, index) => index < this.value);
     }
diff --git a/packages/rate/test/__snapshots__/demo.spec.js.snap b/packages/rate/test/__snapshots__/demo.spec.js.snap
index 43bc0e24f..d3ebc6d51 100644
--- a/packages/rate/test/__snapshots__/demo.spec.js.snap
+++ b/packages/rate/test/__snapshots__/demo.spec.js.snap
@@ -4,62 +4,62 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-rate">
-      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#ffd21e" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
-      <svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
+      <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+      </i>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <svg fill="#2ba" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#2ba" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#ceefe8" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
-      <svg fill="#ceefe8" viewBox="0 0 32 32" data-index="5" class="van-rate__item" style="width:25px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
+      <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
+        <!---->
+      </i>
+      <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
+        <!---->
+      </i>
+      <i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
+        <!---->
+      </i>
+      <i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
+        <!---->
+      </i>
+      <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
+        <!---->
+      </i>
+      <i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
+        <!---->
+      </i>
     </div>
   </div>
   <div>
     <div class="van-rate">
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
-      </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
-      <svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
-        <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
-      </svg>
+      <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
+        <!---->
+      </i>
     </div>
   </div>
 </div>
diff --git a/packages/rate/test/index.spec.js b/packages/rate/test/index.spec.js
index 1cb672a17..b4159b89e 100644
--- a/packages/rate/test/index.spec.js
+++ b/packages/rate/test/index.spec.js
@@ -22,7 +22,7 @@ test('touchmove', () => {
   const wrapper = mount(Rate);
   triggerDrag(wrapper, 100, 0);
 
-  const icons = wrapper.findAll('svg');
+  const icons = wrapper.findAll('.van-icon');
   document.elementFromPoint = function(x, y) {
     const index = Math.round(x / 20);
     if (index < icons.length) {