diff --git a/packages/svg-icons/package.json b/packages/svg-icons/package.json
index 8bcda8f4..8b293845 100644
--- a/packages/svg-icons/package.json
+++ b/packages/svg-icons/package.json
@@ -22,7 +22,11 @@
     ],
     "exports": {
         "./icons/*.svg": "./dist/icons/*.svg",
-        "./icons/inline/*": "./dist/icons/inline/*",
+        "./icons/inline": {
+            "types": "./dist/icons/inline/index.d.ts",
+            "import": "./dist/icons/inline/index.js",
+            "default": "./dist/icons/inline/index.js"
+        },
         "./rich-icons/*.svg": "./dist/rich-icons/*.svg"
     },
     "scripts": {
diff --git a/packages/svg-icons/scripts/buildInlineIcons.ts b/packages/svg-icons/scripts/buildInlineIcons.ts
index 747d6bed..7e40353d 100644
--- a/packages/svg-icons/scripts/buildInlineIcons.ts
+++ b/packages/svg-icons/scripts/buildInlineIcons.ts
@@ -3,10 +3,17 @@ import path from "path";
 
 import { IconsInlineDistDirectory, IconsOptimizedDirectory } from "./constants.ts";
 
-//
 const optimizedIconsPath = IconsOptimizedDirectory;
 
-console.log("⚙️  Generating inline icons...\n");
+/**
+ * Converts a file path to a file name.
+ * @example fileNameConverter("C:\Dev\wl-hopper\packages\svg-icons\src\optimized-rich-icons\action-list-24.svg") // ActionListIcon24
+ */
+function fileNameConverter(filePath: string) {
+    const fileName = path.basename(filePath, ".svg");
+
+    return fileName.split("-").map(s => s.charAt(0).toUpperCase() + s.slice(1)).join("") + "Icon";
+}
 
 const files = fs.readdirSync(optimizedIconsPath, { recursive: true, withFileTypes: true });
 const svgFiles = files.filter(file => file.isFile() && file.name.endsWith(".svg"));
@@ -15,11 +22,32 @@ const svgFiles = files.filter(file => file.isFile() && file.name.endsWith(".svg"
 fs.rmSync(IconsInlineDistDirectory, { recursive: true, force: true });
 fs.mkdirSync(IconsInlineDistDirectory, { recursive: true });
 
-svgFiles.forEach(file => {
+const inlinedSvgs = svgFiles.map(file => {
     const contents = fs.readFileSync(path.resolve(file.path, file.name), "utf8");
-    // TODO: fix the /, there is probably a method to join those paths
-    fs.writeFileSync(`${IconsInlineDistDirectory}/${file.name.replace(".svg", ".js")}`, `export default \`${contents}\``);
-    fs.writeFileSync(`${IconsInlineDistDirectory}/${file.name.replace(".svg", ".d.ts")}`, "declare const _default: string; export default _default;");
+    const name = fileNameConverter(file.name);
+    const fileName = `${name}.js`;
+    const location = path.resolve(IconsInlineDistDirectory, fileName);
+    fs.writeFileSync(location, `export default \`${contents}\``);
+
+    return {
+        name,
+        fileName,
+        location
+    };
 });
 
+// index barrel file
+fs.writeFileSync(path.resolve(IconsInlineDistDirectory, "index.js"), inlinedSvgs.map(file => {
+    const name = file.name;
+
+    return `export { default as ${name} } from "./${file.fileName}";\n`;
+}).join(""));
+
+// types barrel file
+fs.writeFileSync(path.resolve(IconsInlineDistDirectory, "index.d.ts"), inlinedSvgs.map(file => {
+    const name = file.name;
+
+    return `export const ${name}: string;\n`;
+}).join(""));
+
 console.log("✨ The inline icons have been generated!\n");