diff --git a/.changeset/empty-pots-remain.md b/.changeset/empty-pots-remain.md
new file mode 100644
index 00000000000..8595a1a293b
--- /dev/null
+++ b/.changeset/empty-pots-remain.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Converted LiveIcon into a subcomponent of Tag
diff --git a/packages/components/src/Tag/Tag.module.scss b/packages/components/src/Tag/Tag.module.scss
index 40c286263a5..0473adaf62d 100644
--- a/packages/components/src/Tag/Tag.module.scss
+++ b/packages/components/src/Tag/Tag.module.scss
@@ -211,95 +211,3 @@ $small: $spacing-md;
   background-color: $color-blue-100;
   color: $color-purple-800;
 }
-
-.liveIcon {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin-inline-start: 0.25rem;
-  color: $color-green-500;
-}
-
-.liveIcon_base {
-  opacity: 30%;
-  display: block;
-}
-
-.liveIcon_1,
-.liveIcon_2,
-.liveIcon_3 {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
-
-.liveIcon_1 {
-  clip-path: circle(16%);
-}
-
-.liveIcon_2,
-.liveIcon_3 {
-  animation-duration: 3s;
-  animation-iteration-count: 3;
-  animation-delay: 1s;
-}
-
-.liveIcon_2 {
-  clip-path: circle(32%);
-  animation-name: pulse-inner;
-}
-
-.liveIcon_3 {
-  clip-path: circle(50%);
-  animation-name: pulse-outer;
-}
-
-@keyframes pulse-inner {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 100%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
-
-@keyframes pulse-outer {
-  0% {
-    opacity: 0%;
-  }
-
-  25% {
-    opacity: 0%;
-  }
-
-  50% {
-    opacity: 0%;
-  }
-
-  75% {
-    opacity: 100%;
-  }
-
-  100% {
-    opacity: 100%;
-  }
-}
diff --git a/packages/components/src/Tag/Tag.tsx b/packages/components/src/Tag/Tag.tsx
index 8f69322bbfd..94cd482bc31 100644
--- a/packages/components/src/Tag/Tag.tsx
+++ b/packages/components/src/Tag/Tag.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Avatar, AvatarProps } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
 import { Icon } from '~components/__future__/Icon'
+import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon'
 import { TagVariants } from './types'
 import styles from './Tag.module.scss'
 
@@ -130,42 +130,7 @@ export const Tag = (props: TagProps): JSX.Element => {
               </button>
             </>
           )}
-          {variant === 'statusLive' && (
-            <span className={styles.liveIcon}>
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_base}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_1}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_2}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_3}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-            </span>
-          )}
+          {variant === 'statusLive' && <LiveIcon />}
         </>
       </div>
     </div>
diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css
new file mode 100644
index 00000000000..98d96f2d644
--- /dev/null
+++ b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css
@@ -0,0 +1,91 @@
+.liveIcon {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: 0.25rem;
+  color: var(--color-green-500);
+}
+
+.liveIcon_base {
+  opacity: 0.3;
+  display: block;
+}
+
+.liveIcon_1,
+.liveIcon_2,
+.liveIcon_3 {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.liveIcon_1 {
+  clip-path: circle(16%);
+}
+
+.liveIcon_2,
+.liveIcon_3 {
+  animation-duration: 3s;
+  animation-iteration-count: 3;
+  animation-delay: 1s;
+}
+
+.liveIcon_2 {
+  clip-path: circle(32%);
+  animation-name: pulse-inner;
+}
+
+.liveIcon_3 {
+  clip-path: circle(50%);
+  animation-name: pulse-outer;
+}
+
+@keyframes pulse-inner {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-outer {
+  0% {
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx
new file mode 100644
index 00000000000..140bb4b1896
--- /dev/null
+++ b/packages/components/src/Tag/subcomponents/LiveIcon/LiveIcon.tsx
@@ -0,0 +1,48 @@
+// This file is autogenerated by wrapSVGs.ts
+// Changes to this file will be overwritten
+
+import React from 'react'
+import { SVG } from '~components/Icon/subcomponents/SVG'
+import styles from './LiveIcon.module.css'
+
+type LiveIconSvgProps = { classNameOverride: string }
+
+const LiveIconSvg = ({ classNameOverride }: LiveIconSvgProps): JSX.Element => (
+  <SVG
+    role="presentation"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    classNameOverride={classNameOverride}
+  >
+    <path
+      stroke="currentColor"
+      d="M3.266 12.733c-2.6-2.6-2.6-6.866 0-9.466M5.2 10.8c-1.534-1.533-1.534-4.067 0-5.667"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+    <path fill="currentColor" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
+    <path
+      stroke="currentColor"
+      d="M10.8 5.2c1.533 1.533 1.533 4.067 0 5.667M12.733 3.267c2.6 2.6 2.6 6.8 0 9.4"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+  </SVG>
+)
+
+LiveIconSvg.displayName = 'LiveIconSvg'
+
+export const LiveIcon = (): JSX.Element => (
+  <span className={styles.liveIcon}>
+    <LiveIconSvg classNameOverride={styles.liveIcon_base} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_1} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_2} />
+    <LiveIconSvg classNameOverride={styles.liveIcon_3} />
+  </span>
+)
+
+LiveIcon.displayName = 'LiveIcon'
diff --git a/packages/components/src/Tag/subcomponents/LiveIcon/index.ts b/packages/components/src/Tag/subcomponents/LiveIcon/index.ts
new file mode 100644
index 00000000000..68fc6524cbe
--- /dev/null
+++ b/packages/components/src/Tag/subcomponents/LiveIcon/index.ts
@@ -0,0 +1 @@
+export * from './LiveIcon'
diff --git a/packages/components/src/Tag/subcomponents/index.ts b/packages/components/src/Tag/subcomponents/index.ts
new file mode 100644
index 00000000000..68fc6524cbe
--- /dev/null
+++ b/packages/components/src/Tag/subcomponents/index.ts
@@ -0,0 +1 @@
+export * from './LiveIcon'
diff --git a/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx b/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
index 09b2f7f2d2c..8ebfd0f16e0 100644
--- a/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
+++ b/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
@@ -2,8 +2,7 @@ import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { Avatar } from '~components/Avatar'
-import { LiveIcon } from '~components/Icon'
-import styles from '~components/Tag/Tag.module.scss'
+import { LiveIcon } from '~components/Tag/subcomponents'
 import { Icon } from '~components/__future__/Icon'
 import { Tag, RemovableTag } from '../..'
 
@@ -23,8 +22,16 @@ const meta = {
 } satisfies Meta<typeof Tag>
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-/** * This is a stand-in component for the legacy Tag's bake in LiveIcon - we should consider adding this as an actual component or replacing it */
+export const LiveIconComponentStory: Story = {
+  render: () => <LiveIcon />,
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+        code: `
+        // component with styled with CSS modules
 const LiveIconComponent = (): JSX.Element => (
   <span className={styles.liveIcon}>
     <LiveIcon
@@ -61,68 +68,21 @@ const LiveIconComponent = (): JSX.Element => (
     />
   </span>
 )
-
-export const LiveIconComponentStory: StoryObj = {
-  render: () => <LiveIconComponent />,
-  parameters: {
-    docs: {
-      source: {
-        type: 'dynamic',
-        code: `
-  // component with styled with CSS modules
-  const LiveIconComponent = (): JSX.Element => (
-    <span className={styles.liveIcon}>
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_base}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_1}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_2}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-      <LiveIcon
-        role="presentation"
-        classNameOverride={styles.liveIcon_3}
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      />
-    </span>
-  )
-
-  // Minified SCSS from the stylesheet
-  <style>
-    .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
-  </style>
-        `,
+// Minified SCSS from the stylesheet
+<style>
+  .liveIcon_2,.liveIcon_3{animation-duration:3s;animation-iteration-count:3;animation-delay:1s}.liveIcon{display:inline-block;position:relative;width:20px;height:20px;color:$color-green-500}.liveIcon_1,.liveIcon_2,.liveIcon_3{display:block;position:absolute;top:0;left:$0;width:100%;height:100%;overflow:hidden}.liveIcon_base{opacity:30%;display:block}.liveIcon_1{clip-path:circle(16%)}.liveIcon_2{clip-path:circle(32%);animation-name:pulse-inner}.liveIcon_3{clip-path:circle(50%);animation-name:pulse-outer}@keyframes pulse-inner{0%,25%{opacity:0%}100%,50%,75%{opacity:100%}}@keyframes pulse-outer{0%,25%,50%{opacity:0%}100%,75%{opacity:100%}}
+</style>`,
       },
     },
   },
 }
 
-export const StatusMigration: StoryObj = {
+export const StatusMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="gap-4" color="green">
         <span>Tag</span>
-        <LiveIconComponent />
+        <LiveIcon />
       </Tag>
       <Tag color="blue">Tag</Tag>
       <Tag color="red">Tag</Tag>
@@ -138,7 +98,7 @@ export const StatusMigration: StoryObj = {
   ],
 }
 
-export const ValidationMigration: StoryObj = {
+export const ValidationMigration: Story = {
   render: () => (
     <>
       <Tag color="green" icon={<Icon name="check_circle" isFilled alt="Success," />}>
@@ -164,7 +124,7 @@ export const ValidationMigration: StoryObj = {
   ],
 }
 
-export const SentimentsMigration: StoryObj = {
+export const SentimentsMigration: Story = {
   render: () => (
     <>
       <Tag color="green">Tag</Tag>
@@ -184,7 +144,7 @@ export const SentimentsMigration: StoryObj = {
   ],
 }
 
-export const SentimentNone: StoryObj = {
+export const SentimentNone: Story = {
   render: () => (
     <Tag color="gray" classNameOverride="bg-white border-default-color border-solid border">
       Tag
@@ -192,7 +152,7 @@ export const SentimentNone: StoryObj = {
   ),
 }
 
-export const DismissibleMigration: StoryObj = {
+export const DismissibleMigration: Story = {
   render: () => (
     <RemovableTag
       removeButtonProps={{
@@ -205,7 +165,7 @@ export const DismissibleMigration: StoryObj = {
   ),
 }
 
-export const AvatarMigration: StoryObj = {
+export const AvatarMigration: Story = {
   render: () => (
     <>
       <Tag classNameOverride="ps-4">
@@ -241,7 +201,7 @@ export const AvatarMigration: StoryObj = {
   ],
 }
 
-export const AvatarRemovableMigration: StoryObj = {
+export const AvatarRemovableMigration: Story = {
   render: () => (
     <>
       <RemovableTag
@@ -295,7 +255,7 @@ export const AvatarRemovableMigration: StoryObj = {
   ],
 }
 
-export const InlineMigration: StoryObj = {
+export const InlineMigration: Story = {
   render: () => (
     <div className="flex gap-12">
       <Tag>Tag</Tag>
@@ -305,4 +265,4 @@ export const InlineMigration: StoryObj = {
   ),
 }
 
-export const SizesMigration: StoryObj = {}
+export const SizesMigration: Story = {}