diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index b33cbbdbb5..8cfab972f3 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -111,6 +111,52 @@
             }
         }
     }
+
+    .icon {
+        &.caret-up, &.caret-down {
+            &::after {
+                content: '';
+                position: absolute;
+                left: 6px;
+                width: 8px;
+                height: 8px;
+                background-color: transparent;
+                border: solid 1px @gray-deep;
+                border-bottom: none;
+                border-right: none;
+            }
+        }
+
+        &.caret-up {
+            &::after {
+                top: 8px;
+                -moz-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                -o-transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
+        }
+        &.caret-down {
+            &::after {
+                top: 4px;
+                -moz-transform: rotate(225deg);
+                -ms-transform: rotate(225deg);
+                -webkit-transform: rotate(225deg);
+                -o-transform: rotate(225deg);
+                transform: rotate(225deg);
+            }
+        }
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret-up, .caret-down {
+            &::after {
+                border-color: #FFFFFF;
+            }
+        }
+    }
 }
 
 .btn.icon-top, .btn-group.icon-top {
diff --git a/apps/spreadsheeteditor/main/app/view/SortDialog.js b/apps/spreadsheeteditor/main/app/view/SortDialog.js
index a161847384..7a15ef1af1 100644
--- a/apps/spreadsheeteditor/main/app/view/SortDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/SortDialog.js
@@ -162,7 +162,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
 
             this.btnUp = new Common.UI.Button({
                 cls: 'btn-toolbar',
-                iconCls: 'btn-incfont',
+                iconCls: 'caret-up',
                 hint: this.textUp
             });
             this.btnUp.render($('#sort-dialog-btn-up')) ;
@@ -170,7 +170,7 @@ define([  'text!spreadsheeteditor/main/app/template/SortDialog.template',
 
             this.btnDown = new Common.UI.Button({
                 cls: 'btn-toolbar',
-                iconCls: 'btn-decfont',
+                iconCls: 'caret-down',
                 hint: this.textDown
             });
             this.btnDown.render($('#sort-dialog-btn-down')) ;