diff --git a/src/comps.ui.shell/app-bar.tsx b/src/comps.ui.shell/app-bar.tsx
index a5c0a34..dedbcb0 100644
--- a/src/comps.ui.shell/app-bar.tsx
+++ b/src/comps.ui.shell/app-bar.tsx
@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/solid-router";
+import { Icon } from "../comps.ui/icon.tsx";
 
 export const AppBar = () => {
   return (
@@ -8,13 +9,13 @@ export const AppBar = () => {
         <ul class="flex justify-around py-1 text-2xl">
           <li>
             <Link class="inline-block px-2 py-1" activeProps={{ class: "text-brand-900" }} to="/">
-              <i class="i-solar:check-square-bold-duotone inline-block p-2" />
+              <Icon.Solar class="i-solar:check-square-bold-duotone p-2" />
             </Link>
           </li>
 
           <li>
             <Link class="inline-block px-2 py-1" activeProps={{ class: "text-brand-900" }} to="/settings">
-              <i class="i-solar:settings-minimalistic-bold-duotone inline-block p-2" />
+              <Icon.Solar class="i-solar:settings-minimalistic-bold-duotone p-2" />
             </Link>
           </li>
         </ul>
diff --git a/src/comps.ui/icon.tsx b/src/comps.ui/icon.tsx
index 15062c1..8e13f46 100644
--- a/src/comps.ui/icon.tsx
+++ b/src/comps.ui/icon.tsx
@@ -1,51 +1,9 @@
-import { icons } from "@iconify-json/solar/icons.json" with { type: "json" };
 import { cx } from "class-variance-authority";
+import { ComponentProps, splitProps } from "solid-js";
 
-type AllSolarIcons = keyof typeof icons;
-type FilteredsolarIcons = Exclude<
-  AllSolarIcons,
-  | `${string}-broken`
-  | `${string}-line-duotone`
-  | `${string}-linear`
-  | `${string}-outline`
-  | `${string}-bold`
-  | `${string}-bold-duotone`
->;
-
-type SolarBrokenIcons = {
-  icon: Extract<AllSolarIcons, `${string}-broken`>;
-  broken: true;
-};
-
-type SolarLineIcons = {
-  icon: Extract<AllSolarIcons, `${string}-linear`>;
-  duotone: false;
-  line: true;
-};
-
-type SolarLineDuotoneIcons = {
-  icon: Extract<AllSolarIcons, `${string}-line-duotone`>;
-  duotone: true;
-  line: true;
-};
-
-type SolarBoldIcons = {
-  icon: Extract<AllSolarIcons, `${string}-bold`>;
-  duotone: false;
-  bold: true;
+export const Icon = {
+  Solar: (props: ComponentProps<"i">) => {
+    const [loProps, elProps] = splitProps(props, ["children", "class"]);
+    return <i {...elProps} class={cx("inline-block", loProps.class)} />;
+  },
 };
-
-type SolarBoldDuotoneIcons = {
-  icon: Extract<AllSolarIcons, `${string}-bold-duotone`>;
-  duotone: false;
-  bold: true;
-};
-
-type SolarProps = SolarBrokenIcons | SolarLineIcons | SolarLineDuotoneIcons | SolarBoldIcons | SolarBoldDuotoneIcons;
-
-const iconRoot = () => {
-};
-
-export const Icon = Object.assign({}, {
-  Solar: (props: SolarProps) => <i class={cx("inline-block", `i-solar:${props.icon}-bold`)} />,
-});
diff --git a/src/routes/settings.admin.users.tsx b/src/routes/settings.admin.users.tsx
index cdc280a..62543fb 100644
--- a/src/routes/settings.admin.users.tsx
+++ b/src/routes/settings.admin.users.tsx
@@ -4,6 +4,7 @@ import { Index } from "solid-js";
 import { UserCard } from "../comps.ui.cards/user.card.tsx";
 import { Page, Section } from "../comps.ui.shell/layout.tsx";
 import { Menu } from "../comps.ui.shell/menu.tsx";
+import { Icon } from "../comps.ui/icon.tsx";
 import { userCollection } from "../data.collections/user.collection.ts";
 
 export const Route = createFileRoute("/settings/admin/users")({
@@ -15,7 +16,7 @@ export const Route = createFileRoute("/settings/admin/users")({
         <Page.Header>
           <h1 class="flex items-center gap-1">
             <Link to="/settings">
-              <i class="i-solar:alt-arrow-left-bold" />
+              <Icon.Solar class="i-solar:alt-arrow-left-bold" />
             </Link>
             <span>Users</span>
           </h1>
diff --git a/src/routes/settings.communication.tsx b/src/routes/settings.communication.tsx
index a657649..9634fb0 100644
--- a/src/routes/settings.communication.tsx
+++ b/src/routes/settings.communication.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, Link } from "@tanstack/solid-router";
 import { Index } from "solid-js";
 import { Page, Section } from "../comps.ui.shell/layout.tsx";
 import { Menu } from "../comps.ui.shell/menu.tsx";
+import { Icon } from "../comps.ui/icon.tsx";
 import { getMailingLists, getSubscriber, updateSubscriber } from "../data.functions/mailing-list.service.ts";
 
 export const Route = createFileRoute("/settings/communication")({
@@ -18,7 +19,7 @@ export const Route = createFileRoute("/settings/communication")({
         <Page.Header>
           <h1 class="flex items-center gap-1">
             <Link to="/settings">
-              <i class="i-solar:alt-arrow-left-bold" />
+              <Icon.Solar class="i-solar:alt-arrow-left-bold" />
             </Link>
             <span>Communication</span>
           </h1>
diff --git a/src/routes/settings.feedback.index.tsx b/src/routes/settings.feedback.index.tsx
index 203d776..43f4a7a 100644
--- a/src/routes/settings.feedback.index.tsx
+++ b/src/routes/settings.feedback.index.tsx
@@ -4,6 +4,7 @@ import { Index } from "solid-js";
 import { AddFeedbackModal } from "../comps.modals/modal.add-feedback.tsx";
 import { Page, Section } from "../comps.ui.shell/layout.tsx";
 import { Menu } from "../comps.ui.shell/menu.tsx";
+import { Icon } from "../comps.ui/icon.tsx";
 import { feedbackPostCollection } from "../data.collections/feedback-post.collection.ts";
 
 export const Route = createFileRoute("/settings/feedback/")({
@@ -25,7 +26,7 @@ export const Route = createFileRoute("/settings/feedback/")({
         <Page.Header>
           <h1 class="flex items-center gap-1">
             <Link to="/settings">
-              <i class="i-solar:alt-arrow-left-bold" />
+              <Icon.Solar class="i-solar:alt-arrow-left-bold" />
             </Link>
             <span>Feedback</span>
           </h1>
diff --git a/src/routes/settings.index.tsx b/src/routes/settings.index.tsx
index edbd7a9..e9db41c 100644
--- a/src/routes/settings.index.tsx
+++ b/src/routes/settings.index.tsx
@@ -4,6 +4,7 @@ import { Show } from "solid-js";
 import { UserCard } from "../comps.ui.cards/user.card.tsx";
 import { Page, Section } from "../comps.ui.shell/layout.tsx";
 import { Menu } from "../comps.ui.shell/menu.tsx";
+import { Icon } from "../comps.ui/icon.tsx";
 import { findUser } from "../data.functions/user.service.ts";
 
 export const Route = createFileRoute("/settings/")({
@@ -32,19 +33,19 @@ export const Route = createFileRoute("/settings/")({
                   <UserCard user={user()} />
 
                   <Link to="/settings/communication">
-                    <i class="i-solar:mailbox-bold-duotone" />
+                    <Icon.Solar class="i-solar:mailbox-bold-duotone" />
                     <span class="grow">Communication</span>
-                    <i class="i-solar:alt-arrow-right-bold-duotone" />
+                    <Icon.Solar class="i-solar:alt-arrow-right-bold-duotone" />
                   </Link>
 
                   <Link to="/settings/feedback">
-                    <i class="i-solar:phone-calling-rounded-bold-duotone" />
+                    <Icon.Solar class="i-solar:phone-calling-rounded-bold-duotone" />
                     <span class="grow">Feedback</span>
-                    <i class="i-solar:alt-arrow-right-bold-duotone" />
+                    <Icon.Solar class="i-solar:alt-arrow-right-bold-duotone" />
                   </Link>
 
                   <button type="button" onclick={handleLogout}>
-                    <i class="i-solar:logout-2-bold-duotone" />
+                    <Icon.Solar class="i-solar:logout-2-bold-duotone" />
                     <span>Logout</span>
                   </button>
                 </Menu>
@@ -61,9 +62,9 @@ export const Route = createFileRoute("/settings/")({
 
             <Menu>
               <Link to="/settings/admin/users">
-                <i class="i-solar:users-group-rounded-bold-duotone" />
+                <Icon.Solar class="i-solar:users-group-rounded-bold-duotone" />
                 <span class="grow">Users</span>
-                <i class="i-solar:alt-arrow-right-bold-duotone" />
+                <Icon.Solar class="i-solar:alt-arrow-right-bold-duotone" />
               </Link>
             </Menu>
           </Section>