diff --git a/apps/website/src/components/code-copy/code-copy.tsx b/apps/website/src/components/code-copy/code-copy.tsx
index 36e02a91d..ef8e905c9 100644
--- a/apps/website/src/components/code-copy/code-copy.tsx
+++ b/apps/website/src/components/code-copy/code-copy.tsx
@@ -2,6 +2,7 @@ import { PropsOf, component$, useSignal } from '@builder.io/qwik';
 import { Button } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';
+import { LuCheck, LuCopy } from '@qwikest/icons/lucide';
 
 export type CodeCopyProps = PropsOf<typeof Button> & {
   code?: string;
@@ -13,7 +14,7 @@ export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
   return (
     <Button
       {...props}
-      look="link"
+      look="ghost"
       title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
       class={cn(props.class)}
       onClick$={async () => {
@@ -25,54 +26,7 @@ export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
         }, 4000);
       }}
     >
-      {!copied.value ? (
-        <CopyIcon />
-      ) : (
-        <div class="flex gap-1">
-          <ClipboardCheck />
-        </div>
-      )}
+      {copied.value ? <LuCheck class="text-white" /> : <LuCopy class="text-white" />}
     </Button>
   );
 });
-
-export function CopyIcon(props: PropsOf<'svg'> & { color?: string }, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.25em"
-      height="1.25em"
-      viewBox="0 0 16 16"
-      class="group"
-      {...props}
-      key={key}
-    >
-      <path
-        class="fill-slate-300 group-hover:fill-slate-100"
-        d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
-      ></path>
-      <path
-        class="fill-slate-300 group-hover:fill-slate-100"
-        d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-      ></path>
-    </svg>
-  );
-}
-
-export function ClipboardCheck(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.25em"
-      height="1.25em"
-      viewBox="0 0 16 16"
-      {...props}
-      key={key}
-    >
-      <path
-        fill="white"
-        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042a.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-      ></path>
-    </svg>
-  );
-}
diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx
index 6e276138c..ba10e2787 100644
--- a/apps/website/src/components/feature-list/feature-list.tsx
+++ b/apps/website/src/components/feature-list/feature-list.tsx
@@ -1,8 +1,6 @@
 import { component$ } from '@builder.io/qwik';
-import { CheckIcon } from '../icons/Check';
-import { Roadmap } from '../icons/Roadmap';
-import { IssueIcon } from '../icons/Issues';
 import { Note } from '../note/note';
+import { LuBadge, LuBadgeAlert, LuBadgeCheck } from '@qwikest/icons/lucide';
 
 type FeatureListProps = {
   features: string[];
@@ -22,7 +20,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                   key={descriptor}
                   class={`flex w-full list-none items-center gap-x-2 gap-y-4 ${index === props.features.length - 1 ? '' : 'border-b-[1px]'} border-slate-200 py-2 dark:border-slate-800`}
                 >
-                  <CheckIcon class="min-w-[21px]" />
+                  <LuBadgeCheck class="h-5 w-5 text-green-600" />
                   {descriptor}
                 </li>
               );
@@ -39,7 +37,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                     key={descriptor}
                     class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
                   >
-                    <Roadmap class="min-w-[21px]" />
+                    <LuBadge class="h-5 w-5 text-yellow-500" />
                     {descriptor}
                   </li>
                 </>
@@ -56,7 +54,7 @@ export const FeatureList = component$((props: FeatureListProps) => {
                     key={descriptor}
                     class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
                   >
-                    <IssueIcon class="min-w-[21px]" />
+                    <LuBadgeAlert class="h-5 w-5 text-red-500" />
                     {descriptor}
                   </li>
                 </>
diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx
index 16e9001b9..56fafeaee 100644
--- a/apps/website/src/components/header/header.tsx
+++ b/apps/website/src/components/header/header.tsx
@@ -13,18 +13,14 @@ import { useLocation } from '@builder.io/qwik-city';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as styledKitVersion } from '../../../../../packages/kit-styled/package.json';
-import { CloseIcon } from '../icons/CloseIcon';
 import { GitHubIcon } from '../icons/GitHubIcon';
-import { MenuIcon } from '../icons/MenuIcon';
-import { MoonIcon } from '../icons/MoonIcon';
-import { SunIcon } from '../icons/SunIcon';
 import { LogoIcon, LogoWithBorders } from '../icons/logo';
 
 import { useTheme } from '@qwik-ui/themes';
 
 import { Modal } from '@qwik-ui/headless';
 import { useAppState } from '~/_state/use-app-state';
-import { LuX } from '@qwikest/icons/lucide';
+import { LuMenu, LuMoon, LuSun, LuX } from '@qwikest/icons/lucide';
 import { DocsNavigation } from '../navigation-docs/navigation-docs';
 import { useKitMenuItems } from '~/routes/layout';
 import { cn } from '@qwik-ui/utils';
@@ -195,7 +191,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
               look="ghost"
               class="flex lg:hidden"
             >
-              {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
+              <LuMenu class="h-6 w-6" />
             </Button>
           </div>
         </div>
@@ -245,10 +241,10 @@ const DarkModeToggle = component$<PropsOf<typeof Button>>(({ ...props }) => {
       }
     >
       <div class="hidden dark:block">
-        <MoonIcon />
+        <LuMoon class="h-6 w-6" />
       </div>
       <div class="block dark:hidden">
-        <SunIcon />
+        <LuSun class="h-6 w-6" />
       </div>
     </Button>
   );
diff --git a/apps/website/src/components/icons/Check.tsx b/apps/website/src/components/icons/Check.tsx
deleted file mode 100644
index 26f069908..000000000
--- a/apps/website/src/components/icons/Check.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { PropsOf } from '@builder.io/qwik';
-
-export function CheckIcon(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.35em"
-      height="1.35em"
-      viewBox="0 0 256 256"
-      {...props}
-      key={key}
-    >
-      <g fill="#16a34a">
-        <path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96Z" opacity=".2"></path>
-        <path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0ZM232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88Z"></path>
-      </g>
-    </svg>
-  );
-}
diff --git a/apps/website/src/components/icons/ClipboardCheck.tsx b/apps/website/src/components/icons/ClipboardCheck.tsx
deleted file mode 100644
index cfa50978c..000000000
--- a/apps/website/src/components/icons/ClipboardCheck.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export const ClipboardCheck = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="#bab4b46e"
-    class="bi bi-clipboard2-check"
-    viewBox="0 0 16 16"
-  >
-    <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z" />
-    <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z" />
-    <path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3Z" />
-  </svg>
-);
diff --git a/apps/website/src/components/icons/CloseIcon.tsx b/apps/website/src/components/icons/CloseIcon.tsx
deleted file mode 100644
index 3db7a4487..000000000
--- a/apps/website/src/components/icons/CloseIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { component$, type HTMLAttributes } from '@builder.io/qwik';
-
-export const CloseIcon = component$<HTMLAttributes<SVGSVGElement>>((props) => (
-  <svg
-    viewBox="0 0 40 48"
-    role="img"
-    aria-label="Close icon"
-    fill="none"
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-width={4}
-    {...props}
-  >
-    <path d="M36.27 7.73 3.73 40.27m32.54 0L3.73 7.73" />
-  </svg>
-));
diff --git a/apps/website/src/components/icons/CollapsibleIcon.tsx b/apps/website/src/components/icons/CollapsibleIcon.tsx
deleted file mode 100644
index d651be6aa..000000000
--- a/apps/website/src/components/icons/CollapsibleIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PropsOf } from '@builder.io/qwik';
-
-export function CollapsibleIcon(props: PropsOf<'svg'>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 1024 1024"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M831.872 340.864L512 652.672L192.128 340.864a30.592 30.592 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.592 30.592 0 0 0-42.752 0z"
-      ></path>
-    </svg>
-  );
-}
diff --git a/apps/website/src/components/icons/CopyIcon.tsx b/apps/website/src/components/icons/CopyIcon.tsx
deleted file mode 100644
index f5f67caea..000000000
--- a/apps/website/src/components/icons/CopyIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export const CopyIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="#bab4b46e"
-    class="bi bi-copy"
-    viewBox="0 0 16 16"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"
-    />
-  </svg>
-);
diff --git a/apps/website/src/components/icons/Issues.tsx b/apps/website/src/components/icons/Issues.tsx
deleted file mode 100644
index fe51305e2..000000000
--- a/apps/website/src/components/icons/Issues.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { PropsOf } from '@builder.io/qwik';
-
-export function IssueIcon(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.35em"
-      height="1.35em"
-      viewBox="0 0 256 256"
-      {...props}
-      key={key}
-    >
-      <g fill="hsl(var(--alert))">
-        <path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"></path>
-        <path d="M176 128a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8m56 0A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"></path>
-      </g>
-    </svg>
-  );
-}
diff --git a/apps/website/src/components/icons/MenuIcon.tsx b/apps/website/src/components/icons/MenuIcon.tsx
deleted file mode 100644
index e7d762c42..000000000
--- a/apps/website/src/components/icons/MenuIcon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-export const MenuIcon = () => (
-  <svg
-    viewBox="0 0 10 9"
-    fill="none"
-    stroke-linecap="round"
-    aria-hidden="true"
-    class="h-6 w-6 stroke-foreground"
-  >
-    <path d="M.5 1h9M.5 8h9M.5 4.5h9" />
-  </svg>
-);
diff --git a/apps/website/src/components/icons/MoonIcon.tsx b/apps/website/src/components/icons/MoonIcon.tsx
deleted file mode 100644
index 8427abb8a..000000000
--- a/apps/website/src/components/icons/MoonIcon.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const MoonIcon = () => (
-  <svg
-    viewBox="0 0 20 20"
-    fill="none"
-    aria-hidden="true"
-    class="h-10 w-10 rounded-base stroke-white p-1 hover:bg-accent"
-  >
-    <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
-  </svg>
-);
diff --git a/apps/website/src/components/icons/Roadmap.tsx b/apps/website/src/components/icons/Roadmap.tsx
deleted file mode 100644
index caff63818..000000000
--- a/apps/website/src/components/icons/Roadmap.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { QwikIntrinsicElements } from '@builder.io/qwik';
-
-export function Roadmap(props: QwikIntrinsicElements['svg'], key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1.35em"
-      height="1.35em"
-      viewBox="0 0 256 256"
-      {...props}
-      key={key}
-    >
-      <g fill="#F9C23C">
-        <path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"></path>
-        <path d="M96.26 37a8 8 0 0 1 5.74-9.71a104.11 104.11 0 0 1 52 0a8 8 0 0 1-2 15.75a8.15 8.15 0 0 1-2-.26a88.09 88.09 0 0 0-44 0A8 8 0 0 1 96.26 37M53.79 55.14a104 104 0 0 0-26 45a8 8 0 1 0 15.42 4.26a87.91 87.91 0 0 1 22-38.08a8 8 0 0 0-11.42-11.18m-10.58 96.41a8 8 0 1 0-15.42 4.28a104 104 0 0 0 26 45a8 8 0 1 0 11.41-11.21a88.14 88.14 0 0 1-21.99-38.07M150 213.22a88 88 0 0 1-44 0a8 8 0 1 0-4 15.49a104.11 104.11 0 0 0 52 0a8 8 0 0 0-4-15.49M222.65 146a8 8 0 0 0-9.85 5.57a87.88 87.88 0 0 1-22 38.09a8 8 0 1 0 11.42 11.21a104.05 104.05 0 0 0 26-45a8 8 0 0 0-5.57-9.87m-9.86-41.54a8 8 0 0 0 15.42-4.28a104 104 0 0 0-26-45a8 8 0 1 0-11.41 11.21a88.14 88.14 0 0 1 21.99 38.06Z"></path>
-      </g>
-    </svg>
-  );
-}
-export default Roadmap;
diff --git a/apps/website/src/components/icons/SunIcon.tsx b/apps/website/src/components/icons/SunIcon.tsx
deleted file mode 100644
index d8cb3f0d1..000000000
--- a/apps/website/src/components/icons/SunIcon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export const SunIcon = () => (
-  <svg
-    viewBox="0 0 20 20"
-    fill="none"
-    aria-hidden="true"
-    class="h-10 w-10 rounded-base stroke-black p-1 hover:bg-accent"
-  >
-    <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
-    <path
-      stroke-linecap="round"
-      d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
-    />
-  </svg>
-);
diff --git a/apps/website/src/components/icons/ThemeIcon.tsx b/apps/website/src/components/icons/ThemeIcon.tsx
deleted file mode 100644
index beb404364..000000000
--- a/apps/website/src/components/icons/ThemeIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export const ThemeIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    class="inline-block h-5 w-5 stroke-black dark:stroke-white md:h-6 md:w-6"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
-    ></path>
-  </svg>
-);
diff --git a/apps/website/src/components/icons/double-chevron.tsx b/apps/website/src/components/icons/double-chevron.tsx
deleted file mode 100644
index 0ea9f5570..000000000
--- a/apps/website/src/components/icons/double-chevron.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PropsOf } from '@builder.io/qwik';
-
-export function DoubleChevron(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      {...props}
-      key={key}
-    >
-      <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"
-      ></path>
-    </svg>
-  );
-}
diff --git a/packages/kit-styled/src/components/input/input.tsx b/packages/kit-styled/src/components/input/input.tsx
index 15fb6ae3f..72d00a827 100644
--- a/packages/kit-styled/src/components/input/input.tsx
+++ b/packages/kit-styled/src/components/input/input.tsx
@@ -14,7 +14,7 @@ export const Input = component$<InputProps>(
         <input
           {...props}
           aria-errormessage={`${inputId}-error`}
-          aria-invaid={!!error}
+          aria-invalid={!!error}
           // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}