diff --git a/demo/documentation/components/config-provider/enUS/os-theme.demo.md b/demo/documentation/components/config-provider/enUS/os-theme.demo.md
index 7faa166e3..029f7c98e 100644
--- a/demo/documentation/components/config-provider/enUS/os-theme.demo.md
+++ b/demo/documentation/components/config-provider/enUS/os-theme.demo.md
@@ -1,5 +1,5 @@
 # Use OS Theme
-Naive-ui provides `$NOs.theme` property to get the current theme of your OS.
+Naive UI provides `useOsTheme` to get the current theme of your OS.
 
 ```html
 <n-config-provider :theme="theme">
diff --git a/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md b/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md
index 3063c7e58..4a1e5ce64 100644
--- a/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md
+++ b/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md
@@ -24,7 +24,7 @@ const columns = [
   {
     title: 'Age',
     key: 'age',
-    sorter: (row1, row2) => row2.age - row1.age
+    sorter: (row1, row2) => row1.age - row2.age
   },
   {
     title: 'Address',
diff --git a/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md b/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md
index af5217be1..56d6eced9 100644
--- a/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md
+++ b/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md
@@ -24,7 +24,7 @@ const columns = [
   {
     title: 'Age',
     key: 'age',
-    sorter: (row1, row2) => row2.age - row1.age
+    sorter: (row1, row2) => row1.age - row2.age
   },
   {
     title: 'Address',
diff --git a/src/_base/icons/ArrowDown.vue b/src/_base/icons/ArrowDown.vue
new file mode 100644
index 000000000..94910eab3
--- /dev/null
+++ b/src/_base/icons/ArrowDown.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+      <g fill-rule="nonzero">
+        <path d="M23.7916,15.2664 C24.0788,14.9679 24.0696,14.4931 23.7711,14.206 C23.4726,13.9188 22.9978,13.928 22.7106,14.2265 L14.7511,22.5007 L14.7511,3.74792 C14.7511,3.33371 14.4153,2.99792 14.0011,2.99792 C13.5869,2.99792 13.2511,3.33371 13.2511,3.74793 L13.2511,22.4998 L5.29259,14.2265 C5.00543,13.928 4.53064,13.9188 4.23213,14.206 C3.93361,14.4931 3.9244,14.9679 4.21157,15.2664 L13.2809,24.6944 C13.6743,25.1034 14.3289,25.1034 14.7223,24.6944 L23.7916,15.2664 Z" />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/_base/icons/Filter.vue b/src/_base/icons/Filter.vue
new file mode 100644
index 000000000..d87ae8628
--- /dev/null
+++ b/src/_base/icons/Filter.vue
@@ -0,0 +1,9 @@
+<template>
+  <svg viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+      <g fill-rule="nonzero">
+        <path d="M17,19 C17.5522847,19 18,19.4477153 18,20 C18,20.5522847 17.5522847,21 17,21 L11,21 C10.4477153,21 10,20.5522847 10,20 C10,19.4477153 10.4477153,19 11,19 L17,19 Z M21,13 C21.5522847,13 22,13.4477153 22,14 C22,14.5522847 21.5522847,15 21,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 L21,13 Z M24,7 C24.5522847,7 25,7.44771525 25,8 C25,8.55228475 24.5522847,9 24,9 L4,9 C3.44771525,9 3,8.55228475 3,8 C3,7.44771525 3.44771525,7 4,7 L24,7 Z" />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/src/_base/icons/index.js b/src/_base/icons/index.js
index 18b464659..0d4c04ea8 100644
--- a/src/_base/icons/index.js
+++ b/src/_base/icons/index.js
@@ -6,3 +6,5 @@ export { default as ErrorIcon } from './Error.vue'
 export { default as WarningIcon } from './Warning.vue'
 export { default as InfoIcon } from './Info.vue'
 export { default as CloseIcon } from './Close.vue'
+export { default as FilterIcon } from './Filter.vue'
+export { default as ArrowDownIcon } from './ArrowDown'
diff --git a/src/data-table/src/DataTable.vue b/src/data-table/src/DataTable.vue
index 981cc6d82..e78835097 100644
--- a/src/data-table/src/DataTable.vue
+++ b/src/data-table/src/DataTable.vue
@@ -123,7 +123,7 @@ function normalizeColumn (column) {
   })
   if (!column.key && column.type === 'selection') {
     defaultColumn.key = 'selection'
-    defaultColumn.width = 48
+    defaultColumn.width = 40
   }
   return defaultColumn
 }
diff --git a/src/data-table/src/HeaderButton/FilterButton.vue b/src/data-table/src/HeaderButton/FilterButton.vue
index 3c1c9d886..ea255c25c 100644
--- a/src/data-table/src/HeaderButton/FilterButton.vue
+++ b/src/data-table/src/HeaderButton/FilterButton.vue
@@ -37,7 +37,7 @@
 import NIcon from '../../../icon'
 import NDataTableFilterMenu from './FilterMenu.vue'
 import NPopover from '../../../popover'
-import FilterIcon from '../../../_icons/funnel.vue'
+import { FilterIcon } from '../../../_base/icons'
 
 function createActiveFilters (allFilters, columnKey, syntheticFilterValue) {
   const activeFilters = Object.assign({}, allFilters)
diff --git a/src/data-table/src/HeaderButton/SortButton.vue b/src/data-table/src/HeaderButton/SortButton.vue
index 1a3b84d3b..ef14ddde8 100644
--- a/src/data-table/src/HeaderButton/SortButton.vue
+++ b/src/data-table/src/HeaderButton/SortButton.vue
@@ -6,22 +6,16 @@
       'n-data-table-sort-button--desc': currentColumnActive && syntheticSortOrder === 'descend'
     }"
   >
-    <n-icon
-      class="n-data-table-sort-button__desc-icon"
-    >
-      <ios-arrow-down />
-    </n-icon>
-    <n-icon
-      class="n-data-table-sort-button__asc-icon"
-    >
-      <ios-arrow-up />
+    <n-icon>
+      <arrow-down-icon />
     </n-icon>
   </span>
 </template>
 
 <script>
-import iosArrowUp from '../../../_icons/ios-arrow-up.vue'
-import iosArrowDown from '../../../_icons/ios-arrow-down.vue'
+import {
+  ArrowDownIcon
+} from '../../../_base/icons'
 import NIcon from '../../../icon'
 
 export default {
@@ -33,8 +27,7 @@ export default {
   },
   components: {
     NIcon,
-    iosArrowUp,
-    iosArrowDown
+    ArrowDownIcon
   },
   props: {
     fontSize: {
diff --git a/src/data-table/src/TableParts/Header.vue b/src/data-table/src/TableParts/Header.vue
index aace43e72..b69e678ba 100644
--- a/src/data-table/src/TableParts/Header.vue
+++ b/src/data-table/src/TableParts/Header.vue
@@ -99,8 +99,8 @@ function isColumnFilterable (column) {
 }
 
 function getNextOrderOf (order) {
-  if (!order) return 'ascend'
-  else if (order === 'ascend') return 'descend'
+  if (!order) return 'descend'
+  else if (order === 'descend') return 'ascend'
   return false
 }
 
diff --git a/src/data-table/src/styles/themed-base.cssr.js b/src/data-table/src/styles/themed-base.cssr.js
index 8a2094398..3bdc41185 100644
--- a/src/data-table/src/styles/themed-base.cssr.js
+++ b/src/data-table/src/styles/themed-base.cssr.js
@@ -246,31 +246,22 @@ export default c([
               width: '14px',
               marginLeft: '4px',
               position: 'relative',
-              display: 'inline-block',
-              verticalAlign: 'middle'
+              display: 'inline-flex',
+              verticalAlign: '-0.2em',
+              color: headerButtonIconColor,
+              transition: `
+                color .3s ${cubicBezierEaseInOut},
+                transform .3s ${cubicBezierEaseInOut}
+              `
             }, [
-              cE('asc-icon', {
-                bottom: 'calc(50% - 2px)',
-                left: 0
+              cM('desc', {
+                transform: 'rotate(0)'
               }),
-              cE('desc-icon', {
-                top: 'calc(50% - 2px)',
-                left: 0
+              cM('asc', {
+                transform: 'rotate(-180deg)'
               }),
-              cM('asc', [
-                cE('asc-icon', {
-                  fill: headerButtonIconColorActive
-                })
-              ]),
-              cM('desc', [
-                cE('desc-icon', {
-                  fill: headerButtonIconColorActive
-                })
-              ]),
-              cE('asc-icon, desc-icon', {
-                transition: `fill .3s ${cubicBezierEaseInOut}`,
-                fill: headerButtonIconColor,
-                position: 'absolute'
+              cM('asc, desc', {
+                color: headerButtonIconColorActive
               })
             ]),
             cB('data-table-filter-button', {
@@ -302,9 +293,8 @@ export default c([
                   backgroundColor: headerButtonColorHover
                 }),
                 cB('icon', {
-                  fontSize: '12px',
-                  fill: headerButtonIconColor,
-                  stroke: headerButtonIconColor
+                  fontSize: '15px',
+                  color: headerButtonIconColor
                 })
               ]),
               cM('popover-visible', [
@@ -317,8 +307,7 @@ export default c([
                   backgroundColor: headerButtonColorHover
                 }, [
                   cB('icon', {
-                    fill: headerButtonIconColorActive,
-                    stroke: headerButtonIconColorActive
+                    color: headerButtonIconColorActive
                   })
                 ])
               ])