From 2eb3b8b9b81c83c69757027648b8d44fb63667fd Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Fri, 5 Jan 2024 05:21:55 +0100
Subject: [PATCH 1/5] Changed all icons for svgs

- Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs
---
 .../src/assets/img/angle-down-solid.svg       |   1 +
 .../src/assets/img/eye-slash-solid.svg        |   1 +
 packages/web-new/src/assets/img/eye-solid.svg |   1 +
 packages/web-new/src/scripts/console.js       |  12 +-
 packages/web-new/src/scripts/editor.js        |  55 ++-
 packages/web-new/src/scripts/examples-menu.js |  79 ++--
 packages/web-new/src/scripts/main.js          |  20 +-
 packages/web-new/src/scripts/save-menu.js     |   2 +-
 packages/web-new/src/scripts/settings-menu.js |   2 +-
 packages/web-new/src/scripts/svgs.js          |  71 ++++
 packages/web-new/src/scripts/util.js          |  43 +-
 packages/web-new/src/styles/_console.scss     |  79 ++--
 .../web-new/src/styles/_control-panel.scss    |  12 +-
 packages/web-new/src/styles/_editor.scss      |  90 ++--
 .../web-new/src/styles/_examples-menu.scss    |  65 +--
 .../src/styles/_json-yaml-warning.scss        |   1 -
 packages/web-new/src/styles/_save-menu.scss   |  35 +-
 .../web-new/src/styles/_settings-menu.scss    |  20 +-
 packages/web-new/src/styles/styles.scss       |  18 +-
 packages/web-new/src/template.html            | 388 +++++++++++++++---
 packages/web-new/webpack.config.js            |   4 +-
 21 files changed, 746 insertions(+), 253 deletions(-)
 create mode 100644 packages/web-new/src/assets/img/angle-down-solid.svg
 create mode 100644 packages/web-new/src/assets/img/eye-slash-solid.svg
 create mode 100644 packages/web-new/src/assets/img/eye-solid.svg
 create mode 100644 packages/web-new/src/scripts/svgs.js

diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg
new file mode 100644
index 000000000..cabe8a94f
--- /dev/null
+++ b/packages/web-new/src/assets/img/angle-down-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path opacity="1" fill="#1E3050" d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg
new file mode 100644
index 000000000..f592dabfe
--- /dev/null
+++ b/packages/web-new/src/assets/img/eye-slash-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg
new file mode 100644
index 000000000..1f07b7f80
--- /dev/null
+++ b/packages/web-new/src/assets/img/eye-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index 450314b30..4056d4fee 100644
--- a/packages/web-new/src/scripts/console.js
+++ b/packages/web-new/src/scripts/console.js
@@ -45,11 +45,12 @@ const mainContentElement = document.querySelector(".main-content")
 
 minMaxBtn.addEventListener("click", () => {
 
-    if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
+    if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
         mainContentElement.style.flex = "1 0"
         consoleElement.style.flex = `0 39px`
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 
         textIcon.forEach(text => {
             text.classList.remove("hiddenV")
@@ -62,8 +63,9 @@ minMaxBtn.addEventListener("click", () => {
         setTimeout(() => {
             mainContentElement.style.flex = "0 210px"
             consoleElement.style.flex = `1 0`
-            minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-            minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+            minMaxBtn.children[0].classList.add("collapse-arrows")
+            minMaxBtn.children[0].classList.remove("expand-arrows")
+            minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
 
             if (visualizeTab.checked === true) {
                 visualizeTab.click()
diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
index 425d1f393..d5db9eca7 100644
--- a/packages/web-new/src/scripts/editor.js
+++ b/packages/web-new/src/scripts/editor.js
@@ -92,29 +92,64 @@ function createTab(tabNumber, exampleName, thingType) {
   //Add the close btn element
   const closeBtn = document.createElement("div")
   closeBtn.classList.add("close-tab")
-  //Assign icon to the close btn
-  const closeIcon = document.createElement("i")
-  closeIcon.classList.add("fa-solid", "fa-xmark")
 
-  closeBtn.appendChild(closeIcon)
+  // Create the svg close icon
+  const closeIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  closeIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  closeIconSvg.setAttribute("width", "100%")
+  closeIconSvg.setAttribute("height", "100%")
+  closeIconSvg.setAttribute("viewBox", "0 0 384 512")
+
+  // Create a path element and set its attributes
+  const closeIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  closeIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  //append the path to the svg and the svg to the button
+  closeIconSvg.appendChild(closeIconPath)
+  closeBtn.appendChild(closeIconSvg)
 
   //Create the close confirmation btns
   const confirmBtns = document.createElement("div")
   confirmBtns.classList.add("confirm-btns", "hidden")
 
+  //Confirm close button
   const confirmTabClose = document.createElement("button")
   confirmTabClose.classList.add("confirm-tab-close")
   confirmTabClose.textContent = "Close"
-  const confirmTabIcon = document.createElement("i")
-  confirmTabIcon.classList.add("fa-solid", "fa-check")
-  confirmTabClose.appendChild(confirmTabIcon)
+  // Create the svg confirm close icon
+  const confirmIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  confirmIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  confirmIconSvg.setAttribute("width", "100%")
+  confirmIconSvg.setAttribute("height", "100%")
+  confirmIconSvg.setAttribute("viewBox", "0 0 448 512")
+  confirmIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const confirmIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  confirmIconPath.setAttribute("d", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z")
+
+  confirmIconSvg.appendChild(confirmIconPath)
+  confirmTabClose.appendChild(confirmIconSvg)
   
+  //Cancel close button
   const cancelTabClose = document.createElement("button")
   cancelTabClose.classList.add("cancel-tab-close")
   cancelTabClose.textContent = "Cancel"
-  const cancelTabIcon = document.createElement("i")
-  cancelTabIcon.classList.add("fa-solid", "fa-xmark")
-  cancelTabClose.appendChild(cancelTabIcon)
+  
+  // Create the svg close cancel icon
+  const cancelIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  cancelIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  cancelIconSvg.setAttribute("width", "100%")
+  cancelIconSvg.setAttribute("height", "100%")
+  cancelIconSvg.setAttribute("viewBox", "0 0 384 512")
+  cancelIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const cancelIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  cancelIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  cancelIconSvg.appendChild(cancelIconPath)
+  cancelTabClose.appendChild(cancelIconSvg)
 
   cancelTabClose.addEventListener("click", () => {
     cancelTabClose.parentElement.classList.add("hidden")
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
index 1a00e0f83..088a25703 100644
--- a/packages/web-new/src/scripts/examples-menu.js
+++ b/packages/web-new/src/scripts/examples-menu.js
@@ -26,7 +26,7 @@ import { createIde, ideCount, tabsLeft } from "./editor"
 /***********************************************************/
 /*                      Examples menu                      */
 /***********************************************************/
-const closeExamples = document.querySelector(".examples-menu-container__close i")
+const closeExamples = document.querySelector(".examples-menu-container__close .x-icon")
 const examplesMenu = document.querySelector(".examples-menu")
 const examplesBtn = document.querySelector("#examples-btn")
 const categorySelect = document.querySelector('#thing-category')
@@ -267,23 +267,23 @@ async function getAllExamples(categoryId, thingType) {
         exampleNameIcon.classList.add("example-icon")
 
         // Create an SVG element
-        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-        svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-        svgElement.setAttribute("width", "100%")
-        svgElement.setAttribute("viewBox", "0 0 351 379")
-        svgElement.setAttribute("fill", "none")
+        const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        tdFileSvg.setAttribute("width", "100%")
+        tdFileSvg.setAttribute("viewBox", "0 0 351 379")
+        tdFileSvg.setAttribute("fill", "none")
 
         // Create a path element and set its attributes
-        const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path")
-        pathElement.setAttribute("fill-rule", "evenodd")
-        pathElement.setAttribute("clip-rule", "evenodd")
-        pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
+        const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        tdFilePath.setAttribute("fill-rule", "evenodd")
+        tdFilePath.setAttribute("clip-rule", "evenodd")
+        tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
 
         // Append the path element to the SVG element
-        svgElement.appendChild(pathElement)
+        tdFileSvg.appendChild(tdFilePath)
 
         // Append the SVG element to the document body or any other desired location
-        exampleNameIcon.appendChild(svgElement);
+        exampleNameIcon.appendChild(tdFileSvg);
 
         // Append the icon container to the name container
         exampleName.appendChild(exampleNameIcon)
@@ -292,11 +292,21 @@ async function getAllExamples(categoryId, thingType) {
         const exampleNameTitle = document.createElement('p')
         exampleNameTitle.innerText = example[1]["title"]
         exampleName.appendChild(exampleNameTitle)
-        
-        // //Create, populate and append the example title toggle arrow
-        const exampleNameArrow = document.createElement('i')
-        exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow")
-        exampleName.appendChild(exampleNameArrow)
+
+        //Create, populate and append the example title toggle arrow
+        const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        exampleArrowSvg.setAttribute("width", "100%")
+        exampleArrowSvg.setAttribute("height", "100%")
+        exampleArrowSvg.setAttribute("viewBox", "0 0 448 512")
+        exampleArrowSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z")
+
+        exampleArrowSvg.appendChild(exampleArrowPath)
+        exampleName.appendChild(exampleArrowSvg)
 
         //Append the whole name component to the header component
         exampleHeader.appendChild(exampleName)
@@ -305,9 +315,20 @@ async function getAllExamples(categoryId, thingType) {
         const quickBtn = document.createElement('button')
         quickBtn.classList.add("example__header--quick")
         quickBtn.setAttribute("title", "Use")
-        const quickButtonIcon = document.createElement('i')
-        quickButtonIcon.classList.add("fa-solid", "fa-file-import")
-        quickBtn.appendChild(quickButtonIcon)
+        // create the svg icon for the quick use button
+        const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        importFileSvg.setAttribute("width", "100%")
+        importFileSvg.setAttribute("height", "100%")
+        importFileSvg.setAttribute("viewBox", "0 0 512 512")
+        importFileSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        importFileSvg.appendChild(importFilePath)
+        quickBtn.appendChild(importFileSvg)
         exampleHeader.appendChild(quickBtn)
 
 
@@ -343,9 +364,21 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtnUse.classList.add("example__btn--use")
         exampleBtns.appendChild(exampleBtnUse)
 
-        const exampleIconUse = document.createElement('i')
-        exampleIconUse.classList.add("fa-solid", "fa-file-import")
-        exampleBtnUse.appendChild(exampleIconUse)
+        //todo: create the apply button
+        // create the svg icon for the apply button
+        const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        applyIconSvg.setAttribute("width", "100%")
+        applyIconSvg.setAttribute("height", "100%")
+        applyIconSvg.setAttribute("viewBox", "0 0 512 512")
+        applyIconSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        applyIconSvg.appendChild(applyIconPath)
+        exampleBtnUse.appendChild(applyIconSvg)
 
         const exampleTxtUse = document.createElement('p')
         exampleTxtUse.innerText = "Apply"
diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
index 601bddd05..04ce65ddb 100644
--- a/packages/web-new/src/scripts/main.js
+++ b/packages/web-new/src/scripts/main.js
@@ -166,11 +166,13 @@ function onmousemoveY(e) {
       t.style.flex = "1 0"
 
       if(h > 38){
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
       }else{
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
       }
 
       if (h < 445) {
@@ -186,11 +188,13 @@ function onmousemoveY(e) {
       b.style.flex = "1 0"
 
       if(h < 714){
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
       }else{
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
       }
 
       if (h < 310) {
diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js
index b50a90f77..647ff61eb 100644
--- a/packages/web-new/src/scripts/save-menu.js
+++ b/packages/web-new/src/scripts/save-menu.js
@@ -28,7 +28,7 @@ import { editorList, getEditorData } from "./editor"
 /***********************************************************/
 const saveMenu = document.querySelector(".save-menu")
 const saveMenuBtn = document.querySelector("#save-btn")
-const closeSaveMenu = document.querySelector(".save-menu-close i")
+const closeSaveMenu = document.querySelector(".save-menu-close .x-icon")
 const shareUrlContainer = document.querySelector("#share-url-input")
 const openUrlTab = document.querySelector("#open-url-tab")
 const thingTypeText = document.querySelector('#thing-type-text')
diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js
index aca8141b0..5580adaed 100644
--- a/packages/web-new/src/scripts/settings-menu.js
+++ b/packages/web-new/src/scripts/settings-menu.js
@@ -26,7 +26,7 @@ import themeData from './monochrome-theme'
 /***********************************************************/
 /*                     Settings menu                       */
 /***********************************************************/
-const closeSettings = document.querySelector(".settings__close i");
+const closeSettings = document.querySelector(".settings__close .x-icon");
 const settingsMenu = document.querySelector(".settings-menu");
 const settingsBtn = document.querySelector("#settings-btn");
 export const editorForm = document.querySelector(".settings__editor")
diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js
new file mode 100644
index 000000000..fd21ddf1b
--- /dev/null
+++ b/packages/web-new/src/scripts/svgs.js
@@ -0,0 +1,71 @@
+
+
+//Play button:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
+
+//code file (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>
+
+//Download file (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>
+
+//settings (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
+
+//plus icon
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+
+//x icon:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+
+//feedback (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
+
+// cli:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+
+// github rounded:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+
+// angle right:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
+
+// angle down:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
+
+// expand arrows:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>
+
+// collapse arrows
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>
+
+//import file
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>
+
+// search icon
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+
+// open in new tab
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
+
+// link
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+
+// download secondary
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+
+// minus
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+
+//collapse square:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>
+
+//expand square:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
+
+//slashed eye
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
+
+// check icon:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+
diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js
index 7e9b72531..a15d17098 100644
--- a/packages/web-new/src/scripts/util.js
+++ b/packages/web-new/src/scripts/util.js
@@ -233,23 +233,24 @@ export function validate(thingType, editorContent) {
 
     validator(editorContent, log, { checkDefaults: true, checkJsonLd, checkTmConformance })
         .then(result => {
-            // console.log(result)
             Object.keys(result.report).forEach(el => {
                 const spotName = "spot-" + el
                 document.getElementById(spotName).removeAttribute('open')
                 const resultIcon = document.getElementById(spotName).children[0].children[0]
                 if (result.report[el] === "passed") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-check")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("success-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z")
                 }
                 else if (result.report[el] === "warning") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-exclamation")
-
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("warning-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z")
                 }
                 else if (result.report[el] === "failed") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-xmark")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("error-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z")
                 }
                 else if (result.report[el] === null) {
                     //do nothing
@@ -266,16 +267,19 @@ export function validate(thingType, editorContent) {
                     const detailsIcon = document.getElementById(detailsName).children[0].children[0]
 
                     if (result.details[el] === "passed") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-check")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("success-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z")
                     }
                     else if (result.details[el] === "warning" || result.details[el] === "not-impl") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-exclamation")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("warning-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z")
                     }
                     else if (result.details[el] === "failed") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-xmark")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("error-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z")
                     }
                     else if (result.details[el] === null) {
                         //do nothing
@@ -310,9 +314,10 @@ export function resetValidationStatus() {
 
     sectionHeaders.forEach(header => {
         const headerIcon = header.children[0]
-        if (!headerIcon.classList.contains("fa-circle")) {
-            headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark")
-            headerIcon.classList.add("fa-circle")
+        if (!headerIcon.classList.contains("neutral-circle-icon")) {
+            headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon")
+            headerIcon.classList.add("neutral-circle-icon")
+            headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z")
         }
     })
 
@@ -344,7 +349,7 @@ function populateCategory(messagesList) {
     document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
         const categoryContainer = category.querySelector("ul.section-content")
         category.classList.remove("disabled")
-        if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) {
+        if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) {
             const noticePrompt = document.createElement("p")
             noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*"
             noticePrompt.classList.add("notice-prompt")
@@ -354,7 +359,7 @@ function populateCategory(messagesList) {
                 listElement.textContent = message
                 categoryContainer.append(listElement)
             })
-        } else if (category.children[0].children[0].classList.contains("fa-circle-check")) {
+        } else if (category.children[0].children[0].classList.contains("success-circle-icon")) {
             const successMessage = document.createElement("li")
             successMessage.textContent = "Validated Successfully"
             categoryContainer.append(successMessage)
diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss
index a7222ec62..ba146b621 100644
--- a/packages/web-new/src/styles/_console.scss
+++ b/packages/web-new/src/styles/_console.scss
@@ -39,12 +39,19 @@
                 appearance: none;
                 border: none;
                 background-color: transparent;
-                color: var(--clr-primary-500);
-                transition: color 250ms ease;
+                cursor: pointer;
+
+                .icon {
+                    fill: var(--clr-primary-500);
+                    height: var(--fs-i);
+                    width: fit-content;
+                    transition: fill 250ms ease;
+                }
 
                 &:hover {
-                    color: var(--clr-primary-700);
-                    cursor: pointer;
+                    .icon {
+                        fill: var(--clr-primary-700);
+                    }
                 }
             }
         }
@@ -99,7 +106,7 @@
                     content: 'Visualize';
                 }
 
-                &:hover{
+                &:hover {
                     background-color: var(--clr-primary-500);
                     color: var(--clr-neutral-50);
                 }
@@ -189,6 +196,9 @@
                         .show-icon {
                             transform: rotate(0);
                             transition: transform 250ms ease-in-out;
+                            cursor: pointer;
+                            height: var(--fs-p);
+                            fill: var(--clr-neutral-900);
                         }
                     }
 
@@ -199,24 +209,31 @@
                         gap: 1rem;
                         cursor: pointer;
 
-                        .fa-circle-check {
-                            color: var(--clr-success-500);
+                        .icon {
+                            width: fit-content;
                         }
 
-                        .fa-circle-exclamation {
-                            color: var(--clr-warning-500);
+                        .neutral-circle-icon,
+                        .success-circle-icon,
+                        .warning-circle-icon,
+                        .error-circle-icon {
+                            height: var(--fs-i);
                         }
 
-                        .fa-circle-xmark {
-                            color: var(--clr-error-500);
+                        .neutral-circle-icon {
+                            fill: var(--clr-neutral-300);
                         }
 
-                        .fa-circle {
-                            color: var(--clr-neutral-300);
+                        .success-circle-icon {
+                            fill: var(--clr-success-500);
                         }
 
-                        .show-icon {
-                            cursor: pointer;
+                        .warning-circle-icon {
+                            fill: var(--clr-warning-500);
+                        }
+
+                        .error-circle-icon {
+                            fill: var(--clr-error-500);
                         }
 
                         .title {
@@ -345,6 +362,12 @@
                     align-items: center;
                     gap: 1rem;
 
+                    .icon {
+                        fill: var(--clr-neutral-50);
+                        height: var(--fs-i);
+                        width: fit-content;
+                    }
+
                     &:hover {
                         background-color: var(--clr-primary-900);
                     }
@@ -388,10 +411,6 @@
                     align-items: center;
                     justify-content: center;
                     gap: 1rem;
-
-                    i {
-                        font-size: var(--fs-p);
-                    }
                 }
             }
         }
@@ -541,17 +560,19 @@
 
                                 &::before {
                                     position: absolute;
-                                    content: '\f06e';
-                                    display: inline-block;
-                                    text-rendering: auto;
-                                    -webkit-font-smoothing: antialiased;
-                                    font: var(--fa-font-solid);
-                                    font-size: var(--fs-p);
-                                    color: var(--clr-neutral-50);
                                     top: 50%;
                                     left: 50%;
                                     transform: translate(-50%, -50%);
-                                    transition: all 500ms ease-in-out;
+                                    content: '';
+                                    -webkit-mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%;
+                                    mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%;
+                                    -webkit-mask-size: cover;
+                                    mask-size: cover;
+                                    display: inline-block;
+                                    height: calc(var(--fs-i) - .2rem);
+                                    width: var(--fs-i);
+                                    pointer-events: none;
+                                    background-color: var(--clr-neutral-50);
                                 }
 
                                 &:hover {
@@ -562,7 +583,9 @@
 
                             input[type="checkbox"]:checked {
                                 &::before {
-                                    content: '\f070';
+                                    -webkit-mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%;
+                                    mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%;
+                                    height: var(--fs-i);
                                 }
                             }
 
diff --git a/packages/web-new/src/styles/_control-panel.scss b/packages/web-new/src/styles/_control-panel.scss
index 058695a1b..5ce141f58 100644
--- a/packages/web-new/src/styles/_control-panel.scss
+++ b/packages/web-new/src/styles/_control-panel.scss
@@ -35,7 +35,7 @@
         border-bottom: 2px solid var(--clr-primary-500);
         font-family: var(--ff-primary);
         cursor: pointer;
-        transition: all 250ms ease;
+        transition: all 250ms ease-in-out;
 
         &:last-child {
             border-color: var(--clr-neutral-50);
@@ -48,10 +48,16 @@
         &:hover {
             color: var(--clr-neutral-50);
             background-color: var(--clr-primary-500);
+
+            .icon {
+                fill: var(--clr-neutral-50);
+            }
         }
 
-        i {
-            font-size: var(--fs-i);
+        .icon {
+            height: var(--fs-i);
+            fill: var(--clr-primary-500);
+            transition: fill 250ms ease-in-out;
         }
 
         p {
diff --git a/packages/web-new/src/styles/_editor.scss b/packages/web-new/src/styles/_editor.scss
index 7121e283d..f396aa69b 100644
--- a/packages/web-new/src/styles/_editor.scss
+++ b/packages/web-new/src/styles/_editor.scss
@@ -47,7 +47,7 @@
                 white-space: nowrap;
                 cursor: pointer;
 
-                span{
+                span {
                     font-size: 1rem;
                     font-weight: bold;
                     margin-right: 1rem;
@@ -57,10 +57,6 @@
                     font-weight: var(--fw-bold);
                 }
 
-                i {
-                    font-size: var(--fs-p);
-                }
-
                 &.active {
                     background-color: var(--clr-neutral-50);
                     color: var(--clr-neutral-900);
@@ -88,16 +84,22 @@
                 padding-right: 3rem;
                 min-width: 17rem;
 
-                .tab-icon{
+                .tab-icon {
                     font-size: 1rem;
                     width: fit-content;
                     color: var(--clr-td-300);
                 }
 
-                &.active{
-                    .tab-icon{
+                &.active {
+                    .tab-icon {
                         color: var(--clr-td-500);
                     }
+
+                    .close-tab {
+                        svg {
+                            fill: var(--clr-neutral-900);
+                        }
+                    }
                 }
 
                 .close-tab {
@@ -114,35 +116,42 @@
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    transition: all 250ms ease-in-out;
+                    transition: background-color 250ms ease-in-out;
+
+                    svg {
+                        pointer-events: none;
+                        height: 1.3rem;
+                        fill: var(--clr-neutral-300);
+                        transition: fill 250ms ease-in-out;
+                    }
 
                     &:hover {
                         background-color: var(--clr-neutral-200);
-                    }
 
-                    i {
-                        pointer-events: none;
-                        font-size: 1.4rem;
-                        height: 1.3rem;
+                        svg {
+                            fill: var(--clr-neutral-900);
+                        }
                     }
                 }
 
-                .confirm-btns{
+                .confirm-btns {
                     position: absolute;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100%;
+                    padding: .5rem 1rem;
                     background-color: var(--clr-neutral-50);
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    gap: 1rem;
+                    gap: .5rem;
                     opacity: 1;
                     pointer-events: all;
                     transition: opacity 250ms ease-in-out;
 
-                    button{
+                    button {
+                        flex: 1;
                         display: flex;
                         align-items: center;
                         justify-content: center;
@@ -158,29 +167,32 @@
                         padding: .25rem 1rem;
                         transition: background-color 250ms ease-in-out;
 
-                        i{
+                        .icon {
                             order: -1;
+                            height: var(--fs-p);
+                            width: fit-content;
+                            fill: var(--clr-neutral-50);
                         }
 
-                        &.confirm-tab-close{
+                        &.confirm-tab-close {
                             background-color: var(--clr-success-500);
 
-                            &:hover{
+                            &:hover {
                                 background-color: var(--clr-success-700);
                             }
                         }
-    
-                        &.cancel-tab-close{
+
+                        &.cancel-tab-close {
                             background-color: var(--clr-error-700);
 
-                            &:hover{
+                            &:hover {
                                 background-color: var(--clr-error-900);
                             }
                         }
                     }
 
 
-                    &.hidden{
+                    &.hidden {
                         opacity: 0;
                         pointer-events: none;
                     }
@@ -189,18 +201,28 @@
 
             li:last-child {
                 min-width: 3.5rem;
-                transition: all 250ms ease-in-out;
+                transition: background-color 250ms ease-in-out;
+
+                .icon {
+                    height: var(--fs-p);
+                    fill: var(--clr-neutral-300);
+                    transition: fill 250ms ease-in-out;
+                }
 
-                &:hover{
+                &:hover {
                     background-color: var(--clr-neutral-50);
-                    color: var(--clr-neutral-900);
+
+                    .icon {
+                        fill: var(--clr-neutral-900);
+                    }
                 }
             }
         }
 
-        &__right{
+        &__right {
             height: 100%;
-            input[type=radio]{
+
+            input[type=radio] {
                 appearance: none;
                 width: 6rem;
                 height: 100%;
@@ -215,7 +237,7 @@
                 overflow: hidden;
                 transition: all 250ms ease-in-out;
 
-                &::before{
+                &::before {
                     width: 100%;
                     height: 100%;
                     display: flex;
@@ -223,16 +245,16 @@
                     justify-content: center;
                 }
 
-                &:nth-child(1)::before{
+                &:nth-child(1)::before {
                     content: 'JSON';
                 }
 
-                &:nth-child(2)::before{
+                &:nth-child(2)::before {
                     content: 'YAML';
                 }
             }
 
-            input[type=radio]:checked{
+            input[type=radio]:checked {
                 background-color: var(--clr-neutral-50);
                 color: var(--clr-neutral-900);
             }
@@ -244,7 +266,7 @@
             pointer-events: none;
             width: 0;
             height: 0;
-            opacity: 0;   
+            opacity: 0;
         }
 
         .editor.active {
diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
index 1e751d698..77a3b0e7c 100644
--- a/packages/web-new/src/styles/_examples-menu.scss
+++ b/packages/web-new/src/styles/_examples-menu.scss
@@ -45,9 +45,11 @@
             width: 100%;
             text-align: right;
 
-            i {
-                font-size: var(--fs-sub-header);
+            .icon {
+                width: fit-content;
+                height: var(--fs-sub-header);
                 cursor: pointer;
+                fill: var(--clr-neutral-900);
             }
         }
 
@@ -158,15 +160,18 @@
                         top: 50%;
                         right: 2rem;
                         transform: translateY(-50%);
+                        content: '';
+                        -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        -webkit-mask-size: cover;
+                        mask-size: cover;
                         display: inline-block;
-                        text-rendering: auto;
-                        -webkit-font-smoothing: antialiased;
-                        font: var(--fa-font-solid);
-                        content: "\f107";
+                        height: 1.25rem;
+                        width: 1.25rem;
                         pointer-events: none;
-                        color: var(--clr-neutral-900);
-                        font-size: var(--fs-p);
+                        background-color: var(--clr-neutral-300);
                     }
+
                 }
 
                 select,
@@ -216,12 +221,13 @@
                     background-color: var(--clr-neutral-50);
                     color: var(--clr-neutral-900);
                     font-family: var(--ff-primary);
-                    font-size: inherit;
+                    font-size: var(--fs-p);
 
-                    i {
+                    .icon {
+                        height: var(--fs-p);
                         width: fit-content;
                         padding: 0 1rem;
-                        font-size: inherit;
+                        fill: var(--clr-neutral-300);
                     }
 
                     .search-input {
@@ -231,7 +237,7 @@
                         font-size: inherit;
                         border: none;
                         width: 100%;
-                        padding: .8rem 1rem;
+                        padding: .8rem 1rem .8rem 0;
                         appearance: none;
                         cursor: text;
 
@@ -360,8 +366,10 @@
                                         font-weight: var(--fw-bold);
                                     }
 
-                                    .toggle-arrow {
-                                        font-size: var(--fs-footer);
+                                    .icon {
+                                        fill: var(--clr-neutral-900);
+                                        height: var(--fs-footer);
+                                        width: fit-content;
                                         transform: rotate(0);
                                         transition: transform 250ms ease-in-out 250ms;
                                     }
@@ -380,10 +388,11 @@
                                     cursor: pointer;
                                     transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out;
 
-                                    i {
-                                        font-size: var(--fs-i);
-                                        color: var(--clr-neutral-50);
-                                        transition: color 250ms ease-in-out;
+                                    .icon {
+                                        height: var(--fs-i);
+                                        width: fit-content;
+                                        fill: var(--clr-neutral-50);
+                                        transition: fill 250ms ease-in-out;
                                     }
                                 }
                             }
@@ -397,25 +406,21 @@
 
                                         opacity: 1;
 
-                                        i {
-                                            color: var(--clr-neutral-300);
+                                        .icon {
+                                            fill: var(--clr-neutral-300);
                                         }
 
                                         &:hover {
                                             background-color: var(--clr-neutral-100);
 
-                                            i {
-                                                color: var(--clr-neutral-900);
+                                            .icon {
+                                                fill: var(--clr-neutral-900);
                                             }
                                         }
                                     }
                                 }
                             }
 
-                            &:hover{
-                                box-shadow: 0px 0px 10px 0px var(--clr-shadow);
-                            }
-
                             &__content {
                                 pointer-events: none;
                                 display: flex;
@@ -463,9 +468,11 @@
                                         font-weight: var(--fw-bold);
                                     }
 
-                                    i {
+                                    .icon {
                                         margin-right: 1rem;
-                                        font-size: var(--fs-p);
+                                        height: var(--fs-p);
+                                        width: fit-content;
+                                        fill: var(--clr-neutral-50);
                                     }
                                 }
 
@@ -497,7 +504,7 @@
 
                             .example__header {
                                 &--name {
-                                    .toggle-arrow {
+                                    .icon {
                                         transform: rotate(-90deg);
                                         transition: transform 250ms ease-in-out 0s;
                                     }
diff --git a/packages/web-new/src/styles/_json-yaml-warning.scss b/packages/web-new/src/styles/_json-yaml-warning.scss
index bfe3f952d..d502a8374 100644
--- a/packages/web-new/src/styles/_json-yaml-warning.scss
+++ b/packages/web-new/src/styles/_json-yaml-warning.scss
@@ -59,7 +59,6 @@
                 font-weight: var(--fw-bold);
                 font-family: var(--ff-primary);
                 color: var(--clr-neutral-50);
-                // color: var(--clr-neutral-900);
                 transition: background-color 250ms ease-in-out;
             }
             .confirm-btn{
diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss
index 6ba36307b..cb6a35ef4 100644
--- a/packages/web-new/src/styles/_save-menu.scss
+++ b/packages/web-new/src/styles/_save-menu.scss
@@ -39,9 +39,11 @@
             text-align: right;
             margin-bottom: 2rem;
 
-            i{
-                font-size: var(--fs-sub-header);
+            .icon {
+                height: var(--fs-sub-header);
+                width: fit-content;
                 cursor: pointer;
+                fill: var(--clr-neutral-900);
             }
         }
 
@@ -101,8 +103,6 @@
                     height: 4rem;
                     width: fit-content;
                     background-color: var(--clr-neutral-200);
-                    color: var(--clr-neutral-50);
-                    font-size: var(--fs-p);
                     padding: 1rem;
                     border-top-right-radius: 5px;
                     border-bottom-right-radius: 5px;
@@ -110,6 +110,12 @@
                     cursor: pointer;
                     transition: background-color 250ms ease-in-out;
 
+                    .icon {
+                        fill: var(--clr-neutral-50);
+                        height: var(--fs-i);
+                        width: fit-content;
+                    }
+
                     &:hover{
                         background-color: var(--clr-neutral-300);
                     }
@@ -125,6 +131,10 @@
                 cursor: pointer;
                 font-weight: var(--fw-bold);
                 transition: all 250ms ease-in-out;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 1rem;
 
                 &.share-url{
                     margin-bottom: 1rem;
@@ -132,8 +142,11 @@
                     color: var(--clr-neutral-50);
                     border: none;
                     transition: background-color 250ms ease-in-out;
-                    i{
-                        margin-right: 1rem;
+                    
+                    .icon {
+                        height: var(--fs-i);
+                        width: fit-content;
+                        fill: var(--clr-neutral-50);
                     }
 
                     &:hover{
@@ -169,6 +182,10 @@
             & > *{
                 flex: 1;
                 height: 4rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 1rem;
                 border-radius: 5px;
                 border: none;
                 color: var(--clr-neutral-50);
@@ -188,8 +205,10 @@
                     }
                 }
 
-                i{
-                    margin-right: 1rem;
+                .icon {
+                    height: var(--fs-i);
+                    width: fit-content;
+                    fill: var(--clr-neutral-50);
                 }
 
                 &:hover{
diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss
index 575060dd4..970c6f908 100644
--- a/packages/web-new/src/styles/_settings-menu.scss
+++ b/packages/web-new/src/styles/_settings-menu.scss
@@ -40,8 +40,10 @@
             text-align: right;
             margin-bottom: 2rem;
 
-            i {
-                font-size: var(--fs-sub-header);
+            .icon {
+                height: var(--fs-sub-header);
+                width: fit-content;
+                fill: var(--clr-neutral-50);
                 cursor: pointer;
             }
         }
@@ -143,14 +145,16 @@
                         top: 50%;
                         right: 1rem;
                         transform: translateY(-50%);
+                        content: '';
+                        -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        -webkit-mask-size: cover;
+                        mask-size: cover;
                         display: inline-block;
-                        text-rendering: auto;
-                        -webkit-font-smoothing: antialiased;
-                        font: var(--fa-font-solid);
-                        content: "\f107";
+                        height: var(--fs-footer);
+                        width: var(--fs-footer);
                         pointer-events: none;
-                        color: var(--clr-neutral-900);
-                        font-size: var(--fs-footer);
+                        background-color: var(--clr-neutral-900);
                     }
                 }
 
diff --git a/packages/web-new/src/styles/styles.scss b/packages/web-new/src/styles/styles.scss
index 62f07f081..e09417da8 100644
--- a/packages/web-new/src/styles/styles.scss
+++ b/packages/web-new/src/styles/styles.scss
@@ -188,10 +188,6 @@ a {
     font-weight: var(--fw-regular);
 }
 
-i {
-    font-size: var(--fs-i);
-}
-
 ul {
     list-style: none;
 }
@@ -270,7 +266,7 @@ header {
         &__links {
             display: flex;
             align-items: center;
-            justify-content: center;
+            justify-content: space-between;
             gap: 3rem;
 
             a {
@@ -279,16 +275,22 @@ header {
                 align-items: center;
                 justify-content: center;
                 font-size: var(--fs-p);
-                transition: color 250ms ease;
+                transition: color 250ms ease-in-out;
 
                 &:hover {
                     color: var(--clr-neutral-200);
+
+                    .icon {
+                        fill: var(--clr-neutral-200);
+                    }
                 }
             }
 
-            i {
-                font-size: var(--fs-i);
+            .icon {
+                height: var(--fs-i);
                 margin-bottom: .5rem;
+                fill: var(--clr-neutral-50);
+                transition: fill 250ms ease-in-out;
             }
         }
     }
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
index 4a7e0bec1..2ef3c5d15 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -25,10 +25,9 @@
     <!--Font awesome-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-
-    <!-- Font awesome icons -->
-    <script src="https://kit.fontawesome.com/d66d421276.js" crossorigin="anonymous"></script>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;700;900&display=swap"
+        rel="stylesheet">
 
     <!--Favicon assets-->
     <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
@@ -166,17 +165,39 @@
                             <path
                                 d=" M108.804962,235.305420   C103.958778,230.381348 99.370300,225.732193 93.712326,219.999420   C98.740349,219.999420 102.431915,219.999435 106.123474,219.999435   C113.105667,219.999435 120.089302,220.087296 127.069595,219.972275   C132.912613,219.876007 134.453690,221.672073 134.860825,226.981781   C135.416733,234.231567 134.999588,241.555954 134.999588,249.531662   C124.750420,247.046677 116.965103,241.200577 108.804962,235.305420  z" />
                         </svg>
+                    </a>
                 </div>
                 <div class="navbar__title">
-                    <h1>Thing Description Playground <span>- BETA Version</span></h1>
+                    <h1>Thing Description Playground</h1>
                 </div>
                 <div class="navbar__links">
                     <a href="https://github.com/eclipse-thingweb/playground/discussions/492" class="feedback-link"
-                        target="_blank" title="This is a new design which is open to feedback to change the layout and UX"><i class="fa-solid fa-comments"></i><span>Feedback</span></a>
+                        target="_blank"
+                        title="This is a new design which is open to feedback to change the layout and UX">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
+                            class="feedback-icon icon">
+                            <path
+                                d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z" />
+                        </svg>
+                        <span>Feedback</span>
+                    </a>
                     <a href="https://github.com/eclipse-thingweb/playground/tree/master/packages/cli" class="cli-link"
-                        target="_blank"><i class="fa-solid fa-terminal"></i><span>CLI</span></a>
-                    <a href="https://github.com/eclipse-thingweb/playground" class="git-link" target="_blank"><i
-                            class="fa-brands fa-github"></i><span>Github</span></a>
+                        target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 576 512"
+                            class="terminal-icon icon">
+                            <path
+                                d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+                        </svg>
+                        <span>CLI</span>
+                    </a>
+                    <a href="https://github.com/eclipse-thingweb/playground" class="git-link" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 496 512"
+                            class="github-icon icon">
+                            <path
+                                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+                        </svg>
+                        <span>Github</span>
+                    </a>
                 </div>
             </div>
         </div>
@@ -188,22 +209,38 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
             <div class="main-content">
                 <div class="control-panel">
                     <button class="control-panel__btn" id="validate-btn">
-                        <i class="fa-solid fa-play"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="play-icon icon">
+                            <path
+                                d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
+                        </svg>
                         <p class="text-icon">Validate</p>
                     </button>
 
                     <button class="control-panel__btn" id="examples-btn">
-                        <i class="fa-solid fa-file-code"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="code-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" />
+                        </svg>
                         <p class="text-icon">Examples</p>
                     </button>
 
                     <button class="control-panel__btn" id="save-btn">
-                        <i class="fa-solid fa-file-arrow-down"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="save-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z" />
+                        </svg>
                         <p class="text-icon">Save</p>
                     </button>
 
                     <button class="control-panel__btn" id="settings-btn">
-                        <i class="fa-solid fa-gear"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                            class="gear-icon icon">
+                            <path
+                                d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+                        </svg>
                         <p class="text-icon">Settings</p>
                     </button>
                 </div>
@@ -212,7 +249,11 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                     <div class="ide__tabs">
                         <ul class="ide__tabs__left">
                             <li class="ide__tabs__add" id="ide-tab-add">
-                                <i class="fa-solid fa-plus"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                    class="plus-icon icon">
+                                    <path
+                                        d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
+                                </svg>
                             </li>
                         </ul>
 
@@ -245,7 +286,13 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                             class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
                     </div>
                     <div class="console-controllers">
-                        <button class="min-max"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></button>
+                        <button class="min-max">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                class="collapse-arrows icon">
+                                <path
+                                    d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z" />
+                            </svg>
+                        </button>
                     </div>
                 </div>
                 <div class="console__content">
@@ -253,53 +300,95 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                         <div class="validation-container">
                             <details class="json-validation-section" id="spot-json">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-validation-section" id="spot-schema">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON Schema Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-defaults-section" id="spot-defaults">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">(With Defaults) JSON Schema Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="jsonls-validation-section" id="spot-jsonld">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON-LD Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="additional-checks-section" id="spot-additional">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">Additional Checks</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                                 <div class="section-additional">
                                     <details class="enumConst-section" id="enumConst-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Enum/Const</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -308,9 +397,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linkedAffordances-section" id="linkedAffordances-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Linked Affordances</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -319,9 +415,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linkedStructure-section" id="linkedStructure-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Linked Structure</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -330,9 +433,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linksRelTypeCount-section" id="linksRelTypeCount-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Links Rel:Type Count</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -341,9 +451,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="multiLangConsistency-section" id="multiLangConsistency-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Multi-Language Consistency</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -352,9 +469,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="propItems-section" id="propItems-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Properties Items</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -363,9 +487,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="propUniqueness-section" id="propUniqueness-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Properties Uniqueness</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -374,9 +505,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="readWriteOnly-section" id="readWriteOnly-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Read/WriteOnly</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -385,9 +523,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="security-section" id="security-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Security</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -396,9 +541,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="uriVariableSecurity-section" id="uriVariableSecurity-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">URI Variable Security</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -417,7 +569,14 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="open-api-yaml">YAML</button>
                             </div>
                             <div class="view-download">
-                                <button id="open-api-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="open-api-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -430,7 +589,14 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="async-api-yaml">YAML</button>
                             </div>
                             <div class="view-download">
-                                <button id="async-api-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="async-api-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -438,9 +604,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                     <div class="console-view aas-view hidden" id="aas-view">
                         <div class="aas-container" id="aas-container"></div>
                         <div class="aas-inputs">
-                            <p class="warning-txt">*Protocols other than HTTP(S), MQTT and Modbus are not officially supported by AID, do not use the resulting AID in production*</p>
+                            <p class="warning-txt">*Protocols other than HTTP(S), MQTT and Modbus are not officially
+                                supported by AID, do not use the resulting AID in production*</p>
                             <div class="view-download">
-                                <button id="aas-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="aas-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg> Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -453,11 +626,32 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="defaults-yaml">YAML</button>
                             </div>
                             <div class="input-field">
-                                <button id="defaults-add"><i class="fa-solid fa-plus"></i>Defaults</button>
-                                <button id="defaults-remove"><i class="fa-solid fa-minus"></i>Defaults</button>
+                                <button id="defaults-add">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="plus-icon icon">
+                                        <path
+                                            d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
+                                    </svg>
+                                    Defaults
+                                </button>
+                                <button id="defaults-remove">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="minus-icon icon">
+                                        <path
+                                            d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
+                                    </svg>
+                                    Defaults
+                                </button>
                             </div>
                             <div class="view-download">
-                                <button id="defaults-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="defaults-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
 
                         </div>
@@ -477,8 +671,23 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                             <div class="visualize-inputs__graph">
                                 <div class="input-field">
-                                    <button id="collapse-all"><i class="fa-solid fa-compress"></i>Collapse</button>
-                                    <button id="expand-all"><i class="fa-solid fa-expand"></i>Expand</button>
+                                    <button id="collapse-all">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 448 512" class="collapse-square-icon icon">
+                                            <path
+                                                d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z" />
+                                        </svg>
+                                        Collapse
+                                    </button>
+
+                                    <button id="expand-all">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 448 512" class="expand-square-icon icon">
+                                            <path
+                                                d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
+                                        </svg>
+                                        Expand
+                                    </button>
                                 </div>
                             </div>
 
@@ -489,8 +698,22 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                             <div class="visualize-inputs__download">
                                 <div class="input-field">
-                                    <button id="download-svg"><i class="fa-solid fa-download"></i>SVG</button>
-                                    <button id="download-png"><i class="fa-solid fa-download"></i>PNG</button>
+                                    <button id="download-svg">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 512 512" class="download-icon icon">
+                                            <path
+                                                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                        </svg>
+                                        SVG
+                                    </button>
+                                    <button id="download-png">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 512 512" class="download-icon icon">
+                                            <path
+                                                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                        </svg>
+                                        PNG
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -507,7 +730,11 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
         <div class="settings-menu closed">
             <div class="settings">
                 <div class="settings__close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
                 <h3 class="settings__title">Settings</h3>
                 <form action="#" class="settings__validate-options">
@@ -574,7 +801,11 @@ <h3 class="settings__preferences">Preferences</h3>
         <div class="examples-menu closed">
             <div class="examples-menu-container">
                 <div class="examples-menu-container__close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
 
                 <form action="#" class="examples-menu-container__filter">
@@ -595,9 +826,12 @@ <h3 class="settings__preferences">Preferences</h3>
                     <div class="search-field">
                         <label for="thing-category"></label>
                         <div class="search-bar">
-                            <i class="fa-solid fa-magnifying-glass"></i>
-                            <input type="text" class="search-input"
-                                placeholder="Find examples based on card details">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 512 512"
+                                class="search-icon icon">
+                                <path
+                                    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
+                            </svg>
+                            <input type="text" class="search-input" placeholder="Find examples based on card details">
                         </div>
                         <input type="submit" value="Search" class="search-btn"
                             title="Find a specific example by searching within the card details">
@@ -631,7 +865,11 @@ <h3>Search Results</h3>
         <div class="save-menu closed">
             <div class="save-menu__container">
                 <div class="save-menu-close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
 
                 <div class="save-menu-title">
@@ -644,17 +882,37 @@ <h3>Search Results</h3>
                         <input type="text" id="share-url-input" class="share-url-input"
                             placeholder="Click on share to get your link">
                         <button type="button" title="Open the url in a new playground tab" class="open-url-tab"
-                            id="open-url-tab"><i class="fa-solid fa-arrow-up-right-from-square"></i></button>
+                            id="open-url-tab">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                class="open-tab-icon icon">
+                                <path
+                                    d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
+                            </svg>
+                        </button>
                     </div>
                     <button type="button" title="Generate a link to share your TD/TM" class="share-td__btn share-url"
-                        id="share-url-btn"><i class="fa-solid fa-link"></i>Share</button>
+                        id="share-url-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
+                            class="link-icon icon">
+                            <path
+                                d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z" />
+                        </svg>
+                        Share
+                    </button>
                     <button type="button" title="Export your TD/TM to ediTDor" class="share-td__btn open-editdor"
                         id="open-editdor-btn">Open in ediTDor</button>
                 </div>
 
                 <div class="save-td">
                     <button type="button" title="Download your current TD/TM" class="save-td__download"
-                        id="download-btn"><i class="fa-solid fa-file-arrow-down"></i>Download</button>
+                        id="download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="save-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z" />
+                        </svg>
+                        Download
+                    </button>
                     <!-- <button type="button"
                         title="Save your current TD/TM in your file system with your name and location of preference"
                         class="save-td__save-as" id="save-as-btn"><i class="fa-solid fa-folder-open"></i>Save
diff --git a/packages/web-new/webpack.config.js b/packages/web-new/webpack.config.js
index 573a64d44..01571ad4a 100644
--- a/packages/web-new/webpack.config.js
+++ b/packages/web-new/webpack.config.js
@@ -69,7 +69,7 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-                    type: 'asset/resource'
+                    type: 'asset/resource',
                 },
                 {
                     test: /\.scss$/,
@@ -99,7 +99,7 @@ module.exports = (env, argv) => {
                 title: 'Webpack App',
                 filename: 'index.html',
                 template: 'src/template.html',
-                favicon: 'src/assets/favicon/favicon.ico'
+                favicon: 'src/assets/favicon/favicon.ico',
             }),
             new CopyWebpackPlugin({
                 patterns: [

From be2a71caba51a36428d7bdf27fb5a7475b44ba3d Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Fri, 5 Jan 2024 07:55:10 +0100
Subject: [PATCH 2/5] removing unnecessary file

---
 packages/web-new/src/scripts/svgs.js | 71 ----------------------------
 1 file changed, 71 deletions(-)
 delete mode 100644 packages/web-new/src/scripts/svgs.js

diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js
deleted file mode 100644
index fd21ddf1b..000000000
--- a/packages/web-new/src/scripts/svgs.js
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-//Play button:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
-
-//code file (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>
-
-//Download file (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>
-
-//settings (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
-
-//plus icon
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
-
-//x icon:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
-
-//feedback (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
-
-// cli:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
-
-// github rounded:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-
-// angle right:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
-
-// angle down:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
-
-// expand arrows:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>
-
-// collapse arrows
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>
-
-//import file
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>
-
-// search icon
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
-
-// open in new tab
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
-
-// link
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
-
-// download secondary
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
-
-// minus
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
-
-//collapse square:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>
-
-//expand square:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
-
-//slashed eye
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
-
-// check icon:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-

From 878c24b05e2ecda21e5bafe523079918958a0dd2 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Fri, 5 Jan 2024 05:21:55 +0100
Subject: [PATCH 3/5] Changed all icons for svgs

- Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs
---
 .../src/assets/img/angle-down-solid.svg       |   1 +
 .../src/assets/img/eye-slash-solid.svg        |   1 +
 packages/web-new/src/assets/img/eye-solid.svg |   1 +
 packages/web-new/src/scripts/console.js       |   8 +
 packages/web-new/src/scripts/editor.js        |  55 ++-
 packages/web-new/src/scripts/examples-menu.js |  79 ++--
 packages/web-new/src/scripts/main.js          |  20 +-
 packages/web-new/src/scripts/save-menu.js     |   2 +-
 packages/web-new/src/scripts/settings-menu.js |   2 +-
 packages/web-new/src/scripts/svgs.js          |  71 ++++
 packages/web-new/src/scripts/util.js          |  43 +-
 packages/web-new/src/styles/_console.scss     |  79 ++--
 .../web-new/src/styles/_control-panel.scss    |  12 +-
 packages/web-new/src/styles/_editor.scss      |  90 ++--
 .../web-new/src/styles/_examples-menu.scss    |  65 +--
 .../src/styles/_json-yaml-warning.scss        |   1 -
 packages/web-new/src/styles/_save-menu.scss   |  35 +-
 .../web-new/src/styles/_settings-menu.scss    |  20 +-
 packages/web-new/src/styles/styles.scss       |  18 +-
 packages/web-new/src/template.html            | 388 +++++++++++++++---
 packages/web-new/webpack.config.js            |   4 +-
 21 files changed, 747 insertions(+), 248 deletions(-)
 create mode 100644 packages/web-new/src/assets/img/angle-down-solid.svg
 create mode 100644 packages/web-new/src/assets/img/eye-slash-solid.svg
 create mode 100644 packages/web-new/src/assets/img/eye-solid.svg
 create mode 100644 packages/web-new/src/scripts/svgs.js

diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg
new file mode 100644
index 000000000..cabe8a94f
--- /dev/null
+++ b/packages/web-new/src/assets/img/angle-down-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path opacity="1" fill="#1E3050" d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg
new file mode 100644
index 000000000..f592dabfe
--- /dev/null
+++ b/packages/web-new/src/assets/img/eye-slash-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg
new file mode 100644
index 000000000..1f07b7f80
--- /dev/null
+++ b/packages/web-new/src/assets/img/eye-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>
\ No newline at end of file
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index 90a83ad56..0531d3c6a 100644
--- a/packages/web-new/src/scripts/console.js
+++ b/packages/web-new/src/scripts/console.js
@@ -75,6 +75,14 @@ function collapseConsole() {
     consoleElement.style.flex = `0 39px`
     minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
     minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+minMaxBtn.addEventListener("click", () => {
+
+    if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
+        mainContentElement.style.flex = "1 0"
+        consoleElement.style.flex = `0 39px`
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 
     textIcon.forEach(text => {
         text.classList.remove("hiddenV")
diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
index 425d1f393..d5db9eca7 100644
--- a/packages/web-new/src/scripts/editor.js
+++ b/packages/web-new/src/scripts/editor.js
@@ -92,29 +92,64 @@ function createTab(tabNumber, exampleName, thingType) {
   //Add the close btn element
   const closeBtn = document.createElement("div")
   closeBtn.classList.add("close-tab")
-  //Assign icon to the close btn
-  const closeIcon = document.createElement("i")
-  closeIcon.classList.add("fa-solid", "fa-xmark")
 
-  closeBtn.appendChild(closeIcon)
+  // Create the svg close icon
+  const closeIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  closeIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  closeIconSvg.setAttribute("width", "100%")
+  closeIconSvg.setAttribute("height", "100%")
+  closeIconSvg.setAttribute("viewBox", "0 0 384 512")
+
+  // Create a path element and set its attributes
+  const closeIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  closeIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  //append the path to the svg and the svg to the button
+  closeIconSvg.appendChild(closeIconPath)
+  closeBtn.appendChild(closeIconSvg)
 
   //Create the close confirmation btns
   const confirmBtns = document.createElement("div")
   confirmBtns.classList.add("confirm-btns", "hidden")
 
+  //Confirm close button
   const confirmTabClose = document.createElement("button")
   confirmTabClose.classList.add("confirm-tab-close")
   confirmTabClose.textContent = "Close"
-  const confirmTabIcon = document.createElement("i")
-  confirmTabIcon.classList.add("fa-solid", "fa-check")
-  confirmTabClose.appendChild(confirmTabIcon)
+  // Create the svg confirm close icon
+  const confirmIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  confirmIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  confirmIconSvg.setAttribute("width", "100%")
+  confirmIconSvg.setAttribute("height", "100%")
+  confirmIconSvg.setAttribute("viewBox", "0 0 448 512")
+  confirmIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const confirmIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  confirmIconPath.setAttribute("d", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z")
+
+  confirmIconSvg.appendChild(confirmIconPath)
+  confirmTabClose.appendChild(confirmIconSvg)
   
+  //Cancel close button
   const cancelTabClose = document.createElement("button")
   cancelTabClose.classList.add("cancel-tab-close")
   cancelTabClose.textContent = "Cancel"
-  const cancelTabIcon = document.createElement("i")
-  cancelTabIcon.classList.add("fa-solid", "fa-xmark")
-  cancelTabClose.appendChild(cancelTabIcon)
+  
+  // Create the svg close cancel icon
+  const cancelIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  cancelIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  cancelIconSvg.setAttribute("width", "100%")
+  cancelIconSvg.setAttribute("height", "100%")
+  cancelIconSvg.setAttribute("viewBox", "0 0 384 512")
+  cancelIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const cancelIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  cancelIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  cancelIconSvg.appendChild(cancelIconPath)
+  cancelTabClose.appendChild(cancelIconSvg)
 
   cancelTabClose.addEventListener("click", () => {
     cancelTabClose.parentElement.classList.add("hidden")
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
index 1a00e0f83..088a25703 100644
--- a/packages/web-new/src/scripts/examples-menu.js
+++ b/packages/web-new/src/scripts/examples-menu.js
@@ -26,7 +26,7 @@ import { createIde, ideCount, tabsLeft } from "./editor"
 /***********************************************************/
 /*                      Examples menu                      */
 /***********************************************************/
-const closeExamples = document.querySelector(".examples-menu-container__close i")
+const closeExamples = document.querySelector(".examples-menu-container__close .x-icon")
 const examplesMenu = document.querySelector(".examples-menu")
 const examplesBtn = document.querySelector("#examples-btn")
 const categorySelect = document.querySelector('#thing-category')
@@ -267,23 +267,23 @@ async function getAllExamples(categoryId, thingType) {
         exampleNameIcon.classList.add("example-icon")
 
         // Create an SVG element
-        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-        svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-        svgElement.setAttribute("width", "100%")
-        svgElement.setAttribute("viewBox", "0 0 351 379")
-        svgElement.setAttribute("fill", "none")
+        const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        tdFileSvg.setAttribute("width", "100%")
+        tdFileSvg.setAttribute("viewBox", "0 0 351 379")
+        tdFileSvg.setAttribute("fill", "none")
 
         // Create a path element and set its attributes
-        const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path")
-        pathElement.setAttribute("fill-rule", "evenodd")
-        pathElement.setAttribute("clip-rule", "evenodd")
-        pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
+        const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        tdFilePath.setAttribute("fill-rule", "evenodd")
+        tdFilePath.setAttribute("clip-rule", "evenodd")
+        tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
 
         // Append the path element to the SVG element
-        svgElement.appendChild(pathElement)
+        tdFileSvg.appendChild(tdFilePath)
 
         // Append the SVG element to the document body or any other desired location
-        exampleNameIcon.appendChild(svgElement);
+        exampleNameIcon.appendChild(tdFileSvg);
 
         // Append the icon container to the name container
         exampleName.appendChild(exampleNameIcon)
@@ -292,11 +292,21 @@ async function getAllExamples(categoryId, thingType) {
         const exampleNameTitle = document.createElement('p')
         exampleNameTitle.innerText = example[1]["title"]
         exampleName.appendChild(exampleNameTitle)
-        
-        // //Create, populate and append the example title toggle arrow
-        const exampleNameArrow = document.createElement('i')
-        exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow")
-        exampleName.appendChild(exampleNameArrow)
+
+        //Create, populate and append the example title toggle arrow
+        const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        exampleArrowSvg.setAttribute("width", "100%")
+        exampleArrowSvg.setAttribute("height", "100%")
+        exampleArrowSvg.setAttribute("viewBox", "0 0 448 512")
+        exampleArrowSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z")
+
+        exampleArrowSvg.appendChild(exampleArrowPath)
+        exampleName.appendChild(exampleArrowSvg)
 
         //Append the whole name component to the header component
         exampleHeader.appendChild(exampleName)
@@ -305,9 +315,20 @@ async function getAllExamples(categoryId, thingType) {
         const quickBtn = document.createElement('button')
         quickBtn.classList.add("example__header--quick")
         quickBtn.setAttribute("title", "Use")
-        const quickButtonIcon = document.createElement('i')
-        quickButtonIcon.classList.add("fa-solid", "fa-file-import")
-        quickBtn.appendChild(quickButtonIcon)
+        // create the svg icon for the quick use button
+        const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        importFileSvg.setAttribute("width", "100%")
+        importFileSvg.setAttribute("height", "100%")
+        importFileSvg.setAttribute("viewBox", "0 0 512 512")
+        importFileSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        importFileSvg.appendChild(importFilePath)
+        quickBtn.appendChild(importFileSvg)
         exampleHeader.appendChild(quickBtn)
 
 
@@ -343,9 +364,21 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtnUse.classList.add("example__btn--use")
         exampleBtns.appendChild(exampleBtnUse)
 
-        const exampleIconUse = document.createElement('i')
-        exampleIconUse.classList.add("fa-solid", "fa-file-import")
-        exampleBtnUse.appendChild(exampleIconUse)
+        //todo: create the apply button
+        // create the svg icon for the apply button
+        const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        applyIconSvg.setAttribute("width", "100%")
+        applyIconSvg.setAttribute("height", "100%")
+        applyIconSvg.setAttribute("viewBox", "0 0 512 512")
+        applyIconSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        applyIconSvg.appendChild(applyIconPath)
+        exampleBtnUse.appendChild(applyIconSvg)
 
         const exampleTxtUse = document.createElement('p')
         exampleTxtUse.innerText = "Apply"
diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
index 030d062a4..0112de2ad 100644
--- a/packages/web-new/src/scripts/main.js
+++ b/packages/web-new/src/scripts/main.js
@@ -166,14 +166,16 @@ function onmousemoveY(e) {
       t.style.flex = "1 0"
 
       if(h > 38){
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
 
         consoleElement.classList.remove("collapsed")
         consoleElement.classList.add("expanded")
       }else{
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 
         consoleElement.classList.remove("expanded")
         consoleElement.classList.add("collapsed")
@@ -192,14 +194,16 @@ function onmousemoveY(e) {
       b.style.flex = "1 0"
 
       if(h < 714){
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
 
         consoleElement.classList.remove("collapsed")
         consoleElement.classList.add("expanded")
       }else{
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 
         consoleElement.classList.remove("expanded")
         consoleElement.classList.add("collapsed")
diff --git a/packages/web-new/src/scripts/save-menu.js b/packages/web-new/src/scripts/save-menu.js
index b50a90f77..647ff61eb 100644
--- a/packages/web-new/src/scripts/save-menu.js
+++ b/packages/web-new/src/scripts/save-menu.js
@@ -28,7 +28,7 @@ import { editorList, getEditorData } from "./editor"
 /***********************************************************/
 const saveMenu = document.querySelector(".save-menu")
 const saveMenuBtn = document.querySelector("#save-btn")
-const closeSaveMenu = document.querySelector(".save-menu-close i")
+const closeSaveMenu = document.querySelector(".save-menu-close .x-icon")
 const shareUrlContainer = document.querySelector("#share-url-input")
 const openUrlTab = document.querySelector("#open-url-tab")
 const thingTypeText = document.querySelector('#thing-type-text')
diff --git a/packages/web-new/src/scripts/settings-menu.js b/packages/web-new/src/scripts/settings-menu.js
index aca8141b0..5580adaed 100644
--- a/packages/web-new/src/scripts/settings-menu.js
+++ b/packages/web-new/src/scripts/settings-menu.js
@@ -26,7 +26,7 @@ import themeData from './monochrome-theme'
 /***********************************************************/
 /*                     Settings menu                       */
 /***********************************************************/
-const closeSettings = document.querySelector(".settings__close i");
+const closeSettings = document.querySelector(".settings__close .x-icon");
 const settingsMenu = document.querySelector(".settings-menu");
 const settingsBtn = document.querySelector("#settings-btn");
 export const editorForm = document.querySelector(".settings__editor")
diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js
new file mode 100644
index 000000000..fd21ddf1b
--- /dev/null
+++ b/packages/web-new/src/scripts/svgs.js
@@ -0,0 +1,71 @@
+
+
+//Play button:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
+
+//code file (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>
+
+//Download file (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>
+
+//settings (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
+
+//plus icon
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+
+//x icon:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+
+//feedback (filled):
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
+
+// cli:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
+
+// github rounded:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+
+// angle right:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
+
+// angle down:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
+
+// expand arrows:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>
+
+// collapse arrows
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>
+
+//import file
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>
+
+// search icon
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+
+// open in new tab
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
+
+// link
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+
+// download secondary
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+
+// minus
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
+
+//collapse square:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>
+
+//expand square:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
+
+//slashed eye
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
+
+// check icon:
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+
diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js
index 7e9b72531..a15d17098 100644
--- a/packages/web-new/src/scripts/util.js
+++ b/packages/web-new/src/scripts/util.js
@@ -233,23 +233,24 @@ export function validate(thingType, editorContent) {
 
     validator(editorContent, log, { checkDefaults: true, checkJsonLd, checkTmConformance })
         .then(result => {
-            // console.log(result)
             Object.keys(result.report).forEach(el => {
                 const spotName = "spot-" + el
                 document.getElementById(spotName).removeAttribute('open')
                 const resultIcon = document.getElementById(spotName).children[0].children[0]
                 if (result.report[el] === "passed") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-check")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("success-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z")
                 }
                 else if (result.report[el] === "warning") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-exclamation")
-
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("warning-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z")
                 }
                 else if (result.report[el] === "failed") {
-                    resultIcon.classList.remove("fa-circle")
-                    resultIcon.classList.add("fa-circle-xmark")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("error-circle-icon")
+                    resultIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z")
                 }
                 else if (result.report[el] === null) {
                     //do nothing
@@ -266,16 +267,19 @@ export function validate(thingType, editorContent) {
                     const detailsIcon = document.getElementById(detailsName).children[0].children[0]
 
                     if (result.details[el] === "passed") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-check")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("success-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z")
                     }
                     else if (result.details[el] === "warning" || result.details[el] === "not-impl") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-exclamation")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("warning-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z")
                     }
                     else if (result.details[el] === "failed") {
-                        detailsIcon.classList.remove("fa-circle")
-                        detailsIcon.classList.add("fa-circle-xmark")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("error-circle-icon")
+                        detailsIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z")
                     }
                     else if (result.details[el] === null) {
                         //do nothing
@@ -310,9 +314,10 @@ export function resetValidationStatus() {
 
     sectionHeaders.forEach(header => {
         const headerIcon = header.children[0]
-        if (!headerIcon.classList.contains("fa-circle")) {
-            headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark")
-            headerIcon.classList.add("fa-circle")
+        if (!headerIcon.classList.contains("neutral-circle-icon")) {
+            headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon")
+            headerIcon.classList.add("neutral-circle-icon")
+            headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z")
         }
     })
 
@@ -344,7 +349,7 @@ function populateCategory(messagesList) {
     document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
         const categoryContainer = category.querySelector("ul.section-content")
         category.classList.remove("disabled")
-        if (category.children[0].children[0].classList.contains("fa-circle-xmark") || category.children[0].children[0].classList.contains("fa-circle-exclamation")) {
+        if (category.children[0].children[0].classList.contains("error-circle-icon") || category.children[0].children[0].classList.contains("warning-circle-icon")) {
             const noticePrompt = document.createElement("p")
             noticePrompt.textContent = "*This feature is still in the testing phase, and it may not refer to the correct source of the error*"
             noticePrompt.classList.add("notice-prompt")
@@ -354,7 +359,7 @@ function populateCategory(messagesList) {
                 listElement.textContent = message
                 categoryContainer.append(listElement)
             })
-        } else if (category.children[0].children[0].classList.contains("fa-circle-check")) {
+        } else if (category.children[0].children[0].classList.contains("success-circle-icon")) {
             const successMessage = document.createElement("li")
             successMessage.textContent = "Validated Successfully"
             categoryContainer.append(successMessage)
diff --git a/packages/web-new/src/styles/_console.scss b/packages/web-new/src/styles/_console.scss
index a7222ec62..ba146b621 100644
--- a/packages/web-new/src/styles/_console.scss
+++ b/packages/web-new/src/styles/_console.scss
@@ -39,12 +39,19 @@
                 appearance: none;
                 border: none;
                 background-color: transparent;
-                color: var(--clr-primary-500);
-                transition: color 250ms ease;
+                cursor: pointer;
+
+                .icon {
+                    fill: var(--clr-primary-500);
+                    height: var(--fs-i);
+                    width: fit-content;
+                    transition: fill 250ms ease;
+                }
 
                 &:hover {
-                    color: var(--clr-primary-700);
-                    cursor: pointer;
+                    .icon {
+                        fill: var(--clr-primary-700);
+                    }
                 }
             }
         }
@@ -99,7 +106,7 @@
                     content: 'Visualize';
                 }
 
-                &:hover{
+                &:hover {
                     background-color: var(--clr-primary-500);
                     color: var(--clr-neutral-50);
                 }
@@ -189,6 +196,9 @@
                         .show-icon {
                             transform: rotate(0);
                             transition: transform 250ms ease-in-out;
+                            cursor: pointer;
+                            height: var(--fs-p);
+                            fill: var(--clr-neutral-900);
                         }
                     }
 
@@ -199,24 +209,31 @@
                         gap: 1rem;
                         cursor: pointer;
 
-                        .fa-circle-check {
-                            color: var(--clr-success-500);
+                        .icon {
+                            width: fit-content;
                         }
 
-                        .fa-circle-exclamation {
-                            color: var(--clr-warning-500);
+                        .neutral-circle-icon,
+                        .success-circle-icon,
+                        .warning-circle-icon,
+                        .error-circle-icon {
+                            height: var(--fs-i);
                         }
 
-                        .fa-circle-xmark {
-                            color: var(--clr-error-500);
+                        .neutral-circle-icon {
+                            fill: var(--clr-neutral-300);
                         }
 
-                        .fa-circle {
-                            color: var(--clr-neutral-300);
+                        .success-circle-icon {
+                            fill: var(--clr-success-500);
                         }
 
-                        .show-icon {
-                            cursor: pointer;
+                        .warning-circle-icon {
+                            fill: var(--clr-warning-500);
+                        }
+
+                        .error-circle-icon {
+                            fill: var(--clr-error-500);
                         }
 
                         .title {
@@ -345,6 +362,12 @@
                     align-items: center;
                     gap: 1rem;
 
+                    .icon {
+                        fill: var(--clr-neutral-50);
+                        height: var(--fs-i);
+                        width: fit-content;
+                    }
+
                     &:hover {
                         background-color: var(--clr-primary-900);
                     }
@@ -388,10 +411,6 @@
                     align-items: center;
                     justify-content: center;
                     gap: 1rem;
-
-                    i {
-                        font-size: var(--fs-p);
-                    }
                 }
             }
         }
@@ -541,17 +560,19 @@
 
                                 &::before {
                                     position: absolute;
-                                    content: '\f06e';
-                                    display: inline-block;
-                                    text-rendering: auto;
-                                    -webkit-font-smoothing: antialiased;
-                                    font: var(--fa-font-solid);
-                                    font-size: var(--fs-p);
-                                    color: var(--clr-neutral-50);
                                     top: 50%;
                                     left: 50%;
                                     transform: translate(-50%, -50%);
-                                    transition: all 500ms ease-in-out;
+                                    content: '';
+                                    -webkit-mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%;
+                                    mask: url('../assets/img/eye-solid.svg') no-repeat 50% 50%;
+                                    -webkit-mask-size: cover;
+                                    mask-size: cover;
+                                    display: inline-block;
+                                    height: calc(var(--fs-i) - .2rem);
+                                    width: var(--fs-i);
+                                    pointer-events: none;
+                                    background-color: var(--clr-neutral-50);
                                 }
 
                                 &:hover {
@@ -562,7 +583,9 @@
 
                             input[type="checkbox"]:checked {
                                 &::before {
-                                    content: '\f070';
+                                    -webkit-mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%;
+                                    mask: url('../assets/img/eye-slash-solid.svg') no-repeat 50% 50%;
+                                    height: var(--fs-i);
                                 }
                             }
 
diff --git a/packages/web-new/src/styles/_control-panel.scss b/packages/web-new/src/styles/_control-panel.scss
index 058695a1b..5ce141f58 100644
--- a/packages/web-new/src/styles/_control-panel.scss
+++ b/packages/web-new/src/styles/_control-panel.scss
@@ -35,7 +35,7 @@
         border-bottom: 2px solid var(--clr-primary-500);
         font-family: var(--ff-primary);
         cursor: pointer;
-        transition: all 250ms ease;
+        transition: all 250ms ease-in-out;
 
         &:last-child {
             border-color: var(--clr-neutral-50);
@@ -48,10 +48,16 @@
         &:hover {
             color: var(--clr-neutral-50);
             background-color: var(--clr-primary-500);
+
+            .icon {
+                fill: var(--clr-neutral-50);
+            }
         }
 
-        i {
-            font-size: var(--fs-i);
+        .icon {
+            height: var(--fs-i);
+            fill: var(--clr-primary-500);
+            transition: fill 250ms ease-in-out;
         }
 
         p {
diff --git a/packages/web-new/src/styles/_editor.scss b/packages/web-new/src/styles/_editor.scss
index 7121e283d..f396aa69b 100644
--- a/packages/web-new/src/styles/_editor.scss
+++ b/packages/web-new/src/styles/_editor.scss
@@ -47,7 +47,7 @@
                 white-space: nowrap;
                 cursor: pointer;
 
-                span{
+                span {
                     font-size: 1rem;
                     font-weight: bold;
                     margin-right: 1rem;
@@ -57,10 +57,6 @@
                     font-weight: var(--fw-bold);
                 }
 
-                i {
-                    font-size: var(--fs-p);
-                }
-
                 &.active {
                     background-color: var(--clr-neutral-50);
                     color: var(--clr-neutral-900);
@@ -88,16 +84,22 @@
                 padding-right: 3rem;
                 min-width: 17rem;
 
-                .tab-icon{
+                .tab-icon {
                     font-size: 1rem;
                     width: fit-content;
                     color: var(--clr-td-300);
                 }
 
-                &.active{
-                    .tab-icon{
+                &.active {
+                    .tab-icon {
                         color: var(--clr-td-500);
                     }
+
+                    .close-tab {
+                        svg {
+                            fill: var(--clr-neutral-900);
+                        }
+                    }
                 }
 
                 .close-tab {
@@ -114,35 +116,42 @@
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    transition: all 250ms ease-in-out;
+                    transition: background-color 250ms ease-in-out;
+
+                    svg {
+                        pointer-events: none;
+                        height: 1.3rem;
+                        fill: var(--clr-neutral-300);
+                        transition: fill 250ms ease-in-out;
+                    }
 
                     &:hover {
                         background-color: var(--clr-neutral-200);
-                    }
 
-                    i {
-                        pointer-events: none;
-                        font-size: 1.4rem;
-                        height: 1.3rem;
+                        svg {
+                            fill: var(--clr-neutral-900);
+                        }
                     }
                 }
 
-                .confirm-btns{
+                .confirm-btns {
                     position: absolute;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100%;
+                    padding: .5rem 1rem;
                     background-color: var(--clr-neutral-50);
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    gap: 1rem;
+                    gap: .5rem;
                     opacity: 1;
                     pointer-events: all;
                     transition: opacity 250ms ease-in-out;
 
-                    button{
+                    button {
+                        flex: 1;
                         display: flex;
                         align-items: center;
                         justify-content: center;
@@ -158,29 +167,32 @@
                         padding: .25rem 1rem;
                         transition: background-color 250ms ease-in-out;
 
-                        i{
+                        .icon {
                             order: -1;
+                            height: var(--fs-p);
+                            width: fit-content;
+                            fill: var(--clr-neutral-50);
                         }
 
-                        &.confirm-tab-close{
+                        &.confirm-tab-close {
                             background-color: var(--clr-success-500);
 
-                            &:hover{
+                            &:hover {
                                 background-color: var(--clr-success-700);
                             }
                         }
-    
-                        &.cancel-tab-close{
+
+                        &.cancel-tab-close {
                             background-color: var(--clr-error-700);
 
-                            &:hover{
+                            &:hover {
                                 background-color: var(--clr-error-900);
                             }
                         }
                     }
 
 
-                    &.hidden{
+                    &.hidden {
                         opacity: 0;
                         pointer-events: none;
                     }
@@ -189,18 +201,28 @@
 
             li:last-child {
                 min-width: 3.5rem;
-                transition: all 250ms ease-in-out;
+                transition: background-color 250ms ease-in-out;
+
+                .icon {
+                    height: var(--fs-p);
+                    fill: var(--clr-neutral-300);
+                    transition: fill 250ms ease-in-out;
+                }
 
-                &:hover{
+                &:hover {
                     background-color: var(--clr-neutral-50);
-                    color: var(--clr-neutral-900);
+
+                    .icon {
+                        fill: var(--clr-neutral-900);
+                    }
                 }
             }
         }
 
-        &__right{
+        &__right {
             height: 100%;
-            input[type=radio]{
+
+            input[type=radio] {
                 appearance: none;
                 width: 6rem;
                 height: 100%;
@@ -215,7 +237,7 @@
                 overflow: hidden;
                 transition: all 250ms ease-in-out;
 
-                &::before{
+                &::before {
                     width: 100%;
                     height: 100%;
                     display: flex;
@@ -223,16 +245,16 @@
                     justify-content: center;
                 }
 
-                &:nth-child(1)::before{
+                &:nth-child(1)::before {
                     content: 'JSON';
                 }
 
-                &:nth-child(2)::before{
+                &:nth-child(2)::before {
                     content: 'YAML';
                 }
             }
 
-            input[type=radio]:checked{
+            input[type=radio]:checked {
                 background-color: var(--clr-neutral-50);
                 color: var(--clr-neutral-900);
             }
@@ -244,7 +266,7 @@
             pointer-events: none;
             width: 0;
             height: 0;
-            opacity: 0;   
+            opacity: 0;
         }
 
         .editor.active {
diff --git a/packages/web-new/src/styles/_examples-menu.scss b/packages/web-new/src/styles/_examples-menu.scss
index 1e751d698..77a3b0e7c 100644
--- a/packages/web-new/src/styles/_examples-menu.scss
+++ b/packages/web-new/src/styles/_examples-menu.scss
@@ -45,9 +45,11 @@
             width: 100%;
             text-align: right;
 
-            i {
-                font-size: var(--fs-sub-header);
+            .icon {
+                width: fit-content;
+                height: var(--fs-sub-header);
                 cursor: pointer;
+                fill: var(--clr-neutral-900);
             }
         }
 
@@ -158,15 +160,18 @@
                         top: 50%;
                         right: 2rem;
                         transform: translateY(-50%);
+                        content: '';
+                        -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        -webkit-mask-size: cover;
+                        mask-size: cover;
                         display: inline-block;
-                        text-rendering: auto;
-                        -webkit-font-smoothing: antialiased;
-                        font: var(--fa-font-solid);
-                        content: "\f107";
+                        height: 1.25rem;
+                        width: 1.25rem;
                         pointer-events: none;
-                        color: var(--clr-neutral-900);
-                        font-size: var(--fs-p);
+                        background-color: var(--clr-neutral-300);
                     }
+
                 }
 
                 select,
@@ -216,12 +221,13 @@
                     background-color: var(--clr-neutral-50);
                     color: var(--clr-neutral-900);
                     font-family: var(--ff-primary);
-                    font-size: inherit;
+                    font-size: var(--fs-p);
 
-                    i {
+                    .icon {
+                        height: var(--fs-p);
                         width: fit-content;
                         padding: 0 1rem;
-                        font-size: inherit;
+                        fill: var(--clr-neutral-300);
                     }
 
                     .search-input {
@@ -231,7 +237,7 @@
                         font-size: inherit;
                         border: none;
                         width: 100%;
-                        padding: .8rem 1rem;
+                        padding: .8rem 1rem .8rem 0;
                         appearance: none;
                         cursor: text;
 
@@ -360,8 +366,10 @@
                                         font-weight: var(--fw-bold);
                                     }
 
-                                    .toggle-arrow {
-                                        font-size: var(--fs-footer);
+                                    .icon {
+                                        fill: var(--clr-neutral-900);
+                                        height: var(--fs-footer);
+                                        width: fit-content;
                                         transform: rotate(0);
                                         transition: transform 250ms ease-in-out 250ms;
                                     }
@@ -380,10 +388,11 @@
                                     cursor: pointer;
                                     transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out;
 
-                                    i {
-                                        font-size: var(--fs-i);
-                                        color: var(--clr-neutral-50);
-                                        transition: color 250ms ease-in-out;
+                                    .icon {
+                                        height: var(--fs-i);
+                                        width: fit-content;
+                                        fill: var(--clr-neutral-50);
+                                        transition: fill 250ms ease-in-out;
                                     }
                                 }
                             }
@@ -397,25 +406,21 @@
 
                                         opacity: 1;
 
-                                        i {
-                                            color: var(--clr-neutral-300);
+                                        .icon {
+                                            fill: var(--clr-neutral-300);
                                         }
 
                                         &:hover {
                                             background-color: var(--clr-neutral-100);
 
-                                            i {
-                                                color: var(--clr-neutral-900);
+                                            .icon {
+                                                fill: var(--clr-neutral-900);
                                             }
                                         }
                                     }
                                 }
                             }
 
-                            &:hover{
-                                box-shadow: 0px 0px 10px 0px var(--clr-shadow);
-                            }
-
                             &__content {
                                 pointer-events: none;
                                 display: flex;
@@ -463,9 +468,11 @@
                                         font-weight: var(--fw-bold);
                                     }
 
-                                    i {
+                                    .icon {
                                         margin-right: 1rem;
-                                        font-size: var(--fs-p);
+                                        height: var(--fs-p);
+                                        width: fit-content;
+                                        fill: var(--clr-neutral-50);
                                     }
                                 }
 
@@ -497,7 +504,7 @@
 
                             .example__header {
                                 &--name {
-                                    .toggle-arrow {
+                                    .icon {
                                         transform: rotate(-90deg);
                                         transition: transform 250ms ease-in-out 0s;
                                     }
diff --git a/packages/web-new/src/styles/_json-yaml-warning.scss b/packages/web-new/src/styles/_json-yaml-warning.scss
index bfe3f952d..d502a8374 100644
--- a/packages/web-new/src/styles/_json-yaml-warning.scss
+++ b/packages/web-new/src/styles/_json-yaml-warning.scss
@@ -59,7 +59,6 @@
                 font-weight: var(--fw-bold);
                 font-family: var(--ff-primary);
                 color: var(--clr-neutral-50);
-                // color: var(--clr-neutral-900);
                 transition: background-color 250ms ease-in-out;
             }
             .confirm-btn{
diff --git a/packages/web-new/src/styles/_save-menu.scss b/packages/web-new/src/styles/_save-menu.scss
index 6ba36307b..cb6a35ef4 100644
--- a/packages/web-new/src/styles/_save-menu.scss
+++ b/packages/web-new/src/styles/_save-menu.scss
@@ -39,9 +39,11 @@
             text-align: right;
             margin-bottom: 2rem;
 
-            i{
-                font-size: var(--fs-sub-header);
+            .icon {
+                height: var(--fs-sub-header);
+                width: fit-content;
                 cursor: pointer;
+                fill: var(--clr-neutral-900);
             }
         }
 
@@ -101,8 +103,6 @@
                     height: 4rem;
                     width: fit-content;
                     background-color: var(--clr-neutral-200);
-                    color: var(--clr-neutral-50);
-                    font-size: var(--fs-p);
                     padding: 1rem;
                     border-top-right-radius: 5px;
                     border-bottom-right-radius: 5px;
@@ -110,6 +110,12 @@
                     cursor: pointer;
                     transition: background-color 250ms ease-in-out;
 
+                    .icon {
+                        fill: var(--clr-neutral-50);
+                        height: var(--fs-i);
+                        width: fit-content;
+                    }
+
                     &:hover{
                         background-color: var(--clr-neutral-300);
                     }
@@ -125,6 +131,10 @@
                 cursor: pointer;
                 font-weight: var(--fw-bold);
                 transition: all 250ms ease-in-out;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 1rem;
 
                 &.share-url{
                     margin-bottom: 1rem;
@@ -132,8 +142,11 @@
                     color: var(--clr-neutral-50);
                     border: none;
                     transition: background-color 250ms ease-in-out;
-                    i{
-                        margin-right: 1rem;
+                    
+                    .icon {
+                        height: var(--fs-i);
+                        width: fit-content;
+                        fill: var(--clr-neutral-50);
                     }
 
                     &:hover{
@@ -169,6 +182,10 @@
             & > *{
                 flex: 1;
                 height: 4rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 1rem;
                 border-radius: 5px;
                 border: none;
                 color: var(--clr-neutral-50);
@@ -188,8 +205,10 @@
                     }
                 }
 
-                i{
-                    margin-right: 1rem;
+                .icon {
+                    height: var(--fs-i);
+                    width: fit-content;
+                    fill: var(--clr-neutral-50);
                 }
 
                 &:hover{
diff --git a/packages/web-new/src/styles/_settings-menu.scss b/packages/web-new/src/styles/_settings-menu.scss
index 575060dd4..970c6f908 100644
--- a/packages/web-new/src/styles/_settings-menu.scss
+++ b/packages/web-new/src/styles/_settings-menu.scss
@@ -40,8 +40,10 @@
             text-align: right;
             margin-bottom: 2rem;
 
-            i {
-                font-size: var(--fs-sub-header);
+            .icon {
+                height: var(--fs-sub-header);
+                width: fit-content;
+                fill: var(--clr-neutral-50);
                 cursor: pointer;
             }
         }
@@ -143,14 +145,16 @@
                         top: 50%;
                         right: 1rem;
                         transform: translateY(-50%);
+                        content: '';
+                        -webkit-mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        mask: url('../assets/img/angle-down-solid.svg') no-repeat 50% 50%;
+                        -webkit-mask-size: cover;
+                        mask-size: cover;
                         display: inline-block;
-                        text-rendering: auto;
-                        -webkit-font-smoothing: antialiased;
-                        font: var(--fa-font-solid);
-                        content: "\f107";
+                        height: var(--fs-footer);
+                        width: var(--fs-footer);
                         pointer-events: none;
-                        color: var(--clr-neutral-900);
-                        font-size: var(--fs-footer);
+                        background-color: var(--clr-neutral-900);
                     }
                 }
 
diff --git a/packages/web-new/src/styles/styles.scss b/packages/web-new/src/styles/styles.scss
index 62f07f081..e09417da8 100644
--- a/packages/web-new/src/styles/styles.scss
+++ b/packages/web-new/src/styles/styles.scss
@@ -188,10 +188,6 @@ a {
     font-weight: var(--fw-regular);
 }
 
-i {
-    font-size: var(--fs-i);
-}
-
 ul {
     list-style: none;
 }
@@ -270,7 +266,7 @@ header {
         &__links {
             display: flex;
             align-items: center;
-            justify-content: center;
+            justify-content: space-between;
             gap: 3rem;
 
             a {
@@ -279,16 +275,22 @@ header {
                 align-items: center;
                 justify-content: center;
                 font-size: var(--fs-p);
-                transition: color 250ms ease;
+                transition: color 250ms ease-in-out;
 
                 &:hover {
                     color: var(--clr-neutral-200);
+
+                    .icon {
+                        fill: var(--clr-neutral-200);
+                    }
                 }
             }
 
-            i {
-                font-size: var(--fs-i);
+            .icon {
+                height: var(--fs-i);
                 margin-bottom: .5rem;
+                fill: var(--clr-neutral-50);
+                transition: fill 250ms ease-in-out;
             }
         }
     }
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
index bb317ac9b..db1f95d34 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -25,10 +25,9 @@
     <!--Font awesome-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
-
-    <!-- Font awesome icons -->
-    <script src="https://kit.fontawesome.com/d66d421276.js" crossorigin="anonymous"></script>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;700;900&display=swap"
+        rel="stylesheet">
 
     <!--Favicon assets-->
     <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
@@ -166,17 +165,39 @@
                             <path
                                 d=" M108.804962,235.305420   C103.958778,230.381348 99.370300,225.732193 93.712326,219.999420   C98.740349,219.999420 102.431915,219.999435 106.123474,219.999435   C113.105667,219.999435 120.089302,220.087296 127.069595,219.972275   C132.912613,219.876007 134.453690,221.672073 134.860825,226.981781   C135.416733,234.231567 134.999588,241.555954 134.999588,249.531662   C124.750420,247.046677 116.965103,241.200577 108.804962,235.305420  z" />
                         </svg>
+                    </a>
                 </div>
                 <div class="navbar__title">
-                    <h1>Thing Description Playground <span>- BETA Version</span></h1>
+                    <h1>Thing Description Playground</h1>
                 </div>
                 <div class="navbar__links">
                     <a href="https://github.com/eclipse-thingweb/playground/discussions/492" class="feedback-link"
-                        target="_blank" title="This is a new design which is open to feedback to change the layout and UX"><i class="fa-solid fa-comments"></i><span>Feedback</span></a>
+                        target="_blank"
+                        title="This is a new design which is open to feedback to change the layout and UX">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
+                            class="feedback-icon icon">
+                            <path
+                                d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z" />
+                        </svg>
+                        <span>Feedback</span>
+                    </a>
                     <a href="https://github.com/eclipse-thingweb/playground/tree/master/packages/cli" class="cli-link"
-                        target="_blank"><i class="fa-solid fa-terminal"></i><span>CLI</span></a>
-                    <a href="https://github.com/eclipse-thingweb/playground" class="git-link" target="_blank"><i
-                            class="fa-brands fa-github"></i><span>Github</span></a>
+                        target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 576 512"
+                            class="terminal-icon icon">
+                            <path
+                                d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
+                        </svg>
+                        <span>CLI</span>
+                    </a>
+                    <a href="https://github.com/eclipse-thingweb/playground" class="git-link" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 496 512"
+                            class="github-icon icon">
+                            <path
+                                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+                        </svg>
+                        <span>Github</span>
+                    </a>
                 </div>
             </div>
         </div>
@@ -188,22 +209,38 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
             <div class="main-content">
                 <div class="control-panel">
                     <button class="control-panel__btn" id="validate-btn">
-                        <i class="fa-solid fa-play"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="play-icon icon">
+                            <path
+                                d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
+                        </svg>
                         <p class="text-icon">Validate</p>
                     </button>
 
                     <button class="control-panel__btn" id="examples-btn">
-                        <i class="fa-solid fa-file-code"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="code-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" />
+                        </svg>
                         <p class="text-icon">Examples</p>
                     </button>
 
                     <button class="control-panel__btn" id="save-btn">
-                        <i class="fa-solid fa-file-arrow-down"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="save-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z" />
+                        </svg>
                         <p class="text-icon">Save</p>
                     </button>
 
                     <button class="control-panel__btn" id="settings-btn">
-                        <i class="fa-solid fa-gear"></i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                            class="gear-icon icon">
+                            <path
+                                d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+                        </svg>
                         <p class="text-icon">Settings</p>
                     </button>
                 </div>
@@ -212,7 +249,11 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                     <div class="ide__tabs">
                         <ul class="ide__tabs__left">
                             <li class="ide__tabs__add" id="ide-tab-add">
-                                <i class="fa-solid fa-plus"></i>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                    class="plus-icon icon">
+                                    <path
+                                        d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
+                                </svg>
                             </li>
                         </ul>
 
@@ -245,7 +286,13 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                             class="visualizations__option visualize-tab-btn" title="Tree or Graph TD visualizations">
                     </div>
                     <div class="console-controllers">
-                        <button class="min-max"><i class="fa-solid fa-down-left-and-up-right-to-center"></i></button>
+                        <button class="min-max">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                class="collapse-arrows icon">
+                                <path
+                                    d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z" />
+                            </svg>
+                        </button>
                     </div>
                 </div>
                 <div class="console__content">
@@ -253,53 +300,95 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                         <div class="validation-container">
                             <details class="json-validation-section" id="spot-json">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-validation-section" id="spot-schema">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON Schema Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="json-schema-defaults-section" id="spot-defaults">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">(With Defaults) JSON Schema Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="jsonls-validation-section" id="spot-jsonld">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">JSON-LD Validation</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                             </details>
 
                             <details class="additional-checks-section" id="spot-additional">
                                 <summary class="section-header">
-                                    <i class="fa-solid fa-circle"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="neutral-circle-icon icon">
+                                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                    </svg>
                                     <p class="title">Additional Checks</p>
-                                    <i class="show-icon fa-solid fa-caret-down"></i>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="show-icon icon">
+                                        <path
+                                            d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                    </svg>
                                 </summary>
                                 <ul class="section-content"></ul>
                                 <div class="section-additional">
                                     <details class="enumConst-section" id="enumConst-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Enum/Const</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -308,9 +397,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linkedAffordances-section" id="linkedAffordances-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Linked Affordances</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -319,9 +415,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linkedStructure-section" id="linkedStructure-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Linked Structure</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -330,9 +433,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="linksRelTypeCount-section" id="linksRelTypeCount-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Links Rel:Type Count</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -341,9 +451,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="multiLangConsistency-section" id="multiLangConsistency-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Multi-Language Consistency</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -352,9 +469,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="propItems-section" id="propItems-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Properties Items</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -363,9 +487,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="propUniqueness-section" id="propUniqueness-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Properties Uniqueness</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -374,9 +505,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="readWriteOnly-section" id="readWriteOnly-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Read/WriteOnly</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -385,9 +523,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="security-section" id="security-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">Security</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -396,9 +541,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                                     <details class="uriVariableSecurity-section" id="uriVariableSecurity-section">
                                         <summary class="section-header">
-                                            <i class="fa-solid fa-circle"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 512 512" class="neutral-circle-icon icon">
+                                                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
+                                            </svg>
                                             <p class="sub-title">URI Variable Security</p>
-                                            <i class="show-icon fa-solid fa-caret-down"></i>
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                                viewBox="0 0 448 512" class="show-icon icon">
+                                                <path
+                                                    d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
+                                            </svg>
                                         </summary>
                                         <ul class="section-content">
                                             <li class="description"></li>
@@ -417,7 +569,14 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="open-api-yaml">YAML</button>
                             </div>
                             <div class="view-download">
-                                <button id="open-api-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="open-api-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -430,7 +589,14 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="async-api-yaml">YAML</button>
                             </div>
                             <div class="view-download">
-                                <button id="async-api-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="async-api-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -438,9 +604,16 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                     <div class="console-view aas-view hidden" id="aas-view">
                         <div class="aas-container" id="aas-container"></div>
                         <div class="aas-inputs">
-                            <p class="warning-txt">*Protocols other than HTTP(S), MQTT and Modbus are not officially supported by AID, do not use the resulting AID in production*</p>
+                            <p class="warning-txt">*Protocols other than HTTP(S), MQTT and Modbus are not officially
+                                supported by AID, do not use the resulting AID in production*</p>
                             <div class="view-download">
-                                <button id="aas-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="aas-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg> Download
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -453,11 +626,32 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
                                 <button id="defaults-yaml">YAML</button>
                             </div>
                             <div class="input-field">
-                                <button id="defaults-add"><i class="fa-solid fa-plus"></i>Defaults</button>
-                                <button id="defaults-remove"><i class="fa-solid fa-minus"></i>Defaults</button>
+                                <button id="defaults-add">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="plus-icon icon">
+                                        <path
+                                            d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
+                                    </svg>
+                                    Defaults
+                                </button>
+                                <button id="defaults-remove">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
+                                        class="minus-icon icon">
+                                        <path
+                                            d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
+                                    </svg>
+                                    Defaults
+                                </button>
                             </div>
                             <div class="view-download">
-                                <button id="defaults-download"><i class="fa-solid fa-download"></i>Download</button>
+                                <button id="defaults-download">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                        class="download-icon icon">
+                                        <path
+                                            d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                    </svg>
+                                    Download
+                                </button>
                             </div>
 
                         </div>
@@ -477,8 +671,23 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                             <div class="visualize-inputs__graph">
                                 <div class="input-field">
-                                    <button id="collapse-all"><i class="fa-solid fa-compress"></i>Collapse</button>
-                                    <button id="expand-all"><i class="fa-solid fa-expand"></i>Expand</button>
+                                    <button id="collapse-all">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 448 512" class="collapse-square-icon icon">
+                                            <path
+                                                d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z" />
+                                        </svg>
+                                        Collapse
+                                    </button>
+
+                                    <button id="expand-all">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 448 512" class="expand-square-icon icon">
+                                            <path
+                                                d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
+                                        </svg>
+                                        Expand
+                                    </button>
                                 </div>
                             </div>
 
@@ -489,8 +698,22 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
 
                             <div class="visualize-inputs__download">
                                 <div class="input-field">
-                                    <button id="download-svg"><i class="fa-solid fa-download"></i>SVG</button>
-                                    <button id="download-png"><i class="fa-solid fa-download"></i>PNG</button>
+                                    <button id="download-svg">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 512 512" class="download-icon icon">
+                                            <path
+                                                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                        </svg>
+                                        SVG
+                                    </button>
+                                    <button id="download-png">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+                                            viewBox="0 0 512 512" class="download-icon icon">
+                                            <path
+                                                d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
+                                        </svg>
+                                        PNG
+                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -507,7 +730,11 @@ <h1>Thing Description Playground <span>- BETA Version</span></h1>
         <div class="settings-menu closed">
             <div class="settings">
                 <div class="settings__close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
                 <h3 class="settings__title">Settings</h3>
                 <form action="#" class="settings__validate-options">
@@ -574,7 +801,11 @@ <h3 class="settings__preferences">Preferences</h3>
         <div class="examples-menu closed">
             <div class="examples-menu-container">
                 <div class="examples-menu-container__close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
 
                 <form action="#" class="examples-menu-container__filter">
@@ -595,9 +826,12 @@ <h3 class="settings__preferences">Preferences</h3>
                     <div class="search-field">
                         <label for="thing-category"></label>
                         <div class="search-bar">
-                            <i class="fa-solid fa-magnifying-glass"></i>
-                            <input type="text" class="search-input"
-                                placeholder="Find examples based on card details">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 512 512"
+                                class="search-icon icon">
+                                <path
+                                    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
+                            </svg>
+                            <input type="text" class="search-input" placeholder="Find examples based on card details">
                         </div>
                         <input type="submit" value="Search" class="search-btn"
                             title="Find a specific example by searching within the card details">
@@ -631,7 +865,11 @@ <h3>Search Results</h3>
         <div class="save-menu closed">
             <div class="save-menu__container">
                 <div class="save-menu-close">
-                    <i class="fa-solid fa-xmark"></i>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                        class="x-icon icon">
+                        <path
+                            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+                    </svg>
                 </div>
 
                 <div class="save-menu-title">
@@ -644,17 +882,37 @@ <h3>Search Results</h3>
                         <input type="text" id="share-url-input" class="share-url-input"
                             placeholder="Click on share to get your link">
                         <button type="button" title="Open the url in a new playground tab" class="open-url-tab"
-                            id="open-url-tab"><i class="fa-solid fa-arrow-up-right-from-square"></i></button>
+                            id="open-url-tab">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
+                                class="open-tab-icon icon">
+                                <path
+                                    d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
+                            </svg>
+                        </button>
                     </div>
                     <button type="button" title="Generate a link to share your TD/TM" class="share-td__btn share-url"
-                        id="share-url-btn"><i class="fa-solid fa-link"></i>Share</button>
+                        id="share-url-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
+                            class="link-icon icon">
+                            <path
+                                d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z" />
+                        </svg>
+                        Share
+                    </button>
                     <button type="button" title="Export your TD/TM to ediTDor" class="share-td__btn open-editdor"
                         id="open-editdor-btn">Open in ediTDor</button>
                 </div>
 
                 <div class="save-td">
                     <button type="button" title="Download your current TD/TM" class="save-td__download"
-                        id="download-btn"><i class="fa-solid fa-file-arrow-down"></i>Download</button>
+                        id="download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
+                            class="save-file-icon icon">
+                            <path
+                                d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z" />
+                        </svg>
+                        Download
+                    </button>
                     <!-- <button type="button"
                         title="Save your current TD/TM in your file system with your name and location of preference"
                         class="save-td__save-as" id="save-as-btn"><i class="fa-solid fa-folder-open"></i>Save
diff --git a/packages/web-new/webpack.config.js b/packages/web-new/webpack.config.js
index 573a64d44..01571ad4a 100644
--- a/packages/web-new/webpack.config.js
+++ b/packages/web-new/webpack.config.js
@@ -69,7 +69,7 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-                    type: 'asset/resource'
+                    type: 'asset/resource',
                 },
                 {
                     test: /\.scss$/,
@@ -99,7 +99,7 @@ module.exports = (env, argv) => {
                 title: 'Webpack App',
                 filename: 'index.html',
                 template: 'src/template.html',
-                favicon: 'src/assets/favicon/favicon.ico'
+                favicon: 'src/assets/favicon/favicon.ico',
             }),
             new CopyWebpackPlugin({
                 patterns: [

From a83c5a6f710ae96169338ff237be8e8f07bf4fdf Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Fri, 5 Jan 2024 07:55:10 +0100
Subject: [PATCH 4/5] removing unnecessary file

---
 packages/web-new/src/scripts/svgs.js | 71 ----------------------------
 1 file changed, 71 deletions(-)
 delete mode 100644 packages/web-new/src/scripts/svgs.js

diff --git a/packages/web-new/src/scripts/svgs.js b/packages/web-new/src/scripts/svgs.js
deleted file mode 100644
index fd21ddf1b..000000000
--- a/packages/web-new/src/scripts/svgs.js
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-//Play button:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
-
-//code file (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM153 289l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L71 337c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM265 255l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"/></svg>
-
-//Download file (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>
-
-//settings (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
-
-//plus icon
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
-
-//x icon:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
-
-//feedback (filled):
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>
-
-// cli:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
-
-// github rounded:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-
-// angle right:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
-
-// angle down:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
-
-// expand arrows:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>
-
-// collapse arrows
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>
-
-//import file
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>
-
-// search icon
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
-
-// open in new tab
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
-
-// link
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
-
-// download secondary
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
-
-// minus
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
-
-//collapse square:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>
-
-//expand square:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
-
-//slashed eye
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>
-
-// check icon:
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
-

From 2f4ab6516d859cd7a3c2ff48390e4afd177d7b3f Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Wed, 10 Jan 2024 06:45:44 +0100
Subject: [PATCH 5/5] Fixed merging conflicts

- Rebased the branch to fix the merging conflicts added by the new console functionality
---
 packages/web-new/src/scripts/console.js | 34 +++++++++----------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index dc4aac14a..454e426c6 100644
--- a/packages/web-new/src/scripts/console.js
+++ b/packages/web-new/src/scripts/console.js
@@ -58,8 +58,9 @@ function expandConsole() {
     setTimeout(() => {
         mainContentElement.style.flex = "0 210px"
         consoleElement.style.flex = `1 0`
-        minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
     }, 100);
 }
 
@@ -68,29 +69,18 @@ function expandConsole() {
  * and adjusts the console size as well as the expand/collapse icon
  */
 function collapseConsole() {
+    textIcon.forEach(text => {
+        text.classList.remove("hiddenV")
+    })
+
     consoleElement.classList.remove("expanded")
     consoleElement.classList.add("collapsed")
 
     mainContentElement.style.flex = "1 0"
     consoleElement.style.flex = `0 39px`
-    minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-    minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
-minMaxBtn.addEventListener("click", () => {
-
-    if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
-    if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
-        mainContentElement.style.flex = "1 0"
-        consoleElement.style.flex = `0 39px`
-        minMaxBtn.children[0].classList.remove("collapse-arrows")
-        minMaxBtn.children[0].classList.add("expand-arrows")
-        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
-        minMaxBtn.children[0].classList.remove("collapse-arrows")
-        minMaxBtn.children[0].classList.add("expand-arrows")
-        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
-
-    textIcon.forEach(text => {
-        text.classList.remove("hiddenV")
-    })
+    minMaxBtn.children[0].classList.remove("collapse-arrows")
+    minMaxBtn.children[0].classList.add("expand-arrows")
+    minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 }
 
 minMaxBtn.addEventListener("click", () => {
@@ -103,7 +93,7 @@ minMaxBtn.addEventListener("click", () => {
 
 
 /**
- * Unchecks all visualization btns and hides all visualization containers
+ * Unchecks all visualization buttons and hides all visualization containers
  */
 export function clearConsole() {
     visualizationContainers.forEach(container => {
@@ -134,7 +124,7 @@ function clearVisualizationEditors() {
 //Set the behavior for each visualization tab when clicked on it
 visualizationOptions.forEach(option => {
     option.addEventListener("click", () => {
-        if(consoleElement.classList.contains("collapsed")){
+        if (consoleElement.classList.contains("collapsed")) {
             expandConsole()
         }
         clearVisualizationEditors()