diff --git a/src/WebApp/Pages/Account/Edit.cshtml b/src/WebApp/Pages/Account/Edit.cshtml
index 417f210e..d56557b6 100644
--- a/src/WebApp/Pages/Account/Edit.cshtml
+++ b/src/WebApp/Pages/Account/Edit.cshtml
@@ -14,8 +14,8 @@
 <div class="p-3 border rounded-3 bg-light-subtle mb-3">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
             <div>Update failed:</div>
         </div>
diff --git a/src/WebApp/Pages/Account/Login.cshtml b/src/WebApp/Pages/Account/Login.cshtml
index 8acb1954..78873237 100644
--- a/src/WebApp/Pages/Account/Login.cshtml
+++ b/src/WebApp/Pages/Account/Login.cshtml
@@ -16,8 +16,8 @@
 
     <form id="external-account" asp-page="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <button type="submit" class="btn btn-lg btn-outline-primary btn-img my-3 py-3 px-4" title="Sign in using your work account">
diff --git a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Add.cshtml b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Add.cshtml
index dbc8dca5..47f253e7 100644
--- a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Add.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Add.cshtml
@@ -10,8 +10,8 @@
 <div class="p-3 border rounded-3 bg-light-subtle">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <div class="row">
diff --git a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Edit.cshtml b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Edit.cshtml
index bd3535bc..bcf7f5ec 100644
--- a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Edit.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Edit.cshtml
@@ -8,13 +8,24 @@
 <h1>Edit @EditModel.ThisOption.SingularName</h1>
 <hr />
 
+<div class="alert alert-warning d-flex align-items-center" role="alert">
+    <svg class="bi me-3" role="img" aria-label="Warning:">
+        <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
+    </svg>
+    <div>
+        Warning: Changing the name of @(EditModel.ThisOption.StartsWithVowelSound ? "an" : "a")
+        @EditModel.ThisOption.SingularName will affect all of its existing uses. Before proceeding, consider
+        whether it would be better to deactivate this one and create a new one.
+    </div>
+</div>
+
 <h2>@Model.OriginalName</h2>
 
 <div class="p-3 border rounded-3 bg-light-subtle">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <div class="col-md-8 mb-3">
diff --git a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Index.cshtml b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Index.cshtml
index ad039188..f8299a90 100644
--- a/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Index.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/EntryTypes/Index.cshtml
@@ -7,7 +7,12 @@
 }
 
 <p class="d-print-none">
-    <a asp-page="../Index" class="lead link-offset-2">← Site Maintenance</a>
+    <a asp-page="../Index" class="lead icon-link">
+        <svg class="bi">
+            <use href="@Url.Content("~/images/app-icons.svg")#app-icon-arrow-90deg-up"></use>
+        </svg>
+        Site Maintenance
+    </a>
 </p>
 
 <h1>@IndexModel.ThisOption.PluralName</h1>
diff --git a/src/WebApp/Pages/Admin/Maintenance/MaintenanceOption.cs b/src/WebApp/Pages/Admin/Maintenance/MaintenanceOption.cs
index 826ea401..d38567c7 100644
--- a/src/WebApp/Pages/Admin/Maintenance/MaintenanceOption.cs
+++ b/src/WebApp/Pages/Admin/Maintenance/MaintenanceOption.cs
@@ -4,12 +4,13 @@ public class MaintenanceOption
 {
     public string SingularName { get; private init; } = string.Empty;
     public string PluralName { get; private init; } = string.Empty;
+    public bool StartsWithVowelSound { get; private init; }
 
     private MaintenanceOption() { }
 
     public static MaintenanceOption EntryType { get; } =
-        new() { SingularName = "Work Entry Type", PluralName = "Work Entry Types" };
+        new() { SingularName = "Work Entry Type", PluralName = "Work Entry Types", StartsWithVowelSound = false };
 
     public static MaintenanceOption Office { get; } =
-        new() { SingularName = "Office", PluralName = "Offices" };
+        new() { SingularName = "Office", PluralName = "Offices", StartsWithVowelSound = true };
 }
diff --git a/src/WebApp/Pages/Admin/Maintenance/Offices/Add.cshtml b/src/WebApp/Pages/Admin/Maintenance/Offices/Add.cshtml
index b9ee2a85..9c3e847c 100644
--- a/src/WebApp/Pages/Admin/Maintenance/Offices/Add.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/Offices/Add.cshtml
@@ -11,8 +11,8 @@
 <div class="p-3 border rounded-3 bg-light-subtle">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <div class="row">
diff --git a/src/WebApp/Pages/Admin/Maintenance/Offices/Edit.cshtml b/src/WebApp/Pages/Admin/Maintenance/Offices/Edit.cshtml
index c4b65f67..8ed0b946 100644
--- a/src/WebApp/Pages/Admin/Maintenance/Offices/Edit.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/Offices/Edit.cshtml
@@ -10,13 +10,24 @@
 <h1>Edit @EditModel.ThisOption.SingularName</h1>
 <hr />
 
+<div class="alert alert-warning d-flex align-items-center" role="alert">
+    <svg class="bi me-3" role="img" aria-label="Warning:">
+        <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
+    </svg>
+    <div>
+        Warning: Changing the name of @(EditModel.ThisOption.StartsWithVowelSound ? "an" : "a")
+        @EditModel.ThisOption.SingularName will affect all of its existing uses. Before proceeding, consider
+        whether it would be better to deactivate this one and create a new one.
+    </div>
+</div>
+
 <h2>@Model.OriginalName</h2>
 
 <div class="p-3 border rounded-3 bg-light-subtle">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <div class="row">
diff --git a/src/WebApp/Pages/Admin/Maintenance/Offices/Index.cshtml b/src/WebApp/Pages/Admin/Maintenance/Offices/Index.cshtml
index 6f506e3b..2a30a63c 100644
--- a/src/WebApp/Pages/Admin/Maintenance/Offices/Index.cshtml
+++ b/src/WebApp/Pages/Admin/Maintenance/Offices/Index.cshtml
@@ -7,7 +7,12 @@
 }
 
 <p class="d-print-none">
-    <a asp-page="../Index" class="lead link-offset-2">← Site Maintenance</a>
+    <a asp-page="../Index" class="lead icon-link">
+        <svg class="bi">
+            <use href="@Url.Content("~/images/app-icons.svg")#app-icon-arrow-90deg-up"></use>
+        </svg>
+        Site Maintenance
+    </a>
 </p>
 
 <h1>@IndexModel.ThisOption.PluralName</h1>
diff --git a/src/WebApp/Pages/Admin/Users/Edit.cshtml b/src/WebApp/Pages/Admin/Users/Edit.cshtml
index de11958e..8e83ed6e 100644
--- a/src/WebApp/Pages/Admin/Users/Edit.cshtml
+++ b/src/WebApp/Pages/Admin/Users/Edit.cshtml
@@ -14,8 +14,8 @@
 <div class="p-3 border rounded-3 bg-light-subtle mb-3">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
             <div>User update failed:</div>
         </div>
diff --git a/src/WebApp/Pages/Admin/Users/EditRoles.cshtml b/src/WebApp/Pages/Admin/Users/EditRoles.cshtml
index e508bcc5..4c503be6 100644
--- a/src/WebApp/Pages/Admin/Users/EditRoles.cshtml
+++ b/src/WebApp/Pages/Admin/Users/EditRoles.cshtml
@@ -26,8 +26,8 @@
     <p>View a detailed description of <a asp-page="Roles" target="_blank">user roles and capabilities</a>.</p>
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
             <div>Roles update failed:</div>
         </div>
diff --git a/src/WebApp/Pages/Shared/Components/MainMenu/Default.cshtml b/src/WebApp/Pages/Shared/Components/MainMenu/Default.cshtml
index 2424b57e..cac2ccbb 100644
--- a/src/WebApp/Pages/Shared/Components/MainMenu/Default.cshtml
+++ b/src/WebApp/Pages/Shared/Components/MainMenu/Default.cshtml
@@ -1,4 +1,7 @@
 @model MainMenuViewComponent.MenuParams
+@{
+    var iconsFile = Url.Content("~/images/app-icons.svg");
+}
 
 <header role="banner">
     <nav id="main-nav" class="navbar nav-underline navbar-expand-sm text-bg-brand bg-gradient border-bottom shadow-sm mb-3 d-print-none">
@@ -44,7 +47,11 @@
                     @if (Model.IsStaffUser)
                     {
                         <li class="nav-item">
-                            <a class="nav-link" asp-page="/Staff/WorkEntries/Add" title="Add New Work Entry">&#x2795;&nbsp;<span class="d-inline d-sm-none">Add&nbsp;</span>New <span class="d-inline d-sm-none d-lg-inline">Work Entry</span></a>
+                            <a class="nav-link" asp-page="/Staff/WorkEntries/Add" title="Add New Work Entry">
+                                <svg class="bi">
+                                    <use href="/images/app-icons.svg#app-icon-plus-lg"></use>
+                                </svg>&nbsp;<span class="d-inline d-sm-none">Add&nbsp;</span>New <span class="d-inline d-sm-none d-lg-inline">Work Entry</span>
+                            </a>
                         </li>
                     }
                     @if (Model.IsActiveUser)
@@ -98,41 +105,41 @@
                         <button class="nav-link dropdown-toggle" id="bd-theme" type="button"
                                 aria-haspopup="menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" title="Toggle theme">
                             <svg class="bi me-1 theme-icon-active">
-                                <use href="#circle-half"></use>
+                                <use href="@iconsFile#app-icon-circle-half"></use>
                             </svg>
-                            <span class="ms-2 visually-hidden" id="bd-theme-text">Toggle theme</span>
+                            <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
                         </button>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme">
+                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
                             <li>
                                 <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
-                                    <svg class="bi me-2 opacity-50 theme-icon">
-                                        <use href="#sun-fill"></use>
+                                    <svg class="bi me-2 opacity-50">
+                                        <use href="@iconsFile#app-icon-sun-fill"></use>
                                     </svg>
                                     Light
-                                    <svg class="bi ms-auto d-none">
-                                        <use href="#check2"></use>
+                                    <svg class="bi ms-auto theme-checkmark d-none">
+                                        <use href="@iconsFile#app-icon-check2"></use>
                                     </svg>
                                 </button>
                             </li>
                             <li>
                                 <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
-                                    <svg class="bi me-2 opacity-50 theme-icon">
-                                        <use href="#moon-stars-fill"></use>
+                                    <svg class="bi me-2 opacity-50">
+                                        <use href="@iconsFile#app-icon-moon-stars-fill"></use>
                                     </svg>
                                     Dark
-                                    <svg class="bi ms-auto d-none">
-                                        <use href="#check2"></use>
+                                    <svg class="bi ms-auto theme-checkmark d-none">
+                                        <use href="@iconsFile#app-icon-check2"></use>
                                     </svg>
                                 </button>
                             </li>
                             <li>
                                 <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
-                                    <svg class="bi me-2 opacity-50 theme-icon">
-                                        <use href="#circle-half"></use>
+                                    <svg class="bi me-2 opacity-50">
+                                        <use href="@iconsFile#app-icon-circle-half"></use>
                                     </svg>
                                     Auto
-                                    <svg class="bi ms-auto d-none">
-                                        <use href="#check2"></use>
+                                    <svg class="bi ms-auto theme-checkmark d-none">
+                                        <use href="@iconsFile#app-icon-check2"></use>
                                     </svg>
                                 </button>
                             </li>
@@ -143,19 +150,3 @@
         </div>
     </nav>
 </header>
-
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-    <symbol id="check2" viewBox="0 0 16 16">
-        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
-    </symbol>
-    <symbol id="circle-half" viewBox="0 0 16 16">
-        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
-    </symbol>
-    <symbol id="moon-stars-fill" viewBox="0 0 16 16">
-        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
-        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
-    </symbol>
-    <symbol id="sun-fill" viewBox="0 0 16 16">
-        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
-    </symbol>
-</svg>
diff --git a/src/WebApp/Pages/Shared/DisplayTemplates/ValidationSummaryConditional.cshtml b/src/WebApp/Pages/Shared/DisplayTemplates/ValidationSummaryConditional.cshtml
index 17763580..b6856e02 100644
--- a/src/WebApp/Pages/Shared/DisplayTemplates/ValidationSummaryConditional.cshtml
+++ b/src/WebApp/Pages/Shared/DisplayTemplates/ValidationSummaryConditional.cshtml
@@ -1,21 +1,23 @@
 @model string
+@{
+    var iconsFile = Url.Content("~/images/app-icons.svg");
+}
 @if (Model == ViewData["ValidatingSection"]!.ToString())
 {
     <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+        <svg class="bi me-2" role="img" aria-label="Danger:">
+            <use href="@iconsFile#app-icon-exclamation-triangle-fill"></use>
         </svg>
     </div>
 }
 else
 {
     <div class="alert alert-danger validation-summary-valid d-flex align-items-center" role="alert" data-valmsg-summary="true">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
-        </svg>    
+        <svg class="bi me-2" role="img" aria-label="Danger:">
+            <use href="@iconsFile#app-icon-exclamation-triangle-fill"></use>
+        </svg>
         <ul>
             <li style="display:none"></li>
         </ul>
     </div>
 }
- 
\ No newline at end of file
diff --git a/src/WebApp/Pages/Shared/_AlertPartial.cshtml b/src/WebApp/Pages/Shared/_AlertPartial.cshtml
index 0e7dd5e7..075f0959 100644
--- a/src/WebApp/Pages/Shared/_AlertPartial.cshtml
+++ b/src/WebApp/Pages/Shared/_AlertPartial.cshtml
@@ -1,5 +1,8 @@
 @using MyApp.WebApp.Models
 @model WebApp.Models.DisplayMessage?
+@{
+    var iconsFile = Url.Content("~/images/app-icons.svg");
+}
 
 @if (Model != null)
 {
@@ -8,21 +11,21 @@
             switch (Model.Context)
             {
                 case DisplayMessage.AlertContext.Success:
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-3" viewBox="0 0 16 16">
-                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
+                    <svg class="bi me-3" role="img" aria-label="Success:">
+                        <use href="@iconsFile#app-icon-check-circle-fill"></use>
                     </svg>
                     break;
 
                 case DisplayMessage.AlertContext.Info:
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-3" viewBox="0 0 16 16">
-                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287z" />
+                    <svg class="bi me-3" role="img" aria-label="Info:">
+                        <use href="@iconsFile#app-icon-info-circle-fill"></use>
                     </svg>
                     break;
 
                 case DisplayMessage.AlertContext.Danger:
                 case DisplayMessage.AlertContext.Warning:
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi me-3" viewBox="0 0 16 16">
-                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+                    <svg class="bi me-3" role="img" aria-label="Warning:">
+                        <use href="@iconsFile#app-icon-exclamation-triangle-fill"></use>
                     </svg>
                     break;
 
diff --git a/src/WebApp/Pages/Shared/_Layout.cshtml b/src/WebApp/Pages/Shared/_Layout.cshtml
index 90e4b5c8..75b36e27 100644
--- a/src/WebApp/Pages/Shared/_Layout.cshtml
+++ b/src/WebApp/Pages/Shared/_Layout.cshtml
@@ -34,7 +34,11 @@
 <footer class="footer pt-3">
     <div class="bg-body-tertiary py-2 border-bottom d-print-none">
         <div class="container">
-            <a href="#top" class="btn">↑ Return to top</a>
+            <a href="#top" class="btn">
+                <svg class="bi">
+                    <use href="@Url.Content("~/images/app-icons.svg")#app-icon-arrow-bar-up"></use>
+                </svg> Return to top
+            </a>
         </div>
     </div>
     <div class="bg-body-secondary pt-2 pb-3">
diff --git a/src/WebApp/Pages/Staff/EntryAction/Edit.cshtml b/src/WebApp/Pages/Staff/EntryAction/Edit.cshtml
index 280bbd6f..8fc15c24 100644
--- a/src/WebApp/Pages/Staff/EntryAction/Edit.cshtml
+++ b/src/WebApp/Pages/Staff/EntryAction/Edit.cshtml
@@ -12,8 +12,8 @@
 <div class="p-3 border border-primary-subtle rounded-3 bg-light-subtle mb-3">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
         <div class="row">
diff --git a/src/WebApp/Pages/Staff/WorkEntries/Add.cshtml b/src/WebApp/Pages/Staff/WorkEntries/Add.cshtml
index 3d9ec086..f1b30a58 100644
--- a/src/WebApp/Pages/Staff/WorkEntries/Add.cshtml
+++ b/src/WebApp/Pages/Staff/WorkEntries/Add.cshtml
@@ -11,8 +11,8 @@
 <div class="p-3 border border-primary-subtle rounded-3 bg-light-subtle">
     <form method="post" enctype="multipart/form-data">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
 
diff --git a/src/WebApp/Pages/Staff/WorkEntries/Details.cshtml b/src/WebApp/Pages/Staff/WorkEntries/Details.cshtml
index c4e713a1..8404fbaa 100644
--- a/src/WebApp/Pages/Staff/WorkEntries/Details.cshtml
+++ b/src/WebApp/Pages/Staff/WorkEntries/Details.cshtml
@@ -114,8 +114,8 @@
 
         <form method="post" asp-page-handler="NewAction" asp-fragment="new-action">
             <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+                <svg class="bi me-2" role="img" aria-label="Danger:">
+                    <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
                 </svg>
             </div>
             <div class="row">
@@ -202,4 +202,4 @@
 
 @section Scripts {
     <partial name="_ValidationScriptsPartial" />
-}
\ No newline at end of file
+}
diff --git a/src/WebApp/Pages/Staff/WorkEntries/Edit.cshtml b/src/WebApp/Pages/Staff/WorkEntries/Edit.cshtml
index 92248005..48653798 100644
--- a/src/WebApp/Pages/Staff/WorkEntries/Edit.cshtml
+++ b/src/WebApp/Pages/Staff/WorkEntries/Edit.cshtml
@@ -11,8 +11,8 @@
 <div class="p-3 border border-primary-subtle rounded-3 bg-light-subtle mb-3">
     <form method="post">
         <div asp-validation-summary="All" class="alert alert-danger d-flex align-items-center" role="alert">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill me-2" viewBox="0 0 16 16">
-                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" />
+            <svg class="bi me-2" role="img" aria-label="Danger:">
+                <use href="@Url.Content("~/images/app-icons.svg")#app-icon-exclamation-triangle-fill"></use>
             </svg>
         </div>
 
diff --git a/src/WebApp/Pages/Staff/WorkEntries/Index.cshtml b/src/WebApp/Pages/Staff/WorkEntries/Index.cshtml
index 2d8187fa..9cf87e61 100644
--- a/src/WebApp/Pages/Staff/WorkEntries/Index.cshtml
+++ b/src/WebApp/Pages/Staff/WorkEntries/Index.cshtml
@@ -30,7 +30,7 @@
                     {
                         <div class="col-md mb-3">
                             <div class="form-floating">
-                                <select asp-for="Spec.DeletedStatus" name="@nameof(Model.Spec.DeletedStatus)" 
+                                <select asp-for="Spec.DeletedStatus" name="@nameof(Model.Spec.DeletedStatus)"
                                         asp-items="Html.GetEnumSelectList<SearchDeleteStatus>()" class="form-select">
                                     <option value="">Not Deleted</option>
                                 </select>
@@ -109,7 +109,9 @@
                 {
                     <div class="col-auto d-print-none ms-2">
                         <a asp-page="DownloadSearch" asp-all-route-data="Model.Spec.AsRouteValues()" class="btn btn-sm btn-outline-secondary">
-                            💾 Download search results
+                            <svg class="bi me-1">
+                                <use href="/images/app-icons.svg#app-icon-download"></use>
+                            </svg>&nbsp;Download search results
                         </a>
                     </div>
                 }
diff --git a/src/WebApp/wwwroot/css/site.css b/src/WebApp/wwwroot/css/site.css
index 12525edd..a99b7d84 100644
--- a/src/WebApp/wwwroot/css/site.css
+++ b/src/WebApp/wwwroot/css/site.css
@@ -178,6 +178,9 @@ html:not([data-bs-theme="dark"]) .bg-dark-subtle .text-danger-emphasis {
 
 .btn-img img {
     height: 25px;
+    background: white;
+    box-shadow: 0 0 1px white;
+    margin-right: 2px;
 }
 
 /* Additional font style utilities
@@ -201,7 +204,8 @@ html:not([data-bs-theme="dark"]) .bg-dark-subtle .text-danger-emphasis {
 /* External links
 -------------------------------------------------- */
 a[target]::after {
-    content: '\00a0\1f5d7';
+    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='hsl(216, 100%, 50%)' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z'/></svg>");
+    margin-left: .2em;
 }
 
 /* Suppress external link icon */
@@ -316,10 +320,10 @@ details.card:not([open]) summary.card-header {
 /* Bootstrap Icons
 -------------------------------------------------- */
 .bi {
-    width: 1.1em;
-    height: 1.1em;
+    width: 1em;
+    height: 1em;
     fill: currentColor;
-    vertical-align: text-bottom;
+    vertical-align: -.125em;
     overflow: visible !important;
 }
 
diff --git a/src/WebApp/wwwroot/images/app-icons.svg b/src/WebApp/wwwroot/images/app-icons.svg
new file mode 100644
index 00000000..94c5ceb3
--- /dev/null
+++ b/src/WebApp/wwwroot/images/app-icons.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 300">
+    <defs>
+        <symbol id="app-icon-circle-half" viewBox="0 0 16 16">
+            <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
+        </symbol>
+        <symbol id="app-icon-sun-fill" viewBox="0 0 16 16">
+            <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
+        </symbol>
+        <symbol id="app-icon-moon-stars-fill" viewBox="0 0 16 16">
+            <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
+            <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
+        </symbol>
+        <symbol id="app-icon-check2" viewBox="0 0 16 16">
+            <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+        </symbol>
+        <symbol id="app-icon-plus-lg" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                  d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
+        </symbol>
+        <symbol id="app-icon-arrow-90deg-up" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                  d="M4.854 1.146a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L4 2.707V12.5A2.5 2.5 0 0 0 6.5 15h8a.5.5 0 0 0 0-1h-8A1.5 1.5 0 0 1 5 12.5V2.707l3.146 3.147a.5.5 0 1 0 .708-.708z"/>
+        </symbol>
+        <symbol id="app-icon-info-circle-fill" viewBox="0 0 16 16">
+            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
+        </symbol>
+        <symbol id="app-icon-check-circle-fill" viewBox="0 0 16 16">
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+        </symbol>
+        <symbol id="app-icon-exclamation-triangle-fill" viewBox="0 0 16 16">
+            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+        </symbol>
+        <symbol id="app-icon-download" viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
+        </symbol>
+        <symbol id="app-icon-people-fill" viewBox="0 0 16 16">
+            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+        </symbol>
+        <symbol id="app-icon-person-badge" viewBox="0 0 16 16">
+            <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+            <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492z"/>
+        </symbol>
+        <symbol id="app-icon-arrow-bar-up" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                  d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5m-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5"/>
+        </symbol>
+        <symbol id="app-icon-printer-fill" viewBox="0 0 16 16">
+            <path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1"/>
+            <path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/>
+        </symbol>
+        <symbol id="app-icon-search" viewBox="0 0 16 16">
+            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+        </symbol>
+    </defs>
+    <!--    <use href="#app-icon-circle-half" x="0" y="0" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-sun-fill" x="0" y="20" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-moon-stars-fill" x="0" y="40" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-check2" x="0" y="60" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-plus-lg" x="0" y="80" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-arrow-90deg-up" x="0" y="100" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-info-circle-fill" x="0" y="120" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-check-circle-fill" x="0" y="140" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-exclamation-triangle-fill" x="0" y="160" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-download" x="0" y="180" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-people-fill" x="0" y="200" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-person-badge" x="0" y="220" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-arrow-bar-up" x="0" y="240" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-printer-fill" x="0" y="260" width="16" height="16"/>-->
+    <!--    <use href="#app-icon-search" x="0" y="280" width="16" height="16"/>-->
+</svg>
diff --git a/src/WebApp/wwwroot/images/file-type-icons.svg b/src/WebApp/wwwroot/images/file-type-icons.svg
new file mode 100644
index 00000000..0efd68ef
--- /dev/null
+++ b/src/WebApp/wwwroot/images/file-type-icons.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 200">
+    <defs>
+        <symbol id="file-icon-text" aria-label="Text File" viewBox="0 0 16 16">
+            <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
+            <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+        </symbol>
+        <symbol id="file-icon-rtf" aria-label="Rich Text File" viewBox="0 0 16 16">
+            <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+            <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5m1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208M6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5"/>
+        </symbol>
+        <symbol id="file-icon-csv" aria-label="CSV File" viewBox="0 0 16 16">
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V9H3V2a1 1 0 0 1 1-1h5.5zM3 12v-2h2v2zm0 1h2v2H4a1 1 0 0 1-1-1zm3 2v-2h7v1a1 1 0 0 1-1 1zm7-3H6v-2h7z"/>
+        </symbol>
+        <symbol id="file-icon-excel" aria-label="Excel File" viewBox="0 0 16 16">
+            <path d="M5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"/>
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+        </symbol>
+        <symbol id="file-icon-word" aria-label="Word File" viewBox="0 0 16 16">
+            <path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .967.01L8 9.402l1.018 3.73a.5.5 0 0 0 .967-.01l1.5-6a.5.5 0 0 0-.97-.242l-1.036 4.144-.997-3.655a.5.5 0 0 0-.964 0l-.997 3.655L5.485 6.88z"/>
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+        </symbol>
+        <symbol id="file-icon-pdf" aria-label="PDF File" viewBox="0 0 16 16">
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+            <path d="M4.603 14.087a.8.8 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.7 7.7 0 0 1 1.482-.645 20 20 0 0 0 1.062-2.227 7.3 7.3 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a11 11 0 0 0 .98 1.686 5.8 5.8 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.86.86 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.7 5.7 0 0 1-.911-.95 11.7 11.7 0 0 0-1.997.406 11.3 11.3 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.8.8 0 0 1-.58.029m1.379-1.901q-.25.115-.459.238c-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361q.016.032.026.044l.035-.012c.137-.056.355-.235.635-.572a8 8 0 0 0 .45-.606m1.64-1.33a13 13 0 0 1 1.01-.193 12 12 0 0 1-.51-.858 21 21 0 0 1-.5 1.05zm2.446.45q.226.245.435.41c.24.19.407.253.498.256a.1.1 0 0 0 .07-.015.3.3 0 0 0 .094-.125.44.44 0 0 0 .059-.2.1.1 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a4 4 0 0 0-.612-.053zM8.078 7.8a7 7 0 0 0 .2-.828q.046-.282.038-.465a.6.6 0 0 0-.032-.198.5.5 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822q.036.167.09.346z"/>
+        </symbol>
+        <symbol id="file-icon-image" aria-label="Image File" viewBox="0 0 16 16">
+            <path d="M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
+            <path d="M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1z"/>
+        </symbol>
+        <symbol id="file-icon-html" aria-label="HTML File" viewBox="0 0 16 16">
+            <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+            <path d="M8.646 6.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 9 8.646 7.354a.5.5 0 0 1 0-.708m-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 9l1.647-1.646a.5.5 0 0 0 0-.708"/>
+        </symbol>
+        <symbol id="file-icon-powerpoint" aria-label="Powerpoint File" viewBox="0 0 16 16">
+            <path d="M7 5.5a1 1 0 0 0-1 1V13a.5.5 0 0 0 1 0v-2h1.188a2.75 2.75 0 0 0 0-5.5zM8.188 10H7V6.5h1.188a1.75 1.75 0 1 1 0 3.5"/>
+            <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+        </symbol>
+        <symbol id="file-icon-default" aria-label="Unknown File Type" viewBox="0 0 16 16">
+            <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+        </symbol>
+    </defs>
+    <!--
+    <use href="#file-icon-text" x="0" y="0" width="16" height="16"/>
+    <use href="#file-icon-rtf" x="0" y="20" width="16" height="16"/>
+    <use href="#file-icon-csv" x="0" y="40" width="16" height="16"/>
+    <use href="#file-icon-excel" x="0" y="60" width="16" height="16"/>
+    <use href="#file-icon-word" x="0" y="80" width="16" height="16"/>
+    <use href="#file-icon-pdf" x="0" y="100" width="16" height="16"/>
+    <use href="#file-icon-image" x="0" y="120" width="16" height="16"/>
+    <use href="#file-icon-html" x="0" y="140" width="16" height="16"/>
+    <use href="#file-icon-powerpoint" x="0" y="160" width="16" height="16"/>
+    <use href="#file-icon-default" x="0" y="180" width="16" height="16"/>
+    -->
+</svg>