diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index e158b09b44..2a07a731fd 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -139,7 +139,7 @@ define([
             '<% if (menu == null) { %>',
                 '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">',
                     '<% if (iconCls != "") { %>',
-                        '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
+                        '<i class="icon <%= iconCls %>">&nbsp;</i>',
                     '<% } %>',
                     '<span class="caption"><%= caption %></span>',
                 '</button>',
@@ -147,7 +147,7 @@ define([
                 '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
                     '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">',
                         '<% if (iconCls != "") { %>',
-                            '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
+                            '<i class="icon <%= iconCls %>">&nbsp;</i>',
                         '<% } %>',
                         '<span class="caption"><%= caption %></span>',
                         '<span class="caret img-commonctrl"></span>',
@@ -157,7 +157,7 @@ define([
                 '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
                     '<button type="button" class="btn <%= cls %>">',
                         '<% if (iconCls != "") { %>',
-                            '<i class="btn-icon <%= iconCls %>">&nbsp;</i>',
+                            '<i class="icon <%= iconCls %>">&nbsp;</i>',
                         '<% } %>',
                         '<span class="caption"><%= caption %></span>',
                     '</button>',
@@ -447,7 +447,7 @@ define([
         },
 
         setIconCls: function(cls) {
-            var btnIconEl = $(this.el).find('span.btn-icon'),
+            var btnIconEl = $(this.el).find('.icon'),
                 oldCls = this.iconCls;
 
             this.iconCls = cls;
diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less
index c259f8f907..ec4bcb0b15 100644
--- a/apps/common/main/resources/less/asc-mixins.less
+++ b/apps/common/main/resources/less/asc-mixins.less
@@ -104,9 +104,9 @@
 }
 
 .button-otherstates-icon2(@icon-class, @icon-size) {
-    button.@{icon-class}.active   > .btn-icon,
-    button.@{icon-class}:active   > .btn-icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
-    button.@{icon-class}.disabled > .btn-icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
+    button.@{icon-class}.active   > .icon,
+    button.@{icon-class}:active   > .icon {background-position-x: -1*@icon-size; --bgX: -(1*@icon-size);}
+    button.@{icon-class}.disabled > .icon {background-position-x: -2*@icon-size; --bgX: -(2*@icon-size);}
 }
 
 .menu-icon-normal(@icon-class, @index, @icon-size) {
@@ -139,7 +139,7 @@
 @common-controls-width: 100px;
 .img-commonctrl, 
         .theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before,
-        .btn-toolbar .btn-icon.img-commonctrl {
+        .btn-toolbar .icon.img-commonctrl {
     background-image: data-uri(%("%s",'@{common-image-path}/@{common-controls}'));
     background-repeat: no-repeat;
 
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 697436ecc4..0b5ac6e234 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -103,7 +103,7 @@
         padding: 0 5px 0 2px;
     }
 
-    .btn-icon {
+    .icon {
         padding: 0;
         margin: 0;
         display: inline-block;
@@ -122,7 +122,7 @@
     // Large size
     // ------------------------
     &.large {
-        .btn-icon {
+        .icon {
             width: 30px !important;
             height: 30px;
             line-height: 20px;
@@ -163,7 +163,7 @@
         color: #fff;
     }
 
-    span.btn-icon {
+    .icon {
         display: inline-block;
         position: relative;
         width: 20px;
@@ -292,7 +292,7 @@
     .box-shadow(none);
     background-color: transparent;
 
-    .btn-icon {
+    .icon {
         position: relative;
         min-width: inherit;
         height: inherit;
@@ -375,7 +375,7 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    .btn-icon {
+    .icon {
         width: 28px;
         padding: 0;
         margin: 0;
@@ -411,7 +411,7 @@
     border: 1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    .btn-icon {
+    .icon {
         display: inline-block;
         .btn.btnsize(52px);
         padding: 0;
diff --git a/apps/documenteditor/main/app/controller/Statusbar.js b/apps/documenteditor/main/app/controller/Statusbar.js
index ac5233d752..8ee52cf208 100644
--- a/apps/documenteditor/main/app/controller/Statusbar.js
+++ b/apps/documenteditor/main/app/controller/Statusbar.js
@@ -178,7 +178,7 @@ define([
                 this.showNewChangesTip = !(value && parseInt(value) == 1) && !this.statusbar.mode.isLightVersion;
 
                 if (this.statusbar.mode.isReviewOnly) {
-                    var iconEl = $('.btn-icon', this.statusbar.btnReview.cmpEl);
+                    var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
                     (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
                     this.statusbar.mnuTrackChanges.setDisabled(true);
                     this.changeReviewStatus(true);
@@ -195,7 +195,7 @@ define([
                     if (!doc_review)
                         this.changeReviewStatus(false);
                     else {
-                        var iconEl = $('.btn-icon', this.statusbar.btnReview.cmpEl);
+                        var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
                        (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
                         if (value!==null && parseInt(value) == 1) {
                             this.changeReviewStatus(!this.statusbar.mode.isLightVersion);
@@ -302,7 +302,7 @@ define([
             this.setStatusCaption('');
 
             if (this.statusbar.mode.canReview) {
-                var iconEl = $('.btn-icon', this.statusbar.btnReview.cmpEl);
+                var iconEl = $('.icon', this.statusbar.btnReview.cmpEl);
                 (this.api.asc_HaveRevisionsChanges()) ? iconEl.removeClass(this.statusbar.btnReviewCls).addClass('btn-ic-changes') : iconEl.removeClass('btn-ic-changes').addClass(this.statusbar.btnReviewCls);
             }
         },
diff --git a/apps/documenteditor/main/app/template/LeftMenu.template b/apps/documenteditor/main/app/template/LeftMenu.template
index 7ebec7b386..70f94a475c 100644
--- a/apps/documenteditor/main/app/template/LeftMenu.template
+++ b/apps/documenteditor/main/app/template/LeftMenu.template
@@ -1,13 +1,13 @@
 <div id="view-left-menu" class="tool-menu left">
     <div class="tool-menu-btns">
-        <button id="left-btn-search" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-search">&nbsp;</span></button>
+        <button id="left-btn-search" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-search">&nbsp;</i></button>
         <!-- /** coauthoring begin **/ -->
-        <button id="left-btn-comments" class="btn btn-category" content-target="left-panel-comments"><span class="btn-icon img-toolbarmenu btn-menu-comments">&nbsp;</span></button>
-        <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat"><span class="btn-icon img-toolbarmenu btn-menu-chat">&nbsp;</span></button>
+        <button id="left-btn-comments" class="btn btn-category" content-target="left-panel-comments"><i class="icon img-toolbarmenu btn-menu-comments">&nbsp;</i></button>
+        <button id="left-btn-chat" class="btn btn-category" content-target="left-panel-chat"><i class="icon img-toolbarmenu btn-menu-chat">&nbsp;</i></button>
         <!-- /** coauthoring end **/ -->
-        <button id="left-btn-plugins" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-plugin">&nbsp;</span></button>
-        <button id="left-btn-support" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-support">&nbsp;</span></button>
-        <button id="left-btn-about" class="btn btn-category" content-target=""><span class="btn-icon img-toolbarmenu btn-menu-about">&nbsp;</span></button>
+        <button id="left-btn-plugins" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-plugin">&nbsp;</i></button>
+        <button id="left-btn-support" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-support">&nbsp;</i></button>
+        <button id="left-btn-about" class="btn btn-category" content-target=""><i class="icon img-toolbarmenu btn-menu-about">&nbsp;</i></button>
     </div>
     <div class="left-panel" style="">
         <!-- /** coauthoring begin **/ -->
diff --git a/apps/documenteditor/main/app/template/RightMenu.template b/apps/documenteditor/main/app/template/RightMenu.template
index 6b30dae462..a0226ef703 100644
--- a/apps/documenteditor/main/app/template/RightMenu.template
+++ b/apps/documenteditor/main/app/template/RightMenu.template
@@ -19,13 +19,13 @@
     </div>
     <div class="tool-menu-btns">
         <div class="ct-btn-category arrow-left" />
-        <button id="id-right-menu-text" class="btn btn-category arrow-left" content-target="id-paragraph-settings"><span class="btn-icon img-toolbarmenu btn-menu-text">&nbsp;</span></button>
-        <button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><span class="btn-icon img-toolbarmenu btn-menu-table">&nbsp;</span></button>
-        <button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><span class="btn-icon img-toolbarmenu btn-menu-image">&nbsp;</span></button>
-        <button id="id-right-menu-header" class="btn btn-category arrow-left" content-target="id-header-settings"><span class="btn-icon img-toolbarmenu btn-menu-header">&nbsp;</span></button>
-        <button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><span class="btn-icon img-toolbarmenu btn-menu-shape">&nbsp;</span></button>
-        <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><span class="btn-icon img-toolbarmenu btn-menu-chart">&nbsp;</span></button>
-        <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><span class="btn-icon img-toolbarmenu btn-menu-textart">&nbsp;</span></button>
-        <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><span class="btn-icon img-toolbarmenu btn-menu-mail-merge">&nbsp;</span></button>
+        <button id="id-right-menu-text" class="btn btn-category arrow-left" content-target="id-paragraph-settings"><i class="icon img-toolbarmenu btn-menu-text">&nbsp;</i></button>
+        <button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><i class="icon img-toolbarmenu btn-menu-table">&nbsp;</i></button>
+        <button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><i class="icon img-toolbarmenu btn-menu-image">&nbsp;</i></button>
+        <button id="id-right-menu-header" class="btn btn-category arrow-left" content-target="id-header-settings"><i class="icon img-toolbarmenu btn-menu-header">&nbsp;</i></button>
+        <button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><i class="icon img-toolbarmenu btn-menu-shape">&nbsp;</i></button>
+        <button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><i class="icon img-toolbarmenu btn-menu-chart">&nbsp;</i></button>
+        <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon img-toolbarmenu btn-menu-textart">&nbsp;</i></button>
+        <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><i class="icon img-toolbarmenu btn-menu-mail-merge">&nbsp;</i></button>
     </div>
 </div>
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/template/StatusBar.template b/apps/documenteditor/main/app/template/StatusBar.template
index d46ad16581..e2d82c6e27 100644
--- a/apps/documenteditor/main/app/template/StatusBar.template
+++ b/apps/documenteditor/main/app/template/StatusBar.template
@@ -34,19 +34,19 @@
                 <div class="caret up img-commonctrl" />
             </div>
         </div>
-        <button id="btn-doc-lang" type="button" class="btn small btn-toolbar el-edit"><span class="btn-icon btn-ic-doclang">&nbsp;</span></button>
-        <button id="btn-doc-spell" type="button" class="btn small btn-toolbar el-edit"><span class="btn-icon btn-ic-docspell">&nbsp;</span></button>
+        <button id="btn-doc-lang" type="button" class="btn small btn-toolbar el-edit"><span class="icon btn-ic-doclang">&nbsp;</span></button>
+        <button id="btn-doc-spell" type="button" class="btn small btn-toolbar el-edit"><span class="icon btn-ic-docspell">&nbsp;</span></button>
         <div class="separator short el-edit"></div>
         <div id="btn-doc-review" class="el-edit el-review" style="display: inline-block;"></div>
         <div class="separator short el-edit el-review"></div>
-        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar"><span class="btn-icon btn-ic-zoomtopage">&nbsp;</span></button>
-        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar"><span class="btn-icon btn-ic-zoomtowidth">&nbsp;</span></button>
-        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><span class="btn-icon btn-ic-zoomdown">&nbsp;</span></button>
+        <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar"><span class="icon btn-ic-zoomtopage">&nbsp;</span></button>
+        <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar"><span class="icon btn-ic-zoomtowidth">&nbsp;</span></button>
+        <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><span class="icon btn-ic-zoomdown">&nbsp;</span></button>
         <div class="cnt-zoom">
             <div class="dropdown-toggle" data-toggle="dropdown">
                 <label id="label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><span class="btn-icon btn-ic-zoomup">&nbsp;</span></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><span class="icon btn-ic-zoomup">&nbsp;</span></button>
     </div>
 </div>
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 58c80a308a..f040093df9 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -167,7 +167,7 @@
     background-position: -250px 0;
 }
 
-.btn-toolbar .btn-icon.btn-borders-small {
+.btn-toolbar .icon.btn-borders-small {
    .background-ximage('@{app-image-path}/right-panels/SmallBorders.png', '@{app-image-path}/right-panels/SmallBorders@2x.png', 84px);
 }
 
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 985b78329d..5d5039c32c 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -216,7 +216,7 @@
     }
 
     &.masked {
-        button.disabled .btn-icon:not(.no-mask) {
+        button.disabled .icon:not(.no-mask) {
             background-position-x: 0px !important;
         }
         .toolbar-group:not(.no-mask) {