diff --git a/packages/checkbox/demo/index.vue b/packages/checkbox/demo/index.vue
index a533874bc..7851b0836 100644
--- a/packages/checkbox/demo/index.vue
+++ b/packages/checkbox/demo/index.vue
@@ -9,8 +9,15 @@
       <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
-    <demo-block :title="$t('labelDisabled')">
-      <van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
+    <demo-block :title="$t('customIcon')">
+      <van-checkbox v-model="checkbox2">
+        {{ $t('customIcon') }}
+        <img
+          slot="icon"
+          slot-scope="props"
+          :src="props.checked ? icon.active : icon.normal"
+        >
+      </van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -54,14 +61,14 @@ export default {
   i18n: {
     'zh-CN': {
       checkbox: '复选框',
-      labelDisabled: '禁用内容部分点击事件',
+      customIcon: '自定义图标',
       title3: 'Checkbox 组',
       title4: '设置最大可选数',
       title5: '与 Cell 组件一起使用'
     },
     'en-US': {
       checkbox: 'Checkbox',
-      labelDisabled: 'Disable Label click event',
+      customIcon: 'Custom Icon',
       title3: 'Checkbox Group',
       title4: 'Maximum amount of checked options',
       title5: 'Inside a Cell'
@@ -79,7 +86,11 @@ export default {
       ],
       result: ['a', 'b'],
       result2: [],
-      result3: []
+      result3: [],
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
     };
   }
 };
@@ -96,5 +107,10 @@ export default {
       margin: 0;
     }
   }
+
+  img {
+    width: 20px;
+    display: block;
+  }
 }
 </style>
diff --git a/packages/checkbox/en-US.md b/packages/checkbox/en-US.md
index 72bab401e..b6f57cd42 100644
--- a/packages/checkbox/en-US.md
+++ b/packages/checkbox/en-US.md
@@ -31,10 +31,30 @@ export default {
 <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
 ```
 
-#### Disable Label click event
+#### Custom Icon
+Use icon slot to custom icon
 
 ```html
-<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
+<van-checkbox v-model="checked">
+  Custom Icon
+  <img
+    slot="icon"
+    slot-scope="props"
+    :src="props.checked ? icon.active : icon.normal"
+  >
+</van-checkbox>
+```
+
+```js
+export default {
+  data() {
+    checked: true,
+    icon: {
+      normal: '//img.yzcdn.cn/icon-normal.png',
+      active: '//img.yzcdn.cn/icon-active.png'
+    }
+  }
+}
 ```
 
 #### Checkbox Group
@@ -119,3 +139,10 @@ export default {
 | Event | Description | Parameters |
 |-----------|-----------|-----------|
 | change | Triggered when value changed | current value |
+
+### Checkbox Slot
+
+| Name | Description | slot-scope |
+|-----------|-----------|-----------|
+| default | Custom label | - |
+| icon | Custom icon | checked: whether to be checked |
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 3a96e937d..ac75161bd 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -1,15 +1,10 @@
 <template>
   <div :class="b()">
-    <icon
-      name="success"
-      :class="[
-        b('icon'),
-        `van-checkbox--${shape}`, {
-          'van-checkbox--disabled': isDisabled,
-          'van-checkbox--checked': checked
-      }]"
-      @click="onClick"
-    />
+    <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="onClick">
+      <slot name="icon" :checked="checked">
+        <icon name="success" />
+      </slot>
+    </div>
     <span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClick('label')">
       <slot />
     </span>
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index 2b6b92887..c073cfca2 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -4,44 +4,58 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-checkbox">
-      <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
-        <!---->
-      </i> <span class="van-checkbox__label">复选框</span></div>
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+        <i class="van-icon van-icon-success" style="color:undefined;">
+          <!---->
+        </i>
+      </div> <span class="van-checkbox__label">复选框</span></div>
   </div>
   <div>
     <div class="van-checkbox">
-      <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--disabled" style="color:undefined;">
-        <!---->
-      </i> <span class="van-checkbox__label">复选框</span></div>
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
+        <i class="van-icon van-icon-success" style="color:undefined;">
+          <!---->
+        </i>
+      </div> <span class="van-checkbox__label">复选框</span></div>
     <div class="van-checkbox">
-      <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--disabled van-checkbox--checked" style="color:undefined;">
-        <!---->
-      </i> <span class="van-checkbox__label">复选框</span></div>
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
+        <i class="van-icon van-icon-success" style="color:undefined;">
+          <!---->
+        </i>
+      </div> <span class="van-checkbox__label">复选框</span></div>
   </div>
   <div>
     <div class="van-checkbox">
-      <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
-        <!---->
-      </i> <span class="van-checkbox__label">复选框</span></div>
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+        <img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png">
+      </div> <span class="van-checkbox__label">
+      自定义图标
+      </span></div>
   </div>
   <div>
     <div class="van-checkbox-group">
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 a
       </span></div>
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 b
       </span></div>
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 c
       </span></div>
     </div>
@@ -49,21 +63,27 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox-group">
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 a
       </span></div>
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 b
       </span></div>
       <div class="van-checkbox">
-        <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-          <!---->
-        </i> <span class="van-checkbox__label">
+        <div class="van-checkbox__icon van-checkbox__icon--round">
+          <i class="van-icon van-icon-success" style="color:undefined;">
+            <!---->
+          </i>
+        </div> <span class="van-checkbox__label">
         复选框 c
       </span></div>
     </div>
@@ -78,9 +98,11 @@ exports[`renders demo correctly 1`] = `
           </div>
           <div class="van-cell__value">
             <div class="van-checkbox">
-              <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-                <!---->
-              </i>
+              <div class="van-checkbox__icon van-checkbox__icon--round">
+                <i class="van-icon van-icon-success" style="color:undefined;">
+                  <!---->
+                </i>
+              </div>
               <!---->
             </div>
           </div>
@@ -93,9 +115,11 @@ exports[`renders demo correctly 1`] = `
           </div>
           <div class="van-cell__value">
             <div class="van-checkbox">
-              <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-                <!---->
-              </i>
+              <div class="van-checkbox__icon van-checkbox__icon--round">
+                <i class="van-icon van-icon-success" style="color:undefined;">
+                  <!---->
+                </i>
+              </div>
               <!---->
             </div>
           </div>
@@ -108,9 +132,11 @@ exports[`renders demo correctly 1`] = `
           </div>
           <div class="van-cell__value">
             <div class="van-checkbox">
-              <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round" style="color:undefined;">
-                <!---->
-              </i>
+              <div class="van-checkbox__icon van-checkbox__icon--round">
+                <i class="van-icon van-icon-success" style="color:undefined;">
+                  <!---->
+                </i>
+              </div>
               <!---->
             </div>
           </div>
diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md
index ba3d9872a..9ba649ce0 100644
--- a/packages/checkbox/zh-CN.md
+++ b/packages/checkbox/zh-CN.md
@@ -32,10 +32,30 @@ export default {
 <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
 
-#### 禁用内容部分点击事件
+#### 自定义图标
+通过 icon slot 自定义图标，可以通过 `slot-scope` 判断是否为选中状态
 
 ```html
-<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
+<van-checkbox v-model="checked">
+  自定义图标
+  <img
+    slot="icon"
+    slot-scope="props"
+    :src="props.checked ? icon.active : icon.normal"
+  >
+</van-checkbox>
+```
+
+```js
+export default {
+  data() {
+    checked: true,
+    icon: {
+      normal: '//img.yzcdn.cn/icon-normal.png',
+      active: '//img.yzcdn.cn/icon-active.png'
+    }
+  }
+}
 ```
 
 #### Checkbox 组
@@ -123,3 +143,10 @@ export default {
 | 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |
+
+### Checkbox Slot
+
+| 名称 | 说明 | slot-scope |
+|-----------|-----------|-----------|
+| default | 自定义文本 | - |
+| icon | 自定义图标 | checked: 是否为选中状态 |
diff --git a/packages/submit-bar/demo/index.vue b/packages/submit-bar/demo/index.vue
index 3a0c32614..9ca92c469 100644
--- a/packages/submit-bar/demo/index.vue
+++ b/packages/submit-bar/demo/index.vue
@@ -89,7 +89,7 @@ export default {
   }
 
   .van-edit-address {
-    color: #38F;
+    color: #38f;
   }
 
   .van-checkbox {
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index fb252edf2..d6f44e45c 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -47,9 +47,11 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-submit-bar__bar">
         <div class="van-checkbox">
-          <i class="van-icon van-icon-success van-checkbox__icon van-checkbox--round van-checkbox--checked" style="color:undefined;">
-            <!---->
-          </i> <span class="van-checkbox__label">全选</span></div>
+          <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
+            <i class="van-icon van-icon-success" style="color:undefined;">
+              <!---->
+            </i>
+          </div> <span class="van-checkbox__label">全选</span></div>
         <div class="van-submit-bar__price"><span>合计：</span> <span class="van-submit-bar__price-integer">¥30.</span> <span class="van-submit-bar__price-decimal">50</span></div>
         <button class="van-button van-button--danger van-button--normal">
           <!----><span class="van-button__text">
diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue
index c3f50d152..4be8700c0 100644
--- a/packages/tabbar/demo/index.vue
+++ b/packages/tabbar/demo/index.vue
@@ -13,9 +13,11 @@
       <van-tabbar v-model="active2">
         <van-tabbar-item icon="shop">
           <span>{{ $t('custom') }}</span>
-          <template slot="icon" slot-scope="props">
-            <img :src="props.active ? icon.active : icon.normal" >
-          </template>
+          <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.active ? icon.active : icon.normal"
+          >
         </van-tabbar-item>
         <van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md
index b63301c19..44fca3e66 100644
--- a/packages/tabbar/en-US.md
+++ b/packages/tabbar/en-US.md
@@ -37,9 +37,11 @@ Use `icon` slot to custom icon
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>Custom</span>
-    <template slot="icon" slot-scope="props">
-      <img :src="props.active ? icon.active : icon.normal" />
-    </template>
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.active ? icon.active : icon.normal"
+    >
   </van-tabbar-item>
   <van-tabbar-item icon="chat">Tab</van-tabbar-item>
   <van-tabbar-item icon="records">Tab</van-tabbar-item>
@@ -52,8 +54,8 @@ export default {
     return {
       active: 0,
       icon: {
-        normal: '//img.yzcdn.cn/1.png',
-        active: '//img.yzcdn.cn/2.png'
+        normal: '//img.yzcdn.cn/icon-normal.png',
+        active: '//img.yzcdn.cn/icon-active.png'
       }
     }
   }
@@ -87,6 +89,6 @@ export default {
 
 ### TabbarItem Slot
 
-| Name | Description | Scope |
+| Name | Description | slot-scope |
 |-----------|-----------|-----------|
 | icon | Custom icon | active |
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md
index 90a627b98..a14d8c9db 100644
--- a/packages/tabbar/zh-CN.md
+++ b/packages/tabbar/zh-CN.md
@@ -33,16 +33,17 @@ export default {
 
 
 #### 自定义图标
-通过 icon slot 自定义图标
-
+通过 icon slot 自定义图标，可以通过 `slot-scope` 判断标签是否选中
 
 ```html
 <van-tabbar v-model="active">
   <van-tabbar-item icon="shop">
     <span>自定义</span>
-    <template slot="icon" slot-scope="props">
-      <img :src="props.active ? icon.active : icon.normal" />
-    </template>
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.active ? icon.active : icon.normal"
+    >
   </van-tabbar-item>
   <van-tabbar-item icon="chat">标签</van-tabbar-item>
   <van-tabbar-item icon="records">标签</van-tabbar-item>
@@ -55,8 +56,8 @@ export default {
     return {
       active: 0,
       icon: {
-        normal: '//img.yzcdn.cn/1.png',
-        active: '//img.yzcdn.cn/2.png'
+        normal: '//img.yzcdn.cn/icon-normal.png',
+        active: '//img.yzcdn.cn/icon-active.png'
       }
     }
   }
@@ -91,6 +92,6 @@ export default {
 
 ### TabbarItem Slot
 
-| Name | 描述 | Scope |
+| 名称 | 说明 | slot-scope |
 |-----------|-----------|-----------|
-| icon | 自定义icon | active |
+| icon | 自定义图标 | active: 是否为选中标签 |
diff --git a/packages/vant-css/src/checkbox.css b/packages/vant-css/src/checkbox.css
index 0c0d80609..d995ffb27 100644
--- a/packages/vant-css/src/checkbox.css
+++ b/packages/vant-css/src/checkbox.css
@@ -14,13 +14,45 @@ $van-checkbox-size: 20px;
   }
 
   &__icon {
-    font-size: 12px;
-    color: transparent;
-    text-align: center;
-    border: 1px solid #aaa;
-    width: $van-checkbox-size;
-    height: $van-checkbox-size;
-    box-sizing: border-box;
+    .van-icon {
+      font-size: 12px;
+      color: transparent;
+      text-align: center;
+      line-height: inherit;
+      border: 1px solid #aaa;
+      width: $van-checkbox-size;
+      height: $van-checkbox-size;
+      box-sizing: border-box;
+    }
+
+    &--round {
+      .van-icon {
+        border-radius: 100%;
+      }
+    }
+
+    &--checked {
+      .van-icon {
+        color: #fff;
+        border-color: $green;
+        background-color: $green;
+      }
+    }
+
+    &--disabled {
+      .van-icon {
+        color: $background-color;
+        border-color: $border-color;
+        background-color: currentColor;
+      }
+    }
+
+    &--disabled&--checked {
+      .van-icon {
+        border-color: $border-color;
+        background-color: $border-color;
+      }
+    }
   }
 
   &__label {
@@ -31,25 +63,4 @@ $van-checkbox-size: 20px;
       margin: 0 10px 0 0;
     }
   }
-
-  &--round {
-    border-radius: 100%;
-  }
-
-  &--checked {
-    color: #fff;
-    border-color: $green;
-    background-color: $green;
-  }
-
-  &--disabled {
-    color: $background-color;
-    border-color: $border-color;
-    background-color: currentColor;
-  }
-
-  &--disabled&--checked {
-    border-color: $border-color;
-    background-color: $border-color;
-  }
 }