diff --git a/.gitignore b/.gitignore
index 5a210bb73..b9f279805 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,8 +6,13 @@ npm-debug.log
 /vendor/
 /caches/
 
+/play.pokemonshowdown.com/dirindex/webfonts/
+/play.pokemonshowdown.com/dirindex/fontawesome5*
+
 /play.pokemonshowdown.com/sprites/
 /play.pokemonshowdown.com/audio/
+
+# built from other sources
 /play.pokemonshowdown.com/index.php
 /play.pokemonshowdown.com/index.html
 /play.pokemonshowdown.com/index-test.html
diff --git a/play.pokemonshowdown.com/dirindex/dirindex.php b/play.pokemonshowdown.com/dirindex/dirindex.php
index 7ca1dfbbe..b92bdfd7e 100644
--- a/play.pokemonshowdown.com/dirindex/dirindex.php
+++ b/play.pokemonshowdown.com/dirindex/dirindex.php
@@ -1,5 +1,7 @@
 <?php
 
+$fa5pro = file_exists(__DIR__ . '/fontawesome5-solid-duotone.min.css');
+
 $sprites_whitelist = [
 	'/sprites/afd-back-shiny/' => '*.png',
 	'/sprites/afd-shiny/' => '*.png',
@@ -36,38 +38,104 @@ $at_root = ($rel_dir === '/');
 $up = null;
 
 function get_icon(string $file, bool $is_dir) {
+	global $fa5pro;
+	if ($fa5pro) return get_icon_fa5pro($file, $is_dir);
+
 	if ($is_dir) {
-		return 'folder-open';
+		return 'fa fa-folder-open';
 	} else {
 		$info = pathinfo($file);
 		$ext = strtolower($info['extension'] ?? '.');
-		if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'gif' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
-			return 'picture-o';
+		if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
+			return 'fa fa-picture-o';
+		} else if ($ext === 'gif') {
+			return 'fa fa-film';
 		} else if ($ext === 'mp4' || $ext === 'webm' || $ext === 'mkv' || $ext === 'avi' || $ext === 'mov') {
-			return 'video-camera';
+			return 'fa fa-video-camera';
 		} else if ($ext === 'mp3' || $ext === 'ogg' || $ext === 'wav' || $ext === 'flac' || $ext === 'aac') {
-			return 'volume-up';
+			return 'fa fa-volume-up';
 		} else if ($ext === 'zip' || $ext === 'tar' || $ext === 'gz') {
-			return 'file-archive-o';
+			return 'fa fa-file-archive-o';
 		} else if ($ext === 'txt' || $ext === 'md') {
-			return 'file-text-o';
+			return 'fa fa-file-text-o icon-' . $ext;
 		} else if ($ext === 'html' || $ext === 'php') {
-			return 'file-code-o';
-		} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json' || $ext === 'xml' || $ext === 'css' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map') {
-			return 'code';
+			return 'fa fa-file-code-o icon-' . $ext;
+		} else if ($ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json') {
+			return 'fa fa-code icon-' . substr($ext, 0, 2);
+		} else if ($ext === 'mts' || $ext === 'cts' || $ext === 'mjs' || $ext === 'cjs') {
+			return 'fa fa-code icon-' . substr($ext, 1, 2);
+		} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'xml' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map' || $ext === 'csv') {
+			return 'fa fa-code';
+		} else if ($ext === 'css') {
+			return 'fa fa-code icon-' . $ext;
 		} else if ($ext === 'woff' || $ext === 'woff2' || $ext === 'ttf' || $ext === 'otf' || $ext === 'eot') {
-			return 'font';
+			return 'fa fa-font';
 		} else if ($ext === 'pdf') {
-			return 'file-pdf-o';
+			return 'fa fa-file-pdf-o';
 		} else if ($ext === 'doc' || $ext === 'docx' || $ext === 'odt') {
-			return 'file-word-o';
+			return 'fa fa-file-word-o';
 		} else if ($ext === 'xls' || $ext === 'xlsx' || $ext === 'ods') {
-			return 'file-excel-o';
+			return 'fa fa-file-excel-o';
 		} else if ($ext === 'ppt' || $ext === 'pptx' || $ext === 'odp') {
-			return 'file-powerpoint-o';
+			return 'fa fa-file-powerpoint-o';
+		} else if ($ext === 'epub' || $ext === 'mobi') {
+			return 'fa fa-book';
+		} else if ($ext === 'exe' || $ext === 'dmg') {
+			return 'fa fa-window-maximize';
 		}
 	}
-	return 'file-o';
+	return 'fa fa-file-o';
+}
+
+function get_icon_fa5pro(string $file, bool $is_dir) {
+	if ($is_dir) {
+		return 'fad fa-folder-open';
+	} else {
+		$info = pathinfo($file);
+		$ext = strtolower($info['extension'] ?? '.');
+		if ($ext === 'jpg' || $ext === 'jpeg' || $ext === 'png' || $ext === 'bmp' || $ext === 'webp' || $ext === 'svg') {
+			return 'fad fa-image';
+		} else if ($ext === 'gif') {
+			return 'fad fa-film';
+		} else if ($ext === 'mp4' || $ext === 'webm' || $ext === 'mkv' || $ext === 'avi' || $ext === 'mov') {
+			return 'fas fa-video';
+		} else if ($ext === 'mp3' || $ext === 'ogg' || $ext === 'wav' || $ext === 'flac' || $ext === 'aac') {
+			return 'fas fa-volume';
+		} else if ($ext === 'zip' || $ext === 'tar' || $ext === 'gz') {
+			return 'fad fa-file-archive';
+		} else if ($ext === 'txt' || $ext === 'md') {
+			return 'fad fa-file-alt icon-' . $ext;
+		} else if ($ext === 'html' || $ext === 'php') {
+			return 'fad fa-file-code icon-' . $ext;
+		} else if ($ext === 'js' || $ext === 'ts' || $ext === 'jsx' || $ext === 'tsx' || $ext === 'json') {
+			return 'fad fa-code icon-' . substr($ext, 0, 2);
+		} else if ($ext === 'mts' || $ext === 'cts' || $ext === 'mjs' || $ext === 'cjs') {
+			return 'fad fa-code icon-' . substr($ext, 1, 2);
+		} else if ($ext === 'css') {
+			return 'fad fa-code icon-' . $ext;
+		} else if ($ext === 'c' || $ext === 'cpp' || $ext === 'h' || $ext === 'hpp' || $ext === 'py' || $ext === 'xml' || $ext === 'css' || $ext === 'java' || $ext === 'rb' || $ext === 'go' || $ext === 'swift' || $ext === 'rs' || $ext === 'map') {
+			return 'fa fa-code';
+		} else if ($ext === 'woff' || $ext === 'woff2' || $ext === 'ttf' || $ext === 'otf' || $ext === 'eot') {
+			return 'fad fa-font-case';
+		} else if ($ext === 'pdf') {
+			return 'fad fa-file-pdf';
+		} else if ($ext === 'csv') {
+			return 'fad fa-file-csv';
+		} else if ($ext === 'doc' || $ext === 'docx' || $ext === 'odt') {
+			return 'fad fa-file-word';
+		} else if ($ext === 'xls' || $ext === 'xlsx' || $ext === 'ods') {
+			return 'fad fa-file-excel';
+		} else if ($ext === 'ppt' || $ext === 'pptx' || $ext === 'odp') {
+			return 'fad fa-file-powerpoint';
+		} else if ($ext === 'epub' || $ext === 'mobi') {
+			return 'fad fa-book';
+		} else if ($ext === 'exe') {
+			return 'fad fa-window-alt';
+		} else if ($ext === 'dmg') {
+			return 'fad fa-window';
+		}
+	}
+	return 'fad fa-file';
 }
 
 foreach ($files as $file) {
@@ -78,7 +146,7 @@ foreach ($files as $file) {
 
 	$is_dir = is_dir($path);
 	$ext = '';
-	$type = get_icon($file, $is_dir);
+	$icon = get_icon($file, $is_dir);
 	if (!$is_dir) {
 		$info = pathinfo($file);
 		$ext = strtolower($info['extension'] ?? '.');
@@ -101,7 +169,7 @@ foreach ($files as $file) {
 	$next = [
 		'name' => htmlentities($file),
 		'mtime' => date('Y-m-d H:i:s', filemtime($path)),
-		'type' => $type,
+		'icon' => $icon,
 		'size' => $size,
 		'ext' => $ext,
 		'size_text' => $size_text,
@@ -155,6 +223,9 @@ if ($sort_by === 'name' || $sort_by === 'N') {
 
 	<meta name="viewport" content="width=device-width" />
 	<link rel="stylesheet" href="/dirindex/font-awesome.min.css" />
+<?php if ($fa5pro) { ?>
+	<link rel="stylesheet" href="/dirindex/fontawesome5-solid-duotone.min.css?" />
+<?php } ?>
 
 	<style>
 		/*********************************************************
@@ -397,6 +468,7 @@ if ($sort_by === 'name' || $sort_by === 'N') {
 			html {
 				background: #000;
 				color: #ddd;
+				color-scheme: dark;
 			}
 			a {
 				color:rgb(99, 174, 209);
@@ -465,16 +537,40 @@ if ($sort_by === 'name' || $sort_by === 'N') {
 			margin-left: -32px;
 			font-size: 20px;
 			text-align: center;
-			color: #555;
+			color: #777;
 		}
 		.icon.fa-arrow-circle-o-up, .icon.fa-folder-open {
 			color: #3798c5;
+			--fa-secondary-opacity: 0.55;
+		}
+		.icon.fa-image, .icon.fa-picture-o, .icon.fa-film, .icon.fa-video, .icon.fa-video-camera, .icon.fa-volume, .icon.fa-volume-up {
+			color: rgb(139, 115, 82);
+			--fa-secondary-opacity: 0.4;
+		}
+		.icon.icon-js {
+			color: rgb(160, 153, 89);
+		}
+		.icon.icon-ts, .icon.icon-md {
+			color: rgb(83, 112, 149);
+		}
+		.icon.icon-html {
+			color: rgb(166, 125, 67);
+		}
+		.icon.icon-php, .icon.icon-css {
+			color: rgb(125, 83, 149);
+		}
+		.icon.fa-file-pdf, .icon.fa-file-pdf-o, .icon.fa-font-case {
+			color: rgb(149, 83, 83);
+		}
+		.icon.fa-file-archive, .icon.fa-file-archive-o {
+			color:rgb(116, 149, 163);
 		}
 		.filename {
 			display: inline-block;
 			width: 50%;
 			min-width: 260px;
 			font-family: monospace;
+			font-size: 10pt;
 		}
 		.parentlink .filename {
 			font-family: inherit;
@@ -589,7 +685,7 @@ echo '<wbr />/' . htmlentities($lastpart) . '/';
 		<p class="parentlink">
 			<a class="row" href="../">
 				<i class="icon fa fa-arrow-circle-o-up">
-				</i><em class="filename">(Parent directory)
+				</i><em>(Parent directory)
 				</em>
 			</a>
 		</p>
@@ -640,7 +736,7 @@ if ($special_sprites || array_key_exists($rel_dir, $sprites_whitelist)) {
 <?php foreach ($fileinfo as $file) : ?>
 			<li>
 				<a class="row" href="./<?= urlencode($file['name']) ?>">
-					<i class="icon fa fa-<?= $file['type'] ?>">
+					<i class="icon <?= $file['icon'] ?>">
 					</i><code class="filename"><?= $file['name'] === '..' ? '(Parent directory)' : htmlentities($file['name']) ?>
 
 					</code><em class="filesize"><?= $file['size_text'] ?>