diff --git a/frontend/src/components/account.js b/frontend/src/components/account.js
index 90e119d255..4959445526 100644
--- a/frontend/src/components/account.js
+++ b/frontend/src/components/account.js
@@ -111,7 +111,7 @@ class Account extends Component {
         <a id="my-info" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label="View profile and more">
          <span>
           <img src={this.state.avatarURL} width="36" height="36" className="avatar" />
-         </span> <span className="icon-caret-down vam"></span>
+         </span> <span className="fas fa-caret-down vam"></span>
         </a>
         <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label="View profile and more" onClick={this.onClickAccount}></span>
         <div id="user-info-popup" className={`account-popup sf-popover ${this.state.showInfo? '':'hide'}`}>
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 00111b12dc..1c2f79d849 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -98,7 +98,7 @@ class  MainSideNav extends React.Component {
             <li className="tab"><a href={serverRoot + siteRoot + '#shared-libs/'} className="ellipsis" title="Shared with me"><span className="sf2-icon-share" aria-hidden="true"></span>Shared with me</a></li>
             <li className="tab"><a href={serverRoot + siteRoot + '#org/'} className="ellipsis" title="Shared with all"><span className="sf2-icon-organization" aria-hidden="true"></span>Shared with all</a></li>
             <li className="tab" id="group-nav">
-              <a className="ellipsis user-select-no" title="Shared with groups" onClick={this.grpsExtend}><span className={`toggle-icon float-right ${this.state.groupsExtended ?'icon-caret-down':'icon-caret-left'}`} aria-hidden="true"></span><span className="sf2-icon-group" aria-hidden="true"></span>Shared with groups</a>
+              <a className="ellipsis user-select-no" title="Shared with groups" onClick={this.grpsExtend}><span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'icon-caret-left'}`} aria-hidden="true"></span><span className="sf2-icon-group" aria-hidden="true"></span>Shared with groups</a>
               {this.renderSharedGroups()}
             </li>
           </ul>
@@ -111,7 +111,7 @@ class  MainSideNav extends React.Component {
             <li className="tab"><a href={siteRoot + 'dashboard'}><span className="sf2-icon-clock" aria-hidden="true"></span>Acitivities</a></li>
             <li className="tab"><a href={siteRoot + '#devices/'} className="ellipsis" title="Linked Devices"><span className="sf2-icon-monitor" aria-hidden="true"></span>Linked Devices</a></li>
             <li className="tab" id="share-admin-nav">
-              <a className="ellipsis user-select-no" title="Share Admin" onClick={this.shExtend}><span className={`toggle-icon float-right ${this.state.sharedExtended ? 'icon-caret-down':'icon-caret-left'}`} aria-hidden="true"></span><span aria-hidden="true" className="sf2-icon-wrench"></span>Share Admin</a>
+              <a className="ellipsis user-select-no" title="Share Admin" onClick={this.shExtend}><span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span><span aria-hidden="true" className="sf2-icon-wrench"></span>Share Admin</a>
               {this.renderSharedAdmin()}
             </li>
           </ul>
diff --git a/frontend/src/components/search.js b/frontend/src/components/search.js
index d74dddcff7..40b7add0dc 100644
--- a/frontend/src/components/search.js
+++ b/frontend/src/components/search.js
@@ -203,7 +203,7 @@ class Search extends Component {
               onChange={this.onChangeHandler}
               autoComplete="off"
             />
-            <a className="search-icon icon-search"></a>
+            <a className="search-icon fas fa-search"></a>
             <a className={`search-icon sf2-icon-x3 ${this.state.isCloseShow ? "" : "hide"}`} onClick={this.onCloseHandler}></a>
           </div>
           <div className="search-result-container">
diff --git a/frontend/src/dashboard.js b/frontend/src/dashboard.js
index 849e948c27..e9c546c906 100644
--- a/frontend/src/dashboard.js
+++ b/frontend/src/dashboard.js
@@ -10,6 +10,9 @@ import { SeafileAPI } from 'seafile-js';
 import cookie from 'react-cookies';
 
 import 'seafile-ui';
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
 import './css/dashboard.css';
 
 const siteRoot = window.app.config.siteRoot;
diff --git a/frontend/src/pages/file-history/side-panel.js b/frontend/src/pages/file-history/side-panel.js
index 558c6ad396..e009313813 100644
--- a/frontend/src/pages/file-history/side-panel.js
+++ b/frontend/src/pages/file-history/side-panel.js
@@ -135,7 +135,7 @@ class SidePanel extends React.Component {
         <div className="side-panel-north">
           <div className="history-heading">
             <a href="javascript:window.history.back()" className="go-back" title="Back">
-              <span className="icon-chevron-left"></span>
+              <span className="fas fa-chevron-left"></span>
             </a>
             <span className="history-doc-name">{fileName}</span>
           </div>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 9964d6c050..b20149bd04 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -35,33 +35,6 @@
 .sf2-icon-grid-view:before { content:"\e025"; }
 .sf2-icon-list-view:before { content:"\e026"; }
 
-
-/****** icon-xx ********/
-/* Font Awesome 3.2.1 by Dave Gandy - http://fortawesome.github.com/Font-Awesome */
-@font-face {
-    font-family: 'FontAwesome';
-    src: url('font/fontawesome-webfont.eot?v=3.0.1');
-    src: url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
-    url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
-    url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-[class^="icon-"],
-[class*=" icon-"] {
-    font-family: FontAwesome;
-    font-weight: normal;
-    font-style: normal;
-    text-decoration: inherit;
-    -webkit-font-smoothing: antialiased;
-    vertical-align: baseline;
-    speak: none;
-}
-.icon-caret-down:before           { content: "\f0d7"; }
-.icon-caret-left:before           { content: "\f0d9"; }
-.icon-search:before               { content: "\f002"; }
-.icon-chevron-left:before         { content: "\f053"; }
-
 /* common class and element style*/
 a { color:#eb8205; }
 a:hover { color:#eb8205; }
@@ -574,6 +547,14 @@ a.op-icon:focus {
     line-height:1;
     color:#999;
 }
+
+.side-tabnav-tabs .tab .fas {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .side-nav-toggle {
     font-size:1.5rem;
     color:#999;