diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index 16f79fefe..0ef02d2f6 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -225,6 +225,15 @@ const htmlPath = convertPathToHtml(path);
                 <p>General</p>
               </a>
             </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/icons.html"}
+                class:list={["nav-link", page === "icons" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Icons</p>
+              </a>
+            </li>
             <li class="nav-item">
               <a
                 href={htmlPath + "/UI/timeline.html"}
diff --git a/src/html/pages/UI/icons.astro b/src/html/pages/UI/icons.astro
new file mode 100644
index 000000000..8186c8065
--- /dev/null
+++ b/src/html/pages/UI/icons.astro
@@ -0,0 +1,93 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Icons";
+const path = "../../../dist";
+const mainPage = "ui-elements";
+const page = "icons";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Icons</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Icons
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!-- Timelime example  -->
+            <div class="row">
+              <div class="col-12">
+                <!-- The icons -->
+                <div class="col-12">
+                    <div class="card card-primary card-outline">
+                      <div class="card-header">
+                        <h3 class="card-title">Icons</h3>
+                      </div>
+                      <div class="card-body">
+                        <p>You can use any font library you like with AdminLTE 4.</p>
+                        <strong>Recommendations</strong>
+                        <ul class="mt-1">
+                          <li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
+                          <li><a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a></li>
+                          <li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
