diff --git a/src/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts
index 3f38281..2bd6cca 100644
--- a/src/.vitepress/theme/index.ts
+++ b/src/.vitepress/theme/index.ts
@@ -8,10 +8,11 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFaucet, faChevronLeft, faChevronRight, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons";
-import InlineIcon from "../../components/tccpp/components/InlineIcon.vue";
 
 library.add(faFaucet, faChevronLeft, faChevronRight, faGithub, faArrowUpRightFromSquare, faDiscord);
 
+import { InlineIcon, AllInlineIcons } from "../../components/tccpp";
+
 export default {
     extends: theme,
     Layout: () => {
@@ -22,5 +23,11 @@ export default {
     enhanceApp({ app, router, siteData }) {
         app.component("font-awesome-icon", FontAwesomeIcon);
         app.component("InlineIcon", InlineIcon);
+
+        let iconName: keyof typeof AllInlineIcons;
+        for (iconName in AllInlineIcons) {
+            const icon = AllInlineIcons[iconName];
+            app.component(iconName, icon);
+        }
     },
 } satisfies Theme;
diff --git a/src/components/tccpp/components/InlineIcons.ts b/src/components/tccpp/components/InlineIcons.ts
new file mode 100644
index 0000000..8a4bac1
--- /dev/null
+++ b/src/components/tccpp/components/InlineIcons.ts
@@ -0,0 +1,7 @@
+import VisualStudio from "./icons/VisualStudio.vue";
+import VSCode from "./icons/VsCode.vue";
+
+export default {
+    VisualStudio: VisualStudio,
+    VSCode: VSCode,
+};
diff --git a/src/components/tccpp/components/icons/VisualStudio.vue b/src/components/tccpp/components/icons/VisualStudio.vue
new file mode 100644
index 0000000..50e61b0
--- /dev/null
+++ b/src/components/tccpp/components/icons/VisualStudio.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import InlineIcon from "../InlineIcon.vue";
+</script>
+
+<template>
+    <InlineIcon src="/assets/vs-icon.webp" alt="VS Community icon" />
+</template>
diff --git a/src/components/tccpp/components/icons/VsCode.vue b/src/components/tccpp/components/icons/VsCode.vue
new file mode 100644
index 0000000..ae14bf9
--- /dev/null
+++ b/src/components/tccpp/components/icons/VsCode.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import InlineIcon from "../InlineIcon.vue";
+</script>
+
+<template>
+    <InlineIcon src="/assets/vs-code-icon.webp" alt="VS Code icon" />
+</template>
diff --git a/src/components/tccpp/index.ts b/src/components/tccpp/index.ts
new file mode 100644
index 0000000..6b611d1
--- /dev/null
+++ b/src/components/tccpp/index.ts
@@ -0,0 +1,3 @@
+export { default as InlineIcon } from "./components/InlineIcon.vue";
+
+export { default as AllInlineIcons } from "./components/InlineIcons.ts";
diff --git a/src/public/assets/vs-code-icon.webp b/src/public/assets/vs-code-icon.webp
new file mode 100644
index 0000000..96f7ad9
Binary files /dev/null and b/src/public/assets/vs-code-icon.webp differ
diff --git a/src/public/assets/vs-icon.webp b/src/public/assets/vs-icon.webp
new file mode 100644
index 0000000..dabc23a
Binary files /dev/null and b/src/public/assets/vs-icon.webp differ