diff --git a/package.json b/package.json
index fb463269..7e100a28 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@primer/octicons": "^19.11.0",
     "@viz-js/viz": "^3.7.0",
     "ansi_up": "^6.0.2",
     "axios": "^1.7.2",
@@ -45,6 +46,7 @@
     "@types/express": "^4.17.21",
     "@types/markdown-it": "^14.1.1",
     "@types/node": "^20.14.10",
+    "@types/primer__octicons": "^19.6.3",
     "@types/tmp": "^0.2.6",
     "@types/uuid": "^10.0.0",
     "@types/ws": "^8.5.10",
diff --git a/src/parser/parser.ts b/src/parser/parser.ts
index 5eb6b6e7..fece5e15 100644
--- a/src/parser/parser.ts
+++ b/src/parser/parser.ts
@@ -6,6 +6,11 @@ import config from '../config.js';
 import renderNotebook from './ipynb.js';
 import renderMarkdown from './markdown.js';
 import { globSync } from 'glob';
+import octicons from '@primer/octicons';
+
+const dirIcon = octicons['file-directory-fill'].toSVG({ class: 'icon-directory' });
+const fileIcon = octicons['file'].toSVG({ class: 'icon-file' });
+const backIcon = octicons['chevron-left'].toSVG({ class: 'icon-back' });
 
 export type Renderer = (content: string) => string;
 
@@ -14,9 +19,11 @@ const pathHeading: Renderer = (path: string) => `# \`${path.replace(homedir(), '
 function wrap(contentType: string, content: string, linkPath?: string): string {
     let link = '';
     if (linkPath) {
-        link = `\n<div id="top-nav">\n<a id="top-nav-up" href="${pathToURL(linkPath)}"> ${
-            pbasename(linkPath) || '/'
-        }</a>\n</div>`;
+        link = `<div id="top-nav">
+                    <a id="top-nav-up" href="${pathToURL(linkPath)}">
+                        ${backIcon}${pbasename(linkPath) || '/'}
+                    </a>
+                </div>`;
     }
     return `<div class="content-${contentType}">${link}\n${content}</div>`;
 }
@@ -51,15 +58,21 @@ export function renderTextFile(content: string, path: string): string {
 }
 
 const dirListItem = (item: Dirent, path: string) =>
-    `<li class="dir-list-${item.isDirectory() ? 'directory' : 'file'}" name="${item.name}"><a href="${pathToURL(
-        pjoin(path, item.name),
-    )}">${item.name}</a></li>`;
+    `<li class="dir-list-${item.isDirectory() ? 'directory' : 'file'}" name="${item.name}">
+        <a href="${pathToURL(pjoin(path, item.name))}">
+            ${item.isDirectory() ? dirIcon : fileIcon}${item.name}
+        </a>
+    </li>`;
 
 function dirUpItem(path: string): string {
     if (pbasename(path) == '') {
         return ''; // Show nothing when already at root directory
     }
-    return `<li class="dir-list-directory"><a href="${pathToURL(pdirname(path))}">.. (${pbasename(pdirname(path)) || '/'})</a></li>`;
+    return `<li class="dir-list-directory">
+                <a href="${pathToURL(pdirname(path))}">
+                    ${dirIcon}..
+                </a>
+            </li>`;
 }
 
 export function renderDirectory(path: string): string {
diff --git a/static/colors.css b/static/colors.css
index ef7ea1d3..d3bf14c0 100644
--- a/static/colors.css
+++ b/static/colors.css
@@ -15,6 +15,10 @@
     --border-regular: #353535;
     --border-muted: #303030;
 
+    --icon-directory: var(--text-secondary);
+    --icon-file: var(--text-secondary);
+    --icon-back: var(--text-secondary);
+
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
     --syntax-entity: #aeafff;
@@ -61,6 +65,10 @@
         --border-regular: #d0d7de;
         --border-muted: #d8dee4;
 
+        --icon-directory: #54aeff;
+        --icon-file: #636c76;
+        --icon-back: var(--text-secondary);
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */
diff --git a/static/markdown.css b/static/markdown.css
index 2f8cad1f..e15c326b 100644
--- a/static/markdown.css
+++ b/static/markdown.css
@@ -36,7 +36,6 @@ h3:hover a.header-anchor, h4:hover a.header-anchor,
 h5:hover a.header-anchor, h6:hover a.header-anchor {
     opacity: 1;
 }
-a#top-nav-up:before { content: '◂'}
 
 /* --------------------------------------------------------------------------
  * TABLES ------------------------------------------------------------------- */
@@ -214,3 +213,12 @@ hr {
     border-top: 0.25em solid var(--border-regular);
     margin: 24px 0;
 }
+
+/* parent directory link */
+#top-nav > a {
+    display: inline-flex;
+    align-items: center;
+}
+.icon-back {
+    fill: var(--icon-back);
+}
diff --git a/static/style.css b/static/style.css
index e13ad262..8261c995 100644
--- a/static/style.css
+++ b/static/style.css
@@ -17,7 +17,7 @@ body {
 *[class^="content-"] {
     max-width: 900px;
     margin: auto;
-} 
+}
 .content-txt { max-width: 1200px; }
 
 /* --------------------------------------------------------------------------
@@ -26,8 +26,18 @@ body {
 ul.dir-list { padding: 0 }
 li[class^='dir-list-'] {
     list-style: none;
-    margin: 0.25rem 0;
 }
-li[class^='dir-list-']:before { margin-right: 0.5rem; }
-li.dir-list-directory:before { content: '📁' }
-li.dir-list-file:before { content: '📄' }
+li[class^='dir-list-'] > a {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.05rem 0;
+    color: var(--text-primary);
+}
+li[class^='dir-list-'] > a:hover {
+    color: var(--text-link);
+}
+li[class^='dir-list-'] > a > svg {
+    margin-right: 0.3rem;
+}
+.icon-directory { fill: var(--icon-directory); }
+.icon-file { fill: var(--icon-file); }
diff --git a/yarn.lock b/yarn.lock
index cd56f9c6..fb530fa3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -190,6 +190,13 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
+"@primer/octicons@^19.11.0":
+  version "19.11.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-19.11.0.tgz#1266bfbfd9c1d4083a235487b9792b0882a805c9"
+  integrity sha512-dJfi3I7zF4JyqHyHpxaUliUa//w4AmTYAo0i5KgKbz92ZQ0IizRU1rlW+eVdYk5nitAebpUX7gnKceZBDGW3XQ==
+  dependencies:
+    object-assign "^4.1.1"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
@@ -316,6 +323,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/primer__octicons@^19.6.3":
+  version "19.6.3"
+  resolved "https://registry.yarnpkg.com/@types/primer__octicons/-/primer__octicons-19.6.3.tgz#6ea5c10da79361ef6eb6b698c6396cd4053ee107"
+  integrity sha512-lvDS7/5uZLCnG/h3W5fzMjLsMKAlu2Y4nF615U6FtwMarwCD76l9TvkD8nn0g0fIb2gg81/NsRa2LFvksvukRQ==
+
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -2004,6 +2016,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"