diff --git a/src/components/icons/webComponentIcon.svelte b/src/components/icons/webComponentIcon.svelte
new file mode 100644
index 0000000..9a7ff08
--- /dev/null
+++ b/src/components/icons/webComponentIcon.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { IconProps } from '@/types/icons';
+  let { iconSize }: IconProps = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 200 161"
+  width={iconSize || 16}
+  height={iconSize || 16}
+>
+  <defs>
+    <linearGradient
+      id="a"
+      x1="48.9"
+      x2="127.1"
+      y1="40"
+      y2="40"
+      gradientTransform="scale(1.25056 .79964)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop offset="0" stop-color="#2a3b8f" /><stop offset="1" stop-color="#29abe2" />
+    </linearGradient>
+    <linearGradient
+      id="b"
+      x1="126.9"
+      x2="48.7"
+      y1="124.8"
+      y2="124.8"
+      gradientTransform="scale(1.2532 .79796)"
+      gradientUnits="userSpaceOnUse"
+      ><stop offset="0" stop-color="#b4d44e" /><stop offset="1" stop-color="#e7f716" />
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd" stroke-width=".3">
+    <path fill="#166da5" d="m197 80.2-21.4 36-30-36.5 30-35.6z" /><path
+      fill="#8fdb69"
+      d="m173.3 122.4-32.6-39L121 116l30.4 44.4z"
+    />
+    <path fill="#166da5" d="m172.9 37.8-32.2 39L121 44.2l30.5-44z" /><path
+      fill="url(#a)"
+      d="M61.1 31.4H141L123.4.7H78.7zm53.7 31.9H159l-15.9-26.8H98.8"
+      opacity=".9"
+      transform="translate(-.5 -.9) scale(1.22972)"
+    />
+    <path
+      fill="url(#b)"
+      d="M141.3 100.3H61l17.6 30.5h45zm-26.5-31.9H159l-15.9 26.8H98.8"
+      opacity=".9"
+      transform="translate(-.5 -.9) scale(1.22972)"
+    />
+    <path fill="currentColor" d="M96.2 160 49.9 80 96.8.2H46L0 80.1 46.1 160z" />
+  </g>
+</svg>