diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index b7f869c3..c2de8e90 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -35,7 +35,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index a0fa3029..f8db0d39 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -16,7 +16,7 @@ jobs:
     name: build-lint-test - node ${{ matrix.node_version }}
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -24,7 +24,7 @@ jobs:
           node-version: ${{ matrix.node_version }}
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
@@ -58,7 +58,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -66,7 +66,7 @@ jobs:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
@@ -87,8 +87,7 @@ jobs:
     if: github.event.pull_request.head.repo.full_name == github.repository
     steps:
       - name: Check out Git repository
-        uses:
-          actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -96,7 +95,7 @@ jobs:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 1f923e7b..a547c677 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # Use custom token from repo secrets to allow semantic release to push commit:
@@ -24,7 +24,7 @@ jobs:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
diff --git a/.github/workflows/visual.yml b/.github/workflows/visual.yml
index 809d54d0..78dfc1a3 100644
--- a/.github/workflows/visual.yml
+++ b/.github/workflows/visual.yml
@@ -13,7 +13,7 @@ jobs:
     if: ${{ !github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository }}
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -21,7 +21,7 @@ jobs:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
diff --git a/packages/embed/src/css/popover.scss b/packages/embed/src/css/popover.scss
index 777b5c84..d7206bf2 100644
--- a/packages/embed/src/css/popover.scss
+++ b/packages/embed/src/css/popover.scss
@@ -120,20 +120,26 @@
     }
 
     &-close {
-      color: rgba(0, 0, 0, 0.2);
       cursor: pointer;
       margin-left: 4px;
       display: inline-block;
-      width: 20px;
-      height: 20px;
-      font-size: 18px;
       text-align: center;
       position: absolute;
-      top: 8px;
+      top: 12px;
       right: 6px;
 
-      &:hover {
-        color: rgba(0, 0, 0, 0.3);
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      svg path {
+        fill: rgba(0, 0, 0, 0.2);
+        transition: fill 150ms ease-in-out;
+      }
+
+      &:hover svg path {
+        fill: rgba(0, 0, 0, 0.3);
       }
     }
 
diff --git a/packages/embed/src/factories/create-popover/create-popover.ts b/packages/embed/src/factories/create-popover/create-popover.ts
index c23cd625..7b0a2b8d 100644
--- a/packages/embed/src/factories/create-popover/create-popover.ts
+++ b/packages/embed/src/factories/create-popover/create-popover.ts
@@ -11,6 +11,8 @@ import {
   invokeWithoutDefault,
   addAttributesToElement,
   handlePreventReopenOnClose,
+  closeIconSvg,
+  triggerIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { ButtonProps, EmbedPopup } from '../../base'
@@ -38,7 +40,7 @@ const buildPopover = (width?: number | string, height?: number | string) => {
 const buildCloseIcon = (element = 'span', className = 'tf-v1-popover-button-icon') => {
   const icon = document.createElement(element)
   icon.className = `${className} tf-v1-close-icon`
-  icon.innerHTML = '×'
+  icon.innerHTML = closeIconSvg
   icon.dataset.testid = className
   return icon
 }
@@ -65,13 +67,7 @@ const buildIcon = (customIcon?: string, color?: string) => {
   const triggerIcon = document.createElement('div')
   triggerIcon.className = 'tf-v1-popover-button-icon'
 
-  const svgIcon = `<svg class="default" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5
-    9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75
-    7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25
-    7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125
-    17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z" fill="${fillColor}"></path>
-  </svg>`
+  const svgIcon = triggerIconSvg(fillColor)
 
   const isUrlIcon = customIcon?.startsWith('http')
   triggerIcon.innerHTML = isUrlIcon
@@ -97,7 +93,7 @@ const buildTooltip = (message: string, hide: () => void) => {
   const icon = document.createElement('span')
   icon.className = 'tf-v1-popover-tooltip-close'
   icon.dataset.testid = 'tf-v1-popover-tooltip-close'
-  icon.innerHTML = '&times;'
+  icon.innerHTML = closeIconSvg
   icon.onclick = hide
 
   const textContainer = document.createElement('div')
diff --git a/packages/embed/src/factories/create-popup/create-popup.ts b/packages/embed/src/factories/create-popup/create-popup.ts
index ef027e7a..17b5b90e 100644
--- a/packages/embed/src/factories/create-popup/create-popup.ts
+++ b/packages/embed/src/factories/create-popup/create-popup.ts
@@ -9,6 +9,7 @@ import {
   addCustomKeyboardListener,
   invokeWithoutDefault,
   handlePreventReopenOnClose,
+  closeIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { POPUP_SIZE } from '../../constants'
@@ -51,7 +52,7 @@ const buildWrapper = (width?: number | string, height?: number | string, size?:
 const buildCloseButton = (close: () => void) => {
   const closeButton = document.createElement('button')
   closeButton.className = 'tf-v1-close tf-v1-close-icon'
-  closeButton.innerHTML = '&times;'
+  closeButton.innerHTML = closeIconSvg
   closeButton.ariaLabel = 'Close'
   closeButton.onclick = invokeWithoutDefault(close)
   return closeButton
diff --git a/packages/embed/src/factories/create-sidetab/create-sidetab.ts b/packages/embed/src/factories/create-sidetab/create-sidetab.ts
index 2fe084c9..a382d552 100644
--- a/packages/embed/src/factories/create-sidetab/create-sidetab.ts
+++ b/packages/embed/src/factories/create-sidetab/create-sidetab.ts
@@ -12,6 +12,8 @@ import {
   addAttributesToElement,
   getValueWithUnits,
   handlePreventReopenOnClose,
+  closeIconSvg,
+  triggerIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { ButtonProps, EmbedPopup } from '../../base'
@@ -125,9 +127,7 @@ const buildIcon = (customIcon?: string, backgroundColor?: string, textColor?: st
     triggerIcon.style.height = getValueWithUnits(size)
   }
 
-  const svgIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5 9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75 7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25 7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125 17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z" fill="${fillColor}"></path>
-  </svg>`
+  const svgIcon = triggerIconSvg(fillColor)
 
   const isUrlIcon = customIcon?.startsWith('http')
   triggerIcon.innerHTML = isUrlIcon
@@ -141,7 +141,7 @@ const buildIcon = (customIcon?: string, backgroundColor?: string, textColor?: st
 const buildCloseIcon = (element = 'div', className = 'tf-v1-sidetab-button-icon') => {
   const closeButton = document.createElement(element)
   closeButton.className = `${className} tf-v1-close-icon`
-  closeButton.innerHTML = '&times;'
+  closeButton.innerHTML = closeIconSvg
   closeButton.dataset.testid = className
   return closeButton
 }
diff --git a/packages/embed/src/factories/create-slider/create-slider.ts b/packages/embed/src/factories/create-slider/create-slider.ts
index 29b898ce..6fac6e72 100644
--- a/packages/embed/src/factories/create-slider/create-slider.ts
+++ b/packages/embed/src/factories/create-slider/create-slider.ts
@@ -10,6 +10,7 @@ import {
   isInPage,
   invokeWithoutDefault,
   handlePreventReopenOnClose,
+  closeIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { SLIDER_POSITION, SLIDER_WIDTH } from '../../constants'
@@ -45,7 +46,7 @@ const buildWrapper = (position: Position, width: number | string) => {
 const buildCloseButton = (close: () => void) => {
   const closeButton = document.createElement('button')
   closeButton.className = 'tf-v1-close tf-v1-close-icon'
-  closeButton.innerHTML = '&times;'
+  closeButton.innerHTML = closeIconSvg
   closeButton.ariaLabel = 'Close'
   closeButton.onclick = invokeWithoutDefault(close)
   return closeButton
diff --git a/packages/embed/src/utils/close-icon-svg.ts b/packages/embed/src/utils/close-icon-svg.ts
new file mode 100644
index 00000000..e8b81701
--- /dev/null
+++ b/packages/embed/src/utils/close-icon-svg.ts
@@ -0,0 +1,3 @@
+export const closeIconSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414Z" fill="currentColor"/>
+</svg>`
diff --git a/packages/embed/src/utils/index.ts b/packages/embed/src/utils/index.ts
index 88ef3ed6..67707b66 100644
--- a/packages/embed/src/utils/index.ts
+++ b/packages/embed/src/utils/index.ts
@@ -18,3 +18,5 @@ export * from './change-color-opacity'
 export * from './hubspot'
 export * from './invoke-without-default'
 export * from './add-attributes-to-element'
+export * from './close-icon-svg'
+export * from './trigger-icon-svg'
diff --git a/packages/embed/src/utils/trigger-icon-svg.ts b/packages/embed/src/utils/trigger-icon-svg.ts
new file mode 100644
index 00000000..9c42d054
--- /dev/null
+++ b/packages/embed/src/utils/trigger-icon-svg.ts
@@ -0,0 +1,16 @@
+export const triggerIconSvg = (
+  fillColor: string
+) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.002 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.697l-5.748 3.832A1 1 0 0 1 6.002 22v-3h-2a2 2 0 0 1-2-2V5Zm18 0h-16v12h3a1 1 0 0 1 1 1v2.131l4.445-2.963a1 1 0 0 1 .555-.168h7V5Z"
+      fill=${fillColor}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 12.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z"
+      fill=${fillColor}
+    />
+  </svg>`