diff --git a/frontend/src/assets/icons/client.svg b/frontend/src/assets/icons/client.svg
new file mode 100644
index 0000000000..deeb74f229
--- /dev/null
+++ b/frontend/src/assets/icons/client.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>clients</title>
+<g id="clients">
+	<path id="形状结合" class="st0" d="M30,2c0.6,0,1,0.4,1,1v20c0,0.6-0.4,1-1,1H18l0,0.9c0,1.1,2.9,2.2,4.1,2.2h1.4V30h-15v-2.8
+		h1.4c1.1,0,4.1-1.1,4.1-2.2l0-0.9H2c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1H30z M28,5H4v16h24V5z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/download.svg b/frontend/src/assets/icons/download.svg
new file mode 100644
index 0000000000..79eb9c96d3
--- /dev/null
+++ b/frontend/src/assets/icons/download.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M5,22v5h22v-5h3v6c0,1.1-0.8,1.9-1.8,2H4c-1.1,0-2-0.9-2-2v-6H5z M17.5,2v17.3l4.9-4.7l2.5,2.4l-8.7,8.4L7.5,17
+	l2.5-2.4l4.5,4.3V2H17.5z"/>
+</svg>
diff --git a/frontend/src/assets/icons/info.svg b/frontend/src/assets/icons/info.svg
new file mode 100644
index 0000000000..d077b1bcc3
--- /dev/null
+++ b/frontend/src/assets/icons/info.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M16,0c8.8,0,16,7.2,16,16s-7.2,16-16,16S0,24.8,0,16S7.2,0,16,0z M16,3C8.8,3,3,8.8,3,16s5.8,13,13,13
+	s13-5.8,13-13c0-3.4-1.4-6.8-3.8-9.2S19.4,3,16,3z M17,14c0.6,0,1,0.4,1,1v8c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1v-8
+	c0-0.6,0.4-1,1-1H17z"/>
+<circle class="st0" cx="16" cy="9.4" r="2"/>
+</svg>
diff --git a/frontend/src/assets/icons/lock.svg b/frontend/src/assets/icons/lock.svg
new file mode 100644
index 0000000000..23c6860a7d
--- /dev/null
+++ b/frontend/src/assets/icons/lock.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>lock</title>
+<g id="lock">
+	<path id="形状结合" class="st0" d="M16,0c4.6,0,8,4,8,9v3h1.3c2,0,3.7,1.8,3.7,4v12c0,2.2-1.7,4-3.7,4H6.7c-2,0-3.7-1.8-3.7-4
+		V16c0-2.2,1.7-4,3.7-4H8V9C8,4,11.4,0,16,0z M25,15H7c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h18c0.6,0,1-0.4,1-1V16
+		C26,15.4,25.6,15,25,15z M16,3c-2.8,0-5,2.5-5,5.6V12h10V8.6C21,5.5,18.8,3,16,3z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/open-folder.svg b/frontend/src/assets/icons/open-folder.svg
new file mode 100644
index 0000000000..4b786e7683
--- /dev/null
+++ b/frontend/src/assets/icons/open-folder.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>folder-open</title>
+<g id="folder-open">
+	<path id="形状" class="st0" d="M29.3,13H27V9.5c0-1.7-1.3-3-3-3h-8.8l0,0L11.6,2H2.7C1.2,2,0,3.5,0,5.2v21.5
+		C0,28.5,1.2,30,2.7,30h22.2c0.9,0,1.8-0.6,2.3-1.5l4.4-10.7C32.7,15.6,31.4,13,29.3,13z M3.5,5h6.8l0,0l3.5,4.5h9.8
+		c0.3,0,0.5,0.2,0.5,0.5v3l0,0H8.5c-0.9,0-1.8,0.6-2.3,1.6L3,22.2V5.5C3,5.2,3.2,5,3.5,5z M24.2,27H5.2c-0.3,0-0.5-0.2-0.5-0.5
+		c0-0.1,0-0.1,0-0.2l3.9-10C8.7,16.1,8.9,16,9.1,16h19.4c0.3,0,0.5,0.2,0.5,0.5c0,0.1,0,0.1,0,0.2l-4.3,10
+		C24.6,26.9,24.4,27,24.2,27z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/print.svg b/frontend/src/assets/icons/print.svg
new file mode 100644
index 0000000000..881c9640f0
--- /dev/null
+++ b/frontend/src/assets/icons/print.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>print</title>
+<g id="print">
+	<path id="形状结合" class="st0" d="M25,1c0.6,0,1,0.4,1,1l0,6h3c1.1,0,2,0.9,2,2v13c0,0.6-0.4,1-1,1h-4v6c0,0.6-0.4,1-1,1H7
+		c-0.6,0-1-0.4-1-1v-6H2c-0.6,0-1-0.4-1-1V10c0-1.1,0.9-2,2-2h3l0-6c0-0.5,0.4-0.9,0.9-1L7,1H25z M23,21H9v7h14V21z M27,11H5
+		c-0.6,0-1,0.4-1,1v8.5C4,20.8,4.2,21,4.5,21H6v-2c0-0.6,0.4-1,1-1h18c0.6,0,1,0.4,1,1v2h1.5c0.3,0,0.5-0.2,0.5-0.5V12
+		C28,11.4,27.6,11,27,11z M24.5,13c0.8,0,1.5,0.7,1.5,1.5S25.3,16,24.5,16S23,15.3,23,14.5S23.7,13,24.5,13z M23,4H9l0,4h14L23,4z"
+		/>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/save.svg b/frontend/src/assets/icons/save.svg
new file mode 100644
index 0000000000..0f70d019f4
--- /dev/null
+++ b/frontend/src/assets/icons/save.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>save</title>
+<g id="save">
+	<path id="形状结合" class="st0" d="M22,1c1.4,0,2.4,0.3,3,1c0.9,1,4,4.8,5,6c0.7,0.8,1,1.8,1,3v17c0,1.7-1.3,3-3,3H4
+		c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3H22z M6,4H5C4.4,4,4,4.4,4,5v22c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V10.5l-5-5.9V11
+		c0,0.6-0.4,1-1,1H7c-0.6,0-1-0.4-1-1V4z M16,15c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S13.2,15,16,15z M16,18c-1.1,0-2,0.9-2,2
+		s0.9,2,2,2s2-0.9,2-2S17.1,18,16,18z M20,4H9v5h11V4z"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/share.svg b/frontend/src/assets/icons/share.svg
new file mode 100644
index 0000000000..8919d98ba2
--- /dev/null
+++ b/frontend/src/assets/icons/share.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M25,2c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4S27.2,2,25,2z M7,12c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4
+	S9.2,12,7,12z M25,22c-2.2,0-4,1.7-4,4s1.8,4,4,4s4-1.7,4-4S27.1,22,25,22z M11.7,12.4l6.8-4.2l1.5,2.6L13.2,15L11.7,12.4z
+	 M13.6,17.7l6.9,4.1L19,24.3l-6.9-4.1C12.1,20.2,13.6,17.7,13.6,17.7z"/>
+</svg>
diff --git a/frontend/src/assets/icons/spinner.svg b/frontend/src/assets/icons/spinner.svg
new file mode 100644
index 0000000000..661a41df55
--- /dev/null
+++ b/frontend/src/assets/icons/spinner.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M13,29c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3S13,27.3,13,29z M13,3c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3
+	S13,1.3,13,3z M29,13c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S30.7,13,29,13z M0,16c0,1.7,1.3,3,3,3s3-1.3,3-3s-1.3-3-3-3S0,14.3,0,16
+	z M23.1,4.7c-0.8,0.8-1.1,1.9-0.8,2.9c0.3,1,1.1,1.8,2.1,2.1s2.1,0,2.9-0.8c1.2-1.2,1.2-3.1,0-4.2S24.2,3.5,23.1,4.7z M23.1,23.1
+	C22.3,23.8,22,25,22.3,26c0.3,1.1,1.1,1.9,2.2,2.2c1.1,0.3,2.2-0.1,2.9-0.9c1.2-1.2,1.2-3.1,0-4.2C26.1,21.9,24.2,21.9,23.1,23.1z
+	 M8.9,4.7C8.2,3.9,7.1,3.6,6,3.9C5,4.2,4.2,5,3.9,6s0,2.1,0.8,2.9C5.4,9.7,6.6,10,7.6,9.7s1.8-1.1,2.1-2.1S9.7,5.4,8.9,4.7z"/>
+</svg>
diff --git a/frontend/src/assets/icons/unlock.svg b/frontend/src/assets/icons/unlock.svg
new file mode 100644
index 0000000000..78ac7404fd
--- /dev/null
+++ b/frontend/src/assets/icons/unlock.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>unlock</title>
+<g id="unlock">
+	<path id="形状结合" class="st0" d="M8,8c0-4.4,3.6-8,8-8c4.1,0,7.6,3,8,6.9c0.1,0.6-0.2,1.8-1.5,1.8c-1.3,0-1.6-1-1.7-1.6
+		C20.3,4.8,18.3,3,16,3c-2.8,0-5,2.5-5,5.6V12h14.3c2,0,3.7,1.8,3.7,4v12c0,2.2-1.7,4-3.7,4H6.7c-2,0-3.7-1.8-3.7-4V16
+		c0-2.2,1.7-4,3.7-4H8V8z M25,15H7c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h18c0.6,0,1-0.4,1-1V16C26,15.4,25.6,15,25,15z"/>
+</g>
+</svg>
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 766378d783..7a14775954 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -8,6 +8,7 @@ import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import Icon from '../../components/icon';
 
 const propTypes = {
   isLocked: PropTypes.bool.isRequired,
@@ -90,11 +91,11 @@ class FileToolbar extends React.Component {
       if (!isLocked) {
         showLockUnlockBtn = true;
         lockUnlockText = gettext('Lock');
-        lockUnlockIcon = 'sf3-font sf3-font-lock';
+        lockUnlockIcon = 'lock';
       } else if (lockedByMe) {
         showLockUnlockBtn = true;
         lockUnlockText = gettext('Unlock');
-        lockUnlockIcon = 'sf3-font sf3-font-unlock';
+        lockUnlockIcon = 'unlock';
       }
     }
 
@@ -117,13 +118,13 @@ class FileToolbar extends React.Component {
           {fileType == 'PDF' && (
             <IconButton
               id="seafile-pdf-print"
-              icon="sf3-font sf3-font-print"
+              icon="print"
               text={gettext('Print')}
             />
           )}
           <IconButton
             id="open-parent-folder"
-            icon="sf3-font sf3-font-folder-open"
+            icon="open-folder"
             text={gettext('Open parent folder')}
             tag="a"
             href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`}
@@ -139,7 +140,7 @@ class FileToolbar extends React.Component {
           {showShareBtn && (
             <IconButton
               id="share-file"
-              icon='sf3-font sf3-font-share'
+              icon='share'
               text={gettext('Share')}
               onClick={this.toggleShareDialog}
             />
@@ -147,26 +148,26 @@ class FileToolbar extends React.Component {
 
           {(canEditFile && fileType != 'SDoc' && !err) &&
             (this.props.isSaving ?
-              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                <i className='sf3-font sf3-font-spinner'/>
+              <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                <Icon symbol="spinner" />
               </button>
               :
               (this.props.needSave ?
                 <IconButton
                   text={gettext('Save')}
-                  id={'saveButton'}
-                  icon='sf3-font sf3-font-save'
+                  id='save-file'
+                  icon='save'
                   onClick={this.props.onSave}
                 />
                 :
-                <button type='button' className='btn btn-icon btn-secondary btn-active' disabled>
-                  <i className='sf3-font sf3-font-save'/>
+                <button type='button' className='btn btn-icon btn-secondary' disabled>
+                  <Icon symbol="save" />
                 </button>
               ))}
           {canDownloadFile && (
             <IconButton
               id="download-file"
-              icon="sf3-font sf3-font-download1"
+              icon="download"
               text={gettext('Download')}
               tag="a"
               href="?dl=1"
@@ -174,22 +175,26 @@ class FileToolbar extends React.Component {
           )}
           <IconButton
             id="file-details"
-            icon='sf3-font sf3-font-info1'
+            icon='info'
             text={gettext('Details')}
             onClick={this.props.toggleDetailsPanel}
           />
           {filePerm == 'rw' && (
             <IconButton
               id="open-via-client"
-              icon="sf3-font sf3-font-desktop"
+              icon="client"
               text={gettext('Open via Client')}
               tag="a"
               href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
             />
           )}
           <ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
-            <DropdownToggle className="file-toolbar-more-operations" aria-label={gettext('More operations')}>
-              <span className="sf3-font sf3-font-more-vertical"></span>
+            <DropdownToggle
+              className="file-toolbar-more-operations btn-icon"
+              aria-label={gettext('More operations')}
+              title={gettext('More operations')}
+            >
+              <Icon symbol="more-vertical" />
             </DropdownToggle>
             <DropdownMenu right={true}>
               {filePerm == 'rw' && (
@@ -205,25 +210,27 @@ class FileToolbar extends React.Component {
           <ButtonGroup >
             {(canEditFile && fileType != 'SDoc' && !err) &&
                 (this.props.isSaving ?
-                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                  <button type='button' aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary'}>
+                    <Icon symbol="spinner" />
                   </button>
                   :
                   (this.props.needSave ?
                     <IconButton
                       text={gettext('Save')}
-                      id={'saveButton'}
-                      icon='sf3-font sf3-font-save'
+                      id="save-file"
+                      icon='save'
                       onClick={this.props.onSave}
                     />
                     :
-                    <button type='button' className={'btn btn-icon btn-secondary btn-active'} disabled>
-                      <i className={'sf3-font sf3-font-save'}/>
+                    <button type='button' className={'btn btn-icon btn-secondary'} disabled>
+                      <Icon symbol="save" />
                     </button>
                   ))}
           </ButtonGroup>
 
-          <DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More operations')}></DropdownToggle>
+          <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
+            <Icon symbol="more-vertical" />
+          </DropdownToggle>
           <DropdownMenu right={true}>
             <DropdownItem>
               <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
diff --git a/frontend/src/components/icon-button.js b/frontend/src/components/icon-button.js
index b0777e4863..3e902d4a7a 100644
--- a/frontend/src/components/icon-button.js
+++ b/frontend/src/components/icon-button.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from 'reactstrap';
+import Icon from './icon';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -25,11 +26,12 @@ class IconButton extends React.Component {
       tooltipOpen: !this.state.tooltipOpen
     });
   };
+
   render() {
     const className = 'btn-icon';
     const btnContent = (
       <React.Fragment>
-        <i className={this.props.icon}></i>
+        <Icon symbol={this.props.icon} />
         <Tooltip
           toggle={this.toggle}
           delay={{ show: 0, hide: 0 }}
diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index 2c37efe5aa..f11dd7c652 100644
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -13,6 +13,14 @@ body {
   flex-shrink: 0;
 }
 
+.file-view-header .btn {
+  color: #666;
+}
+
+.file-view-header .btn#save-file {
+  color: #eb8205;
+}
+
 .file-view-header .file-toolbar-more-operations {
   height: 38px;
   padding: 0;
diff --git a/frontend/src/pages/markdown-editor/css/header-toolbar.css b/frontend/src/pages/markdown-editor/css/header-toolbar.css
index 2860a9e5be..b01fad8ae2 100644
--- a/frontend/src/pages/markdown-editor/css/header-toolbar.css
+++ b/frontend/src/pages/markdown-editor/css/header-toolbar.css
@@ -20,6 +20,10 @@
   margin-right: 10px;
 }
 
+.sf-md-viewer-topbar .btn {
+  color: #666;
+}
+
 .collab-users-dropdown.dropdown {
   margin-right: 6px;
 }
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
index 07d259eef1..0a1e400dfd 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/button-item.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'reactstrap';
+import Icon from '../../../components/icon';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -100,7 +101,7 @@ class ButtonItem extends React.Component {
         onClick ={this.onClick}
         onMouseDown={this.onMouseDown}
       >
-        <i className={icon} />
+        <Icon symbol={icon} />
         <Tooltip target={id} isOpen={tooltipOpen} delay={delay} placement='bottom' toggle={this.toggle}>
           {text}
         </Tooltip>
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index a6e856c297..e1a898054b 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -6,6 +6,7 @@ import ButtonItem from './button-item';
 import CollabUsersButton from './collab-users-button';
 import MoreMenu from './more-menu';
 import FileInfo from './file-info';
+import Icon from '../../../components/icon';
 
 import '../css/header-toolbar.css';
 
@@ -80,13 +81,13 @@ class HeaderToolbar extends React.Component {
                 <ButtonItem
                   text={gettext('Open parent directory')}
                   id='parentDirectory'
-                  icon='sf3-font sf3-font-folder-open'
+                  icon='open-folder'
                   onMouseDown={this.openParentDirectory}
                 />
                 {(canLockUnlockFile && !isLocked) && (
                   <ButtonItem
                     id="lock-unlock-file"
-                    icon='sf3-font sf3-font-lock'
+                    icon='lock'
                     text={gettext('Lock')}
                     onMouseDown={this.props.toggleLockFile}
                   />
@@ -94,7 +95,7 @@ class HeaderToolbar extends React.Component {
                 {(canLockUnlockFile && lockedByMe) && (
                   <ButtonItem
                     id="lock-unlock-file"
-                    icon='sf3-font sf3-font-unlock'
+                    icon='unlock'
                     text={gettext('Unlock')}
                     onMouseDown={this.props.toggleLockFile}
                   />
@@ -103,22 +104,28 @@ class HeaderToolbar extends React.Component {
                   <ButtonItem
                     id='shareBtn'
                     text={gettext('Share')}
-                    icon='sf3-font sf3-font-share'
+                    icon='share'
                     onMouseDown={this.props.toggleShareLinkDialog}
                   />
                 )}
                 {saving ?
                   <button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                   </button>
                   :
-                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save' disabled={!contentChanged}
-                    onMouseDown={this.props.onSaveEditorContent} isActive={contentChanged}/>
+                  <ButtonItem
+                    text={gettext('Save')}
+                    id={'saveButton'}
+                    icon='save'
+                    disabled={!contentChanged}
+                    onMouseDown={this.props.onSaveEditorContent}
+                    isActive={contentChanged}
+                  />
                 }
                 {canDownloadFile && (
                   <ButtonItem
                     id="download-file"
-                    icon="sf3-font sf3-font-download1"
+                    icon="download"
                     text={gettext('Download')}
                     onClick={this.downloadFile}
                   />
@@ -126,7 +133,7 @@ class HeaderToolbar extends React.Component {
                 {this.props.fileInfo.permission == 'rw' && (
                   <ButtonItem
                     id="open-via-client"
-                    icon="sf3-font sf3-font-desktop"
+                    icon="client"
                     text={gettext('Open via Client')}
                     onClick={this.openFileViaClient}
                   />
@@ -153,11 +160,17 @@ class HeaderToolbar extends React.Component {
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} aria-label={gettext('Saving...')} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                   </button>
                   :
-                  <ButtonItem text={gettext('Save')} id={'saveButton'} icon='sf3-font sf3-font-save' disabled={!contentChanged}
-                    onMouseDown={this.props.onSaveEditorContent} isActive={contentChanged}/>
+                  <ButtonItem
+                    text={gettext('Save')}
+                    id={'saveButton'}
+                    icon='save'
+                    disabled={!contentChanged}
+                    onMouseDown={this.props.onSaveEditorContent}
+                    isActive={contentChanged}
+                  />
                 }
               </ButtonGroup>
               <MoreMenu
@@ -194,10 +207,17 @@ class HeaderToolbar extends React.Component {
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                   </button>
                   :
-                  <ButtonItem id={'saveButton'} text={gettext('Save')} icon='sf3-font sf3-font-save' onMouseDown={this.props.onSaveEditorContent} disabled={!contentChanged} isActive={contentChanged} />
+                  <ButtonItem
+                    id={'saveButton'}
+                    text={gettext('Save')}
+                    icon='save'
+                    onMouseDown={this.props.onSaveEditorContent}
+                    disabled={!contentChanged}
+                    isActive={contentChanged}
+                  />
                 }
               </ButtonGroup>
               <MoreMenu
@@ -216,13 +236,13 @@ class HeaderToolbar extends React.Component {
               <ButtonGroup>
                 {saving ?
                   <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                    <i className='sf3-font sf3-font-spinner'/>
+                    <Icon symbol="spinner" />
                   </button>
                   :
                   <ButtonItem
                     id={'saveButton'}
                     text={gettext('Save')}
-                    icon='sf3-font sf3-font-save'
+                    icon='save'
                     onMouseDown={this.props.onSaveEditorContent}
                     disabled={!contentChanged}
                     isActive={contentChanged}
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
index 61dd1728eb..6c76930417 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/more-menu.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { EXTERNAL_EVENTS, EventBus } from '@seafile/seafile-editor';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Tooltip } from 'reactstrap';
 import { gettext, canGenerateShareLink } from '../../../utils/constants';
+import Icon from '../../../components/icon';
 
 const { canDownloadFile } = window.app.pageOptions;
 
@@ -51,7 +52,7 @@ class MoreMenu extends React.PureComponent {
     return (
       <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1">
         <DropdownToggle id="moreButton" aria-label={gettext('More operations')}>
-          <i className="sf3-font sf3-font-more-vertical"/>
+          <Icon symbol="more-vertical" />
           <Tooltip toggle={this.tooltipToggle} delay={{ show: 0, hide: 0 }} target="moreButton" placement='bottom' isOpen={this.state.tooltipOpen}>{gettext('More')}
           </Tooltip>
         </DropdownToggle>