diff --git a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
index 49403364c..37e16ce34 100644
--- a/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
+++ b/packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap
@@ -44,6 +44,22 @@ exports[`create a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",
@@ -106,6 +122,22 @@ exports[`create and build a project > built project file references 1`] = `
   "1-basics-1-introduction-2-foo-files.json": [
     "/bar/styles.css",
     "/src/index.html",
+    "/src/test-1.js",
+    "/src/test-10.ts",
+    "/src/test-11.jsx",
+    "/src/test-12.tsx",
+    "/src/test-13.cts",
+    "/src/test-14.mts",
+    "/src/test-15.svg",
+    "/src/test-16.vue",
+    "/src/test-2.cjs",
+    "/src/test-3.mjs",
+    "/src/test-4.css",
+    "/src/test-5.md",
+    "/src/test-6.png",
+    "/src/test-7.jpg",
+    "/src/test-8.gif",
+    "/src/test-9.xyz",
     "/src/unicorn.js",
     "/src/windows_xp.png",
   ],
@@ -241,6 +273,22 @@ exports[`create and eject a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",
diff --git a/packages/react/src/core/FileTree.tsx b/packages/react/src/core/FileTree.tsx
index 90d084dcb..89b38c50d 100644
--- a/packages/react/src/core/FileTree.tsx
+++ b/packages/react/src/core/FileTree.tsx
@@ -183,6 +183,9 @@ interface FileProps {
 }
 
 function File({ file: { depth, name }, onClick, selected }: FileProps) {
+  const extension = getFileExtension(name);
+  const fileIcon = extensionsToIcons.get(extension) || 'i-ph-file-duotone';
+
   return (
     <NodeButton
       className={classNames('group transition-theme', {
@@ -192,7 +195,7 @@ function File({ file: { depth, name }, onClick, selected }: FileProps) {
           selected,
       })}
       depth={depth}
-      iconClasses={classNames('i-ph-file-duotone', {
+      iconClasses={classNames(fileIcon, {
         'text-tk-elements-fileTree-file-iconColor group-hover:text-tk-elements-fileTree-file-iconColorHover': !selected,
         'text-tk-elements-fileTree-file-iconColorSelected': selected,
       })}
@@ -358,3 +361,42 @@ function compareString(a: string, b: string) {
 
   return 0;
 }
+
+function getFileExtension(filename: string) {
+  const parts = filename.split('.');
+
+  parts.shift();
+
+  const extension = parts.at(-1) || '';
+
+  return extension;
+}
+
+const extensionsToIcons = new Map([
+  ['ts', 'i-ph-file-ts-duotone'],
+  ['cts', 'i-ph-file-ts-duotone'],
+  ['mts', 'i-ph-file-ts-duotone'],
+
+  ['tsx', 'i-ph-file-tsx-duotone'],
+
+  ['js', 'i-ph-file-js-duotone'],
+  ['cjs', 'i-ph-file-js-duotone'],
+  ['mjs', 'i-ph-file-js-duotone'],
+
+  ['jsx', 'i-ph-file-jsx-duotone'],
+
+  ['html', 'i-ph-file-html-duotone'],
+
+  ['css', 'i-ph-file-css-duotone'],
+
+  ['md', 'i-ph-file-md-duotone'],
+
+  ['vue', 'i-ph-file-vue-duotone'],
+
+  ['gif', 'i-ph-file-image-duotone'],
+  ['jpg', 'i-ph-file-image-duotone'],
+  ['jpeg', 'i-ph-file-image-duotone'],
+  ['png', 'i-ph-file-image-duotone'],
+
+  ['svg', 'i-ph-file-svg-duotone'],
+]);
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz
new file mode 100644
index 000000000..e69de29bb