diff --git a/packages/checkbox/demo/index.vue b/packages/checkbox/demo/index.vue
index 631a0ae00..2e433b9b1 100644
--- a/packages/checkbox/demo/index.vue
+++ b/packages/checkbox/demo/index.vue
@@ -34,7 +34,7 @@
         <img
           slot="icon"
           slot-scope="props"
-          :src="props.checked ? icon.active : icon.normal"
+          :src="props.checked ? icon.active : icon.inactive"
         >
       </van-checkbox>
     </demo-block>
@@ -122,8 +122,8 @@ export default {
       result2: [],
       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'
+        active: 'https://img.yzcdn.cn/vant/user-active.png',
+        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
       }
     };
   },
diff --git a/packages/checkbox/en-US.md b/packages/checkbox/en-US.md
index bcfcd1932..a781f018b 100644
--- a/packages/checkbox/en-US.md
+++ b/packages/checkbox/en-US.md
@@ -47,7 +47,7 @@ Use icon slot to custom icon
   <img
     slot="icon"
     slot-scope="props"
-    :src="props.checked ? icon.active : icon.normal"
+    :src="props.checked ? icon.active : icon.inactive"
   >
 </van-checkbox>
 ```
@@ -57,8 +57,8 @@ export default {
   data() {
     checked: true,
     icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png'
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
     }
   }
 }
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index df99b2cb6..5d9665f16 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
-      <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">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">
       自定义图标
       </span>
     </div>
diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md
index 060d5d718..9265bc0d6 100644
--- a/packages/checkbox/zh-CN.md
+++ b/packages/checkbox/zh-CN.md
@@ -49,7 +49,7 @@ export default {
   <img
     slot="icon"
     slot-scope="props"
-    :src="props.checked ? icon.active : icon.normal"
+    :src="props.checked ? icon.active : icon.inactive"
   >
 </van-checkbox>
 ```
@@ -59,8 +59,8 @@ export default {
   data() {
     checked: true,
     icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png'
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
     }
   }
 }
diff --git a/packages/radio/demo/index.vue b/packages/radio/demo/index.vue
index d4fda16ab..3b84c6e50 100644
--- a/packages/radio/demo/index.vue
+++ b/packages/radio/demo/index.vue
@@ -22,45 +22,63 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-radio
-        name="1"
-        value="1"
-        checked-color="#07c160"
+      <van-radio-group
+        v-model="radio3"
         class="demo-radio-group"
       >
-        {{ $t('radio') }}
-      </van-radio>
+        <van-radio
+          name="1"
+          checked-color="#07c160"
+        >
+          {{ $t('radio') }} 1
+        </van-radio>
+        <van-radio
+          name="2"
+          checked-color="#07c160"
+        >
+          {{ $t('radio') }} 2
+        </van-radio>
+      </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-radio
-        name="1"
-        value="1"
+      <van-radio-group
+        v-model="radio4"
         class="demo-radio-group"
       >
-        {{ $t('customIcon') }}
-        <img
-          slot="icon"
-          slot-scope="props"
-          :src="props.checked ? icon.active : icon.normal"
-        >
-      </van-radio>
+        <van-radio name="1">
+          {{ $t('radio') }} 1
+          <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? icon.active : icon.inactive"
+          >
+        </van-radio>
+        <van-radio name="2">
+          {{ $t('radio') }} 2
+          <img
+            slot="icon"
+            slot-scope="props"
+            :src="props.checked ? icon.active : icon.inactive"
+          >
+        </van-radio>
+      </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('withCell')">
-      <van-radio-group v-model="radio3">
+      <van-radio-group v-model="radio5">
         <van-cell-group>
           <van-cell
-            :title="$t('radio') + 1"
             clickable
-            @click="radio3 = '1'"
+            :title="$t('radio') + 1"
+            @click="radio5 = '1'"
           >
             <van-radio name="1" />
           </van-cell>
           <van-cell
-            :title="$t('radio') + 2"
             clickable
-            @click="radio3 = '2'"
+            :title="$t('radio') + 2"
+            @click="radio5 = '2'"
           >
             <van-radio name="2" />
           </van-cell>
@@ -96,9 +114,11 @@ export default {
       radio1: '1',
       radio2: '2',
       radio3: '1',
+      radio4: '1',
+      radio5: '1',
       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'
+        active: 'https://img.yzcdn.cn/vant/user-active.png',
+        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
       }
     };
   }
@@ -110,7 +130,7 @@ export default {
   &-group {
     padding: 0 17px;
 
-    .van-radio {
+    .van-radio:not(:last-child) {
       margin-bottom: 10px;
     }
   }
diff --git a/packages/radio/en-US.md b/packages/radio/en-US.md
index 2804c635c..7dc3b9f6e 100644
--- a/packages/radio/en-US.md
+++ b/packages/radio/en-US.md
@@ -44,7 +44,10 @@ export default {
 ### Custom Color
 
 ```html
-<van-radio checked-color="#07c160">Radio</van-radio>
+<van-radio-group v-model="radio">
+  <van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
+  <van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
+</van-radio-group>
 ```
 
 ### Custom Icon
@@ -52,23 +55,33 @@ export default {
 Use icon slot to custom icon
 
 ```html
-<van-radio v-model="checked">
-  Custom Icon
-  <img
-    slot="icon"
-    slot-scope="props"
-    :src="props.checked ? icon.active : icon.normal"
-  >
-</van-radio>
+<van-radio-group v-model="radio">
+  <van-radio name="1">
+    Radio 1
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.checked ? icon.active : icon.inactive"
+    >
+  </van-radio>
+  <van-radio name="2">
+    Radio 2
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.checked ? icon.active : icon.inactive"
+    >
+  </van-radio>
+</van-radio-group>
 ```
 
 ```js
 export default {
   data() {
-    checked: true,
+    radio: '1',
     icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png'
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
     }
   }
 }
diff --git a/packages/radio/test/__snapshots__/demo.spec.js.snap b/packages/radio/test/__snapshots__/demo.spec.js.snap
index 8332e972c..b59f49ae6 100644
--- a/packages/radio/test/__snapshots__/demo.spec.js.snap
+++ b/packages/radio/test/__snapshots__/demo.spec.js.snap
@@ -27,18 +27,33 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
-      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-          <!----></i></div><span class="van-radio__label">
-      单选框
-    </span>
+    <div role="radiogroup" class="demo-radio-group van-radio-group">
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
+            <!----></i></div><span class="van-radio__label">
+        单选框 1
+      </span>
+      </div>
+      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
+            <!----></i></div><span class="van-radio__label">
+        单选框 2
+      </span>
+      </div>
     </div>
   </div>
   <div>
-    <div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
-      <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
-      自定义图标
-      </span>
+    <div role="radiogroup" class="demo-radio-group van-radio-group">
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-radio__label">
+        单选框 1
+        </span>
+      </div>
+      <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round"><img src="https://img.yzcdn.cn/vant/user-inactive.png"></div><span class="van-radio__label">
+        单选框 2
+        </span>
+      </div>
     </div>
   </div>
   <div>
diff --git a/packages/radio/zh-CN.md b/packages/radio/zh-CN.md
index 8b987bece..15cc5fcef 100644
--- a/packages/radio/zh-CN.md
+++ b/packages/radio/zh-CN.md
@@ -45,32 +45,47 @@ export default {
 
 ### 自定义颜色
 
+通过`checked-color`属性设置选中状态的图标颜色
+
 ```html
-<van-radio checked-color="#07c160">复选框</van-radio>
+<van-radio-group v-model="radio">
+  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
+  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
+</van-radio-group>
 ```
 
 ### 自定义图标
 
-通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
+通过`icon`插槽自定义图标，并通过`slot-scope`判断是否为选中状态
 
 ```html
-<van-radio v-model="checked">
-  自定义图标
-  <img
-    slot="icon"
-    slot-scope="props"
-    :src="props.checked ? icon.active : icon.normal"
-  >
-</van-radio>
+<van-radio-group v-model="radio">
+  <van-radio name="1">
+    单选框 1
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.checked ? icon.active : icon.inactive"
+    >
+  </van-radio>
+  <van-radio name="2">
+    单选框 2
+    <img
+      slot="icon"
+      slot-scope="props"
+      :src="props.checked ? icon.active : icon.inactive"
+    >
+  </van-radio>
+</van-radio-group>
 ```
 
 ```js
 export default {
   data() {
-    checked: true,
+    radio: '1'
     icon: {
-      normal: '//img.yzcdn.cn/icon-normal.png',
-      active: '//img.yzcdn.cn/icon-active.png'
+      active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
     }
   }
 }