From d45f2f37c63641b69560415c4fb17cc8de5383e8 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
 <72516762+SergioCasCeb@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:52:52 +0100
Subject: [PATCH] Added icon source links, and attribution in readme file

---
 packages/web-new/README.md                    |  21 +-
 packages/web-new/src/scripts/console.js       |  16 +-
 packages/web-new/src/scripts/editor.js        |   4 +
 packages/web-new/src/scripts/examples-menu.js |   6 +-
 packages/web-new/src/scripts/main.js          |  16 +-
 packages/web-new/src/scripts/util.js          | 146 +++----
 packages/web-new/src/template.html            | 378 +++++-------------
 7 files changed, 197 insertions(+), 390 deletions(-)

diff --git a/packages/web-new/README.md b/packages/web-new/README.md
index 2f60e13fc..a36bdfb1e 100644
--- a/packages/web-new/README.md
+++ b/packages/web-new/README.md
@@ -22,14 +22,17 @@ This package provides the new web interface of the Web of Things Playground. It
 
 Licensed under the MIT license, see [License](../../LICENSE.md).
 
+## Icon
+
+Icons used in this project (excluding the TD file icon) are sourced from FontAwesome Free 6.5.1 by @fontawesome - [FontAwesome](https://fontawesome.com).
+License information can be found here: [FontAwesome License](https://fontawesome.com/license/free). Copyright © 2024 Fonticons, Inc.
+
 ## How to use
 
 - Online: It is hosted [here](http://plugfest.thingweb.io/playground-new/)
   - Simply paste a TD or utilize an example from the examples menu and click on validate
   - The validation process will then start on the bottom console, where more information will be provided in case of errors or warnings
 
-## Testing with Playwright
-
 ## Webpack functionality and bundling
 
 This package is built by utilizing webpack, allowing to bundle and compile the projects JavaScript and CSS files. It also handles asset management and optimization. Below are the steps to understand the current configuration:
@@ -50,27 +53,33 @@ The `webpack.config.js` file is used to set up Webpack for the project. It manag
 ### 3. Webpack Configuration Obejct
 
 **3.1 Entry Points**
+
 - `entry`: Specifies the entry points for your application. In this case, there are two entry points: 'bundle' for JavaScript and 'styles' for CSS
 
 **3.2 Output**
+
 - `output`: Specifies where Webpack should output the bundled files. The path property defines the output directory as 'dist', and the filename property determines the naming pattern for generated files. [name] is a placeholder for the entry point name, and [contenthash] is a unique hash based on file content
 - `clean`: Tells Webpack to clean the 'dist' directory before each build
 - `assetModuleFilename`: Specifies the filename for asset files
 
 **3.3 Development Server**
+
 - `devServer`: Configures the development server with settings such as the port, compressing assets, and enabling history API fallback
 
 **3.4 Module Rules**
+
 - `module`: Defines rules for how Webpack should process different file types. There are rules for JavaScript, images, CSS, and more. For example, it uses Babel to transpile JavaScript, handles image assets, and processes CSS with style loaders and sass loaders
 
 **3.5 Plugins**
-- `plugins`: Lists the plugins used in the build process. Key plugins include 
-    - `HtmlWebpackPlugin` for generating HTML files, 
-    - `CopyWebpackPlugin` for copying assets, 
-    - `MonacoWebpackPlugin` for the Monaco code editor integration, and 
+
+- `plugins`: Lists the plugins used in the build process. Key plugins include
+    - `HtmlWebpackPlugin` for generating HTML files,
+    - `CopyWebpackPlugin` for copying assets,
+    - `MonacoWebpackPlugin` for the Monaco code editor integration, and
     - `MiniCssExtractPlugin` for extracting CSS into separate files
 
 **3.6 Optimization**
+
 - `optimization`: Contains settings for optimizing the build, including minimizing CSS using `CssMinimizerPlugin`
 
 
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
index e74c0947a..ca46cdb36 100644
--- a/packages/web-new/src/scripts/console.js
+++ b/packages/web-new/src/scripts/console.js
@@ -37,9 +37,7 @@ import { textIcon } from './main.js'
 //Main console elements
 const errorContainer = document.querySelector(".console__content #console-error")
 const errorTxt = document.querySelector(".console-error__txt")
-const minMaxBtn = document.querySelector(".min-max")
-export const collapseArrows = minMaxBtn.querySelector(".collapse-arrows")
-export const expandArrows = minMaxBtn.querySelector(".expand-arrows")
+export const minMaxBtn = document.querySelector(".min-max")
 export const visualizationOptions = document.querySelectorAll(".visualizations__option")
 export const visualizationContainers = document.querySelectorAll(".console-view")
 export const consoleElement = document.querySelector(".console")
@@ -48,6 +46,7 @@ const mainContentElement = document.querySelector(".main-content")
 /**
  * Hides the text from the left control panel, updates the state of the console element
  * and adjusts the console size as well as the expand/collapse icon
+ * *Collapse arrows gotten from: https://fontawesome.com/icons/down-left-and-up-right-to-center?f=classic&s=solid
  */
 function expandConsole() {
     textIcon.forEach(text => {
@@ -60,14 +59,16 @@ function expandConsole() {
     setTimeout(() => {
         mainContentElement.style.flex = "0 210px"
         consoleElement.style.flex = `1 0`
-        collapseArrows.classList.remove("hidden")
-        expandArrows.classList.add("hidden")
+        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")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
     }, 100);
 }
 
 /**
  * Shows the text from the left control panel, updates the state of the console element
  * and adjusts the console size as well as the expand/collapse icon
+ * *Expand arrows gotten from: https://fontawesome.com/icons/up-right-and-down-left-from-center?f=classic&s=solid
  */
 function collapseConsole() {
     textIcon.forEach(text => {
@@ -79,8 +80,9 @@ function collapseConsole() {
 
     mainContentElement.style.flex = "1 0"
     consoleElement.style.flex = `0 39px`
-    collapseArrows.classList.add("hidden")
-    expandArrows.classList.remove("hidden")
+    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.add("expand-arrows")
+    minMaxBtn.children[0].classList.remove("collapse-arrows")
 }
 
 minMaxBtn.addEventListener("click", () => {
diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
index f37ee40b6..29a075aa3 100644
--- a/packages/web-new/src/scripts/editor.js
+++ b/packages/web-new/src/scripts/editor.js
@@ -94,6 +94,7 @@ function createTab(tabNumber, exampleName, thingType) {
   closeBtn.classList.add("close-tab")
 
   // Create the svg close icon
+  // Close icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid
   const closeIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
   closeIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
   closeIconSvg.setAttribute("width", "100%")
@@ -120,7 +121,9 @@ function createTab(tabNumber, exampleName, thingType) {
   const confirmTabClose = document.createElement("button")
   confirmTabClose.classList.add("confirm-tab-close")
   confirmTabClose.textContent = "Close"
+
   // Create the svg confirm close icon
+  // Check icon gotten from: https://fontawesome.com/icons/check?f=classic&s=solid
   const confirmIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
   confirmIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
   confirmIconSvg.setAttribute("width", "100%")
@@ -145,6 +148,7 @@ function createTab(tabNumber, exampleName, thingType) {
   cancelTabClose.textContent = "Cancel"
   
   // Create the svg close cancel icon
+  // Close icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid
   const cancelIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
   cancelIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
   cancelIconSvg.setAttribute("width", "100%")
diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
index 764a45e9e..aefa3228e 100644
--- a/packages/web-new/src/scripts/examples-menu.js
+++ b/packages/web-new/src/scripts/examples-menu.js
@@ -280,10 +280,6 @@ async function getAllExamples(categoryId, thingType) {
         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")
 
-        //Create and append Font Awesome attribution comment
-        const commentTDFile = document.createComment(" !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. ")
-        tdFileSvg.appendChild(commentTDFile)
-
         // Append the path element to the SVG element
         tdFileSvg.appendChild(tdFilePath)
 
@@ -300,6 +296,7 @@ async function getAllExamples(categoryId, thingType) {
         exampleName.appendChild(exampleNameTitle)
 
         //Create, populate and append the example title toggle arrow
+        // Arrow icon gotten from: https://fontawesome.com/icons/angle-down?f=classic&s=solid
         const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
         exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
         exampleArrowSvg.setAttribute("width", "100%")
@@ -362,6 +359,7 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtns.appendChild(exampleBtnUse)
 
         // create the svg icon for the apply button
+        // Apply icon gotten from: https://fontawesome.com/icons/file-import?f=classic&s=solid
         const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
         applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
         applyIconSvg.setAttribute("width", "100%")
diff --git a/packages/web-new/src/scripts/main.js b/packages/web-new/src/scripts/main.js
index 8c380d91b..5982fd101 100644
--- a/packages/web-new/src/scripts/main.js
+++ b/packages/web-new/src/scripts/main.js
@@ -26,7 +26,7 @@ import './json-yaml'
 import './settings-menu'
 import './save-menu'
 import './examples-menu'
-import { consoleElement, expandArrows, collapseArrows } from './console'
+import { consoleElement, minMaxBtn } from './console'
 import './open-api'
 import './async-api'
 import './aas'
@@ -165,12 +165,13 @@ function onmousemoveY(e) {
       b.style.flex = `0 ${h < 50 ? 39 : h}px`
       t.style.flex = "1 0"
 
-      if(h < 39){
+      if (h < 39) {
         consoleElement.classList.remove("expanded")
         consoleElement.classList.add("collapsed")
 
-        collapseArrows.classList.add("hidden")
-        expandArrows.classList.remove("hidden")
+        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.add("expand-arrows")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
       }
 
       if (h < 445) {
@@ -185,12 +186,13 @@ function onmousemoveY(e) {
       t.style.flex = `0 ${h < 220 ? 210 : h}px`
       b.style.flex = "1 0"
 
-      if ( h > 714 ){
+      if (h > 714) {
         consoleElement.classList.remove("collapsed")
         consoleElement.classList.add("expanded")
 
-        expandArrows.classList.add("hidden")
-        collapseArrows.classList.remove("hidden")
+        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")
+        minMaxBtn.children[0].classList.remove("expand-arrows")
+        minMaxBtn.children[0].classList.add("collapse-arrows")
       }
 
       if (h < 310) {
diff --git a/packages/web-new/src/scripts/util.js b/packages/web-new/src/scripts/util.js
index aed76a227..48ebf8620 100644
--- a/packages/web-new/src/scripts/util.js
+++ b/packages/web-new/src/scripts/util.js
@@ -221,6 +221,10 @@ export function removeDefaultsUtil(editorInstance) {
  * @param {string} body Thing Description/Thing Model to validate
  * @param {string} docType "td" or "tm"
  * @param {*} source "manual" or "auto"
+ * *Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid
+ * *Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid
+ * *Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid
+ * *Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid
  */
 export function validate(thingType, editorContent) {
 
@@ -236,41 +240,25 @@ export function validate(thingType, editorContent) {
             Object.keys(result.report).forEach(el => {
                 const spotName = "spot-" + el
                 document.getElementById(spotName).removeAttribute('open')
-                const resultIcons = document.getElementById(spotName).children[0].children[0].querySelectorAll(".icon")
-
-                resultIcons.forEach(icon => {
-                    if (!icon.classList.contains("hidden")) {
-                        icon.classList.add("hidden")
-                    }
-                })
+                const resultIcon = document.getElementById(spotName).children[0].children[0].children[0]
 
                 if (result.report[el] === "passed") {
-                    resultIcons.forEach(icon => {
-                        if (icon.classList.contains("success-circle-icon")) {
-                            icon.classList.remove("hidden")
-                        }
-                    })
+                    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")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("success-circle-icon")
                 }
                 else if (result.report[el] === "warning") {
-                    resultIcons.forEach(icon => {
-                        if (icon.classList.contains("warning-circle-icon")) {
-                            icon.classList.remove("hidden")
-                        }
-                    })
+                    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")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("warning-circle-icon")
                 }
                 else if (result.report[el] === "failed") {
-                    resultIcons.forEach(icon => {
-                        if (icon.classList.contains("error-circle-icon")) {
-                            icon.classList.remove("hidden")
-                        }
-                    })
+                    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")
+                    resultIcon.classList.remove("neutral-circle-icon")
+                    resultIcon.classList.add("error-circle-icon")
                 }
                 else if (result.report[el] === null) {
-                    resultIcons.forEach(icon => {
-                        if (icon.classList.contains("neutral-circle-icon")) {
-                            icon.classList.remove("hidden")
-                        }
-                    })
+                    // do nothing
                 }
                 else {
                     console.error("unknown report feedback value")
@@ -281,41 +269,25 @@ export function validate(thingType, editorContent) {
                 const detailsName = el + "-section"
                 if (document.getElementById(detailsName)) {
                     document.getElementById(detailsName).removeAttribute('open')
-                    const detailsIcons = document.getElementById(detailsName).children[0].children[0].querySelectorAll(".icon")
-
-                    detailsIcons.forEach(icon => {
-                        if (!icon.classList.contains("hidden")) {
-                            icon.classList.add("hidden")
-                        }
-                    })
+                    const detailsIcon = document.getElementById(detailsName).children[0].children[0].children[0]
 
                     if (result.details[el] === "passed") {
-                        detailsIcons.forEach(icon => {
-                            if (icon.classList.contains("success-circle-icon")) {
-                                icon.classList.remove("hidden")
-                            }
-                        })
+                        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")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("success-circle-icon")
                     }
                     else if (result.details[el] === "warning" || result.details[el] === "not-impl") {
-                        detailsIcons.forEach(icon => {
-                            if (icon.classList.contains("warning-circle-icon")) {
-                                icon.classList.remove("hidden")
-                            }
-                        })
+                        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")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("warning-circle-icon")
                     }
                     else if (result.details[el] === "failed") {
-                        detailsIcons.forEach(icon => {
-                            if (icon.classList.contains("error-circle-icon")) {
-                                icon.classList.remove("hidden")
-                            }
-                        })
+                        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")
+                        detailsIcon.classList.remove("neutral-circle-icon")
+                        detailsIcon.classList.add("error-circle-icon")
                     }
                     else if (result.details[el] === null) {
-                        detailsIcons.forEach(icon => {
-                            if (icon.classList.contains("neutral-circle-icon")) {
-                                icon.classList.remove("hidden")
-                            }
-                        })
+                        // do nothing
                     }
                     else {
                         console.error("unknown report feedback value")
@@ -346,15 +318,13 @@ export function resetValidationStatus() {
     }
 
     sectionHeaders.forEach(header => {
-        const headerIcons = header.children[0].querySelectorAll(".icon")
-        headerIcons.forEach(icon => {
-            if (!icon.classList.contains("hidden")) {
-                icon.classList.add("hidden")
-            }
-            if (icon.classList.contains("neutral-circle-icon")) {
-                icon.classList.remove("hidden")
-            }
-        })
+        const headerIcon = header.children[0].children[0]
+
+        if(!headerIcon.classList.contains("neutral-circle-icon")){
+            headerIcon.children[0].setAttribute("d", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z")
+            headerIcon.classList.remove("success-circle-icon", "warning-circle-icon", "error-circle-icon")
+            headerIcon.classList.add("neutral-circle-icon")
+        }
     })
 
     document.querySelectorAll("#spot-json, #spot-schema, #spot-defaults, #spot-jsonld, #spot-additional").forEach(category => {
@@ -386,33 +356,29 @@ function populateCategory(messagesList) {
         const categoryContainer = category.querySelector("ul.section-content")
         category.classList.remove("disabled")
 
-        const categoryIcons = category.children[0].children[0].querySelectorAll(".icon")
-
-        categoryIcons.forEach(icon => {
-            if (!icon.classList.contains("hidden")) {
-                if (icon.classList.contains("error-circle-icon") || icon.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")
-                    categoryContainer.append(noticePrompt)
-                    messagesList.forEach(message => {
-                        const listElement = document.createElement("li")
-                        listElement.textContent = message
-                        categoryContainer.append(listElement)
-                    })
-                }
-                else if (icon.classList.contains("success-circle-icon")) {
-                    const successMessage = document.createElement("li")
-                    successMessage.textContent = "Validated Successfully"
-                    categoryContainer.append(successMessage)
-                }
-                else {
-                    const nullMessage = document.createElement("li")
-                    nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions"
-                    categoryContainer.append(nullMessage)
-                }
-            }
-        })
+        const categoryIcon = category.children[0].children[0].children[0]
+        
+        if (categoryIcon.classList.contains("error-circle-icon") || categoryIcon.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")
+            categoryContainer.append(noticePrompt)
+            messagesList.forEach(message => {
+                const listElement = document.createElement("li")
+                listElement.textContent = message
+                categoryContainer.append(listElement)
+            })
+        }
+        else if (categoryIcon.classList.contains("success-circle-icon")) {
+            const successMessage = document.createElement("li")
+            successMessage.textContent = "Validated Successfully"
+            categoryContainer.append(successMessage)
+        }
+        else {
+            const nullMessage = document.createElement("li")
+            nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions"
+            categoryContainer.append(nullMessage)
+        }
     })
 }
 
diff --git a/packages/web-new/src/template.html b/packages/web-new/src/template.html
index 643050b3e..1048c84c3 100644
--- a/packages/web-new/src/template.html
+++ b/packages/web-new/src/template.html
@@ -177,6 +177,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
                             class="feedback-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Feedback icon gotten from: https://fontawesome.com/icons/comments?f=classic&s=solid -->
                             <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>
@@ -187,6 +188,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 576 512"
                             class="terminal-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Console icon gotten from: https://fontawesome.com/icons/terminal?f=classic&s=solid -->
                             <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>
@@ -196,6 +198,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 496 512"
                             class="github-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Github icon gotten from: https://fontawesome.com/icons/github?f=brands&s=solid -->
                             <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>
@@ -215,6 +218,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                             class="play-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Validate icon gotten from: https://fontawesome.com/icons/play?f=classic&s=solid -->
                             <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>
@@ -225,6 +229,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                             class="code-file-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Example file icon gotten from: https://fontawesome.com/icons/file-code?f=classic&s=solid -->
                             <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>
@@ -235,6 +240,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                             class="save-file-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Save icon gotten from: https://fontawesome.com/icons/file-arrow-down?f=classic&s=solid -->
                             <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>
@@ -245,6 +251,7 @@ <h1>Thing Description Playground</h1>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
                             class="gear-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Setting icon gotten from: https://fontawesome.com/icons/gear?f=classic&s=solid -->
                             <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>
@@ -259,6 +266,7 @@ <h1>Thing Description Playground</h1>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 448 512"
                                     class="plus-icon icon">
                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                    <!-- Plus icon gotten from: https://fontawesome.com/icons/plus?f=classic&s=solid -->
                                     <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>
@@ -298,15 +306,11 @@ <h1>Thing Description Playground</h1>
                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
                                 class="collapse-arrows icon">
                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                <!-- Expand arrows gotten from: https://fontawesome.com/icons/up-right-and-down-left-from-center?f=classic&s=solid -->
+                                <!-- Collapse arrows gotten from: https://fontawesome.com/icons/down-left-and-up-right-to-center?f=classic&s=solid -->
                                 <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>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
-                                class="expand-arrows icon hidden">
-                                <!-- !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>
                         </button>
                     </div>
                 </div>
@@ -319,32 +323,19 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                            <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                            <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                            <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                             <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                         </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
                                     </div>
 
                                     <p class="title">JSON Validation</p>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="show-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                         <path
                                             d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                     </svg>
@@ -358,32 +349,19 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                            <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                            <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                            <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                             <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                         </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
                                     </div>
 
                                     <p class="title">JSON Schema Validation</p>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="show-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                         <path
                                             d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                     </svg>
@@ -397,32 +375,19 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                            <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                            <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                            <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                             <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                         </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
                                     </div>
 
                                     <p class="title">(With Defaults) JSON Schema Validation</p>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="show-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                         <path
                                             d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                     </svg>
@@ -436,32 +401,19 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                            <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                            <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                            <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                             <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                         </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
                                     </div>
 
                                     <p class="title">JSON-LD Validation</p>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="show-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                         <path
                                             d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                     </svg>
@@ -475,32 +427,19 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                            <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                            <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                            <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                             <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                         </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                            viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                            <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                            <path
-                                                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" />
-                                        </svg>
                                     </div>
 
                                     <p class="title">Additional Checks</p>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="show-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                         <path
                                             d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                     </svg>
@@ -513,32 +452,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Enum/Const</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -554,32 +480,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Linked Affordances</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -595,32 +508,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Linked Structure</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -636,32 +536,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Links Rel:Type Count</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -677,32 +564,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Multi-Language Consistency</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -718,32 +592,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Properties Items</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -759,32 +620,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Properties Uniqueness</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -800,32 +648,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Read/WriteOnly</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -841,32 +676,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">Security</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -882,32 +704,19 @@ <h1>Thing Description Playground</h1>
                                                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                     viewBox="0 0 512 512" class="neutral-circle-icon icon">
                                                     <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                    <!-- Neutral circle icon gotten from: https://fontawesome.com/icons/circle?f=classic&s=solid -->
+                                                    <!-- Success circle icon gotten from: https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+                                                    <!-- Warning circle icon gotten from: https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+                                                    <!-- Error circle icon gotten from: https://fontawesome.com/icons/circle-xmark?f=classic&s=solid -->
                                                     <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
                                                 </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="success-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="warning-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
-                                                    viewBox="0 0 512 512" class="error-circle-icon icon hidden">
-                                                    <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
-                                                    <path
-                                                        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" />
-                                                </svg>
                                             </div>
 
                                             <p class="sub-title">URI Variable Security</p>
                                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                                 viewBox="0 0 448 512" class="show-icon icon">
                                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                                <!-- Arrow icon gotten from: https://fontawesome.com/icons/chevron-right?f=classic&s=solid -->
                                                 <path
                                                     d="M310.6 233.4c12.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.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
                                             </svg>
@@ -933,6 +742,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 512 512" class="download-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                         <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>
@@ -954,6 +764,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 512 512" class="download-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                         <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>
@@ -973,6 +784,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 512 512" class="download-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                         <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
@@ -993,6 +805,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="plus-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Plus icon gotten from: https://fontawesome.com/icons/plus?f=classic&s=solid -->
                                         <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>
@@ -1002,6 +815,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 448 512" class="minus-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Minus icon gotten from: https://fontawesome.com/icons/minus?f=classic&s=solid -->
                                         <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>
@@ -1013,6 +827,7 @@ <h1>Thing Description Playground</h1>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                         viewBox="0 0 512 512" class="download-icon icon">
                                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                        <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                         <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>
@@ -1041,6 +856,7 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 448 512" class="collapse-square-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Collapse square icon gotten from: https://fontawesome.com/icons/compress?f=classic&s=solid -->
                                             <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>
@@ -1051,6 +867,7 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 448 512" class="expand-square-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Expand square icon gotten from: https://fontawesome.com/icons/expand?f=classic&s=solid -->
                                             <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>
@@ -1070,6 +887,7 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="download-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                             <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>
@@ -1079,6 +897,7 @@ <h1>Thing Description Playground</h1>
                                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
                                             viewBox="0 0 512 512" class="download-icon icon">
                                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                            <!-- Download button gotten from: https://fontawesome.com/icons/download?f=classic&s=solid -->
                                             <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>
@@ -1103,6 +922,7 @@ <h1>Thing Description Playground</h1>
                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                         class="x-icon icon">
                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                        <!-- x icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid -->
                         <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>
@@ -1175,6 +995,7 @@ <h3 class="settings__preferences">Preferences</h3>
                     <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 384 512"
                         class="x-icon icon">
                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                        <!-- x icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid -->
                         <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>
@@ -1201,6 +1022,7 @@ <h3 class="settings__preferences">Preferences</h3>
                             <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 512 512"
                                 class="search-icon icon">
                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                <!-- Search icon gotten from: https://fontawesome.com/icons/magnifying-glass?f=classic&s=solid -->
                                 <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>
@@ -1241,6 +1063,7 @@ <h3>Search Results</h3>
                     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                         class="x-icon icon">
                         <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                        <!-- x icon gotten from: https://fontawesome.com/icons/xmark?f=classic&s=solid -->
                         <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>
@@ -1260,6 +1083,7 @@ <h3>Search Results</h3>
                             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"
                                 class="open-tab-icon icon">
                                 <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                                <!-- Open tab icon gotten from: https://fontawesome.com/icons/arrow-up-right-from-square?f=classic&s=solid -->
                                 <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>
@@ -1270,6 +1094,7 @@ <h3>Search Results</h3>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 640 512"
                             class="link-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Link icon gotten from: https://fontawesome.com/icons/link?f=classic&s=solid -->
                             <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>
@@ -1285,6 +1110,7 @@ <h3>Search Results</h3>
                         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 384 512"
                             class="save-file-icon icon">
                             <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                            <!-- Download icon gotten from: https://fontawesome.com/icons/file-arrow-down?f=classic&s=solid -->
                             <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>