diff --git a/package.json b/package.json
index 9c5e1960..b80b71f1 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@ant-design/compatible": "0.0.1-rc.1",
+    "@ant-design/icons": "^2.1.1",
     "@ant-design/pro-layout": "^4.9.11",
     "@lingui/react": "^2.9.0",
     "ant-design-pro": "^2.3.2",
diff --git a/src/components/DropOption/DropOption.js b/src/components/DropOption/DropOption.js
index a459286e..d0d4ee41 100644
--- a/src/components/DropOption/DropOption.js
+++ b/src/components/DropOption/DropOption.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import * as icon from '@ant-design/icons';
 import { Dropdown, Button, Menu } from 'antd';
 
 const DropOption = ({
@@ -18,8 +18,8 @@ const DropOption = ({
     } {...dropdownProps}>
 
       <Button style={{ border: 'none', ...buttonStyle }}>
-        <LegacyIcon style={{ marginRight: 2 }} type="bars" />
-        <LegacyIcon type="down" />
+        <icon.BarsOutline style={{ marginRight: 2 }} />
+        <icon.DownOutline />
       </Button>
     </Dropdown>
   );
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
index 34fd1a6e..39653c75 100644
--- a/src/components/Layout/Header.js
+++ b/src/components/Layout/Header.js
@@ -1,5 +1,5 @@
 import React, { PureComponent, Fragment } from 'react'
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import * as icon from '@ant-design/icons';
 import {
   Menu,
   Layout,
@@ -44,7 +44,7 @@ class Header extends PureComponent {
   handleOpenMenu() {
     let ListControls = [
       (<div>
-          <Button type="dashed" icon={<LegacyIcon type="close" />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
+          <Button type="dashed" icon={<icon.CloseOutline />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
       </div>
      )
     ]
@@ -90,10 +90,7 @@ class Header extends PureComponent {
                     }
                     description={moment(item.date).fromNow()}
                   />
-                  <LegacyIcon
-                    style={{ fontSize: '15px', color: '#ccc' }}
-                    type="right"
-                  />
+                 <icon.RightOutlined />
                 </List.Item>
               )}
             />
@@ -114,7 +111,7 @@ class Header extends PureComponent {
           offset={[-10, 10]}
           className={styles.iconButton}
         >
-          <LegacyIcon className={styles.iconFont} type="bell" />
+          <icon.BellOutlined />
         </Badge>
       </Popover>
     )
@@ -123,11 +120,11 @@ class Header extends PureComponent {
       <Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed})} > 
             <div className={styles.leftContainer}>
               <img className={styles.brand} src={config.FullLogoPath} />
-              <Tooltip title={'Main'}><a target="_blank" href="" rel="noopener noreferrer"><LegacyIcon type="home" className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
-              <Tooltip title={'Search'}><a target="_blank" href="" rel="noopener noreferrer"><LegacyIcon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
+              <Tooltip title={'Main'}><a target="_blank" href="" rel="noopener noreferrer"><icon.HomeOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
+              <Tooltip title={'Search'}><a target="_blank" href="" rel="noopener noreferrer"><icon.SearchOutline className={styles.iconButton} style={{ fontSize: '15px' }} /></a></Tooltip>
             </div>
             <div className={styles.rightContainer}>
-              <Tooltip title={'Create'}><LegacyIcon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
+              <Tooltip title={'Create'}><icon.PlusCircleOutline onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
               {notificationIcon}
             </div>
       </Layout.Header>
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
index 729b8006..25d95526 100644
--- a/src/components/Layout/Menu.js
+++ b/src/components/Layout/Menu.js
@@ -1,6 +1,6 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import * as icon from '@ant-design/icons';
 import { Menu } from 'antd';
 import Navlink from 'umi/navlink'
 import withRouter from 'umi/withRouter'
@@ -13,6 +13,7 @@ import {
 } from 'utils'
 import store from 'store'
 import styles from './Menu.less'
+import { isTypeNode } from 'typescript';
 
 
 const { SubMenu } = Menu
@@ -52,7 +53,7 @@ class SiderMenu extends PureComponent {
             className={styles.SubMenuItems}
             title={
               <Fragment>
-                {item.icon && <LegacyIcon type={item.icon} />}
+                {item.icon && <item.icon />}
                 <span className={styles.SubItemTitle}>{item.name}</span>
               </Fragment>
             }
@@ -64,7 +65,7 @@ class SiderMenu extends PureComponent {
       return (
         <Menu.Item key={item.id} >
           <Navlink to={addLangPrefix(item.route) || '#'}>
-            {item.icon && <LegacyIcon type={item.icon} />}
+            {item.icon && <item.icon />}
             <span>{item.name}</span>
           </Navlink>
         </Menu.Item>
diff --git a/src/components/Layout/R_Sider.js b/src/components/Layout/R_Sider.js
index c1ebbda6..eb044596 100644
--- a/src/components/Layout/R_Sider.js
+++ b/src/components/Layout/R_Sider.js
@@ -1,6 +1,7 @@
 import React, { PureComponent, StrictMode } from 'react'
 import PropTypes from 'prop-types'
-import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Icons as LegacyIcon } from '@ant-design/compatible';
+import * as icon from '@ant-design/icons';
 import { Switch, Layout, Tag, Divider, Drawer, Avatar, Menu } from 'antd';
 import { withI18n, Trans } from '@lingui/react'
 import classNames from 'classnames'