diff --git a/changelogs/fragments/7478.yml b/changelogs/fragments/7478.yml
new file mode 100644
index 000000000000..67e39be073c4
--- /dev/null
+++ b/changelogs/fragments/7478.yml
@@ -0,0 +1,2 @@
+fix:
+- Update recent items icon from SVG to react component ([#7478](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7478))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
index 70db9b11a08c..d6255095c0bb 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/recent_items.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Recent items should render base element normally 1`] = `
                 class="euiHeaderSectionItemButton__content"
               >
                 <span
-                  data-euiicon-type="test-file-stub"
+                  data-euiicon-type="RecentItemsIcon"
                 />
               </span>
             </span>
diff --git a/src/core/public/chrome/ui/header/assets/recent_items.svg b/src/core/public/chrome/ui/header/assets/recent_items.svg
deleted file mode 100644
index b6427c5e59e4..000000000000
--- a/src/core/public/chrome/ui/header/assets/recent_items.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0001 1.66699C14.6024 1.66699 18.3334 5.39795 18.3334 10.0003C18.3334 14.6027 14.6024 18.3337 10.0001 18.3337C5.39771 18.3337 1.66675 14.6027 1.66675 10.0003H3.33341C3.33341 13.6822 6.31818 16.667 10.0001 16.667C13.682 16.667 16.6667 13.6822 16.6667 10.0003C16.6667 6.31843 13.682 3.33366 10.0001 3.33366C7.7086 3.33366 5.68714 4.48978 4.48717 6.25053L6.66675 6.25033V7.91699H1.66675V2.91699H3.33341L3.33332 4.99964C4.8537 2.97595 7.27402 1.66699 10.0001 1.66699ZM10.8334 5.83366L10.8332 9.65449L13.5356 12.3573L12.3571 13.5358L9.16658 10.3445L9.16675 5.83366H10.8334Z" fill="#424242"/>
-</svg>
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
index 1d91ac286a91..f39260056c5c 100644
--- a/src/core/public/chrome/ui/header/recent_items.tsx
+++ b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -20,8 +20,8 @@ import { WorkspaceObject } from '../../../workspace';
 import { createRecentNavLink } from './nav_link';
 import { HttpStart } from '../../../http';
 import { ChromeNavLink } from '../../../';
-// TODO: replace this icon once added to OUI
-import recent_items from './assets/recent_items.svg';
+// TODO: replace this icon once added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354
+import { RecentItemsIcon } from './recent_items_icon';
 
 export interface Props {
   recentlyAccessed$: Rx.Observable<ChromeRecentlyAccessedHistoryItem[]>;
@@ -71,7 +71,7 @@ export const RecentItems = ({
           }}
           data-test-subj="recentItemsSectionButton"
         >
-          <EuiIcon type={recent_items} size="m" />
+          <EuiIcon type={RecentItemsIcon} size="m" />
         </EuiHeaderSectionItemButton>
       }
       isOpen={isPopoverOpen}
diff --git a/src/core/public/chrome/ui/header/recent_items_icon.tsx b/src/core/public/chrome/ui/header/recent_items_icon.tsx
new file mode 100644
index 000000000000..0d9857b182c5
--- /dev/null
+++ b/src/core/public/chrome/ui/header/recent_items_icon.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+
+// TODO: remove this icon once added to OUI https://github.com/opensearch-project/OpenSearch-Dashboards/issues/7354
+export const RecentItemsIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.0001 1.66699C14.6024 1.66699 18.3334 5.39795 18.3334 10.0003C18.3334 14.6027 14.6024 18.3337 10.0001 18.3337C5.39771 18.3337 1.66675 14.6027 1.66675 10.0003H3.33341C3.33341 13.6822 6.31818 16.667 10.0001 16.667C13.682 16.667 16.6667 13.6822 16.6667 10.0003C16.6667 6.31843 13.682 3.33366 10.0001 3.33366C7.7086 3.33366 5.68714 4.48978 4.48717 6.25053L6.66675 6.25033V7.91699H1.66675V2.91699H3.33341L3.33332 4.99964C4.8537 2.97595 7.27402 1.66699 10.0001 1.66699ZM10.8334 5.83366L10.8332 9.65449L13.5356 12.3573L12.3571 13.5358L9.16658 10.3445L9.16675 5.83366H10.8334Z"
+        fill="#424242"
+      />
+    </svg>
+  );
+};
diff --git a/src/core/typings.ts b/src/core/typings.ts
index c5e97e2b1d7c..97b83c91e031 100644
--- a/src/core/typings.ts
+++ b/src/core/typings.ts
@@ -36,10 +36,3 @@ type DeeplyMockedKeys<T> = {
   T;
 
 type MockedKeys<T> = { [P in keyof T]: jest.Mocked<T[P]> };
-
-// Need to declare like typings/index.d.ts otherwise would be overwritten
-declare module '*.svg' {
-  const content: string;
-  // eslint-disable-next-line import/no-default-export
-  export default content;
-}