diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less
index a29f4c62a..0a9ba0c89 100644
--- a/src/action-bar-icon/index.less
+++ b/src/action-bar-icon/index.less
@@ -10,7 +10,7 @@
   font-size: @action-bar-icon-font-size;
   line-height: 1;
   text-align: center;
-  background-color: @white;
+  background-color: @action-bar-icon-background-color;
   cursor: pointer;
 
   &:active {
@@ -18,8 +18,7 @@
   }
 
   &__icon {
-    width: 1em;
-    margin: 0 auto 5px;
+    margin: 0 auto @padding-base;
     color: @action-bar-icon-color;
     font-size: @action-bar-icon-size;
   }
diff --git a/src/action-bar-icon/var.less b/src/action-bar-icon/var.less
index 75220c3b3..071f9daa3 100644
--- a/src/action-bar-icon/var.less
+++ b/src/action-bar-icon/var.less
@@ -7,3 +7,4 @@
 @action-bar-icon-font-size: @font-size-xs;
 @action-bar-icon-active-color: @active-color;
 @action-bar-icon-text-color: @gray-7;
+@action-bar-icon-background-color: @white;
diff --git a/src/action-bar/README.md b/src/action-bar/README.md
index 17272fc6b..80dbe8cc9 100644
--- a/src/action-bar/README.md
+++ b/src/action-bar/README.md
@@ -136,17 +136,18 @@ Use `badge` prop to show badge in icon.
 
 How to use: [Custom Theme](#/en-US/theme).
 
-| Name                             | Default Value      | Description |
-| -------------------------------- | ------------------ | ----------- |
-| @action-bar-background-color     | `@white`           | -           |
-| @action-bar-height               | `50px`             | -           |
-| @action-bar-icon-width           | `48px`             | -           |
-| @action-bar-icon-height          | `100%`             | -           |
-| @action-bar-icon-color           | `@text-color`      | -           |
-| @action-bar-icon-size            | `18px`             | -           |
-| @action-bar-icon-font-size       | `@font-size-xs`    | -           |
-| @action-bar-icon-active-color    | `@active-color`    | -           |
-| @action-bar-icon-text-color      | `@gray-7`          | -           |
-| @action-bar-button-height        | `40px`             | -           |
-| @action-bar-button-warning-color | `@gradient-orange` | -           |
-| @action-bar-button-danger-color  | `@gradient-red`    | -           |
+| Name                              | Default Value      | Description |
+| --------------------------------- | ------------------ | ----------- |
+| @action-bar-background-color      | `@white`           | -           |
+| @action-bar-height                | `50px`             | -           |
+| @action-bar-icon-width            | `48px`             | -           |
+| @action-bar-icon-height           | `100%`             | -           |
+| @action-bar-icon-color            | `@text-color`      | -           |
+| @action-bar-icon-size             | `18px`             | -           |
+| @action-bar-icon-font-size        | `@font-size-xs`    | -           |
+| @action-bar-icon-active-color     | `@active-color`    | -           |
+| @action-bar-icon-text-color       | `@gray-7`          | -           |
+| @action-bar-icon-background-color | `@white`           | -           |
+| @action-bar-button-height         | `40px`             | -           |
+| @action-bar-button-warning-color  | `@gradient-orange` | -           |
+| @action-bar-button-danger-color   | `@gradient-red`    | -           |
diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md
index 76bd0f6da..8e0fad28d 100644
--- a/src/action-bar/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -140,17 +140,18 @@ export default {
 
 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
 
-| 名称                             | 默认值             | 描述 |
-| -------------------------------- | ------------------ | ---- |
-| @action-bar-background-color     | `@white`           | -    |
-| @action-bar-height               | `50px`             | -    |
-| @action-bar-icon-width           | `48px`             | -    |
-| @action-bar-icon-height          | `100%`             | -    |
-| @action-bar-icon-color           | `@text-color`      | -    |
-| @action-bar-icon-size            | `18px`             | -    |
-| @action-bar-icon-font-size       | `@font-size-xs`    | -    |
-| @action-bar-icon-active-color    | `@active-color`    | -    |
-| @action-bar-icon-text-color      | `@gray-7`          | -    |
-| @action-bar-button-height        | `40px`             | -    |
-| @action-bar-button-warning-color | `@gradient-orange` | -    |
-| @action-bar-button-danger-color  | `@gradient-red`    | -    |
+| 名称                              | 默认值             | 描述 |
+| --------------------------------- | ------------------ | ---- |
+| @action-bar-background-color      | `@white`           | -    |
+| @action-bar-height                | `50px`             | -    |
+| @action-bar-icon-width            | `48px`             | -    |
+| @action-bar-icon-height           | `100%`             | -    |
+| @action-bar-icon-color            | `@text-color`      | -    |
+| @action-bar-icon-size             | `18px`             | -    |
+| @action-bar-icon-font-size        | `@font-size-xs`    | -    |
+| @action-bar-icon-active-color     | `@active-color`    | -    |
+| @action-bar-icon-text-color       | `@gray-7`          | -    |
+| @action-bar-icon-background-color | `@white`           | -    |
+| @action-bar-button-height         | `40px`             | -    |
+| @action-bar-button-warning-color  | `@gradient-orange` | -    |
+| @action-bar-button-danger-color   | `@gradient-red`    | -    |