diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index cf1897b53..f3520f9a8 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
index e9142c364..bd5f7cf8a 100644
--- a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
+++ b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
@@ -66,8 +66,6 @@ export const BubbleButton = (props: Props) => (
           (isSvgSrc(props.customIconSrc) ? '' : ' object-cover rounded-full')
         }
         alt="Bubble button icon"
-        elementtiming={'Bubble button icon'}
-        fetchpriority={'high'}
       />
     </Show>
     <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
@@ -84,29 +82,71 @@ export const BubbleButton = (props: Props) => (
         {props.customIconSrc}
       </span>
     </Show>
-
-    <svg
-      viewBox="0 0 24 24"
-      style={{
-        fill:
-          props.iconColor ??
-          (isLight(props.backgroundColor ?? defaultButtonColor)
-            ? defaultDarkIconColor
-            : defaultLightIconColor),
-      }}
-      class={
-        `absolute duration-200 transition ` +
-        (props.isBotOpened
-          ? 'scale-100 rotate-0 opacity-100'
-          : 'scale-0 -rotate-180 opacity-0') +
-        (props.size === 'large' ? ' w-9' : ' w-7')
-      }
+    <Show when={isNotDefined(props.customCloseIconSrc)}>
+      <svg
+        viewBox="0 0 24 24"
+        style={{
+          fill:
+            props.iconColor ??
+            (isLight(props.backgroundColor ?? defaultButtonColor)
+              ? defaultDarkIconColor
+              : defaultLightIconColor),
+        }}
+        class={
+          `absolute duration-200 transition ` +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0') +
+          (props.size === 'large' ? ' w-9' : ' w-7')
+        }
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+        />
+      </svg>
+    </Show>
+    <Show
+      when={props.customCloseIconSrc && isImageSrc(props.customCloseIconSrc)}
     >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+      <img
+        part="button-icon"
+        src={props.customCloseIconSrc}
+        class={
+          'duration-200 transition' +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0') +
+          (isSvgSrc(props.customCloseIconSrc)
+            ? props.size === 'large'
+              ? ' w-9 h-9'
+              : ' w-7 h-7'
+            : ' w-[90%] h-[90%]') +
+          (isSvgSrc(props.customCloseIconSrc)
+            ? ''
+            : ' object-cover rounded-full')
+        }
+        alt="Bubble button clost icon"
       />
-    </svg>
+    </Show>
+    <Show
+      when={props.customCloseIconSrc && !isImageSrc(props.customCloseIconSrc)}
+    >
+      <span
+        class={
+          'text-4xl duration-200 transition' +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0')
+        }
+        style={{
+          'font-family':
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        }}
+      >
+        {props.customCloseIconSrc}
+      </span>
+    </Show>
   </button>
 )
diff --git a/packages/embeds/js/src/features/bubble/types.ts b/packages/embeds/js/src/features/bubble/types.ts
index 809d3f218..1d8c5866a 100644
--- a/packages/embeds/js/src/features/bubble/types.ts
+++ b/packages/embeds/js/src/features/bubble/types.ts
@@ -20,6 +20,7 @@ export type ButtonTheme = {
   backgroundColor?: string
   iconColor?: string
   customIconSrc?: string
+  customCloseIconSrc?: string
 }
 
 export type PreviewMessageParams = {
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index c65434d32..51b0267e0 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index e72d0197c..d4a8fb5c5 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",