diff --git a/src/_base/icon/index.js b/src/_base/icon/index.js
deleted file mode 100644
index e98978a09..000000000
--- a/src/_base/icon/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Icon from './src/Icon.vue'
-
-export default Icon
diff --git a/src/_base/icon/src/Icon.vue b/src/_base/icon/src/Icon.vue
deleted file mode 100644
index 7817407b9..000000000
--- a/src/_base/icon/src/Icon.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <svg
-    v-if="type === 'more'"
-    class="n-base-icon n-base-icon--more"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="M255.8 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38zM102 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38zM410 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38z" />
-  </svg>
-  <svg
-    v-else-if="type === 'fastForward' || type === 'fastBackward' || type === 'fast-forward' || type === 'fast-backward'"
-    class="n-base-icon"
-    :style="{
-      transform: styleTransform
-    }"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <g>
-      <path d="m220.1,256l-127.1,-127c-9.4,-9.4 -9.4,-24.6 0,-33.9s24.6,-9.3 34,0l144,143.9c9.1,9.1 9.3,23.7 0.7,33.1l-144.6,144.9c-4.7,4.7 -10.9,7 -17,7s-12.3,-2.3 -17,-7c-9.4,-9.4 -9.4,-24.6 0,-33.9l127,-127.1z" />
-      <path d="m368.1,256l-127.1,-127c-9.4,-9.4 -9.4,-24.6 0,-33.9s24.6,-9.3 34,0l144,143.9c9.1,9.1 9.3,23.7 0.7,33.1l-144.6,144.9c-4.7,4.7 -10.9,7 -17,7s-12.3,-2.3 -17,-7c-9.4,-9.4 -9.4,-24.6 0,-33.9l127,-127.1z" />
-    </g>
-  </svg>
-  <svg
-    v-else-if="type === 'forward' || type === 'backward'"
-    class="n-base-icon"
-    :style="{
-      transform: styleTransform
-    }"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'NBaseIcon',
-  props: {
-    type: {
-      type: String,
-      default: null
-    }
-  },
-  computed: {
-    styleTransform () {
-      const type = this.type
-      if (type === 'backward' || type === 'fast-backward') return 'rotate(180deg)'
-      return null
-    }
-  }
-}
-</script>
diff --git a/src/date-picker/src/panel/commonCalendarMixin.js b/src/date-picker/src/panel/commonCalendarMixin.js
index bb846a600..6f9b41888 100644
--- a/src/date-picker/src/panel/commonCalendarMixin.js
+++ b/src/date-picker/src/panel/commonCalendarMixin.js
@@ -1,4 +1,10 @@
 import FocusDetector from '../../../_base/focus-detector'
+import {
+  ArrowRight20Filled as FastForwardIcon,
+  ArrowLeft20Filled as FastBackwardIcon,
+  ChevronLeft24Filled as BackwardIcon,
+  ChevronRight24Filled as ForwardIcon
+} from 'vicons/fluent'
 import {
   locale
 } from '../../../_mixins'
@@ -21,7 +27,11 @@ export default {
     }
   },
   components: {
-    FocusDetector
+    FocusDetector,
+    FastForwardIcon,
+    FastBackwardIcon,
+    BackwardIcon,
+    ForwardIcon
   },
   props: {
     theme: {
diff --git a/src/date-picker/src/panel/date.vue b/src/date-picker/src/panel/date.vue
index 3ec698079..3bd9d7a75 100644
--- a/src/date-picker/src/panel/date.vue
+++ b/src/date-picker/src/panel/date.vue
@@ -14,13 +14,13 @@
           class="n-date-panel-month__fast-prev"
           @click="prevYear"
         >
-          <n-base-icon type="fast-backward" />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="prevMonth"
         >
-          <n-base-icon type="backward" />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ calendarMonth }} {{ calendarYear }}
@@ -29,13 +29,13 @@
           class="n-date-panel-month__next"
           @click="nextMonth"
         >
-          <n-base-icon type="forward" />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="nextYear"
         >
-          <n-base-icon type="fast-forward" />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -105,7 +105,7 @@
 </template>
 
 <script>
-import NBaseIcon from '../../../_base/icon'
+
 import uniCalendarMixin from './uniCalendarMixin'
 import { startOfDay } from 'date-fns'
 import NButton from '../../../button'
@@ -117,8 +117,7 @@ const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'
 
 export default {
   components: {
-    NButton,
-    NBaseIcon
+    NButton
   },
   mixins: [
     uniCalendarMixin
diff --git a/src/date-picker/src/panel/daterange.vue b/src/date-picker/src/panel/daterange.vue
index 4cb8d5a99..7b654b47e 100644
--- a/src/date-picker/src/panel/daterange.vue
+++ b/src/date-picker/src/panel/daterange.vue
@@ -18,13 +18,13 @@
           class="n-date-panel-month__fast-prev"
           @click="startCalendarPrevYear"
         >
-          <n-base-icon type="fast-backward" />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="startCalendarPrevMonth"
         >
-          <n-base-icon type="backward" />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ startCalendarMonth }} {{ startCalendarYear }}
@@ -33,13 +33,13 @@
           class="n-date-panel-month__next"
           @click="startCalendarNextMonth"
         >
-          <n-base-icon type="forward" />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="startCalendarNextYear"
         >
-          <n-base-icon type="fast-forward" />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -84,13 +84,13 @@
           class="n-date-panel-month__fast-prev"
           @click="endCalendarPrevYear"
         >
-          <n-base-icon type="fast-backward" />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="endCalendarPrevMonth"
         >
-          <n-base-icon type="backward" />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ endCalendarMonth }} {{ endCalendarYear }}
@@ -99,13 +99,13 @@
           class="n-date-panel-month__next"
           @click="endCalendarNextMonth"
         >
-          <n-base-icon type="forward" />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="endCalendarNextYear"
         >
-          <n-base-icon type="fast-forward" />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -173,7 +173,6 @@
 
 <script>
 import NButton from '../../../button'
-import NBaseIcon from '../../../_base/icon'
 import dualCalendarMixin from './dualCalendarMixin'
 import { startOfDay } from 'date-fns'
 import { injectDualCalendarValidation } from '../validate-utils'
@@ -182,8 +181,7 @@ const DATE_FORMAT = 'yyyy-MM-dd'
 
 export default {
   components: {
-    NButton,
-    NBaseIcon
+    NButton
   },
   mixins: [
     dualCalendarMixin
diff --git a/src/date-picker/src/panel/datetime.vue b/src/date-picker/src/panel/datetime.vue
index 8fd272d62..6befe4c8b 100644
--- a/src/date-picker/src/panel/datetime.vue
+++ b/src/date-picker/src/panel/datetime.vue
@@ -45,13 +45,13 @@
           class="n-date-panel-month__fast-prev"
           @click="prevYear"
         >
-          <n-base-icon type="fast-backward" />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="prevMonth"
         >
-          <n-base-icon type="backward" />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ calendarMonth }} {{ calendarYear }}
@@ -60,13 +60,13 @@
           class="n-date-panel-month__next"
           @click="nextMonth"
         >
-          <n-base-icon type="forward" />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="nextYear"
         >
-          <n-base-icon type="fast-forward" />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -136,7 +136,6 @@
 </template>
 
 <script>
-import NBaseIcon from '../../../_base/icon'
 import uniCalendarMixin from './uniCalendarMixin'
 import { startOfSecond } from 'date-fns'
 import NButton from '../../../button'
@@ -151,7 +150,6 @@ const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'
 export default {
   components: {
     NButton,
-    NBaseIcon,
     NTimePicker,
     NInput
   },
diff --git a/src/date-picker/src/panel/datetimerange.vue b/src/date-picker/src/panel/datetimerange.vue
index 023c641db..a723727b2 100644
--- a/src/date-picker/src/panel/datetimerange.vue
+++ b/src/date-picker/src/panel/datetimerange.vue
@@ -40,9 +40,7 @@
         @update:value="handleStartTimePickerChange"
       />
       <div class="n-date-panel-input-wrapper__arrow">
-        <n-base-icon
-          type="forward"
-        />
+        <forward-icon />
       </div>
       <n-input
         v-model:value="endDateDisplayString"
@@ -81,17 +79,13 @@
           class="n-date-panel-month__fast-prev"
           @click="startCalendarPrevYear"
         >
-          <n-base-icon
-            type="fast-backward"
-          />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="startCalendarPrevMonth"
         >
-          <n-base-icon
-            type="backward"
-          />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ startCalendarMonth }} {{ startCalendarYear }}
@@ -100,17 +94,13 @@
           class="n-date-panel-month__next"
           @click="startCalendarNextMonth"
         >
-          <n-base-icon
-            type="forward"
-          />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="startCalendarNextYear"
         >
-          <n-base-icon
-            type="fast-forward"
-          />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -155,17 +145,13 @@
           class="n-date-panel-month__fast-prev"
           @click="endCalendarPrevYear"
         >
-          <n-base-icon
-            type="fast-backward"
-          />
+          <fast-backward-icon />
         </div>
         <div
           class="n-date-panel-month__prev"
           @click="endCalendarPrevMonth"
         >
-          <n-base-icon
-            type="backward"
-          />
+          <backward-icon />
         </div>
         <div class="n-date-panel-month__month-year">
           {{ endCalendarMonth }} {{ endCalendarYear }}
@@ -174,17 +160,13 @@
           class="n-date-panel-month__next"
           @click="endCalendarNextMonth"
         >
-          <n-base-icon
-            type="forward"
-          />
+          <forward-icon />
         </div>
         <div
           class="n-date-panel-month__fast-next"
           @click="endCalendarNextYear"
         >
-          <n-base-icon
-            type="fast-forward"
-          />
+          <fast-forward-icon />
         </div>
       </div>
       <div class="n-date-panel-weekdays">
@@ -259,7 +241,6 @@ import NButton from '../../../button'
 import NTimePicker from '../../../time-picker'
 import NInput from '../../../input'
 import dualCalendarMixin from './dualCalendarMixin'
-import NBaseIcon from '../../../_base/icon'
 import {
   format,
   startOfSecond,
@@ -280,8 +261,7 @@ export default {
   components: {
     NButton,
     NTimePicker,
-    NInput,
-    NBaseIcon
+    NInput
   },
   mixins: [dualCalendarMixin],
   props: {
diff --git a/src/date-picker/src/styles/themed-base.cssr.js b/src/date-picker/src/styles/themed-base.cssr.js
index 07b5f733a..04862a862 100644
--- a/src/date-picker/src/styles/themed-base.cssr.js
+++ b/src/date-picker/src/styles/themed-base.cssr.js
@@ -200,10 +200,11 @@ export default c([
         }, [
           cE('prev, next, fast-prev, fast-next', {
             raw: `
+              line-height: 0;
               cursor: pointer;
               width: 14px;
               height: 14px;
-              fill: ${panelIconColor};
+              color: ${panelIconColor};
             `
           }),
           cE('fast-prev, next', {
diff --git a/src/pagination/src/Pagination.vue b/src/pagination/src/Pagination.vue
index 547ceed2f..518f53eb6 100644
--- a/src/pagination/src/Pagination.vue
+++ b/src/pagination/src/Pagination.vue
@@ -15,7 +15,7 @@
       @click="backward"
     >
       <div class="n-pagination-item__arrow-icon">
-        <n-base-icon type="backward" />
+        <backward-icon />
       </div>
     </div>
     <div
@@ -37,24 +37,22 @@
       </template>
       <template
         v-if="pageItem.type==='fastBackward'"
-        class="n-pagination-item--fast-backward"
       >
         <div class="n-pagination-item__more-icon">
-          <n-base-icon type="more" />
+          <more-icon />
         </div>
         <div class="n-pagination-item__arrow-icon">
-          <n-base-icon type="fast-backward" />
+          <fast-backward-icon />
         </div>
       </template>
       <template
         v-if="pageItem.type==='fastForward'"
-        class=""
       >
         <div class="n-pagination-item__more-icon">
-          <n-base-icon type="more" />
+          <more-icon />
         </div>
         <div class="n-pagination-item__arrow-icon">
-          <n-base-icon type="fast-forward" />
+          <fast-forward-icon />
         </div>
       </template>
     </div>
@@ -66,7 +64,7 @@
       @click="forward"
     >
       <div class="n-pagination-item__arrow-icon">
-        <n-base-icon type="forward" />
+        <forward-icon />
       </div>
     </div>
     <div
@@ -97,12 +95,20 @@
 import { nextTick, computed } from 'vue'
 import NSelect from '../../select'
 import NInput from '../../input'
-import NBaseIcon from '../../_base/icon'
-import withapp from '../../_mixins/withapp'
-import themeable from '../../_mixins/themeable'
-import locale from '../../_mixins/locale'
+import {
+  ArrowRight20Regular as FastForwardIcon,
+  ArrowLeft20Regular as FastBackwardIcon,
+  ChevronLeft16Regular as BackwardIcon,
+  ChevronRight16Regular as ForwardIcon,
+  More16Regular as MoreIcon
+} from 'vicons/fluent'
+import {
+  configurable,
+  themeable,
+  locale,
+  usecssr
+} from '../../_mixins'
 import { pageItems } from './utils'
-import usecssr from '../../_mixins/usecssr'
 import styles from './styles'
 import { useCompitable } from 'vooks'
 
@@ -111,10 +117,14 @@ export default {
   components: {
     NSelect,
     NInput,
-    NBaseIcon
+    BackwardIcon,
+    ForwardIcon,
+    MoreIcon,
+    FastForwardIcon,
+    FastBackwardIcon
   },
   mixins: [
-    withapp,
+    configurable,
     themeable,
     usecssr(styles),
     locale('Pagination')
diff --git a/src/pagination/src/styles/themed-base.cssr.js b/src/pagination/src/styles/themed-base.cssr.js
index 3384605b5..4afb8f185 100644
--- a/src/pagination/src/styles/themed-base.cssr.js
+++ b/src/pagination/src/styles/themed-base.cssr.js
@@ -125,6 +125,9 @@ export default c([
             `
           })
         ]),
+        cE('more-icon, arrow-icon', {
+          lineHeight: 0
+        }),
         cM('active', {
           background: itemColorActive,
           color: itemTextColorActive,