diff --git a/packages/app/package.json b/packages/app/package.json
index 23118065a8..4d911419ad 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@blocksuite/blocks": "0.3.0-alpha.7",
     "@blocksuite/editor": "0.3.0-alpha.7",
-    "@blocksuite/icons": "^1.0.5",
+    "@blocksuite/icons": "^2.0.0",
     "@blocksuite/store": "0.3.0-alpha.7",
     "@emotion/css": "^11.10.0",
     "@emotion/react": "^11.10.4",
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index b50336c602..a33b24e84b 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -7,12 +7,12 @@ import {
   StyledCloseButton,
 } from './styles';
 import {
-  MiddleExportIcon,
+  ExportIcon,
   EdgelessIcon,
   PaperIcon,
-  MiddleExportToHtmlIcon,
-  MiddleExportToMarkdownIcon,
-  MoreVertical_24pxIcon,
+  ExportToHtmlIcon,
+  ExportToMarkdownIcon,
+  MoreVerticalIcon,
 } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
@@ -44,7 +44,7 @@ const PopoverContent = () => {
               onClick={() => {
                 editor && editor.contentParser.onExportHtml();
               }}
-              icon={<MiddleExportToHtmlIcon />}
+              icon={<ExportToHtmlIcon />}
             >
               Export to HTML
             </MenuItem>
@@ -52,14 +52,14 @@ const PopoverContent = () => {
               onClick={() => {
                 editor && editor.contentParser.onExportMarkdown();
               }}
-              icon={<MiddleExportToMarkdownIcon />}
+              icon={<ExportToMarkdownIcon />}
             >
               Export to Markdown
             </MenuItem>
           </>
         }
       >
-        <MenuItem icon={<MiddleExportIcon />} isDir={true}>
+        <MenuItem icon={<ExportIcon />} isDir={true}>
           Export
         </MenuItem>
       </Menu>
@@ -134,7 +134,7 @@ const HeaderRight = () => {
       <ThemeModeSwitch />
       <Menu content={<PopoverContent />} placement="bottom-end">
         <IconButton>
-          <MoreVertical_24pxIcon />
+          <MoreVerticalIcon />
         </IconButton>
       </Menu>
     </>
diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx
index ef01cff2c7..4a29358dc2 100644
--- a/packages/app/src/components/header/page-header.tsx
+++ b/packages/app/src/components/header/page-header.tsx
@@ -9,7 +9,7 @@ import { IconButton } from '@/ui/button';
 import { Content } from '@/ui/layout';
 import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
-import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
+import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/global-modal-provider';
 
 import Header from './header';
@@ -59,7 +59,7 @@ export const PageHeader = () => {
                   triggerQuickSearchModal();
                 }}
               >
-                <MiddleIconArrowDownSmallIcon />
+                <ArrowDownIcon />
               </IconButton>
             </StyledSearchArrowWrapper>
           </StyledTitleWrapper>
diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index f07aaba8fa..3259f77e83 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -1,8 +1,5 @@
 import { PageMeta, useEditor } from '@/providers/editor-provider';
-import {
-  MiddleFavouritedStatus2Icon,
-  MiddleFavouritesIcon,
-} from '@blocksuite/icons';
+import { FavouritedIcon, FavouritesIcon } from '@blocksuite/icons';
 import {
   StyledFavoriteButton,
   StyledTableContainer,
@@ -26,11 +23,7 @@ const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
         toggleFavoritePage(pageMeta.id);
       }}
     >
-      {pageMeta.favorite ? (
-        <MiddleFavouritedStatus2Icon />
-      ) : (
-        <MiddleFavouritesIcon />
-      )}
+      {pageMeta.favorite ? <FavouritedIcon /> : <FavouritesIcon />}
     </StyledFavoriteButton>
   );
 };
diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx
index da06c1121c..4599b2d5ff 100644
--- a/packages/app/src/components/page-list/operation-cell.tsx
+++ b/packages/app/src/components/page-list/operation-cell.tsx
@@ -3,11 +3,7 @@ import { useConfirm } from '@/providers/confirm-provider';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Wrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
-import {
-  MoreVertical_24pxIcon,
-  RestoreIcon,
-  TrashDeleteforeverIcon,
-} from '@blocksuite/icons';
+import { MoreVerticalIcon, RestoreIcon, DeleteIcon } from '@blocksuite/icons';
 import React from 'react';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
@@ -52,7 +48,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
     <Wrapper alignItems="center" justifyContent="center">
       <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
         <IconButton hoverBackground="#E0E6FF">
-          <MoreVertical_24pxIcon />
+          <MoreVerticalIcon />
         </IconButton>
       </Menu>
     </Wrapper>
@@ -89,7 +85,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
           });
         }}
       >
-        <TrashDeleteforeverIcon />
+        <DeleteIcon />
       </IconButton>
     </Wrapper>
   );
diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx
index 48d098d930..8a94daf180 100644
--- a/packages/app/src/components/quick-search/content/jumpTo.tsx
+++ b/packages/app/src/components/quick-search/content/jumpTo.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  MiddleFavouritesIcon,
-  MiddleTrashIcon,
-  MiddleAllPagesIcon,
-} from '@blocksuite/icons';
+import { FavouritesIcon, TrashIcon, AllPagesIcon } from '@blocksuite/icons';
 import Link from 'next/link';
 import { StyledJumpTo } from '../style';
 import { useModal } from '@/providers/global-modal-provider';
@@ -16,21 +12,21 @@ const JumpTo = () => {
         href={{ pathname: '/page-list/all' }}
         onClick={() => triggerQuickSearchModal()}
       >
-        <MiddleAllPagesIcon width={20} height={20} />
+        <AllPagesIcon width={20} height={20} />
         <span> All pages</span>
       </Link>
       <Link
         href={{ pathname: '/page-list/favorite' }}
         onClick={() => triggerQuickSearchModal()}
       >
-        <MiddleFavouritesIcon width={20} height={20} />
+        <FavouritesIcon width={20} height={20} />
         <span> Favourites</span>
       </Link>
       <Link
         href={{ pathname: '/page-list/trash' }}
         onClick={() => triggerQuickSearchModal()}
       >
-        <MiddleTrashIcon width={20} height={20} />
+        <TrashIcon width={20} height={20} />
         <span> Trash</span>
       </Link>
     </StyledJumpTo>
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 68e83bf448..eb4046a2de 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MiddleAddIcon } from '@blocksuite/icons';
+import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
@@ -11,7 +11,7 @@ const QuickSearchFooter = () => {
   return (
     <StyledModalFooterContent>
       <IconButton>
-        <MiddleAddIcon
+        <AddIcon
           onClick={() => {
             createPage();
             triggerQuickSearchModal();
diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index 69e89927a5..8da7dfc24e 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { MiddleSearchIcon } from '@blocksuite/icons';
+import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
 const Input = (props: {
@@ -9,7 +9,7 @@ const Input = (props: {
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">
-        <MiddleSearchIcon />
+        <SearchIcon />
       </StyledLabel>
       <Command.Input
         value={props.query}
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index 44603c990c..8bd2c4529c 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -9,7 +9,7 @@ import {
 } from './style';
 import { Arrow } from './icons';
 import Collapse from '@mui/material/Collapse';
-import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
+import { ArrowDownIcon } from '@blocksuite/icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
@@ -63,18 +63,6 @@ export const WorkSpaceSliderBar = () => {
         >
           Quick search
         </StyledListItem>
-        <StyledListItem
-          onClick={() => {
-            router.push({
-              pathname: '/',
-              query: {
-                pageId: new Date().getTime().toString(),
-              },
-            });
-          }}
-        >
-          Back to Doc
-        </StyledListItem>
         <Link href={{ pathname: '/page-list/all' }}>
           <StyledListItem active={router.pathname === '/page-list/all'}>
             All pages
@@ -93,7 +81,7 @@ export const WorkSpaceSliderBar = () => {
               setShowSubFavorite(!showSubFavorite);
             }}
           >
-            <MiddleIconArrowDownSmallIcon
+            <ArrowDownIcon
               style={{
                 transform: `rotate(${showSubFavorite ? '180' : '0'}deg)`,
               }}
diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx
index 1fd7340538..a486a254d0 100644
--- a/packages/app/src/pages/affine.tsx
+++ b/packages/app/src/pages/affine.tsx
@@ -4,10 +4,7 @@ import { Loading } from '@/components/loading';
 import Modal from '@/ui/modal';
 import { useState } from 'react';
 import { Button } from '@/ui/button';
-import {
-  MiddleFavouritedStatus2Icon,
-  MiddleFavouritesIcon,
-} from '@blocksuite/icons';
+import { FavouritedIcon } from '@blocksuite/icons';
 export const StyledHeader = styled('div')({
   height: '60px',
   width: '100vw',
@@ -41,19 +38,19 @@ const Affine = () => {
       </Modal>
       <Loading />
 
-      <Button icon={<MiddleFavouritedStatus2Icon />}>click me!</Button>
-      <Button icon={<MiddleFavouritedStatus2Icon />} type={'primary'}>
+      <Button icon={<FavouritedIcon />}>click me!</Button>
+      <Button icon={<FavouritedIcon />} type={'primary'}>
         click me!
       </Button>
-      <Button icon={<MiddleFavouritedStatus2Icon />} type={'warning'}>
+      <Button icon={<FavouritedIcon />} type={'warning'}>
         click me!
       </Button>
-      <Button icon={<MiddleFavouritedStatus2Icon />} type={'danger'}>
+      <Button icon={<FavouritedIcon />} type={'danger'}>
         click me!
       </Button>
 
-      <Button icon={<MiddleFavouritedStatus2Icon />}></Button>
-      <Button icon={<MiddleFavouritedStatus2Icon />} shape="round"></Button>
+      <Button icon={<FavouritedIcon />}></Button>
+      <Button icon={<FavouritedIcon />} shape="round"></Button>
     </>
   );
 };
diff --git a/packages/app/src/providers/editor-provider/index.ts b/packages/app/src/providers/editor-provider/index.ts
index 420a6063b6..7fd40844ee 100644
--- a/packages/app/src/providers/editor-provider/index.ts
+++ b/packages/app/src/providers/editor-provider/index.ts
@@ -1,3 +1,4 @@
 export * from './editor-provider';
 export * from './example-markdown';
 export * from './utils';
+export * from './interface';
diff --git a/packages/app/src/ui/menu/styles.ts b/packages/app/src/ui/menu/styles.ts
index d114a9d6d8..f1f4ef1764 100644
--- a/packages/app/src/ui/menu/styles.ts
+++ b/packages/app/src/ui/menu/styles.ts
@@ -1,6 +1,6 @@
 import { displayFlex, styled } from '@/styles';
 import StyledPopperContainer from '../shared/Container';
-import { MiddleArrowRightIcon } from '@blocksuite/icons';
+import { ArrowRightIcon } from '@blocksuite/icons';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   return {
@@ -13,7 +13,7 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   };
 });
 
-export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
+export const StyledArrow = styled(ArrowRightIcon)(({ theme }) => {
   return {
     position: 'absolute',
     right: 0,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8457a583e6..dbc65832e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,7 @@ importers:
     specifiers:
       '@blocksuite/blocks': 0.3.0-alpha.7
       '@blocksuite/editor': 0.3.0-alpha.7
-      '@blocksuite/icons': ^1.0.5
+      '@blocksuite/icons': ^2.0.0
       '@blocksuite/store': 0.3.0-alpha.7
       '@emotion/css': ^11.10.0
       '@emotion/react': ^11.10.4
@@ -56,7 +56,7 @@ importers:
     dependencies:
       '@blocksuite/blocks': 0.3.0-alpha.7
       '@blocksuite/editor': 0.3.0-alpha.7
-      '@blocksuite/icons': 1.0.5_w5j4k42lgipnm43s3brx6h3c34
+      '@blocksuite/icons': 2.0.0_w5j4k42lgipnm43s3brx6h3c34
       '@blocksuite/store': 0.3.0-alpha.7
       '@emotion/css': 11.10.0
       '@emotion/react': 11.10.4_w5j4k42lgipnm43s3brx6h3c34
@@ -204,8 +204,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/icons/1.0.5_w5j4k42lgipnm43s3brx6h3c34:
-    resolution: {integrity: sha512-0iagAntIBvrGoaQ6eM6QQFYNkR1WRh6vLU+eOyV9o69eoXjRU8BgC3+U4ljY+1X30enfr3tf8X97iAxWuAVJcw==}
+  /@blocksuite/icons/2.0.0_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-r+wpkHGol85dOKkvbAZoXfZFVzGtI2YXT4qqwb76ekSAHlfIcVi+Gs6eVDpH8fZl8vvr6FquDiQWMEbYaN4BEA==}
     peerDependencies:
       '@types/react': ^18.0.25
       react: ^18.2.0