diff --git a/src/templates/getWebComponent.ts b/src/templates/getWebComponent.ts
new file mode 100644
index 0000000..9ce5fc6
--- /dev/null
+++ b/src/templates/getWebComponent.ts
@@ -0,0 +1,28 @@
+interface WebComponentParams {
+  name: string;
+  content: string;
+}
+
+export const getWebComponent = (params: WebComponentParams) => {
+  return `
+class Icon${params.name} extends HTMLElement {  
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  
+  connectedCallback() {
+    this.shadowRoot.innerHTML = /* html */ \`
+        <style>
+          svg { 
+            width: var(--size, 128px); 
+            color: var(--color, currentColor);
+          }
+        </style>
+        ${params.content}
+    \`;
+  }
+}
+customElements.define("icon-${params.name.toLowerCase()}", Icon${params.name});
+  `;
+};