diff --git a/public/assets/algolia.svg b/public/assets/algolia.svg
new file mode 100644
index 0000000..c594652
--- /dev/null
+++ b/public/assets/algolia.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 572 64" xmlns="http://www.w3.org/2000/svg">
+  <title>Algolia</title>
+  <path fill="#FFF"
+    d="M16 48.3c-3.4 0-6.3-.6-8.7-1.7A12.4 12.4 0 0 1 1.9 42C.6 40 0 38 0 35.4h6.5a6.7 6.7 0 0 0 3.9 6c1.4.7 3.3 1.1 5.6 1.1 2.2 0 4-.3 5.4-1a7 7 0 0 0 3-2.4 6 6 0 0 0 1-3.4c0-1.5-.6-2.8-1.9-3.7-1.3-1-3.3-1.6-5.9-1.8l-4-.4c-3.7-.3-6.6-1.4-8.8-3.4a10 10 0 0 1-3.3-7.9c0-2.4.6-4.6 1.8-6.4a12 12 0 0 1 5-4.3c2.2-1 4.7-1.6 7.5-1.6s5.5.5 7.6 1.6a12 12 0 0 1 5 4.4c1.2 1.8 1.8 4 1.8 6.7h-6.5a6.4 6.4 0 0 0-3.5-5.9c-1-.6-2.6-1-4.4-1s-3.2.3-4.4 1c-1.1.6-2 1.4-2.6 2.4-.5 1-.8 2-.8 3.1a5 5 0 0 0 1.5 3.6c1 1 2.6 1.7 4.7 1.9l4 .3c2.8.2 5.2.8 7.2 1.8 2.1 1 3.7 2.2 4.9 3.8a9.7 9.7 0 0 1 1.7 5.8c0 2.5-.7 4.7-2 6.6a13 13 0 0 1-5.6 4.4c-2.4 1-5.2 1.6-8.4 1.6Zm35.6 0c-2.6 0-4.8-.4-6.7-1.3a13 13 0 0 1-4.7-3.5 17.1 17.1 0 0 1-3.6-10.4v-1c0-2 .3-3.8 1-5.6a13 13 0 0 1 7.3-8.3 15 15 0 0 1 6.3-1.4A13.2 13.2 0 0 1 64 24.3c1 2.2 1.6 4.6 1.6 7.2V34H39.4v-4.3h21.8l-1.8 2.2c0-2-.3-3.7-.9-5.1a7.3 7.3 0 0 0-2.7-3.4c-1.2-.7-2.7-1.1-4.6-1.1s-3.4.4-4.7 1.3a8 8 0 0 0-2.9 3.6c-.6 1.5-.9 3.3-.9 5.4 0 2 .3 3.7 1 5.3a7.9 7.9 0 0 0 2.8 3.7c1.3.8 3 1.3 5 1.3s3.8-.5 5.1-1.3c1.3-1 2.1-2 2.4-3.2h6a11.8 11.8 0 0 1-7 8.7 16 16 0 0 1-6.4 1.2ZM80 48c-2.2 0-4-.3-5.7-1a8.4 8.4 0 0 1-3.7-3.3 9.7 9.7 0 0 1-1.3-5.2c0-2 .5-3.8 1.5-5.2a9 9 0 0 1 4.3-3.1c1.8-.7 4-1 6.7-1H89v4.1h-7.5c-2 0-3.4.5-4.4 1.4-1 1-1.6 2.1-1.6 3.6s.5 2.7 1.6 3.6c1 1 2.5 1.4 4.4 1.4 1.1 0 2.2-.2 3.2-.7 1-.4 1.9-1 2.6-2 .6-1 1-2.4 1-4.2l1.7 2.1c-.2 2-.7 3.8-1.5 5.2a9 9 0 0 1-3.4 3.3 12 12 0 0 1-5.3 1Zm9.5-.7v-8.8h-1v-10c0-1.8-.5-3.2-1.4-4.1-1-1-2.4-1.4-4.2-1.4a142.9 142.9 0 0 0-10.2.4v-5.6a74.8 74.8 0 0 1 8.6-.4c3 0 5.5.4 7.5 1.2s3.4 2 4.4 3.6c1 1.7 1.4 4 1.4 6.7v18.4h-5Zm12.9 0V17.8h5v12.3h-.2c0-4.2 1-7.4 2.8-9.5a11 11 0 0 1 8.3-3.1h1v5.6h-2a9 9 0 0 0-6.3 2.2c-1.5 1.5-2.2 3.6-2.2 6.4v15.6h-6.4Zm34.4 1a15 15 0 0 1-6.6-1.3c-1.9-.9-3.4-2-4.7-3.5a15.5 15.5 0 0 1-2.7-5c-.6-1.7-1-3.6-1-5.4v-1c0-2 .4-3.8 1-5.6a15 15 0 0 1 2.8-4.9c1.3-1.5 2.8-2.6 4.6-3.5a16.4 16.4 0 0 1 13.3.2c2 1 3.5 2.3 4.8 4a12 12 0 0 1 2 6H144c-.2-1.6-1-3-2.2-4.1a7.5 7.5 0 0 0-5.2-1.7 8 8 0 0 0-4.7 1.3 8 8 0 0 0-2.8 3.6 13.8 13.8 0 0 0 0 10.3c.6 1.5 1.5 2.7 2.8 3.6s2.8 1.3 4.8 1.3c1.5 0 2.7-.2 3.8-.8a7 7 0 0 0 2.6-2c.7-1 1-2 1.2-3.2h6.2a11 11 0 0 1-2 6.2 15.1 15.1 0 0 1-11.8 5.5Zm19.7-1v-40h6.4V31h-1.3c0-3 .4-5.5 1.1-7.6a9.7 9.7 0 0 1 3.5-4.8A9.9 9.9 0 0 1 172 17h.3c3.5 0 6 1.1 7.9 3.5 1.7 2.3 2.6 5.7 2.6 10v16.8h-6.4V29.6c0-2.1-.6-3.8-1.8-5a6.4 6.4 0 0 0-4.8-1.8c-2 0-3.7.7-5 2a7.8 7.8 0 0 0-1.9 5.5v17h-6.4Zm63.8 1a12.2 12.2 0 0 1-10.9-6.2 19 19 0 0 1-1.8-7.3h1.4v12.5h-5.1v-40h6.4v19.8l-2 3.5c.2-3.1.8-5.7 1.9-7.7a11 11 0 0 1 4.4-4.5c1.8-1 3.9-1.5 6.1-1.5a13.4 13.4 0 0 1 12.8 9.1c.7 1.9 1 3.8 1 6v1c0 2.2-.3 4.1-1 6a13.6 13.6 0 0 1-13.2 9.4Zm-1.2-5.5a8.4 8.4 0 0 0 7.9-5c.7-1.5 1.1-3.3 1.1-5.3s-.4-3.8-1.1-5.3a8.7 8.7 0 0 0-3.2-3.6 9.6 9.6 0 0 0-9.2-.2 8.5 8.5 0 0 0-3.3 3.2c-.8 1.4-1.3 3-1.3 5v2.3a9 9 0 0 0 1.3 4.8 9 9 0 0 0 3.4 3c1.4.7 2.8 1 4.4 1Zm27.3 3.9-10-28.9h6.5l9.5 28.9h-6Zm-7.5 12.2v-5.7h4.9c1 0 2-.1 2.9-.4a4 4 0 0 0 2-1.4c.4-.7.9-1.6 1.2-2.7l8.6-30.9h6.2l-9.3 32.4a14 14 0 0 1-2.5 5 8.9 8.9 0 0 1-4 2.8c-1.5.6-3.4.9-5.6.9h-4.4Zm9-12.2v-5.2h6.4v5.2H248Z" />
+  <path fill="#FFF"
+    d="M534.4 9.1H528a.8.8 0 0 1-.7-.7V1.8c0-.4.2-.7.6-.8l6.5-1c.4 0 .8.2.9.6v7.8c0 .4-.4.7-.8.7zM428 35.2V.8c0-.5-.3-.8-.7-.8h-.2l-6.4 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.5 0 .8-.4.8-.8V43c0-.4-.3-.7-.6-.8-4.5-.5-4.5-6-4.5-7zm106.5-21.8H528c-.4 0-.7.4-.7.8v34c0 .4.3.8.7.8h6.5c.4 0 .8-.4.8-.8v-34c0-.5-.4-.8-.8-.8zm-17.7 21.8V.8c0-.5-.3-.8-.8-.8l-6.5 1c-.4 0-.7.4-.7.8v35c0 1.6 0 11.8 12.3 12.2.4 0 .8-.4.8-.8V43c0-.4-.3-.7-.7-.8-4.4-.5-4.4-6-4.4-7zm-22.2-20.6a16.5 16.5 0 0 1 8.6 9.3c.8 2.2 1.3 4.8 1.3 7.5a19.4 19.4 0 0 1-4.6 12.6 14.8 14.8 0 0 1-5.2 3.6c-2 .9-5.2 1.4-6.8 1.4a21 21 0 0 1-6.7-1.4 15.4 15.4 0 0 1-8.6-9.3 21.3 21.3 0 0 1 0-14.4 15.2 15.2 0 0 1 8.6-9.3c2-.8 4.3-1.2 6.7-1.2s4.6.4 6.7 1.2zm-6.7 27.6c2.7 0 4.7-1 6.2-3s2.2-4.3 2.2-7.8-.7-6.3-2.2-8.3-3.5-3-6.2-3-4.7 1-6.1 3c-1.5 2-2.2 4.8-2.2 8.3s.7 5.8 2.2 7.8 3.5 3 6.2 3zm-88.8-28.8c-6.2 0-11.7 3.3-14.8 8.2a18.6 18.6 0 0 0 4.8 25.2c1.8 1.2 4 1.8 6.2 1.7s.1 0 .1 0h.9c4.2-.7 8-4 9.1-8.1v7.4c0 .4.3.7.8.7h6.4a.7.7 0 0 0 .7-.7V14.2c0-.5-.3-.8-.7-.8h-13.5zm6.3 26.5a9.8 9.8 0 0 1-5.7 2h-.5a10 10 0 0 1-9.2-14c1.4-3.7 5-6.3 9-6.3h6.4v18.3zm152.3-26.5h13.5c.5 0 .8.3.8.7v33.7c0 .4-.3.7-.8.7h-6.4a.7.7 0 0 1-.8-.7v-7.4c-1.2 4-4.8 7.4-9 8h-.1a4.2 4.2 0 0 1-.5.1h-.9a10.3 10.3 0 0 1-7-2.6c-4-3.3-6.5-8.4-6.5-14.2 0-3.7 1-7.2 3-10 3-5 8.5-8.3 14.7-8.3zm.6 28.4c2.2-.1 4.2-.6 5.7-2V21.7h-6.3a9.8 9.8 0 0 0-9 6.4 10.2 10.2 0 0 0 9.1 13.9h.5zM452.8 13.4c-6.2 0-11.7 3.3-14.8 8.2a18.5 18.5 0 0 0 3.6 24.3 10.4 10.4 0 0 0 13 .6c2.2-1.5 3.8-3.7 4.5-6.1v7.8c0 2.8-.8 5-2.2 6.3-1.5 1.5-4 2.2-7.5 2.2l-6-.3c-.3 0-.7.2-.8.5l-1.6 5.5c-.1.4.1.8.5 1h.1c2.8.4 5.5.6 7 .6 6.3 0 11-1.4 14-4.1 2.7-2.5 4.2-6.3 4.5-11.4V14.2c0-.5-.4-.8-.8-.8h-13.5zm6.3 8.2v18.3a9.6 9.6 0 0 1-5.6 2h-1a10.3 10.3 0 0 1-8.8-14c1.4-3.7 5-6.3 9-6.3h6.4zM291 31.5A32 32 0 0 1 322.8 0h30.8c.6 0 1.2.5 1.2 1.2v61.5c0 1.1-1.3 1.7-2.2 1l-19.2-17a18 18 0 0 1-11 3.4 18.1 18.1 0 1 1 18.2-14.8c-.1.4-.5.7-.9.6-.1 0-.3 0-.4-.2l-3.8-3.4c-.4-.3-.6-.8-.7-1.4a12 12 0 1 0-2.4 8.3c.4-.4 1-.5 1.6-.2l14.7 13.1v-46H323a26 26 0 1 0 10 49.7c.8-.4 1.6-.2 2.3.3l3 2.7c.3.2.3.7 0 1l-.2.2a32 32 0 0 1-47.2-28.6z" />
+</svg>
\ No newline at end of file
diff --git a/src/components/ui/icons/GithubIcon.svelte b/public/assets/github.svg
similarity index 56%
rename from src/components/ui/icons/GithubIcon.svelte
rename to public/assets/github.svg
index 92301a3..3406b88 100644
--- a/src/components/ui/icons/GithubIcon.svelte
+++ b/public/assets/github.svg
@@ -1,32 +1,6 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>GitHub</title>
   <path
-    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-  ></path>
-</svg>
-
-<style>
-  svg {
-    fill: rgb(var(--color-white));
-  }
-</style>
+    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/magnifyingGlass.svg b/public/assets/magnifyingGlass.svg
new file mode 100644
index 0000000..63ec553
--- /dev/null
+++ b/public/assets/magnifyingGlass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/pencil.svg b/public/assets/pencil.svg
new file mode 100644
index 0000000..d4d6048
--- /dev/null
+++ b/public/assets/pencil.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/repository.svg b/public/assets/repository.svg
new file mode 100644
index 0000000..968d964
--- /dev/null
+++ b/public/assets/repository.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.251 3.251 0 0 1 3 18.75ZM19.5 1.5H5.75c-.69 0-1.25.56-1.25 1.25v12.651A2.989 2.989 0 0 1 6 15h13.5Z">
+  </path>
+  <path
+    d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01Z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/star.svg b/public/assets/star.svg
new file mode 100644
index 0000000..14349d8
--- /dev/null
+++ b/public/assets/star.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 .25a.75.75 0 0 1 .673.418l3.058 6.197 6.839.994a.75.75 0 0 1 .415 1.279l-4.948 4.823 1.168 6.811a.751.751 0 0 1-1.088.791L12 18.347l-6.117 3.216a.75.75 0 0 1-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 0 1 .416-1.28l6.838-.993L11.328.668A.75.75 0 0 1 12 .25Zm0 2.445L9.44 7.882a.75.75 0 0 1-.565.41l-5.725.832 4.143 4.038a.748.748 0 0 1 .215.664l-.978 5.702 5.121-2.692a.75.75 0 0 1 .698 0l5.12 2.692-.977-5.702a.748.748 0 0 1 .215-.664l4.143-4.038-5.725-.831a.75.75 0 0 1-.565-.41L12 2.694Z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/user.svg b/public/assets/user.svg
new file mode 100644
index 0000000..8da852f
--- /dev/null
+++ b/public/assets/user.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/x.svg b/public/assets/x.svg
new file mode 100644
index 0000000..b9ddc82
--- /dev/null
+++ b/public/assets/x.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg">
+  <title>X</title>
+  <path
+    d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/zenn.svg b/public/assets/zenn.svg
new file mode 100644
index 0000000..349c28b
--- /dev/null
+++ b/public/assets/zenn.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88.3 88.3" style="enable-background:new 0 0 88.3 88.3;" xml:space="preserve">
+<g>
+	<path class="st0" d="M3.9,83.3h17c0.9,0,1.7-0.5,2.2-1.2L69.9,5.2c0.6-1-0.1-2.2-1.3-2.2H52.5c-0.8,0-1.5,0.4-1.9,1.1L3.1,81.9
+		C2.8,82.5,3.2,83.3,3.9,83.3z"/>
+	<path class="st0" d="M62.5,82.1l22.1-35.5c0.7-1.1-0.1-2.5-1.4-2.5h-16c-0.6,0-1.2,0.3-1.5,0.8L43,81.2c-0.6,0.9,0.1,2.1,1.2,2.1
+		h16.3C61.3,83.3,62.1,82.9,62.5,82.1z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index f157bd1..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
index b1697df..3be84b1 100644
--- a/src/components/Hero.svelte
+++ b/src/components/Hero.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
   import urlJoin from 'url-join'
   import siteConfig from '../../site.config'
-  import GithubIcon from './ui/icons/GithubIcon.svelte'
-  import ZennIcon from './ui/icons/ZennIcon.svelte'
-  import XIcon from './ui/icons/X.svelte'
-  import PencilIcon from './ui/icons/PencilIcon.svelte'
-  import MagnifyingGlass from './ui/icons/MagnifyingGlass.svelte'
+  import Icon from './ui/Icon.svelte'
   import Search from './Search/index.svelte'
   import Dialog from './ui/Dialog.svelte'
 
@@ -36,36 +32,39 @@
   <h1>Kawano Yudai</h1>
   <p><span class="text-gradient">Agr.</span> → ? / Bicycle</p>
   <div class="links">
-    <button type="button" on:click={openDialog}>
-      <MagnifyingGlass title="Search" />
+    <button type="button" on:click={openDialog} title="Search">
+      <Icon type="magnifyingGlass" size="medium" />
       <span class="sr-only">Search</span>
     </button>
     <a href={blogPath} title="Blog" target="_blank" rel="noopener noreferrer">
-      <PencilIcon title="blog.oriverk.dev" />
+      <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
     </a>
     <a
       href={urlJoin('https://github.com', github)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + github}
     >
-      <GithubIcon title={'@' + github} />
+      <Icon type="github" size="medium" />
       <span class="sr-only">GitHub link</span>
     </a>
     <a
       href={urlJoin('https://twitter.com', x)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + x}
     >
-      <XIcon title={'@' + x} />
+      <Icon type="x" size="medium" />
       <span class="sr-only">X link</span>
     </a>
     <a
       href={urlJoin('https://zenn.dev', zenn)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + zenn}
     >
-      <ZennIcon title={'@' + zenn} />
+      <Icon type="zenn" size="medium" />
       <span class="sr-only">Zenn.dev link</span>
     </a>
   </div>
@@ -75,10 +74,6 @@
 </div>
 
 <style>
-  :global(.links svg) {
-    width: 2rem;
-    aspect-ratio: 1;
-  }
   .hero {
     display: flex;
     flex-direction: column;
@@ -114,7 +109,8 @@
     gap: 0.5rem;
   }
 
-  .links > * {
+  .links > a,
+  .links > button {
     width: 3rem;
     display: flex;
     justify-content: center;
@@ -125,7 +121,8 @@
     background-color: rgb(var(--color-hover));
   }
 
-  .links > *:hover {
+  .links > a:hover,
+  .links > button:hover {
     background-color: rgba(0 0 0 / 0.3);
   }
 </style>
diff --git a/src/components/RepositoryCard.svelte b/src/components/RepositoryCard.svelte
index 733f5ac..2a4fcfd 100644
--- a/src/components/RepositoryCard.svelte
+++ b/src/components/RepositoryCard.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import type { Repository, Language } from '@octokit/graphql-schema'
   import Card from './ui/Card.svelte'
-  import StarIcon from './ui/icons/StarIcon.svelte'
-  import RepoIcon from './ui/icons/RepoIcon.svelte'
+  import Icon from './ui/Icon.svelte'
 
   interface $$Props
     extends Pick<
@@ -27,7 +26,7 @@
   <Card>
     <div class="repository">
       <div class="title">
-        <RepoIcon />
+        <Icon type="repository" size="small" />
         <span>{name}</span>
         {#if isArchived}
           <span class="public archived">Public archive</span>
@@ -48,7 +47,7 @@
         {/if}
         {#if !!stargazerCount}
           <span class="stargazerCount">
-            <StarIcon />
+            <Icon type="star" size="small" />
             {stargazerCount}
           </span>
         {/if}
@@ -58,11 +57,6 @@
 </a>
 
 <style>
-  :global(.repository svg) {
-    width: 1rem;
-    aspect-ratio: 1;
-    color: rgb(var(--color-lightgray));
-  }
   .repository {
     height: 100%;
     display: flex;
diff --git a/src/components/ui/icons/AlgoliaIcon.svelte b/src/components/Search/AlgoliaIcon.svelte
similarity index 99%
rename from src/components/ui/icons/AlgoliaIcon.svelte
rename to src/components/Search/AlgoliaIcon.svelte
index 3ef60fc..6b26b5b 100644
--- a/src/components/ui/icons/AlgoliaIcon.svelte
+++ b/src/components/Search/AlgoliaIcon.svelte
@@ -3,12 +3,14 @@
 
   export let className: string = ''
   export let title: string = ''
+  export let height: string = ''
 </script>
 
 <svg
   viewBox="0 0 572 64"
   xmlns="http://www.w3.org/2000/svg"
   class={clsx('ais-PoweredBy-log', className)}
+  {height}
 >
   {#if title}
     <title>{title}</title>
diff --git a/src/components/Search/SearchInput.svelte b/src/components/Search/SearchInput.svelte
index 93dd1d3..f8b97b4 100644
--- a/src/components/Search/SearchInput.svelte
+++ b/src/components/Search/SearchInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from 'svelte/elements'
   import clsx from 'clsx'
-  import MagnifyingGlass from '../ui/icons/MagnifyingGlass.svelte'
+  import Icon from '../ui/Icon.svelte'
 
   interface $$Props extends Omit<HTMLInputAttributes, 'class'> {
     className?: string
@@ -15,7 +15,7 @@
   <label for="search" class="sr-only">検索</label>
   <div class="search-input-wrapper">
     <div class="search-icon">
-      <MagnifyingGlass />
+      <Icon type="magnifyingGlass" size="small" />
     </div>
     <input class="search-input" {placeholder} bind:value {...$$restProps} />
   </div>
@@ -43,11 +43,6 @@
     align-items: center;
   }
 
-  .search-icon :global(svg) {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
   .search-input {
     color: rbg(var(--color-white));
     font-size: 1rem;
diff --git a/src/components/Search/index.svelte b/src/components/Search/index.svelte
index 0097301..a249587 100644
--- a/src/components/Search/index.svelte
+++ b/src/components/Search/index.svelte
@@ -5,7 +5,7 @@
   import { searchAlgolia } from '../../utils/algolia'
   import SearchInput from './SearchInput.svelte'
   import BlogHit from './BlogHit.svelte'
-  import AlgoliaIcon from '../ui/icons/AlgoliaIcon.svelte'
+  import AlgoliaIcon from './AlgoliaIcon.svelte'
 
   let results: SearchResponse<AlgoliaBlog>
   let hits: Hit<AlgoliaBlog>[] = []
@@ -88,7 +88,7 @@
       target="_blank"
       rel="noopener noreferrer"
     >
-      <AlgoliaIcon />
+      <AlgoliaIcon height="1.25rem" />
     </a>
   </div>
   {#if !results?.nbHits}
@@ -123,10 +123,6 @@
     justify-content: flex-end;
   }
 
-  .search-icon-wrapper :global(svg) {
-    height: 1.25rem;
-  }
-
   .search-results-wrapper {
     height: calc(100% - 9rem);
     overflow-y: auto;
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.svelte
new file mode 100644
index 0000000..d48daee
--- /dev/null
+++ b/src/components/ui/Icon.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import clsx from 'clsx'
+
+  interface $$Props {
+    type:
+      | 'oriver'
+      | 'github'
+      | 'zenn'
+      | 'x'
+      | 'pencil'
+      | 'magnifyingGlass'
+      | 'repository'
+      | 'star'
+    size?: 'small' | 'medium' | 'large' | 'xlarge'
+    color?: 'white' | 'black' | 'gray'
+    style?: string
+  }
+
+  let { type, size, color, style } = $$props as $$Props
+  export { type, size, color, style }
+</script>
+
+<span class={clsx('icon', type, size, color)} {style} />
+
+<style>
+  .icon {
+    display: flex;
+  }
+
+  .icon::before {
+    content: '';
+    display: inline-block;
+    mask: no-repeat center;
+    mask-size: contain;
+    background-color: currentColor;
+  }
+
+  /* size */
+  .small::before {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .medium::before {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .large::before {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .xlarge::before {
+    width: 4rem;
+    height: 4rem;
+  }
+
+  /* color */
+  .white::before {
+    background-color: rgb(var(--color-white));
+  }
+
+  .black::before {
+    background-color: rgb(var(--color-black));
+  }
+
+  .gray::before {
+    background-color: rgb(var(--color-gray));
+  }
+
+  .currentColor::before {
+    background-color: currentColor;
+  }
+
+  .oriver::before {
+    border: 1px solid transparent;
+    border-radius: 30% 70% 59% 41% / 30% 26% 74% 70%;
+    background-image: var(--accent-gradient);
+  }
+
+  /* web service */
+  .github::before {
+    mask-image: url('/assets/github.svg');
+  }
+
+  .zenn::before {
+    mask-image: url('/assets/zenn.svg');
+    background-color: #3ea8ff;
+  }
+
+  .x::before {
+    mask-image: url('/assets/x.svg');
+  }
+
+  /* general icon */
+  .pencil::before {
+    mask-image: url('/assets/pencil.svg');
+  }
+
+  .magnifyingGlass::before {
+    mask-image: url('/assets/magnifyingGlass.svg');
+  }
+
+  .repository::before {
+    mask-image: url('/assets/repository.svg');
+  }
+
+  .star::before {
+    mask-image: url('/assets/star.svg');
+  }
+</style>
diff --git a/src/components/ui/icons/MagnifyingGlass.svelte b/src/components/ui/icons/MagnifyingGlass.svelte
deleted file mode 100644
index 5bb9046..0000000
--- a/src/components/ui/icons/MagnifyingGlass.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  export let className: string = ''
-  export let title: string = ''
-  export let fill: string = 'none'
-  export let stroke: string = 'currentColor'
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  stroke-width="1.5"
-  {stroke}
-  {fill}
-  class={className}
->
-  {#if title}
-    <title>{title}</title>
-  {/if}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-  />
-</svg>
diff --git a/src/components/ui/icons/OriverIcon.svelte b/src/components/ui/icons/OriverIcon.svelte
deleted file mode 100644
index 65d6f35..0000000
--- a/src/components/ui/icons/OriverIcon.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  export let className: string = ''
-</script>
-
-<div class={className}></div>
-
-<style>
-  div {
-    width: 4rem;
-    aspect-ratio: 1;
-    border: 1px solid transparent;
-    border-radius: 30% 70% 59% 41% / 30% 26% 74% 70%;
-    background-image: var(--accent-gradient);
-  }
-</style>
diff --git a/src/components/ui/icons/PencilIcon.svelte b/src/components/ui/icons/PencilIcon.svelte
deleted file mode 100644
index 72484ee..0000000
--- a/src/components/ui/icons/PencilIcon.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-  ></path>
-</svg>
diff --git a/src/components/ui/icons/RepoIcon.svelte b/src/components/ui/icons/RepoIcon.svelte
deleted file mode 100644
index 51abea4..0000000
--- a/src/components/ui/icons/RepoIcon.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    d="M3 2.75A2.75 2.75 0 0 1 5.75 0h14.5a.75.75 0 0 1 .75.75v20.5a.75.75 0 0 1-.75.75h-6a.75.75 0 0 1 0-1.5h5.25v-4H6A1.5 1.5 0 0 0 4.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 0 1-.6 1.374A3.251 3.251 0 0 1 3 18.75ZM19.5 1.5H5.75c-.69 0-1.25.56-1.25 1.25v12.651A2.989 2.989 0 0 1 6 15h13.5Z"
-  ></path><path
-    d="M7 18.25a.25.25 0 0 1 .25-.25h5a.25.25 0 0 1 .25.25v5.01a.25.25 0 0 1-.397.201l-2.206-1.604a.25.25 0 0 0-.294 0L7.397 23.46a.25.25 0 0 1-.397-.2v-5.01Z"
-  ></path>
-</svg>
diff --git a/src/components/ui/icons/StarIcon.svelte b/src/components/ui/icons/StarIcon.svelte
deleted file mode 100644
index 57a019d..0000000
--- a/src/components/ui/icons/StarIcon.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    d="M12 .25a.75.75 0 0 1 .673.418l3.058 6.197 6.839.994a.75.75 0 0 1 .415 1.279l-4.948 4.823 1.168 6.811a.751.751 0 0 1-1.088.791L12 18.347l-6.117 3.216a.75.75 0 0 1-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 0 1 .416-1.28l6.838-.993L11.328.668A.75.75 0 0 1 12 .25Zm0 2.445L9.44 7.882a.75.75 0 0 1-.565.41l-5.725.832 4.143 4.038a.748.748 0 0 1 .215.664l-.978 5.702 5.121-2.692a.75.75 0 0 1 .698 0l5.12 2.692-.977-5.702a.748.748 0 0 1 .215-.664l4.143-4.038-5.725-.831a.75.75 0 0 1-.565-.41L12 2.694Z"
-  ></path>
-</svg>
diff --git a/src/components/ui/icons/UserIcon.svelte b/src/components/ui/icons/UserIcon.svelte
deleted file mode 100644
index a8d8664..0000000
--- a/src/components/ui/icons/UserIcon.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
-  ></path>
-</svg>
diff --git a/src/components/ui/icons/X.svelte b/src/components/ui/icons/X.svelte
deleted file mode 100644
index fb7b09f..0000000
--- a/src/components/ui/icons/X.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 1200 1227"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-  ></path>
-</svg>
diff --git a/src/components/ui/icons/ZennIcon.svelte b/src/components/ui/icons/ZennIcon.svelte
deleted file mode 100644
index b3df65c..0000000
--- a/src/components/ui/icons/ZennIcon.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'astro/types'
-
-  interface $$Props extends HTMLAttributes<'svg'> {
-    className?: string
-    title?: string
-  }
-
-  let { className, title, fill = 'currentColor' } = $$props as $$Props
-  export { className, title, fill }
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg"
-  {fill}
-  class={className}
-  {...$$restProps}
->
-  {#if !!title}
-    <title>{title}</title>
-  {/if}
-  <path
-    d="M.264 23.771h4.984c.264 0 .498-.147.645-.352L19.614.874c.176-.293-.029-.645-.381-.645h-4.72c-.235 0-.44.117-.557.323L.03 23.361c-.088.176.029.41.234.41zM17.445 23.419l6.479-10.408c.205-.323-.029-.733-.41-.733h-4.691c-.176 0-.352.088-.44.235l-6.655 10.643c-.176.264.029.616.352.616h4.779c.234-.001.468-.118.586-.353z"
-  ></path>
-</svg>
-
-<style>
-  svg {
-    fill: #3ea8ff;
-  }
-</style>
diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
index e05b5b8..892d9a3 100644
--- a/src/layouts/Header.astro
+++ b/src/layouts/Header.astro
@@ -1,24 +1,22 @@
 ---
-import OriverIcon from '../components/ui/icons/OriverIcon.svelte'
+import Icon from '../components/ui/Icon.svelte'
 ---
 
 <nav>
   <a href="/" class="home">
-    <OriverIcon className="icon" />
+    <Icon type="oriver" size="medium" />
     <span class="sr-only">home</span>
   </a>
   <a href="/about" class="about">About me</a>
 </nav>
 
 <style is:global>
-  .home .icon {
-    width: 2rem;
-    margin: 0.5rem;
+  .icon.oriver::before {
     background-size: 100%;
     transition: background-size 600ms var(--cubic-bezier);
   }
 
-  .home:hover .icon {
+  .home:hover .icon.oriver::before {
     background-size: 400%;
   }
 </style>
@@ -34,6 +32,7 @@ import OriverIcon from '../components/ui/icons/OriverIcon.svelte'
 
   .home {
     text-decoration: none;
+    margin: 0.5rem;
   }
 
   .about {