diff --git a/src/components/Icons/close/close.astro b/src/components/Icons/close/close.astro
new file mode 100644
index 0000000..e3eade0
--- /dev/null
+++ b/src/components/Icons/close/close.astro
@@ -0,0 +1,27 @@
+---
+import close16  from './svgs/close-16.svg?raw';
+import close24  from './svgs/close-24.svg?raw';
+import close32  from './svgs/close-32.svg?raw';
+
+export interface Props {
+  size:        16 | 24 | 32;
+  label?:       string;
+  class?:       string;
+}
+
+const { size = 24, label, class: className } = Astro.props;
+
+let raw: string;
+if      (size === 16 )  raw = close16;
+else if (size === 24 )  raw = close24;
+else if (size === 32 )  raw = close32;
+else                   raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size.
+
+
+const classes = ['nds-icon-close', className].filter(Boolean).join(' ');
+const svg = raw
+  .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"')
+  .replace('<svg ', `<svg class="${classes}" aria-hidden="${label ? 'false' : 'true'}" ${label ? `aria-label="${label}" role="img"` : ''} `);
+---
+
+<Fragment set:html={svg} />
diff --git a/src/components/Icons/close/svgs/close-16.svg b/src/components/Icons/close/svgs/close-16.svg
new file mode 100644
index 0000000..bc9dc32
--- /dev/null
+++ b/src/components/Icons/close/svgs/close-16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 3L3 13M13 13L3 3" stroke="#F4F2EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Icons/close/svgs/close-24.svg b/src/components/Icons/close/svgs/close-24.svg
new file mode 100644
index 0000000..97c02f4
--- /dev/null
+++ b/src/components/Icons/close/svgs/close-24.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3L3 21M21 21L3 3" stroke="#F4F2EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Icons/close/svgs/close-32.svg b/src/components/Icons/close/svgs/close-32.svg
new file mode 100644
index 0000000..6ed8372
--- /dev/null
+++ b/src/components/Icons/close/svgs/close-32.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 3L3 29M29 29L3 3" stroke="#F4F2EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index 17f8889..8f311db 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -1,4 +1,5 @@
 export { default as Arrow2Icon } from './Arrow2/Arrow2.astro';
 export { default as ProfileIcon } from './profile/profile.astro';
 export { default as ShareIcon } from './share/share.astro';
-export { default as SearchIcon } from './search/search.astro';
\ No newline at end of file
+export { default as SearchIcon } from './search/search.astro';
+export { default as CloseIcon } from './close/close.astro';
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bef18b6..b36f4d4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon } from '../components/Icons/index.ts';
+import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon, CloseIcon } from '../components/Icons/index.ts';
 ---
 
 <Layout>
@@ -41,7 +41,12 @@ import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon } from '../components/Ic
           <SearchIcon size={16} />
           <SearchIcon size={24} />
           <SearchIcon size={32} />
-          </div>
+        </div>
+        <div class="icon-row">
+          <CloseIcon size={16} />
+          <CloseIcon size={24} />
+          <CloseIcon size={32} />
+        </div>
       </div>
     </section>
   </main>