diff --git a/src/components/domains/additional-purchases/AdditionalPurchaseBanner/AdditionalPurchaseBanner.tsx b/src/components/domains/additional-purchases/AdditionalPurchaseBanner/AdditionalPurchaseBanner.tsx
index 11b98d3..4700c2e 100644
--- a/src/components/domains/additional-purchases/AdditionalPurchaseBanner/AdditionalPurchaseBanner.tsx
+++ b/src/components/domains/additional-purchases/AdditionalPurchaseBanner/AdditionalPurchaseBanner.tsx
@@ -4,8 +4,6 @@ import { useTranslations } from "next-intl";
 
 import { Typography } from "@/components/ui";
 
-import HeartIcon from "./HeartIcon.svg";
-
 import styles from "./AdditionalPurchaseBanner.module.scss";
 
 export default function AdditionalPurchaseBanner() {
@@ -14,7 +12,9 @@ export default function AdditionalPurchaseBanner() {
   return (
     <div className={styles.container}>
       <div className={styles.iconContainer}>
-        <HeartIcon />
+        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.85938 10.0879L8.91797 16.6777C9.21094 16.9511 9.59766 17.1035 10 17.1035C10.4023 17.1035 10.7891 16.9511 11.082 16.6777L18.1406 10.0879C19.3281 8.98239 20 7.43161 20 5.81051V5.58395C20 2.85348 18.0273 0.525356 15.3359 0.0761369C13.5547 -0.220738 11.7422 0.361293 10.4688 1.63473L10 2.10348L9.53125 1.63473C8.25781 0.361293 6.44531 -0.220738 4.66406 0.0761369C1.97266 0.525356 0 2.85348 0 5.58395V5.81051C0 7.43161 0.671875 8.98239 1.85938 10.0879Z" fill="#4ECDC4"/>
+        </svg>
       </div>
       <div className={styles.textContainer}>
         <Typography as="h4" align="left" className={styles.title}>
diff --git a/src/components/domains/additional-purchases/VideoGuidesBanner/VideoGuidesBanner.tsx b/src/components/domains/additional-purchases/VideoGuidesBanner/VideoGuidesBanner.tsx
index 06e8d3a..4db3bac 100644
--- a/src/components/domains/additional-purchases/VideoGuidesBanner/VideoGuidesBanner.tsx
+++ b/src/components/domains/additional-purchases/VideoGuidesBanner/VideoGuidesBanner.tsx
@@ -2,8 +2,6 @@ import { getTranslations } from "next-intl/server";
 
 import { Typography } from "@/components/ui";
 
-import HeartIcon from "./HeartIcon.svg";
-
 import styles from "./VideoGuidesBanner.module.scss";
 
 export default async function VideoGuidesBanner() {
@@ -12,7 +10,9 @@ export default async function VideoGuidesBanner() {
   return (
     <div className={styles.container}>
       <div className={styles.iconContainer}>
-        <HeartIcon />
+        <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1.85938 10.0879L8.91797 16.6777C9.21094 16.9511 9.59766 17.1035 10 17.1035C10.4023 17.1035 10.7891 16.9511 11.082 16.6777L18.1406 10.0879C19.3281 8.98239 20 7.43161 20 5.81051V5.58395C20 2.85348 18.0273 0.525356 15.3359 0.0761369C13.5547 -0.220738 11.7422 0.361293 10.4688 1.63473L10 2.10348L9.53125 1.63473C8.25781 0.361293 6.44531 -0.220738 4.66406 0.0761369C1.97266 0.525356 0 2.85348 0 5.58395V5.81051C0 7.43161 0.671875 8.98239 1.85938 10.0879Z" fill="#4ECDC4"/>
+        </svg>
       </div>
       <div className={styles.textContainer}>
         <Typography as="h4" align="left" className={styles.title}>