diff --git a/.eslintrc.js b/.eslintrc.js
index 3656bf639..add5b3c76 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,6 @@ module.exports = {
     'vue/valid-v-model': 0
   },
   overrides: [
-    {
-      files: 'src/_icons/**/*',
-      rules: {}
-    },
     {
       files: '*.spec.js',
       globals: {
diff --git a/demo/Site.vue b/demo/Site.vue
index dd2f6421f..5750dff89 100644
--- a/demo/Site.vue
+++ b/demo/Site.vue
@@ -67,7 +67,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .demo {
   z-index: auto;
   position: absolute;
@@ -77,9 +77,6 @@ export default {
   bottom: 0;
   min-width: 1080px;
 }
-</style>
-
-<style lang="scss">
 body {
   -webkit-text-size-adjust: 100%;
 }
diff --git a/demo/SiteHeader.vue b/demo/SiteHeader.vue
index 911e2eeae..dcd88966e 100644
--- a/demo/SiteHeader.vue
+++ b/demo/SiteHeader.vue
@@ -225,7 +225,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .nav {
   display: grid;
   grid-template-columns: 288px 1fr auto 32px;
@@ -255,8 +255,9 @@ export default {
 .nav-picker {
   cursor: pointer;
   margin-right: 12px;
-  &:last-child {
-    margin-right: 0;
-  }
+}
+
+.nav-picker:last-child {
+  margin-right: 0;
 }
 </style>
diff --git a/demo/documentation/components/icon/zhCN/icons.vue b/demo/documentation/components/icon/zhCN/icons.vue
index 7add13815..cd5f3c5f5 100644
--- a/demo/documentation/components/icon/zhCN/icons.vue
+++ b/demo/documentation/components/icon/zhCN/icons.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import icons from '../../../../../src/_icons/index'
+import icons from '../../../../../src/_deprecated/icons/index'
 import iconWrapper from './iconWrapper'
 import { modeRef } from '../../../../use-dev-mode'
 
diff --git a/demo/font.js b/demo/font.js
index 38594ed2c..e6ffca5f9 100644
--- a/demo/font.js
+++ b/demo/font.js
@@ -1,2 +1,2 @@
-import '../src/fonts/OpenSans.scss'
-import '../src/fonts/FiraCode.scss'
+import '../src/fonts/OpenSans.css'
+import '../src/fonts/FiraCode.css'
diff --git a/demo/init.js b/demo/init.js
index eb49a175e..d8fbc7099 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -4,7 +4,7 @@ import ComponentDocumentation from './utils/ComponentDocumentation.vue'
 import DocumentationWrapper from './utils/DocumentationWrapper.vue'
 import EditOnGithubButton from './utils/EditOnGithubButton.vue'
 import EditOnGithubHeader from './utils/EditOnGithubHeader.vue'
-import './styles/demo.scss'
+import './styles/demo.css'
 
 export function installDemoComponents (app) {
   app.component('ComponentDemo', ComponentDemo)
diff --git a/demo/styles/Metropolis.scss b/demo/styles/Metropolis.css
similarity index 100%
rename from demo/styles/Metropolis.scss
rename to demo/styles/Metropolis.css
diff --git a/demo/styles/demo.scss b/demo/styles/demo.css
similarity index 95%
rename from demo/styles/demo.scss
rename to demo/styles/demo.css
index 5ceb34b29..053f7350c 100644
--- a/demo/styles/demo.scss
+++ b/demo/styles/demo.css
@@ -1,4 +1,4 @@
-@import 'Metropolis.scss';
+@import 'Metropolis.css';
 
 body {
   overflow: hidden;
diff --git a/demo/utils/EditOnGithubButton.vue b/demo/utils/EditOnGithubButton.vue
index 792134a05..115dbb1a8 100644
--- a/demo/utils/EditOnGithubButton.vue
+++ b/demo/utils/EditOnGithubButton.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import editIcon from '../../src/_icons/git-commit-outline.vue'
+import editIcon from '../../src/_deprecated/icons/git-commit-outline.vue'
 import githubUrl from './github-url'
 
 export default {
diff --git a/package.json b/package.json
index 43dd81636..1734f4e99 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "rollup": "^2.32.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0-beta.10",
+    "sass": "^1.28.0",
     "sass-loader": "^7.3.1",
     "schema-utils": "^1.0.0",
     "sinon": "^7.5.0",
diff --git a/rollup.config.js b/rollup.config.js
index dcd93392f..ddda84841 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -8,7 +8,7 @@ module.exports = {
     {
       format: 'cjs',
       dir: 'lib',
-      exports: 'named',
+      exports: 'auto',
       preserveModules: true
     },
     {
diff --git a/src/collapse/src/CollapseItem.vue b/src/collapse/src/CollapseItem.vue
index 8a5b9466d..515ee4ef9 100644
--- a/src/collapse/src/CollapseItem.vue
+++ b/src/collapse/src/CollapseItem.vue
@@ -39,7 +39,7 @@
 <script>
 import { toRef } from 'vue'
 import NIcon from '../../icon'
-import ArrowIcon from '../../_icons/ios-arrow-forward.vue'
+import ArrowIcon from '../../_deprecated/icons/ios-arrow-forward.vue'
 import NCollapseItemContent from './CollapseItemContent.js'
 import { useInjectionCollection } from '../../_utils/composition'
 
diff --git a/src/dynamic-input/src/DynamicInput.vue b/src/dynamic-input/src/DynamicInput.vue
index b60931797..a048bb6f2 100644
--- a/src/dynamic-input/src/DynamicInput.vue
+++ b/src/dynamic-input/src/DynamicInput.vue
@@ -48,8 +48,8 @@
 <script>
 import NButton from '../../button'
 import NButtonGroup from '../../button-group'
-import mdAdd from '../../_icons/md-add.vue'
-import mdRemove from '../../_icons/md-remove.vue'
+import mdAdd from '../../_deprecated/icons/md-add.vue'
+import mdRemove from '../../_deprecated/icons/md-remove.vue'
 import NDynamicInputInputPreset from './InputPreset.vue'
 import NDynamicInputPairPreset from './PairPreset.vue'
 import withapp from '../../_mixins/withapp'
diff --git a/src/dynamic-tags/src/DynamicTags.vue b/src/dynamic-tags/src/DynamicTags.vue
index 86f32b066..3a0aaa69d 100644
--- a/src/dynamic-tags/src/DynamicTags.vue
+++ b/src/dynamic-tags/src/DynamicTags.vue
@@ -43,7 +43,7 @@
 <script>
 import NTag from '../../tag'
 import NIcon from '../../icon'
-import AddIcon from '../../_icons/add-outline.vue'
+import AddIcon from '../../_deprecated/icons/add-outline.vue'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import asformitem from '../../_mixins/asformitem'
diff --git a/src/empty/src/Empty.vue b/src/empty/src/Empty.vue
index 31095cfa9..73c7feae7 100644
--- a/src/empty/src/Empty.vue
+++ b/src/empty/src/Empty.vue
@@ -29,7 +29,7 @@
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import locale from '../../_mixins/locale'
-import removeCircleOutline from '../../_icons/remove-circle-outline.vue'
+import removeCircleOutline from '../../_deprecated/icons/remove-circle-outline.vue'
 import NIcon from '../../icon'
 import usecssr from '../../_mixins/usecssr'
 import styles from './styles/index'
diff --git a/src/fonts/FiraCode.scss b/src/fonts/FiraCode.css
similarity index 100%
rename from src/fonts/FiraCode.scss
rename to src/fonts/FiraCode.css
diff --git a/src/fonts/FiraSans.scss b/src/fonts/FiraSans.css
similarity index 100%
rename from src/fonts/FiraSans.scss
rename to src/fonts/FiraSans.css
diff --git a/src/fonts/IBMPlexMono.scss b/src/fonts/IBMPlexMono.css
similarity index 100%
rename from src/fonts/IBMPlexMono.scss
rename to src/fonts/IBMPlexMono.css
diff --git a/src/fonts/IBMPlexSans.scss b/src/fonts/IBMPlexSans.css
similarity index 100%
rename from src/fonts/IBMPlexSans.scss
rename to src/fonts/IBMPlexSans.css
diff --git a/src/fonts/Inter.scss b/src/fonts/Inter.css
similarity index 100%
rename from src/fonts/Inter.scss
rename to src/fonts/Inter.css
diff --git a/src/fonts/Lato.scss b/src/fonts/Lato.css
similarity index 100%
rename from src/fonts/Lato.scss
rename to src/fonts/Lato.css
diff --git a/src/fonts/OpenSans.scss b/src/fonts/OpenSans.css
similarity index 100%
rename from src/fonts/OpenSans.scss
rename to src/fonts/OpenSans.css
diff --git a/src/fonts/Roboto.scss b/src/fonts/Roboto.css
similarity index 100%
rename from src/fonts/Roboto.scss
rename to src/fonts/Roboto.css
diff --git a/src/input-number/src/InputNumber.vue b/src/input-number/src/InputNumber.vue
index d91eb88dd..36d077402 100644
--- a/src/input-number/src/InputNumber.vue
+++ b/src/input-number/src/InputNumber.vue
@@ -61,8 +61,8 @@
 
 <script>
 import NIcon from '../../icon/index'
-import RemoveIcon from '../../_icons/remove-outline.vue'
-import AddIcon from '../../_icons/add-outline.vue'
+import RemoveIcon from '../../_deprecated/icons/remove-outline.vue'
+import AddIcon from '../../_deprecated/icons/add-outline.vue'
 import {
   configurable,
   themeable,
diff --git a/src/tabs/src/Tabs.vue b/src/tabs/src/Tabs.vue
index 42bc6c9b7..0633a75ee 100644
--- a/src/tabs/src/Tabs.vue
+++ b/src/tabs/src/Tabs.vue
@@ -97,9 +97,9 @@ import {
   themeable,
   usecssr
 } from '../../_mixins'
-import BackwardIcon from '../../_icons/ios-arrow-back.vue'
-import ForwardIcon from '../../_icons/ios-arrow-forward.vue'
-import CloseIcon from '../../_icons/md-close.vue'
+import BackwardIcon from '../../_deprecated/icons/ios-arrow-back.vue'
+import ForwardIcon from '../../_deprecated/icons/ios-arrow-forward.vue'
+import CloseIcon from '../../_deprecated/icons/md-close.vue'
 import { VResizeObserver } from 'vueuc'
 import { throttle } from 'lodash-es'
 import styles from './styles'
diff --git a/src/time-picker/src/TimePicker.vue b/src/time-picker/src/TimePicker.vue
index c0cf437bc..aeb8d639e 100644
--- a/src/time-picker/src/TimePicker.vue
+++ b/src/time-picker/src/TimePicker.vue
@@ -208,7 +208,7 @@ import {
 import { strictParse } from '../../date-picker/src/utils'
 import keyboardDelegate from '../../_utils/delegate/keyboardDelegate'
 import NBaseFocusDetector from '../../_base/focus-detector'
-import TimeIcon from '../../_icons/time-outline.vue'
+import TimeIcon from '../../_deprecated/icons/time-outline.vue'
 import styles from './styles'
 import { warn, call, KEY_CODE } from '../../_utils'
 
diff --git a/src/transfer/src/Transfer.vue b/src/transfer/src/Transfer.vue
index c9c3a1c99..1173e6c52 100644
--- a/src/transfer/src/Transfer.vue
+++ b/src/transfer/src/Transfer.vue
@@ -202,7 +202,7 @@ import NTransferButton from './TransferButton.vue'
 import NInput from '../../input'
 import NIcon from '../../icon'
 import NEmpty from '../../empty'
-import SearchIcon from '../../_icons/ios-search.vue'
+import SearchIcon from '../../_deprecated/icons/ios-search.vue'
 import {
   configurable,
   asformitem,
diff --git a/src/tree/src/TreeNodeSwitcher.vue b/src/tree/src/TreeNodeSwitcher.vue
index 921aba644..c579828b8 100644
--- a/src/tree/src/TreeNodeSwitcher.vue
+++ b/src/tree/src/TreeNodeSwitcher.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import mdArrowDropright from '../../_icons/md-arrow-dropright.vue'
+import mdArrowDropright from '../../_deprecated/icons/md-arrow-dropright.vue'
 import NBaseLoading from '../../_base/loading'
 import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
 
diff --git a/src/upload/src/UploadFile.vue b/src/upload/src/UploadFile.vue
index 066e1faab..f635c2902 100644
--- a/src/upload/src/UploadFile.vue
+++ b/src/upload/src/UploadFile.vue
@@ -57,11 +57,11 @@
 
 <script>
 import NButton from '../../button'
-import closeOutline from '../../_icons/close-outline.vue'
-import downloadOutline from '../../_icons/download-outline.vue'
-import trashOutline from '../../_icons/trash-outline.vue'
+import closeOutline from '../../_deprecated/icons/close-outline.vue'
+import downloadOutline from '../../_deprecated/icons/download-outline.vue'
+import trashOutline from '../../_deprecated/icons/trash-outline.vue'
 import NUploadProgress from './UploadProgress.vue'
-import attachOutline from '../../_icons/attach-outline.vue'
+import attachOutline from '../../_deprecated/icons/attach-outline.vue'
 import NIcon from '../../icon'
 import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
 import { warn } from '../../_utils/naive'
diff --git a/vite.config.js b/vite.config.js
index 434147047..6baa1a787 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,11 +6,16 @@ module.exports = {
   root: __dirname,
   plugins: [ mdPlugin() ],
   optimizeDeps: {
-    include: ['highlight.js/lib/languages/cpp', 'highlight.js/lib/highlight',
-      'highlight.js/lib/languages/javascript', 'highlight.js/lib/languages/python', 'vooks']
+    include: [
+      'highlight.js/lib/languages/cpp',
+      'highlight.js/lib/highlight',
+      'highlight.js/lib/languages/javascript',
+      'highlight.js/lib/languages/python',
+      'vooks'
+    ]
   },
   alias: {
-    '/@naive-ui/lib/icons/': path.resolve(__dirname, './src/_icons'),
+    '/@naive-ui/lib/icons/': path.resolve(__dirname, './src/_deprecated/icons'),
     '/@naive-ui/': path.resolve(__dirname, './src'),
     'src': path.resolve(__dirname, './src')
   },
diff --git a/vue3.md b/vue3.md
index 3d33cafcb..2484677dd 100644
--- a/vue3.md
+++ b/vue3.md
@@ -298,7 +298,7 @@ placeable 进行了大调整
     - unify composition
   - remove hollowoutable
   - vite-build
-  - rollup-build
+  - [x] rollup-build
     - [ ] wait for new version of rollup-plugin-vue,
       https://github.com/vuejs/rollup-plugin-vue/issues/408
   - tusimple theme
@@ -313,3 +313,6 @@ placeable 进行了大调整
   - nimbus icon
 
 `naive-ui/lib/styles/fonts/X.css` => `naive-ui/fonts/X.css`
+deprecate
+`naive-ui/lib/icons` => `vicons`
+`naive-ui/es/icons` => `vicons`