diff --git a/packages/web/package.json b/packages/web/package.json
index 7802975bc..a55861dad 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -6,6 +6,7 @@
     "@dbgate/datalib": "^0.1.0",
     "@dbgate/engines": "^0.1.0",
     "@dbgate/sqltree": "^0.1.0",
+    "@mdi/font": "^5.8.55",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/packages/web/src/IconSpan.js b/packages/web/src/IconSpan.js
new file mode 100644
index 000000000..48441bbdf
--- /dev/null
+++ b/packages/web/src/IconSpan.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function IconSpan({ icon }) {
+  return <span className={icon} />;
+}
diff --git a/packages/web/src/datagrid/DataGridToolbar.js b/packages/web/src/datagrid/DataGridToolbar.js
index 0ef2d037a..e7052582c 100644
--- a/packages/web/src/datagrid/DataGridToolbar.js
+++ b/packages/web/src/datagrid/DataGridToolbar.js
@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function DataGridToolbar({ reload, grider, save }) {
   return (
     <>
-      <ToolbarButton onClick={reload} icon="fas fa-sync">
+      <ToolbarButton onClick={reload} icon="mdi mdi-reload">
         Refresh
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="fas fa-undo">
+      <ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="mdi mdi-undo">
         Undo
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="fas fa-redo">
+      <ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="mdi mdi-redo">
         Redo
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.allowSave} onClick={save} icon="fas fa-save">
+      <ToolbarButton disabled={!grider.allowSave} onClick={save} icon="mdi mdi-save">
         Save
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="fas fa-times">
+      <ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="mdi mdi-close">
         Revert
       </ToolbarButton>
     </>
diff --git a/packages/web/src/datagrid/ReferenceHeader.js b/packages/web/src/datagrid/ReferenceHeader.js
index f8fede1e7..ca1a24046 100644
--- a/packages/web/src/datagrid/ReferenceHeader.js
+++ b/packages/web/src/datagrid/ReferenceHeader.js
@@ -36,7 +36,7 @@ export default function ReferenceHeader({ reference, onClose }) {
           {reference.columns.map((x) => x.baseName).join(', ')}]
         </HeaderText>
       </Header>
-      <ToolbarButton icon="fas fa-times" onClick={onClose} patchY={6}>
+      <ToolbarButton icon="mdi mdi-close" onClick={onClose} patchY={6}>
         Close
       </ToolbarButton>
     </Container>
diff --git a/packages/web/src/freetable/MacroDetail.js b/packages/web/src/freetable/MacroDetail.js
index 4acc3b3bf..eff52fbf8 100644
--- a/packages/web/src/freetable/MacroDetail.js
+++ b/packages/web/src/freetable/MacroDetail.js
@@ -67,10 +67,10 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
         <HeaderText>{selectedMacro.title}</HeaderText>
       </Header>
       <Buttons>
-        <ToolbarButton icon="fas fa-check" onClick={onExecute} patchY={6}>
+        <ToolbarButton icon="mdi mdi-play" onClick={onExecute} patchY={6}>
           Execute
         </ToolbarButton>
-        <ToolbarButton icon="fas fa-times" onClick={() => setSelectedMacro(null)} patchY={6}>
+        <ToolbarButton icon="mdi mdi-close" onClick={() => setSelectedMacro(null)} patchY={6}>
           Close
         </ToolbarButton>
       </Buttons>
diff --git a/packages/web/src/index.js b/packages/web/src/index.js
index 704655309..6ee82de9f 100644
--- a/packages/web/src/index.js
+++ b/packages/web/src/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import '@mdi/font/css/materialdesignicons.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/packages/web/src/query/QueryToolbar.js b/packages/web/src/query/QueryToolbar.js
index 1b8dcdbf6..a2ec15c62 100644
--- a/packages/web/src/query/QueryToolbar.js
+++ b/packages/web/src/query/QueryToolbar.js
@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format, isConnected, kill }) {
   return (
     <>
-      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
+      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="mdi mdi-play">
         Execute
       </ToolbarButton>
-      <ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
+      <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
         Cancel
       </ToolbarButton>
-      <ToolbarButton disabled={!isConnected} onClick={kill} icon="fas fa-times">
+      <ToolbarButton disabled={!isConnected} onClick={kill} icon="mdi mdi-close">
         Kill
       </ToolbarButton>
-      <ToolbarButton onClick={save} icon="fas fa-save">
+      <ToolbarButton onClick={save} icon="mdi mdi-save">
         Save
       </ToolbarButton>
-      <ToolbarButton onClick={format} icon="fas fa-code">
+      <ToolbarButton onClick={format} icon="mdi mdi-code-tags-check">
         Format
       </ToolbarButton>
     </>
diff --git a/packages/web/src/query/ShellToolbar.js b/packages/web/src/query/ShellToolbar.js
index 00177a32f..d0d92e4ea 100644
--- a/packages/web/src/query/ShellToolbar.js
+++ b/packages/web/src/query/ShellToolbar.js
@@ -4,13 +4,13 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function ShellToolbar({ execute, cancel, busy, edit, editAvailable }) {
   return (
     <>
-      <ToolbarButton disabled={busy} onClick={execute} icon="fas fa-play">
+      <ToolbarButton disabled={busy} onClick={execute} icon="mdi mdi-play">
         Execute
       </ToolbarButton>
-      <ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
+      <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
         Cancel
       </ToolbarButton>
-      <ToolbarButton disabled={!editAvailable} onClick={edit} icon="fas fa-edit">
+      <ToolbarButton disabled={!editAvailable} onClick={edit} icon="mdi mdi-comment-edit">
         Show wizard
       </ToolbarButton>
     </>
diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js
index 18ffac867..8abdf3704 100644
--- a/packages/web/src/widgets/Toolbar.js
+++ b/packages/web/src/widgets/Toolbar.js
@@ -87,19 +87,20 @@ export default function ToolBar({ toolbarPortalRef }) {
         </ToolbarButton>
       ))}
       {config.runAsPortal == false && (
-        <ToolbarButton onClick={modalState.open} icon="fas fa-database">
+        <ToolbarButton onClick={modalState.open} icon="mdi mdi-database-plus">
           Add connection
         </ToolbarButton>
       )}
-      <ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
+      <ToolbarButton onClick={newQuery} icon="mdi mdi-file">
         New Query
       </ToolbarButton>
-      <ToolbarButton onClick={newFreeTable} icon="fas fa-table">
+      <ToolbarButton onClick={newFreeTable} icon="mdi mdi-table">
         Free table editor
       </ToolbarButton>
-      <ToolbarButton onClick={showImport} icon="fas fa-file-upload">
+      <ToolbarButton onClick={showImport} icon="mdi mdi-file-upload">
         Import data
       </ToolbarButton>
+
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );
diff --git a/packages/web/src/widgets/ToolbarButton.js b/packages/web/src/widgets/ToolbarButton.js
index 0eaa6f079..6f64448c4 100644
--- a/packages/web/src/widgets/ToolbarButton.js
+++ b/packages/web/src/widgets/ToolbarButton.js
@@ -32,6 +32,7 @@ const ButtonDiv = styled.div`
 
 const StyledIconSpan = styled.span`
   margin-right: 5px;
+  // font-size: 18px;
   color: ${(props) => (props.disabled ? 'gray' : 'blue')};
 `;
 
@@ -42,7 +43,6 @@ const ButtonDivInner = styled.div`
 `;
 
 export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
-  const Icon = icon;
   return (
     <ButtonDiv
       onClick={() => {
@@ -51,9 +51,9 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
       disabled={disabled}
     >
       <ButtonDivInner patchY={patchY}>
-        {Icon && (
+        {icon && (
           <StyledIconSpan disabled={disabled}>
-            <i className={icon} />
+            <span className={icon} />
           </StyledIconSpan>
         )}
         {children}
diff --git a/yarn.lock b/yarn.lock
index e8d6a0e07..f40e81635 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1264,6 +1264,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@mdi/font@^5.8.55":
+  version "5.8.55"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.8.55.tgz#1464155bcbc8a6e4af6dffd611fe8e38e09af285"
+  integrity sha512-8mrwfFBsmj+D67ZiGQSe5TU/lcWCtDyli2eshQ2fvLCZGRPqFMM23YQp4+JMOTpk5yMZKTeAwNWIYfITy76OHA==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"