diff --git a/src/site/_includes/components/calloutScript.njk b/src/site/_includes/components/calloutScript.njk
index 21f6213..a95651c 100644
--- a/src/site/_includes/components/calloutScript.njk
+++ b/src/site/_includes/components/calloutScript.njk
@@ -21,12 +21,6 @@
             }
         });
 
-        lucide.createIcons({
-            attrs: {
-                class: ["svg-icon"]
-            }
-        });
-
         // Collapse callouts
         Array.from(document.querySelectorAll(".callout.is-collapsible")).forEach((elem) => {
             elem.querySelector('.callout-title').addEventListener("click", (event) => {
diff --git a/src/site/_includes/components/filetree.njk b/src/site/_includes/components/filetree.njk
index 7a6c8ab..074c942 100644
--- a/src/site/_includes/components/filetree.njk
+++ b/src/site/_includes/components/filetree.njk
@@ -3,14 +3,13 @@
         <div x-show="isOpen" style="display:none" class="{{'filelist' if step>0}}">
             {%if fileOrFolder.isNote %}
                 <div @click.stop class="notelink {{ 'active-note' if fileOrFolder.permalink === permalink}}">
-                    {%- if not meta.noteIconsSettings.filetree -%}<i class="fa fa-sticky-note" aria-hidden="true"></i>{%- endif -%}
                     <a data-note-icon="{{fileOrFolder.noteIcon}}" style="text-decoration: none;" class="filename" href="{{fileOrFolder.permalink}}">{{fileOrFolder.name}} </a>
                 </div>
             {% elif fileOrFolder.isFolder%}
                 <div class="folder inner-folder"  x-data="{isOpen: $persist(false).as('{{currentPath}}')}" @click.stop="isOpen=!isOpen">
                     <div class="foldername-wrapper">
-                    <i x-show="isOpen" style="display: none;" class="fa fa-caret-down"></i>
-                    <i x-show="!isOpen" class="fa fa-caret-right"></i>
+                    <i x-show="isOpen" style="display: none;" class="svg-icon" icon-name="chevron-down"></i>
+                    <i x-show="!isOpen" class="svg-icon" icon-name="chevron-right"></i>
                     <span class="foldername">{{fileOrFolderName}}</span>
                     </div>
                     {% for fileOrFolderName, child in fileOrFolder %}
diff --git a/src/site/_includes/components/filetreeNavbar.njk b/src/site/_includes/components/filetreeNavbar.njk
index 612c03e..bf9ca64 100644
--- a/src/site/_includes/components/filetreeNavbar.njk
+++ b/src/site/_includes/components/filetreeNavbar.njk
@@ -1,6 +1,6 @@
 <nav class="navbar">
     <div class="navbar-inner">
-        <i style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile" class="fa fa-bars"></i>
+        <span style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile"><i class="svg-icon" icon-name="menu"></i></span>
         {% for imp in dynamics.filetree.beforeTitle %}
             {% include imp %}
         {% endfor %}
diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index ce07932..9299bb9 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -173,7 +173,12 @@
             g.id = 'full-graph';
             g.classList.add('show');
             document.body.appendChild(g);
-            g.innerHTML = '<i class="fa fa-times" id="full-graph-close" aria-hidden="true"></i><div id="full-graph-container"></div>';
+            g.innerHTML = '<span id="full-graph-close"><i icon-name="x" class="svg-icon" aria-hidden="true"></i></span><div id="full-graph-container"></div>';
+            lucide.createIcons({
+                attrs: {
+                    class: ["svg-icon"]
+                }
+            });
             window.fullGraph = renderGraph(graphData, "full-graph-container", 200);
             document.getElementById('full-graph-close').addEventListener('click', (evt) => {
                 g.classList.remove('show');
diff --git a/src/site/_includes/components/lucideIcons.njk b/src/site/_includes/components/lucideIcons.njk
new file mode 100644
index 0000000..6244601
--- /dev/null
+++ b/src/site/_includes/components/lucideIcons.njk
@@ -0,0 +1,7 @@
+<script>
+lucide.createIcons({
+            attrs: {
+                class: ["svg-icon"]
+            }
+        });
+</script>
\ No newline at end of file
diff --git a/src/site/_includes/components/pageheader.njk b/src/site/_includes/components/pageheader.njk
index 0e97d32..a0d0cad 100644
--- a/src/site/_includes/components/pageheader.njk
+++ b/src/site/_includes/components/pageheader.njk
@@ -16,7 +16,6 @@
 <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.11.1/dist/cdn.min.js" defer></script>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
diff --git a/src/site/_includes/components/searchButton.njk b/src/site/_includes/components/searchButton.njk
index b1f69de..be64ea1 100644
--- a/src/site/_includes/components/searchButton.njk
+++ b/src/site/_includes/components/searchButton.njk
@@ -1,6 +1,6 @@
 <div class="search-button" onclick="toggleSearch()">
     <span class="search-icon">
-        <i class="fa fa-search"></i>
+        <i icon-name="search" class="svg-icon"></i>
     </span>
     <span class="search-text">
         <span>Search</span>
diff --git a/src/site/_includes/components/searchContainer.njk b/src/site/_includes/components/searchContainer.njk
index 8de8fee..207ca1a 100644
--- a/src/site/_includes/components/searchContainer.njk
+++ b/src/site/_includes/components/searchContainer.njk
@@ -8,8 +8,8 @@
             </div>
 
             <div class="navigation-hint">
-                <i class="fa fa-arrow-up" aria-hidden="true"></i>
-                <i class="fa fa-arrow-down" aria-hidden="true"></i>
+                <i class="svg-icon" icon-name="arrow-up" aria-hidden="true"></i>
+                <i class="svg-icon" icon-name="arrow-down" aria-hidden="true"></i>
                 <span>to navigate</span>
             </div>
 
diff --git a/src/site/_includes/components/sidebar.njk b/src/site/_includes/components/sidebar.njk
index 4eecece..5b8efed 100644
--- a/src/site/_includes/components/sidebar.njk
+++ b/src/site/_includes/components/sidebar.njk
@@ -22,8 +22,8 @@
                                                 <span id="depth-display"></span>
                                           </div>
                                           <div class="ctrl-right">
-                                                <i class="fa fa-globe" id="global-graph-btn" aria-hidden="true"></i>
-                                                <i class="fa fa-arrows-alt" id="graph-fs-btn" aria-hidden="true"></i>
+                                                <span id="global-graph-btn"><i class="svg-icon" icon-name="globe" aria-hidden="true"></i></span>
+                                                <span  id="graph-fs-btn"><i class="svg-icon" icon-name="expand" aria-hidden="true"></i></span>
                                           </div>
                                     </div>
                               </div>
@@ -62,7 +62,7 @@
                                           {%- for backlink in graph.nodes[graph.homeAlias].backLinks -%}
                                                 {%- if graph.nodes[backlink].url != graph.homeAlias -%}
                                                 <div class="backlink-card">
-                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                      <i class="svg-icon" icon-name="link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
                                                 </div>
                                                 {%- endif -%}
                                           {%- endfor -%}
@@ -75,7 +75,7 @@
                                           {%- for backlink in graph.nodes[page.url].backLinks -%}
                                                 {%- if graph.nodes[backlink].url != page.url -%}
                                                 <div class="backlink-card">
-                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                      <i class="svg-icon" icon-name="link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
                                                 </div>
                                                 {%- endif -%}
                                           {%- endfor -%}
diff --git a/src/site/_includes/layouts/index.njk b/src/site/_includes/layouts/index.njk
index 25eeacc..ea65f93 100644
--- a/src/site/_includes/layouts/index.njk
+++ b/src/site/_includes/layouts/index.njk
@@ -74,5 +74,6 @@
     {% for imp in dynamics.index.footer %}
       {% include imp %}
     {% endfor %}
+    {%include "components/lucideIcons.njk"%}
     </body>
   </html>
diff --git a/src/site/_includes/layouts/note.njk b/src/site/_includes/layouts/note.njk
index a69c075..c2d391b 100644
--- a/src/site/_includes/layouts/note.njk
+++ b/src/site/_includes/layouts/note.njk
@@ -80,5 +80,6 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
     {% for imp in dynamics.notes.footer %}
       {% include imp %}
     {% endfor %}
+    {%include "components/lucideIcons.njk"%}
   </body>
 </html>
diff --git a/src/site/styles/digital-garden-base.scss b/src/site/styles/digital-garden-base.scss
index 9e0ace0..cc47787 100644
--- a/src/site/styles/digital-garden-base.scss
+++ b/src/site/styles/digital-garden-base.scss
@@ -523,6 +523,10 @@ ul.task-list {
     &:hover {
         border: 1px solid var(--text-accent);
     }
+
+    .search-icon {
+        display: flex;
+    }
 }
 
 .search-keys {