diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index eef2faf..17f8889 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -1,3 +1,4 @@
-export { default as Arrow2 } from './Arrow2/Arrow2.astro';
-export { default as Profile } from './profile/profile.astro';
-export { default as Share } from './share/share.astro';
\ No newline at end of file
+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
diff --git a/src/components/Icons/search/search.astro b/src/components/Icons/search/search.astro
new file mode 100644
index 0000000..436bf6c
--- /dev/null
+++ b/src/components/Icons/search/search.astro
@@ -0,0 +1,27 @@
+---
+import search16  from './svgs/search-16.svg?raw';
+import search24  from './svgs/search-24.svg?raw';
+import search32  from './svgs/search-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 = search16;
+else if (size === 24 )  raw = search24;
+else if (size === 32 )  raw = search32;
+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-search', 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/search/svgs/search-16.svg b/src/components/Icons/search/svgs/search-16.svg
new file mode 100644
index 0000000..6d404ba
--- /dev/null
+++ b/src/components/Icons/search/svgs/search-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="M6.69844 10.3969C5.66477 10.3969 4.79004 10.0388 4.07425 9.32262C3.35846 8.60645 3.00038 7.73172 3 6.69843C2.99962 5.66515 3.35771 4.79042 4.07425 4.07425C4.7908 3.35808 5.66553 3 6.69844 3C7.73134 3 8.60626 3.35808 9.32319 4.07425C10.0401 4.79042 10.398 5.66515 10.3969 6.69843C10.3969 7.11569 10.3305 7.50925 10.1977 7.87909C10.065 8.24893 9.88478 8.5761 9.65718 8.8606L12.8435 12.0469C12.9478 12.1513 13 12.284 13 12.4452C13 12.6064 12.9478 12.7392 12.8435 12.8435C12.7392 12.9478 12.6064 13 12.4452 13C12.284 13 12.1513 12.9478 12.0469 12.8435L8.8606 9.65718C8.5761 9.88478 8.24893 10.065 7.87909 10.1977C7.50925 10.3305 7.11569 10.3969 6.69844 10.3969ZM6.69844 9.25889C7.40967 9.25889 8.01432 9.01005 8.51238 8.51237C9.01043 8.0147 9.25927 7.41005 9.25889 6.69843C9.25851 5.98682 9.00967 5.38236 8.51238 4.88506C8.01508 4.38777 7.41043 4.13874 6.69844 4.13798C5.98644 4.13722 5.38198 4.38625 4.88506 4.88506C4.38815 5.38388 4.13912 5.98834 4.13798 6.69843C4.13684 7.40853 4.38587 8.01318 4.88506 8.51237C5.38426 9.01157 5.98872 9.26041 6.69844 9.25889Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/components/Icons/search/svgs/search-24.svg b/src/components/Icons/search/svgs/search-24.svg
new file mode 100644
index 0000000..d8d6ece
--- /dev/null
+++ b/src/components/Icons/search/svgs/search-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="M9.65718 16.3144C7.79659 16.3144 6.22208 15.6698 4.93366 14.3807C3.64524 13.0916 3.00068 11.5171 3 9.65718C2.99932 7.79727 3.64387 6.22276 4.93366 4.93366C6.22344 3.64455 7.79795 3 9.65718 3C11.5164 3 13.0913 3.64455 14.3817 4.93366C15.6722 6.22276 16.3164 7.79727 16.3144 9.65718C16.3144 10.4083 16.1949 11.1166 15.9559 11.7824C15.7169 12.4481 15.3926 13.037 14.9829 13.5491L20.7183 19.2845C20.9061 19.4723 21 19.7112 21 20.0014C21 20.2916 20.9061 20.5306 20.7183 20.7183C20.5306 20.9061 20.2916 21 20.0014 21C19.7112 21 19.4723 20.9061 19.2845 20.7183L13.5491 14.9829C13.037 15.3926 12.4481 15.7169 11.7824 15.9559C11.1166 16.1949 10.4083 16.3144 9.65718 16.3144ZM9.65718 14.266C10.9374 14.266 12.0258 13.8181 12.9223 12.9223C13.8188 12.0265 14.2667 10.9381 14.266 9.65718C14.2653 8.37627 13.8174 7.28825 12.9223 6.39312C12.0271 5.49798 10.9388 5.04973 9.65718 5.04836C8.37559 5.047 7.28757 5.49525 6.39312 6.39312C5.49866 7.29098 5.05041 8.379 5.04836 9.65718C5.04632 10.9354 5.49457 12.0237 6.39312 12.9223C7.29167 13.8208 8.37969 14.2687 9.65718 14.266Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/components/Icons/search/svgs/search-32.svg b/src/components/Icons/search/svgs/search-32.svg
new file mode 100644
index 0000000..b3380e6
--- /dev/null
+++ b/src/components/Icons/search/svgs/search-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="M12.6159 22.2319C9.9284 22.2319 7.65411 21.3008 5.79306 19.4388C3.93201 17.5768 3.00099 15.3025 3 12.6159C2.99901 9.92939 3.93003 7.6551 5.79306 5.79306C7.65608 3.93102 9.93038 3 12.6159 3C15.3015 3 17.5763 3.93102 19.4403 5.79306C21.3043 7.6551 22.2348 9.92939 22.2319 12.6159C22.2319 13.7008 22.0593 14.724 21.7141 15.6856C21.3689 16.6472 20.9004 17.4979 20.3087 18.2376L28.5932 26.522C28.8644 26.7933 29 27.1385 29 27.5576C29 27.9768 28.8644 28.322 28.5932 28.5932C28.322 28.8644 27.9768 29 27.5576 29C27.1385 29 26.7933 28.8644 26.522 28.5932L18.2376 20.3087C17.4979 20.9004 16.6472 21.3689 15.6856 21.7141C14.724 22.0593 13.7008 22.2319 12.6159 22.2319ZM12.6159 19.2731C14.4651 19.2731 16.0372 18.6261 17.3322 17.3322C18.6271 16.0382 19.2741 14.4661 19.2731 12.6159C19.2721 10.7657 18.6251 9.19414 17.3322 7.90117C16.0392 6.60819 14.4671 5.96072 12.6159 5.95875C10.7647 5.95678 9.19315 6.60425 7.90117 7.90117C6.60918 9.19808 5.96171 10.7697 5.95875 12.6159C5.95579 14.4622 6.60326 16.0343 7.90117 17.3322C9.19907 18.6301 10.7707 19.2771 12.6159 19.2731Z" fill="#F4F2EF"/>
+</svg>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 57300c8..bef18b6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Arrow2, Profile, Share } from '../components/Icons/index.ts';
+import { Arrow2Icon, ProfileIcon, ShareIcon, SearchIcon } from '../components/Icons/index.ts';
 ---
 
 <Layout>
@@ -10,112 +10,38 @@ import { Arrow2, Profile, Share } from '../components/Icons/index.ts';
       <h2>Icon — 16 / 24 / 32</h2>
       <div class="icon-grid">
         <div class="icon-row">
-          <Arrow2 size={16} orientation="up" />
-          <Arrow2 size={16} orientation="right" />
-          <Arrow2 size={16} orientation="down" />
-          <Arrow2 size={16} orientation="left" />
+          <Arrow2Icon size={16} orientation="up" />
+          <Arrow2Icon size={16} orientation="right" />
+          <Arrow2Icon size={16} orientation="down" />
+          <Arrow2Icon size={16} orientation="left" />
         </div>
         <div class="icon-row">
-          <Arrow2 size={24} orientation="up" />
-          <Arrow2 size={24} orientation="right" />
-          <Arrow2 size={24} orientation="down" />
-          <Arrow2 size={24} orientation="left" />
+          <Arrow2Icon size={24} orientation="up" />
+          <Arrow2Icon size={24} orientation="right" />
+          <Arrow2Icon size={24} orientation="down" />
+          <Arrow2Icon size={24} orientation="left" />
         </div>
         <div class="icon-row">
-          <Arrow2 size={32} orientation="up" />
-          <Arrow2 size={32} orientation="right" />
-          <Arrow2 size={32} orientation="down" />
-          <Arrow2 size={32} orientation="left" />
+          <Arrow2Icon size={32} orientation="up" />
+          <Arrow2Icon size={32} orientation="right" />
+          <Arrow2Icon size={32} orientation="down" />
+          <Arrow2Icon size={32} orientation="left" />
         </div>
         <div class="icon-row">
-          <Profile size={16} />
-          <Profile size={24} />
-          <Profile size={32} />
+          <ProfileIcon size={16} />
+          <ProfileIcon size={24} />
+          <ProfileIcon size={32} />
         </div>
         <div class="icon-row">
-          <Share size={16} />
-          <Share size={24} />
-          <Share size={32} />
-      </div>
-    </section>
-  </main>
-</Layout>
-
-<style>
-  main {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
-  }
-
-  h1 {
-    font-size: var(--nds-type-display-small-size);
-    font-weight: var(--nds-type-display-small-weight);
-    line-height: var(--nds-type-display-small-line-height);
-    letter-spacing: var(--nds-type-display-small-letter-spacing);
-    margin-bottom: var(--nds-spacing-xl);
-  }
-
-  h2 {
-    font-size: var(--nds-type-heading-small-size);
-    font-weight: var(--nds-type-heading-small-weight);
-    line-height: var(--nds-type-heading-small-line-height);
-    letter-spacing: var(--nds-type-heading-small-letter-spacing);
-    color: var(--nds-text-muted);
-    margin-bottom: var(--nds-spacing-md);
-  }
-
-  section {
-    margin-bottom: var(--nds-spacing-2xl);
-  }
-
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nds-spacing-sm);
-  }
-
-  .icon-grid {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nds-spacing-xs);
-  }
-
-  .icon-row {
-    display: flex;
-    align-items: center;
-    gap: var(--nds-spacing-lg);
-  }
-
-  .icon-name {
-    font-size: var(--nds-type-body-small-size);
-    color: var(--nds-text-muted);
-    width: 100px;
-    flex-shrink: 0;
-  }
-
-  .icon-sizes {
-    display: flex;
-    align-items: center;
-    gap: var(--nds-spacing-md);
-    color: var(--nds-default);
-  }
-</style>
-          <Arrow2 size={16} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2 size={24} orientation="up" />
-          <Arrow2 size={24} orientation="right" />
-          <Arrow2 size={24} orientation="down" />
-          <Arrow2 size={24} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2 size={32} orientation="up" />
-          <Arrow2 size={32} orientation="right" />
-          <Arrow2 size={32} orientation="down" />
-          <Arrow2 size={32} orientation="left" />
-        </div>
+          <ShareIcon size={16} />
+          <ShareIcon size={24} />
+          <ShareIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SearchIcon size={16} />
+          <SearchIcon size={24} />
+          <SearchIcon size={32} />
+          </div>
       </div>
     </section>
   </main>