diff --git a/docs/developer-guide.md b/docs/developer-guide.md
index 11e749c2..1dd67dc1 100644
--- a/docs/developer-guide.md
+++ b/docs/developer-guide.md
@@ -201,14 +201,11 @@ YASGUI is built as a monorepo with four main packages, each serving a specific p
 - DOM manipulation utilities
 - Local storage abstraction
 - Common helper functions
-- SVG icon rendering
 - DOMPurify integration for XSS protection
 
 **Exports:**
 - `Storage`: localStorage abstraction with namespacing
 - `addClass`, `removeClass`, `hasClass`: DOM class utilities
-- `drawSvgStringAsElement`: SVG helper
-- `drawFontAwesomeIconAsSvg`: Icon rendering
 
 #### @matdata/yasqe (SPARQL Query Editor)
 
diff --git a/package-lock.json b/package-lock.json
index 2818d9db..ef482010 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "packages/*"
       ],
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^7.1.0",
         "@matdata/yasgui-graph-plugin": "^1.4.1",
         "@matdata/yasgui-table-plugin": "^1.2.0",
         "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -1095,23 +1096,30 @@
       }
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
-      "hasInstallScript": true,
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
+      "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz",
+      "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
-      "hasInstallScript": true,
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
+      "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
       "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "7.1.0"
       },
       "engines": {
         "node": ">=6"
@@ -8974,7 +8982,7 @@
       "version": "4.6.1",
       "license": "MIT",
       "dependencies": {
-        "@fortawesome/free-solid-svg-icons": "^5.14.0",
+        "@fortawesome/free-solid-svg-icons": "^7.1.0",
         "@json2csv/plainjs": "^7.0.4",
         "@matdata/yasgui-utils": "^4.6.1",
         "@matdata/yasqe": "^4.6.1",
diff --git a/package.json b/package.json
index 3571fea1..dd52f919 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     ]
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.1.0",
     "@matdata/yasgui-graph-plugin": "^1.4.1",
     "@matdata/yasgui-table-plugin": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 013b5bd0..5afefcb1 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -3,36 +3,6 @@ export { default as Storage } from "./Storage";
 
 const { sanitize } = DOMPurify;
 
-export function drawSvgStringAsElement(svgString: string) {
-  if (svgString && svgString.trim().indexOf("<svg") == 0) {
-    //no style passed via config. guess own styles
-    var parser = new DOMParser();
-    var dom = parser.parseFromString(svgString, "text/xml");
-    var svg = dom.documentElement;
-    svg.setAttribute("aria-hidden", "true");
-
-    var svgContainer = document.createElement("div");
-    svgContainer.className = "svgImg";
-    svgContainer.appendChild(svg);
-    return svgContainer;
-  }
-  throw new Error("No svg string given. Cannot draw");
-}
-export interface FaIcon {
-  width: number;
-  height: number;
-  svgPathData: string;
-}
-
-/**
- * Draws font fontawesome icon as svg. This is a lot more lightweight then the option that is offered by fontawesome
- * @param faIcon
- * @returns
- */
-export function drawFontAwesomeIconAsSvg(faIcon: FaIcon) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${faIcon.width} ${faIcon.height}" aria-hidden="true"><path fill="currentColor" d="${faIcon.svgPathData}"></path></svg>`;
-}
-
 export function hasClass(el: Element | undefined, className: string) {
   if (!el) return;
   if (el.classList) return el.classList.contains(className);
diff --git a/packages/yasgui/src/Tab.ts b/packages/yasgui/src/Tab.ts
index 90ef31ce..3b0116b7 100644
--- a/packages/yasgui/src/Tab.ts
+++ b/packages/yasgui/src/Tab.ts
@@ -18,24 +18,6 @@ import { getWorkspaceBackend } from "./queryManagement/backends/getWorkspaceBack
 import { asWorkspaceBackendError } from "./queryManagement/backends/errors";
 import { normalizeQueryFilename } from "./queryManagement/normalizeQueryFilename";
 
-// Layout orientation toggle icons
-const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
-  <rect x="2" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
-  <rect x="13" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
-</svg>`;
-
-const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
-  <rect x="2" y="2" width="20" height="8" stroke="currentColor" stroke-width="2" fill="none"/>
-  <rect x="2" y="12" width="20" height="10" stroke="currentColor" stroke-width="2" fill="none"/>
-</svg>`;
-
-// Overflow dropdown icon (three horizontal dots / ellipsis menu)
-const OVERFLOW_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <circle cx="5" cy="12" r="2"/>
-  <circle cx="12" cy="12" r="2"/>
-  <circle cx="19" cy="12" r="2"/>
-</svg>`;
-
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
 }
@@ -569,8 +551,11 @@ export class Tab extends EventEmitter {
     if (!this.orientationToggleButton) return;
 
     // Show the icon for the layout we'll switch TO (not the current layout)
+    // fa-columns for horizontal (side-by-side), fa-grip-lines for vertical (stacked)
     this.orientationToggleButton.innerHTML =
-      this.currentOrientation === "vertical" ? HORIZONTAL_LAYOUT_ICON : VERTICAL_LAYOUT_ICON;
+      this.currentOrientation === "vertical"
+        ? '<i class="fas fa-grip-lines-vertical"></i>'
+        : '<i class="fas fa-grip-lines"></i>';
     this.orientationToggleButton.title =
       this.currentOrientation === "vertical" ? "Switch to horizontal layout" : "Switch to vertical layout";
   }
@@ -746,7 +731,7 @@ export class Tab extends EventEmitter {
     if (!this.endpointOverflowButton) {
       this.endpointOverflowButton = document.createElement("button");
       addClass(this.endpointOverflowButton, "endpointOverflowBtn");
-      this.endpointOverflowButton.innerHTML = OVERFLOW_ICON;
+      this.endpointOverflowButton.innerHTML = '<i class="fas fa-ellipsis-vertical"></i>';
       this.endpointOverflowButton.title = "More endpoints";
       this.endpointOverflowButton.setAttribute("aria-label", "More endpoint options");
       this.endpointOverflowButton.setAttribute("aria-haspopup", "true");
@@ -1310,7 +1295,13 @@ export class Tab extends EventEmitter {
     }
     this.yasqe = new Yasqe(this.yasqeWrapperEl, yasqeConf);
 
-    this.initSaveManagedQueryIcon();
+    // Hook up the save button to managed query save
+    this.yasqe.on("saveManagedQuery", () => {
+      void this.saveManagedQueryOrSaveAsManagedQuery();
+    });
+
+    // Show/hide save button based on workspace configuration
+    this.updateSaveButtonVisibility();
 
     this.yasqe.on("blur", this.handleYasqeBlur);
     this.yasqe.on("query", this.handleYasqeQuery);
@@ -1327,6 +1318,13 @@ export class Tab extends EventEmitter {
     this.attachYasqeMouseHandler();
   }
 
+  private updateSaveButtonVisibility() {
+    if (!this.yasqe) return;
+    const workspaces = this.yasgui.persistentConfig.getWorkspaces();
+    const hasWorkspaces = workspaces && workspaces.length > 0;
+    this.yasqe.setSaveButtonVisible(hasWorkspaces);
+  }
+
   private initSaveManagedQueryIcon() {
     if (!this.yasqe) return;
 
@@ -1345,10 +1343,7 @@ export class Tab extends EventEmitter {
     saveBtn.className = "yasqe_saveManagedQueryButton";
     saveBtn.title = "Save managed query";
     saveBtn.setAttribute("aria-label", "Save managed query");
-    saveBtn.innerHTML =
-      '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
-      '<path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zm-1 2l3 3h-3V5zM7 5h7v4H7V5zm5 16H7v-6h5v6zm2 0v-6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6H5V5h1v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5h1v5h4v11h-6z"/>' +
-      "</svg>";
+    saveBtn.innerHTML = '<i class="fas fa-save" aria-hidden="true"></i>';
 
     saveBtn.addEventListener("click", (e) => {
       e.preventDefault();
diff --git a/packages/yasgui/src/TabElements.scss b/packages/yasgui/src/TabElements.scss
index 10f9bfab..6bdc8080 100644
--- a/packages/yasgui/src/TabElements.scss
+++ b/packages/yasgui/src/TabElements.scss
@@ -25,13 +25,11 @@ $minTabHeight: 35px;
       &:hover,
       &:focus-visible {
         color: var(--yasgui-button-hover, #000);
-        fill: var(--yasgui-button-hover, #000);
         background: var(--yasgui-bg-secondary, #f7f7f7);
       }
 
-      svg {
-        width: 20px;
-        height: 20px;
+      i {
+        font-size: 20px;
       }
     }
 
@@ -60,7 +58,6 @@ $minTabHeight: 35px;
       background: transparent;
       border: none;
       color: var(--yasgui-button-text, #505050);
-      fill: var(--yasgui-button-text, #505050);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -68,14 +65,8 @@ $minTabHeight: 35px;
 
       &:hover {
         color: var(--yasgui-button-hover, #000);
-        fill: var(--yasgui-button-hover, #000);
         background: var(--yasgui-bg-secondary, #f7f7f7);
       }
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
     }
 
     .addTab {
diff --git a/packages/yasgui/src/TabElements.ts b/packages/yasgui/src/TabElements.ts
index a9a380fe..afe3dabd 100644
--- a/packages/yasgui/src/TabElements.ts
+++ b/packages/yasgui/src/TabElements.ts
@@ -4,14 +4,6 @@ import { hasClass, addClass, removeClass } from "@matdata/yasgui-utils";
 import sortablejs from "sortablejs";
 import "./TabElements.scss";
 
-// Theme toggle icons
-const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
-</svg>`;
-
-const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
-</svg>`;
 export interface TabList {}
 export class TabListEl {
   private tabList: TabList;
@@ -323,7 +315,7 @@ export class TabList {
     queryBrowserButton.className = "queryBrowserToggle";
     queryBrowserButton.setAttribute("aria-label", "Open query browser");
     queryBrowserButton.title = "Open query browser";
-    queryBrowserButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>`;
+    queryBrowserButton.innerHTML = '<i class="fas fa-bars"></i>';
     queryBrowserButton.addEventListener("click", () => {
       this.yasgui.queryBrowser.toggle(queryBrowserButton);
     });
diff --git a/packages/yasgui/src/TabSettingsModal.scss b/packages/yasgui/src/TabSettingsModal.scss
index 112dca2f..f3391f93 100644
--- a/packages/yasgui/src/TabSettingsModal.scss
+++ b/packages/yasgui/src/TabSettingsModal.scss
@@ -9,11 +9,6 @@
   align-items: center;
   justify-content: center;
 
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-
   &:hover {
     opacity: 0.7;
   }
diff --git a/packages/yasgui/src/TabSettingsModal.ts b/packages/yasgui/src/TabSettingsModal.ts
index b6388ce2..01901126 100644
--- a/packages/yasgui/src/TabSettingsModal.ts
+++ b/packages/yasgui/src/TabSettingsModal.ts
@@ -7,19 +7,6 @@ import * as OAuth2Utils from "./OAuth2Utils";
 import PersistentConfig from "./PersistentConfig";
 import { WorkspaceSettingsForm } from "./queryManagement/WorkspaceSettingsForm";
 
-// Theme toggle icons
-const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
-</svg>`;
-
-const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
-</svg>`;
-
-const SETTINGS_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-7.43 2.52c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
-</svg>`;
-
 const AcceptOptionsMap: { key: string; value: string }[] = [
   { key: "JSON", value: "application/sparql-results+json" },
   { key: "XML", value: "application/sparql-results+xml" },
@@ -67,7 +54,7 @@ export default class TabSettingsModal {
     addClass(this.settingsButton, "tabContextButton");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
-    this.settingsButton.innerHTML = SETTINGS_ICON;
+    this.settingsButton.innerHTML = '<i class="fas fa-cog"></i>';
     this.settingsButton.onclick = () => this.open();
     controlBarEl.appendChild(this.settingsButton);
 
@@ -89,9 +76,7 @@ export default class TabSettingsModal {
     this.prefixButton = document.createElement("button");
     this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
     this.prefixButton.title = "Insert saved prefixes into query";
-    this.prefixButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
-    </svg>`;
+    this.prefixButton.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i>';
     addClass(this.prefixButton, "tabContextButton", "prefixButton");
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
@@ -1526,9 +1511,9 @@ export default class TabSettingsModal {
 
   private getThemeToggleIcon(): string {
     const currentTheme = this.tab.yasgui.getTheme();
-    // In dark mode, show moon icon (clicking will switch to light)
-    // In light mode, show sun icon (clicking will switch to dark)
-    return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
+    // In dark mode, show lightbulb icon (clicking will switch to light)
+    // In light mode, show moon icon (clicking will switch to dark)
+    return currentTheme === "dark" ? '<i class="fas fa-lightbulb"></i>' : '<i class="fas fa-moon"></i>';
   }
 
   private drawImportExportSettings(container: HTMLElement) {
diff --git a/packages/yasgui/src/endpointSelect.scss b/packages/yasgui/src/endpointSelect.scss
index 247c3f4a..5a44188a 100644
--- a/packages/yasgui/src/endpointSelect.scss
+++ b/packages/yasgui/src/endpointSelect.scss
@@ -186,9 +186,8 @@
     flex-shrink: 0;
     transition: all 0.2s ease;
 
-    svg {
-      width: 16px;
-      height: 16px;
+    i {
+      font-size: 16px;
     }
 
     &:hover {
diff --git a/packages/yasgui/src/index.scss b/packages/yasgui/src/index.scss
index 34d24f26..cd13bc33 100644
--- a/packages/yasgui/src/index.scss
+++ b/packages/yasgui/src/index.scss
@@ -1,3 +1,7 @@
+// Font Awesome icons
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+
 // Main YASGUI container - fills 100% of parent element
 // Parent element (typically body) should have height: 100%; width: 100%
 .yasgui {
diff --git a/packages/yasgui/src/queryManagement/QueryBrowser.scss b/packages/yasgui/src/queryManagement/QueryBrowser.scss
index 5486a1b7..34f85fec 100644
--- a/packages/yasgui/src/queryManagement/QueryBrowser.scss
+++ b/packages/yasgui/src/queryManagement/QueryBrowser.scss
@@ -84,9 +84,8 @@
       align-items: center;
       justify-content: center;
 
-      svg {
-        width: 20px;
-        height: 20px;
+      i {
+        font-size: 20px;
       }
 
       &:hover {
@@ -347,14 +346,11 @@
     }
 
     &__empty-icon {
-      width: 64px;
-      height: 64px;
       color: var(--yasgui-text-secondary, #999);
       opacity: 0.6;
 
-      svg {
-        width: 100%;
-        height: 100%;
+      i {
+        font-size: 64px;
       }
     }
 
diff --git a/packages/yasgui/src/queryManagement/QueryBrowser.ts b/packages/yasgui/src/queryManagement/QueryBrowser.ts
index e923d8f7..c331110b 100644
--- a/packages/yasgui/src/queryManagement/QueryBrowser.ts
+++ b/packages/yasgui/src/queryManagement/QueryBrowser.ts
@@ -147,9 +147,7 @@ export default class QueryBrowser {
     helpButton.type = "button";
     addClass(helpButton, "yasgui-query-browser__help");
     helpButton.setAttribute("aria-label", "Open documentation");
-    helpButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
-    </svg>`;
+    helpButton.innerHTML = '<i class="fas fa-circle-question"></i>';
     helpButton.addEventListener("click", () => {
       window.open(
         "https://yasgui-doc.matdata.eu/docs/user-guide#managed-queries-and-workspaces",
@@ -162,9 +160,7 @@ export default class QueryBrowser {
     closeButton.type = "button";
     addClass(closeButton, "yasgui-query-browser__close");
     closeButton.setAttribute("aria-label", "Close query browser");
-    closeButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
-    </svg>`;
+    closeButton.innerHTML = '<i class="fas fa-xmark"></i>';
     closeButton.addEventListener("click", () => this.close());
 
     headerButtons.appendChild(helpButton);
@@ -350,9 +346,7 @@ export default class QueryBrowser {
 
     const icon = document.createElement("div");
     addClass(icon, "yasgui-query-browser__empty-icon");
-    icon.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
-    </svg>`;
+    icon.innerHTML = '<i class="fas fa-file-lines"></i>';
 
     const title = document.createElement("h3");
     addClass(title, "yasgui-query-browser__empty-title");
diff --git a/packages/yasgui/src/tab.scss b/packages/yasgui/src/tab.scss
index ee8fd600..e530e8cb 100644
--- a/packages/yasgui/src/tab.scss
+++ b/packages/yasgui/src/tab.scss
@@ -140,35 +140,25 @@
     padding: 6px;
     cursor: pointer;
     color: var(--yasgui-button-text, #505050);
-    fill: var(--yasgui-button-text, #505050);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 
-    .svgImg {
-      width: 15px;
-      height: 15px;
-      font-family: initial;
-    }
-
-    svg {
-      width: 20px;
-      height: 20px;
+    i {
+      font-size: 16px;
     }
 
     &:hover {
       color: var(--yasgui-button-hover, black);
-      fill: var(--yasgui-button-hover, black);
     }
 
     // Responsive spacing - reduce padding on smaller screens
     @media (max-width: 768px) {
       padding: 2px;
 
-      svg {
-        width: 18px;
-        height: 18px;
+      i {
+        font-size: 18px;
       }
     }
   }
diff --git a/packages/yasgui/src/themes.scss b/packages/yasgui/src/themes.scss
index b94b20f3..17cadb6f 100644
--- a/packages/yasgui/src/themes.scss
+++ b/packages/yasgui/src/themes.scss
@@ -27,7 +27,7 @@
   --yasgui-input-border: rgba(0, 0, 0, 0.26);
   --yasgui-input-focus: #337ab7;
   --yasgui-label-color: rgba(0, 0, 0, 0.54);
-  --yasgui-tooltip-bg: rgba(0, 0, 0, 0.8);
+  --yasgui-tooltip-bg: rgba(0, 0, 0, 1);
   --yasgui-tooltip-text: #fff;
   --yasgui-error-color: #d32f2f;
   --yasgui-notification-bg: #eee;
@@ -77,7 +77,7 @@
   --yasgui-input-border: rgba(255, 255, 255, 0.15);
   --yasgui-input-focus: #4fc3f7;
   --yasgui-label-color: rgba(255, 255, 255, 0.6);
-  --yasgui-tooltip-bg: rgba(55, 55, 55, 0.95);
+  --yasgui-tooltip-bg: rgba(0, 0, 0, 1);
   --yasgui-tooltip-text: #d4d4d4;
   --yasgui-error-color: #f48771;
   --yasgui-notification-bg: #2d2d30;
@@ -183,14 +183,8 @@
 
     &:hover {
       color: var(--yasgui-button-hover);
-      fill: var(--yasgui-button-hover);
       background: var(--yasgui-bg-secondary);
     }
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
   }
 
   // Endpoint textbox theming
@@ -273,29 +267,25 @@
     background-color: var(--yasgui-resize-handle);
   }
 
-  .parseErrorIcon svg g {
-    fill: var(--yasgui-error-color);
-  }
-
   .cm-matchhighlight {
     background-color: var(--yasgui-match-highlight-bg);
   }
 
   // Yasqe buttons theming (share, query, fullscreen)
   .yasqe_buttons {
-    svg {
-      fill: var(--yasgui-button-text) !important;
+    i {
+      color: var(--yasgui-button-text) !important;
     }
 
     .yasqe_share {
-      &:hover svg {
-        fill: var(--yasgui-button-hover) !important;
+      &:hover i {
+        color: var(--yasgui-button-hover) !important;
       }
     }
 
     .yasqe_fullscreenButton {
-      &:hover svg {
-        fill: var(--yasgui-accent-color) !important;
+      &:hover i {
+        color: var(--yasgui-accent-color) !important;
       }
     }
 
@@ -491,19 +481,16 @@ li.CodeMirror-hint-active {
       color: var(--yasgui-accent-color) !important;
       border-color: var(--yasgui-accent-color) !important;
 
-      svg {
-        fill: var(--yasgui-accent-color) !important;
+      i {
         color: var(--yasgui-accent-color) !important;
       }
 
       &:hover {
         color: var(--yasgui-link-hover) !important;
         border-color: var(--yasgui-accent-color) !important;
-        fill: var(--yasgui-link-hover) !important;
 
-        svg {
+        i {
           color: var(--yasgui-link-hover) !important;
-          fill: var(--yasgui-link-hover) !important;
         }
       }
     }
diff --git a/packages/yasqe/src/defaults.ts b/packages/yasqe/src/defaults.ts
index 14ff4988..c3aeaf57 100644
--- a/packages/yasqe/src/defaults.ts
+++ b/packages/yasqe/src/defaults.ts
@@ -87,6 +87,10 @@ SELECT * WHERE {
         const yasqe: Yasqe = _yasqe;
         yasqe.getInputField().blur();
       },
+      F11: function (_yasqe: any) {
+        const yasqe: Yasqe = _yasqe;
+        yasqe.toggleFullscreen();
+      },
     },
 
     createShareableLink: function (yasqe: Yasqe) {
diff --git a/packages/yasqe/src/imgs.ts b/packages/yasqe/src/imgs.ts
deleted file mode 100644
index fc24e7c5..00000000
--- a/packages/yasqe/src/imgs.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export var query =
-  '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="81.9" width="72.9" version="1.1" y="0px" x="0px" viewBox="0 0 72.900002 81.900002"><path id="queryIcon" d="m69.6 35.2-60.3-34.3c-2.2-1.2-4.4-1.2-6.4 0s-2.9 3.4-2.9 5.6v68.8c0 2.2 1.2 4.4 2.9 5.6 1 0.5 2.2 1 3.4 1s2.2-0.5 2.9-1l60.3-34.3c2.2-1.2 3.4-3.4 3.4-5.6s-1.1-4.3-3.3-5.8z"/><path id="loadingIcon" d="m61.184 36.167-48.73-27.719c-1.7779-0.96976-3.5558-0.96976-5.172 0-1.6163 0.96976-2.3436 2.7476-2.3436 4.5255v55.599c0 1.7779 0.96976 3.5558 2.3436 4.5255 0.80813 0.40407 1.7779 0.80813 2.7476 0.80813 0.96975 0 1.7779-0.40406 2.3436-0.80813l48.73-27.719c1.7779-0.96976 2.7476-2.7476 2.7476-4.5255s-0.88894-3.475-2.6668-4.6872z" fill="none"/></svg>';
-export var queryInvalid =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.627 73.897"><path d="M61.627 0H12C5.373 0 0 5.373 0 12v49.897c0 6.627 5.373 12 12 12h49.627c6.627 0 12-5.373 12-12V12c0-6.628-5.373-12-12-12zM21.13 61.495V12.682l36.875 24.075L21.13 61.495z"/><path d="M66.13 65.904H49.77c-1.647 0-2.89-.58-3.5-1.636-.608-1.056-.49-2.422.334-3.848l8.18-14.167c.822-1.427 1.947-2.212 3.165-2.212s2.342.786 3.165 2.213l8.18 14.167c.824 1.426.942 2.792.333 3.848-.61 1.055-1.852 1.636-3.5 1.636zm-6.51-4.986c0-.85-.69-1.54-1.54-1.54-.85 0-1.54.69-1.54 1.54 0 .85.69 1.54 1.54 1.54.85 0 1.54-.69 1.54-1.54zm.04-9.266c0-.873-.708-1.58-1.58-1.58-.874 0-1.582.707-1.582 1.58l.374 5.61h.005c.054.62.568 1.108 1.202 1.108.586 0 1.075-.415 1.188-.968.01-.045.01-.093.014-.14h.01l.368-5.61z" fill="#a80"/></svg>';
-export var download =
-  '<svg xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" viewBox="0 0 100 100"><path fill-rule="evenodd" d="M88 84v-2c0-2.96-.86-4-4-4H16c-2.96 0-4 .98-4 4v2c0 3.102 1.04 4 4 4h68c3.02 0 4-.96 4-4zM58 12H42c-5 0-6 .94-6 6v22H16l34 34 34-34H64V18c0-5.06-1.06-6-6-6z"/></svg>';
-export var share =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M36.764 50c0 .308-.07.598-.088.905l32.247 16.12c2.76-2.34 6.293-3.798 10.195-3.798C87.89 63.227 95 70.337 95 79.11 95 87.89 87.89 95 79.118 95c-8.78 0-15.882-7.11-15.882-15.89 0-.317.07-.6.088-.906l-32.247-16.12c-2.77 2.33-6.293 3.79-10.195 3.79C12.11 65.873 5 58.77 5 50c0-8.78 7.11-15.89 15.882-15.89 3.902 0 7.427 1.467 10.195 3.796l32.247-16.12c-.018-.307-.088-.597-.088-.913C63.236 12.11 70.338 5 79.118 5 87.89 5 95 12.11 95 20.873c0 8.78-7.11 15.89-15.882 15.89-3.91 0-7.436-1.467-10.195-3.805L36.676 49.086c.017.308.088.598.088.914z"/></svg>';
-export var warning =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.399998 66.399998"><g><path d="M33.2 0C14.9 0 0 14.9 0 33.2c0 18.3 14.9 33.2 33.2 33.2 18.3 0 33.2-14.9 33.2-33.2C66.4 14.9 51.5 0 33.2 0zm0 59.4C18.7 59.4 7 47.6 7 33.2 7 18.7 18.8 7 33.2 7c14.4 0 26.2 11.8 26.2 26.2 0 14.4-11.8 26.2-26.2 26.2z"/><path d="M33.1 45.6c-1.4 0-2.5.5-3.5 1.5-.9 1-1.4 2.2-1.4 3.6 0 1.6.5 2.8 1.5 3.8 1 .9 2.1 1.3 3.4 1.3 1.3 0 2.4-.5 3.4-1.4 1-.9 1.5-2.2 1.5-3.7 0-1.4-.5-2.6-1.4-3.6-.9-1-2.1-1.5-3.5-1.5zM33.3 12.4c-1.5 0-2.8.5-3.7 1.6-.9 1-1.4 2.4-1.4 4.2 0 1.1.1 2.9.2 5.6l.8 13.1c.2 1.8.4 3.2.9 4.1.5 1.2 1.5 1.8 2.9 1.8 1.3 0 2.3-.7 2.9-1.9.5-1 .7-2.3.9-4l1.1-13.4c.1-1.3.2-2.5.2-3.8 0-2.2-.3-3.9-.8-5.1-.5-1-1.6-2.2-4-2.2z"/></g></svg>';
-export var fullscreen =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
-export var fullscreenExit =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
-export var format =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3v18h18v-2H5V3H3zm14 4V5l-4 4 4 4V9h4V7h-4zM7 9v2h10V9H7zm0 4v2h10v-2H7zm0 4v2h10v-2H7z"/></svg>';
-export var snippet =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>';
-export var chevronDown =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>';
diff --git a/packages/yasqe/src/index.ts b/packages/yasqe/src/index.ts
index faea7460..e30eff49 100644
--- a/packages/yasqe/src/index.ts
+++ b/packages/yasqe/src/index.ts
@@ -7,9 +7,9 @@ import * as sparql11Mode from "../grammar/tokenizer";
 import { Storage as YStorage } from "@matdata/yasgui-utils";
 import * as queryString from "query-string";
 import tooltip from "./tooltip";
-import { drawSvgStringAsElement, addClass, removeClass } from "@matdata/yasgui-utils";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
 import * as Sparql from "./sparql";
-import * as imgs from "./imgs";
+
 import * as Autocompleter from "./autocompleters";
 import { merge, mergeWith, escape } from "lodash-es";
 
@@ -59,6 +59,7 @@ export class Yasqe extends CodeMirror {
   private abortController: AbortController | undefined;
   private queryStatus: "valid" | "error" | undefined;
   private queryBtn: HTMLButtonElement | undefined;
+  private saveBtn: HTMLButtonElement | undefined;
   private fullscreenBtn: HTMLButtonElement | undefined;
   private isFullscreen: boolean = false;
   private horizontalResizeWrapper?: HTMLDivElement;
@@ -246,15 +247,76 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * draw share link button
+     * Draw query btn (FIRST)
+     */
+    if (this.config.showQueryButton) {
+      this.queryBtn = document.createElement("button");
+      addClass(this.queryBtn, "yasqe_queryButton");
+
+      /**
+       * Add all icon states: play (default), warning (error), loading (busy)
+       */
+      const queryEl = document.createElement("i");
+      addClass(queryEl, "fas");
+      addClass(queryEl, "fa-play");
+      addClass(queryEl, "queryIcon");
+      addClass(queryEl, "queryIcon--play");
+      queryEl.setAttribute("aria-hidden", "true");
+      this.queryBtn.appendChild(queryEl);
+
+      const warningEl = document.createElement("i");
+      addClass(warningEl, "fas");
+      addClass(warningEl, "fa-exclamation-triangle");
+      addClass(warningEl, "queryIcon");
+      addClass(warningEl, "queryIcon--warning");
+      warningEl.setAttribute("aria-hidden", "true");
+      this.queryBtn.appendChild(warningEl);
+
+      const loadingEl = document.createElement("i");
+      addClass(loadingEl, "fas");
+      addClass(loadingEl, "fa-spinner");
+      addClass(loadingEl, "fa-pulse");
+      addClass(loadingEl, "queryIcon");
+      addClass(loadingEl, "queryIcon--loading");
+      loadingEl.setAttribute("aria-hidden", "true");
+      this.queryBtn.appendChild(loadingEl);
+
+      /**
+       * Add text label
+       */
+      const queryTextLabel = document.createElement("span");
+      queryTextLabel.className = "yasqe_queryButton_text";
+      queryTextLabel.textContent = "Run";
+      this.queryBtn.appendChild(queryTextLabel);
+
+      this.queryBtn.onclick = () => {
+        if (this.config.queryingDisabled) return; // Don't do anything
+        if (this.req) {
+          this.abortQuery();
+        } else {
+          this.query().catch(() => {}); //catch this to avoid unhandled rejection
+        }
+      };
+      this.queryBtn.title = "Run query (Ctrl+Enter)";
+      this.queryBtn.setAttribute("aria-label", "Run query");
+
+      buttons.appendChild(this.queryBtn);
+      this.updateQueryButton();
+    }
+
+    /**
+     * draw share link button (SECOND)
      */
     if (this.config.createShareableLink) {
-      var svgShare = drawSvgStringAsElement(imgs.share);
+      const shareIcon = document.createElement("i");
+      addClass(shareIcon, "fas");
+      addClass(shareIcon, "fa-share-nodes");
+      shareIcon.setAttribute("aria-hidden", "true");
       const shareLinkWrapper = document.createElement("button");
       shareLinkWrapper.className = "yasqe_share";
       shareLinkWrapper.title = "Share query";
       shareLinkWrapper.setAttribute("aria-label", "Share query");
-      shareLinkWrapper.appendChild(svgShare);
+      shareLinkWrapper.appendChild(shareIcon);
       buttons.appendChild(shareLinkWrapper);
       shareLinkWrapper.addEventListener("click", (event: MouseEvent) => showSharePopup(event));
       shareLinkWrapper.addEventListener("keydown", (event: KeyboardEvent) => {
@@ -294,7 +356,10 @@ export class Yasqe extends CodeMirror {
           if (type === "warning") {
             const iconWrapper = document.createElement("span");
             iconWrapper.className = "yasqe_toast-icon";
-            const icon = drawSvgStringAsElement(imgs.warning);
+            const icon = document.createElement("i");
+            addClass(icon, "fas");
+            addClass(icon, "fa-exclamation-triangle");
+            icon.setAttribute("aria-hidden", "true");
             iconWrapper.appendChild(icon);
             toastElement.appendChild(iconWrapper);
           }
@@ -468,9 +533,9 @@ export class Yasqe extends CodeMirror {
         // Position popup after layout is complete
         const positionPopup = () => {
           if (!popup) return;
-          const svgPos = svgShare.getBoundingClientRect();
-          popup.style.top = svgShare.offsetTop + svgPos.height + "px";
-          popup.style.left = svgShare.offsetLeft + svgShare.clientWidth - popup.clientWidth + "px";
+          const sharePos = shareLinkWrapper.getBoundingClientRect();
+          popup.style.top = shareLinkWrapper.offsetTop + sharePos.height + "px";
+          popup.style.left = shareLinkWrapper.offsetLeft + shareLinkWrapper.clientWidth - popup.clientWidth + "px";
         };
 
         if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
@@ -481,47 +546,37 @@ export class Yasqe extends CodeMirror {
         }
       };
     }
+
     /**
-     * Draw query btn
+     * Draw save button (THIRD)
      */
-    if (this.config.showQueryButton) {
-      this.queryBtn = document.createElement("button");
-      addClass(this.queryBtn, "yasqe_queryButton");
-
-      /**
-       * Add busy/valid/error btns
-       */
-      const queryEl = drawSvgStringAsElement(imgs.query);
-      addClass(queryEl, "queryIcon");
-      this.queryBtn.appendChild(queryEl);
-
-      const warningIcon = drawSvgStringAsElement(imgs.warning);
-      addClass(warningIcon, "warningIcon");
-      this.queryBtn.appendChild(warningIcon);
-
-      this.queryBtn.onclick = () => {
-        if (this.config.queryingDisabled) return; // Don't do anything
-        if (this.req) {
-          this.abortQuery();
-        } else {
-          this.query().catch(() => {}); //catch this to avoid unhandled rejection
-        }
-      };
-      this.queryBtn.title = "Run query";
-      this.queryBtn.setAttribute("aria-label", "Run query");
-
-      buttons.appendChild(this.queryBtn);
-      this.updateQueryButton();
-    }
+    const saveBtn = document.createElement("button");
+    addClass(saveBtn, "yasqe_saveButton");
+    const saveIcon = document.createElement("i");
+    addClass(saveIcon, "fas");
+    addClass(saveIcon, "fa-save");
+    saveIcon.setAttribute("aria-hidden", "true");
+    saveBtn.appendChild(saveIcon);
+    saveBtn.onclick = () => {
+      // Call the managed query save function if available
+      this.emit("saveManagedQuery");
+    };
+    saveBtn.title = "Save managed query (Ctrl+S)";
+    saveBtn.setAttribute("aria-label", "Save managed query");
+    saveBtn.style.display = "none"; // Hidden by default, shown when workspace is configured
+    this.saveBtn = saveBtn;
+    buttons.appendChild(saveBtn);
 
     /**
-     * Draw format btn
+     * Draw format btn (FOURTH)
      */
     if (this.config.showFormatButton) {
       const formatBtn = document.createElement("button");
       addClass(formatBtn, "yasqe_formatButton");
-      const formatIcon = drawSvgStringAsElement(imgs.format);
-      addClass(formatIcon, "formatIcon");
+      const formatIcon = document.createElement("i");
+      addClass(formatIcon, "fas");
+      addClass(formatIcon, "fa-align-left");
+      formatIcon.setAttribute("aria-hidden", "true");
       formatBtn.appendChild(formatIcon);
       formatBtn.onclick = () => {
         this.format();
@@ -532,15 +587,21 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * Draw fullscreen btn
+     * Draw fullscreen btn (FIFTH)
      */
     this.fullscreenBtn = document.createElement("button");
     addClass(this.fullscreenBtn, "yasqe_fullscreenButton");
-    const fullscreenIcon = drawSvgStringAsElement(imgs.fullscreen);
+    const fullscreenIcon = document.createElement("i");
+    addClass(fullscreenIcon, "fas");
+    addClass(fullscreenIcon, "fa-expand");
     addClass(fullscreenIcon, "fullscreenIcon");
+    fullscreenIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenIcon);
-    const fullscreenExitIcon = drawSvgStringAsElement(imgs.fullscreenExit);
+    const fullscreenExitIcon = document.createElement("i");
+    addClass(fullscreenExitIcon, "fas");
+    addClass(fullscreenExitIcon, "fa-compress");
     addClass(fullscreenExitIcon, "fullscreenExitIcon");
+    fullscreenExitIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenExitIcon);
     this.fullscreenBtn.onclick = () => {
       this.toggleFullscreen();
@@ -633,8 +694,11 @@ export class Yasqe extends CodeMirror {
       const dropdownBtn = document.createElement("button");
       addClass(dropdownBtn, "yasqe_snippetDropdownButton");
       dropdownBtn.textContent = groupName + " ";
-      const chevron = drawSvgStringAsElement(imgs.chevronDown);
+      const chevron = document.createElement("i");
+      addClass(chevron, "fas");
+      addClass(chevron, "fa-chevron-down");
       addClass(chevron, "chevronIcon");
+      chevron.setAttribute("aria-hidden", "true");
       dropdownBtn.appendChild(chevron);
       dropdownBtn.setAttribute("aria-label", `${groupName} snippets`);
       dropdownBtn.setAttribute("aria-expanded", "false");
@@ -703,8 +767,11 @@ export class Yasqe extends CodeMirror {
     const showMoreBtn = document.createElement("button");
     addClass(showMoreBtn, "yasqe_snippetDropdownButton", "yasqe_showMoreButton");
     showMoreBtn.textContent = "More ";
-    const chevron = drawSvgStringAsElement(imgs.chevronDown);
+    const chevron = document.createElement("i");
+    addClass(chevron, "fas");
+    addClass(chevron, "fa-chevron-down");
     addClass(chevron, "chevronIcon");
+    chevron.setAttribute("aria-hidden", "true");
     showMoreBtn.appendChild(chevron);
     showMoreBtn.setAttribute("aria-label", "Show more snippets");
     showMoreBtn.setAttribute("aria-expanded", "false");
@@ -926,7 +993,7 @@ export class Yasqe extends CodeMirror {
       this.queryBtn.title = this.config.queryingDisabled;
     } else {
       removeClass(this.queryBtn, "query_disabled");
-      this.queryBtn.title = "Run query";
+      this.queryBtn.title = "Run query (Ctrl+Enter)";
       this.queryBtn.setAttribute("aria-label", "Run query");
     }
     if (!status) {
@@ -940,14 +1007,32 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * Set/remove spinner if needed
+     * Set/remove spinner if needed and manage icon visibility
      */
-    if (this.req && this.queryBtn.className.indexOf("busy") < 0) {
+    const isBusy = !!this.req;
+    const hasError = status === "error";
+
+    if (isBusy && this.queryBtn.className.indexOf("busy") < 0) {
       this.queryBtn.className = this.queryBtn.className += " busy";
     }
-    if (!this.req && this.queryBtn.className.indexOf("busy") >= 0) {
+    if (!isBusy && this.queryBtn.className.indexOf("busy") >= 0) {
       this.queryBtn.className = this.queryBtn.className.replace("busy", "");
     }
+
+    // Update button state classes for icon switching
+    if (isBusy) {
+      addClass(this.queryBtn, "state-loading");
+      removeClass(this.queryBtn, "state-error");
+      removeClass(this.queryBtn, "state-normal");
+    } else if (hasError) {
+      removeClass(this.queryBtn, "state-loading");
+      addClass(this.queryBtn, "state-error");
+      removeClass(this.queryBtn, "state-normal");
+    } else {
+      removeClass(this.queryBtn, "state-loading");
+      removeClass(this.queryBtn, "state-error");
+      addClass(this.queryBtn, "state-normal");
+    }
   }
   public handleLocalStorageQuotaFull(_e: any) {
     console.warn("Localstorage quota exceeded. Clearing all queries");
@@ -1273,25 +1358,42 @@ export class Yasqe extends CodeMirror {
           //we don't want the gutter error, so return
           return;
         }
-        const warningEl = drawSvgStringAsElement(imgs.warning);
+
+        // Add gutter error icon
+        const errorEl = document.createElement("i");
+        errorEl.className = "fas fa-exclamation-circle parseErrorIcon";
+
+        // Build tooltip message
         if (state.errorMsg) {
-          tooltip(this, warningEl, escape(token.state.errorMsg));
+          tooltip(this, errorEl, escape(state.errorMsg));
         } else if (state.possibleCurrent && state.possibleCurrent.length > 0) {
-          var expectedEncoded: string[] = [];
+          const expectedEncoded: string[] = [];
           state.possibleCurrent.forEach(function (expected) {
             expectedEncoded.push("<strong style='text-decoration:underline'>" + escape(expected) + "</strong>");
           });
-          tooltip(this, warningEl, "This line is invalid. Expected: " + expectedEncoded.join(", "));
+          tooltip(this, errorEl, "This line is invalid. Expected: " + expectedEncoded.join(", "));
+        } else {
+          tooltip(this, errorEl, "Syntax error");
+        }
+
+        this.setGutterMarker(l, "gutterErrorBar", errorEl);
+
+        // Also change run button to show error state
+        if (this.queryBtn) {
+          addClass(this.queryBtn, "query_error");
+          this.queryBtn.title = "Query has syntax errors";
         }
-        // warningEl.style.marginTop = "2px";
-        // warningEl.style.marginLeft = "2px";
-        warningEl.className = "parseErrorIcon";
-        this.setGutterMarker(l, "gutterErrorBar", warningEl);
 
         this.queryValid = false;
         break;
       }
     }
+    if (this.queryValid) {
+      if (this.queryBtn) {
+        removeClass(this.queryBtn, "query_error");
+        this.queryBtn.title = "Run query (Ctrl+Enter)";
+      }
+    }
   }
 
   public setCheckConstructVariables(isEnabled: boolean) {
@@ -1304,6 +1406,12 @@ export class Yasqe extends CodeMirror {
     }
   }
 
+  public setSaveButtonVisible(visible: boolean) {
+    if (this.saveBtn) {
+      this.saveBtn.style.display = visible ? "inline-flex" : "none";
+    }
+  }
+
   public checkConstructVariables() {
     // Clear any existing warnings first
     this.clearGutter("gutterConstructWarning");
@@ -1349,12 +1457,14 @@ export class Yasqe extends CodeMirror {
           const escapedVar = undefinedVar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
           const varRegex = new RegExp(`${escapedVar}(?![a-zA-Z0-9_])`);
           if (varRegex.test(line)) {
-            const warningEl = drawSvgStringAsElement(imgs.warning);
-            warningEl.className = "constructVariableWarning";
+            const warningEl = document.createElement("i");
+            warningEl.className = "fas fa-exclamation-triangle constructVariableWarning";
             tooltip(
               this,
               warningEl,
-              escape(`Variable ${undefinedVar} is used in CONSTRUCT but not defined in WHERE clause`),
+              "Variable <strong>" +
+                escape(undefinedVar) +
+                "</strong> is used in CONSTRUCT but not defined in WHERE clause",
             );
             this.setGutterMarker(l, "gutterConstructWarning", warningEl);
             break; // Only one marker per line
diff --git a/packages/yasqe/src/scss/buttons.scss b/packages/yasqe/src/scss/buttons.scss
index 180555a6..139706c6 100644
--- a/packages/yasqe/src/scss/buttons.scss
+++ b/packages/yasqe/src/scss/buttons.scss
@@ -64,28 +64,33 @@
     position: absolute;
     top: 10px;
     right: 20px;
-
-    svg {
-      fill: #505050;
-    }
-
     z-index: 5;
 
     .yasqe_share {
       cursor: pointer;
-      margin-top: 3px;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
-      svg {
-        height: 25px;
-        width: 25px;
+      padding: 6px;
+      margin-left: 8px;
+      height: 36px;
+      width: 36px;
+      color: #505050;
+
+      i {
+        font-size: 20px;
+      }
+
+      &:hover {
+        color: #337ab7;
       }
     }
 
     button {
-      vertical-align: top;
-      margin-left: 5px;
+      vertical-align: middle;
+      margin-left: 8px;
     }
     .yasqe_sharePopup {
       position: absolute;
@@ -163,77 +168,118 @@
       }
     }
     .yasqe_queryButton {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
       position: relative;
-      border: none;
-      background: none;
-      padding: 0;
+      border: 1px solid #337ab7;
+      background: #337ab7;
+      padding: 7px 12px;
       cursor: pointer;
-      width: $queryButtonWidth;
-      height: $queryButtonHeight;
+      border-radius: 4px;
+      color: white;
+      font-weight: 500;
+      font-size: 14px;
+      transition: all 0.2s ease;
+      line-height: 1.4;
+      height: 36px;
+
+      .yasqe_queryButton_text {
+        line-height: 1.4;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
 
       .queryIcon {
-        display: block;
-        svg {
-          width: $queryButtonWidth;
-          height: $queryButtonHeight;
-        }
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
       }
-      .svgImg {
-        position: absolute;
-        height: inherit;
-        top: 0;
+
+      // Hide all icons by default
+      .queryIcon--warning,
+      .queryIcon--loading {
+        display: none;
       }
 
-      &.busy {
-        svg {
-          #loadingIcon {
-            stroke-dasharray: 100;
-            animation: dash 1.5s linear infinite;
-            stroke-width: 8px;
-            stroke: white;
-          }
+      // Show warning icon when in error state
+      &.state-error {
+        .queryIcon--play {
+          display: none;
+        }
+        .queryIcon--warning {
+          display: flex;
         }
       }
 
-      @keyframes dash {
-        to {
-          stroke-dashoffset: 200;
+      // Show loading icon when busy
+      &.state-loading {
+        .queryIcon--play {
+          display: none;
+        }
+        .queryIcon--loading {
+          display: flex;
         }
       }
 
-      @keyframes rotate {
-        100% {
-          transform: rotate(360deg);
-        }
+      &:hover {
+        background: #2868a0;
+        border-color: #2868a0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
 
-      .warningIcon {
-        display: none;
+      &:active {
+        background: #1f5180;
+        border-color: #1f5180;
       }
 
       &.query_error {
-        .warningIcon {
-          display: block;
-          top: 5px;
-          right: 0px;
+        background: #dc3545;
+        border-color: #dc3545;
 
-          svg {
-            width: 15px;
-            height: 15px;
+        &:hover {
+          background: #c82333;
+          border-color: #c82333;
+        }
 
-            g {
-              fill: red;
-            }
-          }
+        &:active {
+          background: #bd2130;
+          border-color: #bd2130;
+        }
+      }
+
+      &.busy {
+        background: #5a8fc2;
+        border-color: #5a8fc2;
+        cursor: wait;
+      }
+
+      @keyframes dash {
+        to {
+          stroke-dashoffset: 200;
+        }
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
         }
       }
 
       &.query_disabled {
         cursor: not-allowed;
-        .queryIcon {
-          opacity: 0.5;
-          filter: alpha(opacity=50);
+        opacity: 0.6;
+        background: #95b3d0;
+        border-color: #95b3d0;
+
+        &:hover {
+          background: #95b3d0;
+          border-color: #95b3d0;
+          box-shadow: none;
         }
       }
 
@@ -244,51 +290,65 @@
       }
     }
 
-    .yasqe_saveManagedQueryButton {
-      display: inline-block;
+    .yasqe_saveButton {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
       cursor: pointer;
-      padding: 0;
-      margin-left: 5px;
+      padding: 6px;
+      margin-left: 8px;
+      height: 36px;
+      width: 36px;
+      color: #505050;
 
-      svg {
-        height: 25px;
-        width: 25px;
+      i {
+        font-size: 20px;
+      }
+
+      &:hover {
+        color: #337ab7;
       }
     }
 
     .yasqe_formatButton {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
       cursor: pointer;
-      padding: 0;
-      margin-left: 5px;
+      padding: 6px;
+      margin-left: 8px;
+      height: 36px;
+      width: 36px;
+      color: #505050;
 
-      svg {
-        height: 25px;
-        width: 25px;
+      i {
+        font-size: 20px;
       }
 
       &:hover {
-        svg {
-          fill: #337ab7;
-        }
+        color: #337ab7;
       }
     }
 
     .yasqe_fullscreenButton {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
       cursor: pointer;
-      padding: 0;
-      margin-left: 5px;
+      padding: 6px;
+      margin-left: 8px;
+      height: 36px;
+      width: 36px;
+      color: #505050;
 
-      svg {
-        height: 25px;
-        width: 25px;
+      i {
+        font-size: 20px;
       }
 
       .fullscreenExitIcon {
@@ -296,9 +356,7 @@
       }
 
       &:hover {
-        svg {
-          fill: #337ab7;
-        }
+        color: #337ab7;
       }
     }
   }
@@ -405,10 +463,8 @@
         .chevronIcon {
           width: 16px;
           height: 16px;
-          svg {
-            width: 16px;
-            height: 16px;
-            fill: var(--yasgui-text-secondary, #505050);
+          i {
+            font-size: 12px;
           }
         }
 
@@ -518,10 +574,8 @@
       align-items: center;
       flex-shrink: 0;
 
-      svg {
-        width: 24px;
-        height: 24px;
-        fill: #000;
+      i {
+        font-size: 24px;
       }
     }
   }
diff --git a/packages/yasqe/src/scss/yasqe.scss b/packages/yasqe/src/scss/yasqe.scss
index f92bc0a9..651b0fda 100644
--- a/packages/yasqe/src/scss/yasqe.scss
+++ b/packages/yasqe/src/scss/yasqe.scss
@@ -1,3 +1,6 @@
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+
 .yasqe {
   display: flex;
   flex-direction: column;
@@ -9,10 +12,6 @@
     // Height is set via inline style by the resize handler
   }
 
-  .svgImg {
-    display: inline-block;
-  }
-
   span.shortlinkErr {
     font-size: small;
     color: red;
@@ -50,13 +49,10 @@
   }
 
   .parseErrorIcon {
-    width: 13px;
-    height: 13px;
-    margin-top: 2px;
+    font-size: 13px;
+    color: #d32f2f;
+    cursor: pointer;
     margin-left: 2px;
-    svg g {
-      fill: red;
-    }
   }
 
   .constructVariableWarning {
@@ -64,19 +60,29 @@
     height: 13px;
     margin-top: 2px;
     margin-left: 2px;
-    svg g {
-      fill: orange;
-    }
+    font-size: 13px;
+    color: orange;
+    cursor: pointer;
   }
 
   .yasqe_tooltip {
-    background: rgba(0, 0, 0, 0.8);
+    font-size: 14px;
     border-radius: 5px;
     color: #fff;
     padding: 5px 15px;
     width: 220px;
     white-space: normal;
+    line-height: 1.5;
     margin-top: 5px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    text-align: left;
+
+    strong {
+      font-weight: 600;
+      text-decoration: underline;
+    }
   }
 
   .notificationLoader {
diff --git a/packages/yasqe/src/tooltip.ts b/packages/yasqe/src/tooltip.ts
index f8df7cb6..b4a629e6 100644
--- a/packages/yasqe/src/tooltip.ts
+++ b/packages/yasqe/src/tooltip.ts
@@ -6,7 +6,7 @@
  */
 import Yasqe from "./";
 
-export default function tooltip(_yasqe: Yasqe, parent: HTMLDivElement, html: string) {
+export default function tooltip(_yasqe: Yasqe, parent: HTMLElement, html: string) {
   var tooltip: HTMLDivElement;
   parent.onmouseover = function () {
     if (!tooltip) {
diff --git a/packages/yasr/package.json b/packages/yasr/package.json
index 9a6cac20..48952ca7 100644
--- a/packages/yasr/package.json
+++ b/packages/yasr/package.json
@@ -24,7 +24,7 @@
     "directory": "packages/yasr"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@json2csv/plainjs": "^7.0.4",
     "@matdata/yasgui-utils": "^4.6.1",
     "@matdata/yasqe": "^4.6.1",
diff --git a/packages/yasr/src/imgs.ts b/packages/yasr/src/imgs.ts
deleted file mode 100644
index 1f9fe226..00000000
--- a/packages/yasr/src/imgs.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export var download =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve"><g id="Captions"/><g id="Your_Icon"><path  d="M88,84v-2c0-2.961-0.859-4-4-4H16c-2.961,0-4,0.98-4,4v2c0,3.102,1.039,4,4,4h68 C87.02,88,88,87.039,88,84z M58,12H42c-5,0-6,0.941-6,6v22H16l34,34l34-34H64V18C64,12.941,62.939,12,58,12z"/></g></svg>';
-export var pivot = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="100%" width="100%" version="1.1" y="0px" x="0px" viewBox="-949 951 122.65 124.00456"><switch transform="matrix(-1 0 0 1 -1741 23.496)"><foreignObject y="0" x="0" requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" width="1" height="1"/><g transform="matrix(.68779 .053686 -.048647 .75904 -208.42 303.24)"><path d="m-851.8 1025.3c-0.3-0.7-0.8-1.2-1.4-1.6l-28.9-18.3c-2.6-1.6-5.8 0.7-5.1 3.6l2.3 10.1c-17.7-0.4-32-14.6-32.5-32.3l10 2.3c2.9 0.7 5.2-2.5 3.6-5.1l-18.3-28.9c-0.9-1.4-2.6-2-4.2-1.3-0.7 0.3-1.2 0.8-1.6 1.4l-18.3 28.9c-1.6 2.6 0.7 5.8 3.6 5.1l10.1-2.3c0.5 25.9 21.5 46.9 47.5 47.3l-2.3 10c-0.7 2.9 2.5 5.2 5.1 3.6l28.9-18.3c1.6-0.8 2.2-2.6 1.5-4.2z"/></g><g><rect transform="scale(-1,1)" height="182.73" width="58.263" y="943.58" x="789.91"/><path d="m-555.88 62.924v-374.47h1252.1v748.94h-1252.1zm596.4 34.428c1.3908-1.3908 1.3477-2.0517-0.52029-7.9711-0.8688-2.7531-1.5838-5.0324-1.589-5.0651-0.0053-0.03273 1.2924-0.21249 2.8835-0.3995 6.1211-0.71941 14.098-3.8308 19.883-7.7551 12.823-8.6993 21.186-24.002 21.186-38.765 0-3.59 0.04131-3.7083 1.1917-3.425 0.65546 0.16137 3.3047 0.59645 5.8872 0.96682l4.6954 0.67342 1.3092-1.522c0.813-0.945 1.224-1.965 1.085-2.692-0.363-1.901-21.135-29.783-22.678-30.441-2.901-1.2375-3.406-0.57737-12.545 16.409-4.7338 8.7985-8.607 16.462-8.607 17.031 0 1.1765 2.2399 3.6338 3.3124 3.6338 0.39179 0 2.9648-0.71083 5.718-1.5796 2.7531-0.86879 5.0652-1.5838 5.138-1.589 0.36716-0.02595 0.04608 3.5333-0.65244 7.2269-2.3628 12.497-12.327 22.931-24.781 25.95-1.9718 0.47792-3.7039 0.75004-3.8492 0.6047-0.14534-0.14533 0.12002-2.6906 0.58972-5.6561 0.78639-4.9651 0.78618-5.4954-0.0053-6.6999-0.63994-0.98013-1.3213-1.308-2.7159-1.308-1.5863 0-3.9896 1.5653-16.275 10.6-15.151 11.143-16.136 12.125-14.661 14.622 0.9789 1.657 31.34 18.146 33.483 18.184 0.80111 0.01425 1.9333-0.45076 2.5159-1.0334z" transform="matrix(-1,0,0,1,-849.24,951)"/><rect transform="scale(-1,1)" height="134" width="5.8263" y="926.47" x="830.3"/><rect transform="matrix(0,1,1,0,0,0)" height="134" width="5.8263" y="-925.77" x="961.98"/></g></switch><rect height="122.65" width="11.491" y="951" x="-915.98" stroke-width="1.2986"/><rect transform="rotate(90)" height="122.65" width="11.491" y="826.35" x="985.27" stroke-width="1.2986"/></svg>`;
-export var fullscreen =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
-export var fullscreenExit =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
diff --git a/packages/yasr/src/index.ts b/packages/yasr/src/index.ts
index cd8a9b4c..af5a87e7 100644
--- a/packages/yasr/src/index.ts
+++ b/packages/yasr/src/index.ts
@@ -2,20 +2,11 @@ import { EventEmitter } from "events";
 import { merge, filter, mapValues, uniqueId } from "lodash-es";
 import getDefaults from "./defaults";
 import type { Plugin } from "./plugins";
-import {
-  Storage as YStorage,
-  drawFontAwesomeIconAsSvg,
-  drawSvgStringAsElement,
-  removeClass,
-  addClass,
-  hasClass,
-} from "@matdata/yasgui-utils";
+import { Storage as YStorage, removeClass, addClass, hasClass } from "@matdata/yasgui-utils";
 import Parser from "./parsers";
 export { default as Parser } from "./parsers";
 import { addScript, addCss, sanitize } from "./helpers";
-import * as faDownload from "@fortawesome/free-solid-svg-icons/faDownload";
-import * as faQuestionCircle from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
-import * as imgs from "./imgs";
+
 import "./main.scss";
 
 export interface PersistentConfig {
@@ -374,7 +365,8 @@ export class Yasr extends EventEmitter {
     this.downloadBtn.setAttribute("aria-label", "Download Results");
     this.downloadBtn.setAttribute("tabindex", "0"); // anchor elements with no href are not automatically included in the tabindex
     this.downloadBtn.setAttribute("role", "button");
-    const iconEl = drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faDownload));
+    const iconEl = document.createElement("i");
+    addClass(iconEl, "fas", "fa-download");
     iconEl.setAttribute("aria-hidden", "true");
     this.downloadBtn.appendChild(iconEl);
     this.downloadBtn.addEventListener("click", () => {
@@ -455,12 +447,16 @@ export class Yasr extends EventEmitter {
     this.fullscreenBtn.setAttribute("tabindex", "0");
     this.fullscreenBtn.setAttribute("role", "button");
 
-    const fullscreenIcon = drawSvgStringAsElement(imgs.fullscreen);
+    const fullscreenIcon = document.createElement("i");
+    addClass(fullscreenIcon, "fas");
+    addClass(fullscreenIcon, "fa-expand");
     addClass(fullscreenIcon, "fullscreenIcon");
     fullscreenIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenIcon);
 
-    const fullscreenExitIcon = drawSvgStringAsElement(imgs.fullscreenExit);
+    const fullscreenExitIcon = document.createElement("i");
+    addClass(fullscreenExitIcon, "fas");
+    addClass(fullscreenExitIcon, "fa-compress");
     addClass(fullscreenExitIcon, "fullscreenExitIcon");
     fullscreenExitIcon.setAttribute("aria-hidden", "true");
     this.fullscreenBtn.appendChild(fullscreenExitIcon);
@@ -520,7 +516,9 @@ export class Yasr extends EventEmitter {
   private drawDocumentationButton() {
     this.documentationLink = document.createElement("a");
     addClass(this.documentationLink, "yasr_btn", "yasr_external_ref_btn");
-    this.documentationLink.appendChild(drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faQuestionCircle)));
+    const icon = document.createElement("i");
+    addClass(icon, "fas", "fa-circle-question");
+    this.documentationLink.appendChild(icon);
     this.documentationLink.href = "https://docs.triply.cc/yasgui/";
     this.documentationLink.target = "_blank";
     this.documentationLink.rel = "noopener noreferrer";
diff --git a/packages/yasr/src/main.scss b/packages/yasr/src/main.scss
index 55895777..6b528e6c 100644
--- a/packages/yasr/src/main.scss
+++ b/packages/yasr/src/main.scss
@@ -1,4 +1,6 @@
 @use "scss/variables.scss";
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
 
 .yasr {
   display: flex;
@@ -14,17 +16,12 @@
   .yasr_btn {
     border: none;
     background: inherit;
-  }
-
-  .svgImg {
     display: flex;
-    flex-direction: row;
-    svg {
-      max-width: 100%;
-      max-height: 100%;
-      width: 15px;
-      height: 15px;
-      align-self: center;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-size: 16px;
     }
   }
 
@@ -36,10 +33,6 @@
       color: inherit;
       text-decoration-color: inherit;
     }
-    .svgImg svg {
-      width: 18px;
-      height: 18px;
-    }
   }
 
   a {
@@ -174,15 +167,15 @@
   .yasr_fullscreenButton {
     border: none;
     background: none;
-
-    svg {
-      height: 20px;
-      width: 20px;
-    }
+    color: var(--yasgui-button-text, #505050);
 
     .fullscreenExitIcon {
       display: none;
     }
+
+    &:hover {
+      color: var(--yasgui-button-hover, #337ab7);
+    }
   }
 
   &.fullscreen {
diff --git a/packages/yasr/src/plugins/boolean/index.scss b/packages/yasr/src/plugins/boolean/index.scss
index 2d91ecf7..1f6105e3 100644
--- a/packages/yasr/src/plugins/boolean/index.scss
+++ b/packages/yasr/src/plugins/boolean/index.scss
@@ -3,9 +3,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    svg {
-      margin-bottom: -10px;
-      margin-right: 7px;
+    i {
+      font-size: 30px;
+      margin-right: 12px;
     }
   }
 }
diff --git a/packages/yasr/src/plugins/boolean/index.ts b/packages/yasr/src/plugins/boolean/index.ts
index 6ba7c385..d36add06 100644
--- a/packages/yasr/src/plugins/boolean/index.ts
+++ b/packages/yasr/src/plugins/boolean/index.ts
@@ -5,11 +5,6 @@ import Yasr from "../../";
 import { Plugin } from "../";
 import "./index.scss";
 export interface PluginConfig {}
-import { drawSvgStringAsElement } from "@matdata/yasgui-utils";
-const cross =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="30" height="30" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M83.288,88.13c-2.114,2.112-5.575,2.112-7.689,0L53.659,66.188c-2.114-2.112-5.573-2.112-7.687,0L24.251,87.907 c-2.113,2.114-5.571,2.114-7.686,0l-4.693-4.691c-2.114-2.114-2.114-5.573,0-7.688l21.719-21.721c2.113-2.114,2.113-5.573,0-7.686 L11.872,24.4c-2.114-2.113-2.114-5.571,0-7.686l4.842-4.842c2.113-2.114,5.571-2.114,7.686,0L46.12,33.591 c2.114,2.114,5.572,2.114,7.688,0l21.721-21.719c2.114-2.114,5.573-2.114,7.687,0l4.695,4.695c2.111,2.113,2.111,5.571-0.003,7.686 L66.188,45.973c-2.112,2.114-2.112,5.573,0,7.686L88.13,75.602c2.112,2.111,2.112,5.572,0,7.687L83.288,88.13z"/></g></svg>';
-const check =
-  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="30" height="30" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M14.301,49.982l22.606,17.047L84.361,4.903c2.614-3.733,7.76-4.64,11.493-2.026l0.627,0.462 c3.732,2.614,4.64,7.758,2.025,11.492l-51.783,79.77c-1.955,2.791-3.896,3.762-7.301,3.988c-3.405,0.225-5.464-1.039-7.508-3.084 L2.447,61.814c-3.263-3.262-3.263-8.553,0-11.814l0.041-0.019C5.75,46.718,11.039,46.718,14.301,49.982z"/></svg>';
 
 export default class Boolean implements Plugin<PluginConfig> {
   private yasr: Yasr;
@@ -23,7 +18,9 @@ export default class Boolean implements Plugin<PluginConfig> {
     el.className = "booleanResult";
 
     const boolVal = this.yasr.results?.getBoolean();
-    el.appendChild(drawSvgStringAsElement(boolVal ? check : cross));
+    const icon = document.createElement("i");
+    icon.className = boolVal ? "fas fa-check" : "fas fa-xmark";
+    el.appendChild(icon);
     const textEl = document.createElement("span");
     textEl.textContent = boolVal ? "True" : "False";
     el.appendChild(textEl);
diff --git a/packages/yasr/src/plugins/response/index.scss b/packages/yasr/src/plugins/response/index.scss
index b7e24602..2fe4164f 100644
--- a/packages/yasr/src/plugins/response/index.scss
+++ b/packages/yasr/src/plugins/response/index.scss
@@ -44,19 +44,12 @@
       color: #337ab7;
       padding: 10px;
       margin: 10px;
-      svg {
+      i {
         margin-left: 0.5rem;
-        fill: #337ab7;
-        color: #337ab7;
       }
       &:hover {
         color: #255681;
         border-color: #337ab7;
-        fill: #255681;
-        svg {
-          color: #255681;
-          fill: #255681;
-        }
       }
     }
   }
diff --git a/packages/yasr/src/plugins/response/index.ts b/packages/yasr/src/plugins/response/index.ts
index 3bde726a..027cd876 100644
--- a/packages/yasr/src/plugins/response/index.ts
+++ b/packages/yasr/src/plugins/response/index.ts
@@ -16,10 +16,8 @@ import "codemirror/mode/xml/xml.js";
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material-palenight.css";
-import { drawSvgStringAsElement, addClass, removeClass, drawFontAwesomeIconAsSvg } from "@matdata/yasgui-utils";
-import * as faAlignIcon from "@fortawesome/free-solid-svg-icons/faAlignLeft";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
 import { DeepReadonly } from "ts-essentials";
-import * as imgs from "../../imgs";
 
 export interface PluginConfig {
   maxLines: number;
@@ -51,7 +49,9 @@ export default class Response implements Plugin<PluginConfig> {
     return true;
   }
   public getIcon() {
-    return drawSvgStringAsElement(drawFontAwesomeIconAsSvg(faAlignIcon));
+    const icon = document.createElement("i");
+    icon.className = "fas fa-align-left";
+    return icon;
   }
   download(filename?: string) {
     if (!this.yasr.results) return;
@@ -146,7 +146,10 @@ export default class Response implements Plugin<PluginConfig> {
     const text = document.createElement("span");
     text.innerText = "Download result";
     downloadButton.appendChild(text);
-    downloadButton.appendChild(drawSvgStringAsElement(imgs.download));
+    const downloadIcon = document.createElement("i");
+    addClass(downloadIcon, "fas");
+    addClass(downloadIcon, "fa-download");
+    downloadButton.appendChild(downloadIcon);
     downloadButton.addEventListener("click", () => this.yasr.download());
     downloadButton.addEventListener("keydown", (event) => {
       if (event.code === "Space" || event.code === "Enter") this.yasr.download();