diff --git a/.eleventy.js b/.eleventy.js
index bc664c1..537b9b6 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -3,7 +3,9 @@ const syntaxHighlightingPlugin = require("@11ty/eleventy-plugin-syntaxhighlight"
 const markdownIt = require('markdown-it');
 const markdownItClass = require('@toycode/markdown-it-class');
 const markdownItAnchor = require('markdown-it-anchor')
-
+const library = require('@fortawesome/fontawesome-svg-core').library;
+const icon = require('@fortawesome/fontawesome-svg-core').icon;
+const fas = require('@fortawesome/free-solid-svg-icons').fas;
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(navigationPlugin)
@@ -12,7 +14,12 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("assets")
   eleventyConfig.addPassthroughCopy("fonts")
 
-  eleventyConfig.addShortcode("fas_icon", function(name) { return `<span class="fas fa-${name}"></span>` })
+  // Font Awesome Icons
+  library.add(fas)
+  eleventyConfig.addShortcode("fas_icon", function(args) { 
+    var fas_svg = icon({ prefix: 'fas', iconName: args }); 
+    return `${fas_svg.html}`; 
+  });
 
   const mapping = {
     h2: 'content-title',h3: 'content-title',h4: 'content-title',h5: 'content-title',h6: 'content-title',
diff --git a/content/_includes/default_layout.njk b/content/_includes/default_layout.njk
index bb4864c..d2251f0 100644
--- a/content/_includes/default_layout.njk
+++ b/content/_includes/default_layout.njk
@@ -16,9 +16,8 @@
         <link rel="preload" type="text/css" href="/assets/css/codeberg-docs.css" as="style">
         <link rel="preload" type="text/css" href="https://design.codeberg.org/design-kit/codeberg.css" as="style">
         <link rel="preload" href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css" as="style">
-        <link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css" as="style">
-        <link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css" as="style">
-
+        <link rel="preload" href="https://fonts.codeberg.org/dist/fontawesome6/css/svg-with-js.css" as="style">
+        
         <!-- Details and License: https://codeberg.org/Codeberg/Design/src/design-kit -->
         <link rel="stylesheet" href="https://design.codeberg.org/design-kit/codeberg.css"/>
         <script defer src="https://design.codeberg.org/design-kit/codeberg.js"></script>
@@ -31,8 +30,8 @@
         <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css">
 
         <!-- Details and License: https://fonts.codeberg.org/fonts/fontawesome5 -->
-        <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css">
-        <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css">
+        <link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome6/css/svg-with-js.css">
+
 
         {% if page.url != '/' %}
         <script>
@@ -52,7 +51,7 @@
             <nav class="navbar">
                 <div class="navbar-content">
                     <button class="btn btn-primary" type="button" onclick="halfmoon.toggleSidebar()">
-                        <i class="fa fa-bars" aria-hidden="true"></i>
+                        {% fas_icon "bars" %}
                         <span class="sr-only">Toggle sidebar</span>
                     </button>
                 </div>
@@ -82,7 +81,7 @@
                 <div class="navbar-content d-md-none ml-auto">
                     <div class="dropdown with-arrow">
                         <button class="btn" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
-                            Menu <i class="fa fa-angle-down" aria-hidden="true"></i>
+                            Menu {% fas_icon "angle-down" %}
                         </button>
                         <div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1">
                             <a href="{{ urls.commitHistoryMaster }}/{{ page.inputPath }}" class="dropdown-item" target="_blank" rel="noreferrer">
diff --git a/content/collaborating/repo-permissions.md b/content/collaborating/repo-permissions.md
index 3ef5416..623b18a 100644
--- a/content/collaborating/repo-permissions.md
+++ b/content/collaborating/repo-permissions.md
@@ -29,79 +29,79 @@ The table below gives an overview of what collaborators are allowed to do when g
  <tbody>
   <tr>
    <td> View, clone and pull repository </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Contribute pull requests </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Push to/update contributed pull requests </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Push directly to repository </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Merge pull requests </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Moderate/delete issues and comments </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Force-push/rewrite history (if enabled) </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Add/remove collaborators to repository </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Configure branch settings (protect/unprotect, enable force-push) </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   <tr>
    <td> Configure repository settings (enable wiki, issues, PRs, update profile) </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   <tr>
    <td> Configure repository settings in the danger zone (transfer ownership, delete wiki data / repository, archive repository) </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-times" style="color: red"></i> </td>
-   <td> <i class="fas fa-check" style="color: green"></i> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: red">{% fas_icon "times" %}</span> </td>
+   <td> <span style="color: green">{% fas_icon "check" %}</span> </td>
   </tr>
   </tr>
  </tbody>
diff --git a/package-lock.json b/package-lock.json
index 7761611..f9683cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
         "@11ty/eleventy": "^1.0.0",
         "@11ty/eleventy-navigation": "^0.3.2",
         "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@toycode/markdown-it-class": "^1.2.4",
         "markdown-it-anchor": "^8.4.1"
       }
@@ -130,6 +132,42 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -4094,6 +4132,30 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "dev": true
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
     "@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
diff --git a/package.json b/package.json
index f6443b7..ecded4d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-navigation": "^0.3.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@toycode/markdown-it-class": "^1.2.4",
     "markdown-it-anchor": "^8.4.1"
   }