diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index aaa06c5fc2..79a81e7756 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -294,7 +294,7 @@
               <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.OcrTemplates)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="ocr-templates" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="OCR Templates" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-2" name="bounding-box-circles"></i-bs><span class="nav-link-label"><ng-container i18n>OCR Templates</ng-container></span>
+                <pngx-bs-icon class="me-2" name="bounding-box-circles"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>OCR Templates</ng-container></span>
               </a>
               @if (settingsService.organizingSidebarItems()) {
                 <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="OCR Templates" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.OcrTemplates)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.OcrTemplates, $event)"></pngx-input-switch>
diff --git a/src-ui/src/app/components/common/bootstrap-icon/icons.ts b/src-ui/src/app/components/common/bootstrap-icon/icons.ts
index b3086aafef..d9a528dcca 100644
--- a/src-ui/src/app/components/common/bootstrap-icon/icons.ts
+++ b/src-ui/src/app/components/common/bootstrap-icon/icons.ts
@@ -16,6 +16,7 @@ import basket from 'bootstrap-icons/icons/basket.svg'
 import bell from 'bootstrap-icons/icons/bell.svg'
 import bodyText from 'bootstrap-icons/icons/body-text.svg'
 import bookmark from 'bootstrap-icons/icons/bookmark.svg'
+import boundingBoxCircles from 'bootstrap-icons/icons/bounding-box-circles.svg'
 import boxArrowInRight from 'bootstrap-icons/icons/box-arrow-in-right.svg'
 import boxArrowUpRight from 'bootstrap-icons/icons/box-arrow-up-right.svg'
 import boxArrowUp from 'bootstrap-icons/icons/box-arrow-up.svg'
@@ -77,6 +78,7 @@ import fileEarmarkMinus from 'bootstrap-icons/icons/file-earmark-minus.svg'
 import fileEarmarkPerson from 'bootstrap-icons/icons/file-earmark-person.svg'
 import fileEarmarkPlus from 'bootstrap-icons/icons/file-earmark-plus.svg'
 import fileEarmarkRichtext from 'bootstrap-icons/icons/file-earmark-richtext.svg'
+import fileEarmarkRuled from 'bootstrap-icons/icons/file-earmark-ruled.svg'
 import fileEarmarkSpreadsheet from 'bootstrap-icons/icons/file-earmark-spreadsheet.svg'
 import fileEarmark from 'bootstrap-icons/icons/file-earmark.svg'
 import fileText from 'bootstrap-icons/icons/file-text.svg'
@@ -130,6 +132,7 @@ import search from 'bootstrap-icons/icons/search.svg'
 import send from 'bootstrap-icons/icons/send.svg'
 import shop from 'bootstrap-icons/icons/shop.svg'
 import slashCircle from 'bootstrap-icons/icons/slash-circle.svg'
+import sliders2 from 'bootstrap-icons/icons/sliders2.svg'
 import sliders2Vertical from 'bootstrap-icons/icons/sliders2-vertical.svg'
 import sortAlphaDown from 'bootstrap-icons/icons/sort-alpha-down.svg'
 import sortAlphaUpAlt from 'bootstrap-icons/icons/sort-alpha-up-alt.svg'
@@ -178,6 +181,7 @@ export const icons: Record<string, string> = {
   braces,
   bodyText,
   bookmark,
+  boundingBoxCircles,
   boxArrowInRight,
   boxArrowUp,
   boxArrowUpRight,
@@ -239,6 +243,7 @@ export const icons: Record<string, string> = {
   fileEarmarkPerson,
   fileEarmarkPlus,
   fileEarmarkRichtext,
+  fileEarmarkRuled,
   fileEarmarkSpreadsheet,
   files,
   fileText,
@@ -290,6 +295,7 @@ export const icons: Record<string, string> = {
   search,
   send,
   slashCircle,
+  sliders2,
   shop,
   sliders2Vertical,
   sortAlphaDown,
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index b1b331107d..e1ef6427f7 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -63,7 +63,7 @@
 
       <div class="d-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
         <button ngbDropdownItem (click)="runZoneOcr()" [disabled]="!userCanEdit || networkActive()">
-          <i-bs width="1em" height="1em" name="bounding-box-circles" class="me-2"></i-bs><span i18n>Run Zone OCR</span>
+          <pngx-bs-icon width="1em" height="1em" name="bounding-box-circles" class="me-2"></pngx-bs-icon><span i18n>Run Zone OCR</span>
         </button>
         <button
           ngbDropdownItem
@@ -73,7 +73,7 @@
           title="Choose OCR template"
           i18n-title
         >
-          <i-bs width="1em" height="1em" name="sliders2"></i-bs>
+          <pngx-bs-icon width="1em" height="1em" name="sliders2"></pngx-bs-icon>
         </button>
       </div>
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 590f12377e..680b64774c 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -100,7 +100,7 @@
           </button>
           @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.OcrTemplate)) {
             <button ngbDropdownItem (click)="runZoneOcrSelected()" [disabled]="!userCanEditAll">
-              <i-bs name="bounding-box-circles" class="me-2"></i-bs><ng-container i18n>Run Zone OCR</ng-container>
+              <pngx-bs-icon name="bounding-box-circles" class="me-2"></pngx-bs-icon><ng-container i18n>Run Zone OCR</ng-container>
             </button>
           }
         </div>
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html
index 3e523a3637..16a84fe8d8 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html
@@ -9,13 +9,13 @@
           <button type="button" class="btn btn-link p-0 fw-semibold text-reset text-decoration-none text-truncate mw-100 stretched-link" (click)="zoneSelected.emit(i)">{{ zone.name }}</button>
           @if (!hasField(zone)) {
             <div class="small text-warning text-truncate">
-              <i-bs name="exclamation-triangle" class="me-1" aria-hidden="true"></i-bs><span i18n>No field selected</span>
+              <pngx-bs-icon name="exclamation-triangle" class="me-1" aria-hidden="true"></pngx-bs-icon><span i18n>No field selected</span>
             </div>
           } @else {
             <div class="small text-muted text-truncate">
               {{ getZoneTargetName(zone) }}
               @if (isCombined(zone)) {
-                <i-bs name="braces" class="ms-1" title="Combined with other zones" i18n-title></i-bs>
+                <pngx-bs-icon name="braces" class="ms-1" title="Combined with other zones" i18n-title></pngx-bs-icon>
               }
             </div>
           }
@@ -28,7 +28,7 @@
           }
         </small>
         <button type="button" class="btn btn-sm btn-link text-danger position-relative z-2" (click)="zoneRemoved.emit(i)" title="Delete zone" i18n-title aria-label="Delete zone" i18n-aria-label>
-          <i-bs name="trash"></i-bs>
+          <pngx-bs-icon name="trash"></pngx-bs-icon>
         </button>
       </div>
     }
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
index 2b7b159ec5..69dc1b7a31 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html
@@ -42,18 +42,18 @@
             @if (selectedZone; as zone) {
               <div class="d-flex align-items-center gap-2 mb-3">
                 <button type="button" class="btn btn-sm btn-link px-0 me-auto" (click)="deselectZone()">
-                  <i-bs name="arrow-left" class="me-1"></i-bs><ng-container i18n>All zones</ng-container>
+                  <pngx-bs-icon name="arrow-left" class="me-1"></pngx-bs-icon><ng-container i18n>All zones</ng-container>
                 </button>
                 <button type="button" class="btn btn-sm btn-outline-primary" (click)="testZone()" [disabled]="!previewDocId || zoneTesting">
                   @if (zoneTesting) {
                     <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
                   } @else {
-                    <i-bs name="play-fill" class="me-1"></i-bs>
+                    <pngx-bs-icon name="play-fill" class="me-1"></pngx-bs-icon>
                   }
                   <ng-container i18n>Test</ng-container>
                 </button>
                 <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeZone(selectedZoneIndex)" title="Delete zone" i18n-title aria-label="Delete zone" i18n-aria-label>
-                  <i-bs name="trash"></i-bs>
+                  <pngx-bs-icon name="trash"></pngx-bs-icon>
                 </button>
               </div>
 
@@ -195,9 +195,9 @@
             <span class="input-group-text" i18n>of {{ previewPageCount() ?? '?' }}</span>
           </div>
           <fieldset class="input-group w-auto flex-nowrap" aria-label="Zoom" i18n-aria-label>
-            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!pageLoaded() || zoom <= 0.5" (click)="zoomOut()"><i-bs name="dash"></i-bs></button>
+            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!pageLoaded() || zoom <= 0.5" (click)="zoomOut()"><pngx-bs-icon name="dash"></pngx-bs-icon></button>
             <button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!pageLoaded()" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
-            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!pageLoaded() || zoom >= 4" (click)="zoomIn()"><i-bs name="plus"></i-bs></button>
+            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!pageLoaded() || zoom >= 4" (click)="zoomIn()"><pngx-bs-icon name="plus"></pngx-bs-icon></button>
           </fieldset>
         }
       </div>
@@ -205,9 +205,9 @@
         <div class="h-100 overflow-auto border" [attr.aria-busy]="previewDocId && !pageLoaded()">
           @if (pageFailed()) {
             <div class="py-5 px-3 text-center" role="alert">
-              <i-bs name="exclamation-triangle" width="32" height="32" class="text-warning"></i-bs>
+              <pngx-bs-icon name="exclamation-triangle" width="32" height="32" class="text-warning"></pngx-bs-icon>
               <p class="my-3" i18n>Could not load this page.</p>
-              <button type="button" class="btn btn-sm btn-outline-secondary" (click)="setSampleDocument(sampleDocumentIds)"><i-bs name="arrow-clockwise" class="me-1"></i-bs><span i18n>Retry</span></button>
+              <button type="button" class="btn btn-sm btn-outline-secondary" (click)="setSampleDocument(sampleDocumentIds)"><pngx-bs-icon name="arrow-clockwise" class="me-1"></pngx-bs-icon><span i18n>Retry</span></button>
             </div>
           } @else if (previewDocId) {
             <div class="position-relative" [class.d-none]="!pageLoaded()" [style.width.%]="zoom * 100">
@@ -293,7 +293,7 @@
             }
           } @else {
             <div class="py-5 px-3 text-center text-muted">
-              <i-bs name="file-text" width="32" height="32"></i-bs>
+              <pngx-bs-icon name="file-text" width="32" height="32"></pngx-bs-icon>
               <p class="mt-3 mb-0" i18n>No sample document selected.</p>
             </div>
           }
diff --git a/src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.html b/src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.html
index 8d7615883b..a3dedc3cb0 100644
--- a/src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.html
+++ b/src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.html
@@ -5,7 +5,7 @@
   i18n-info
   >
   <button type="button" class="btn btn-sm btn-outline-primary" (click)="editTemplate()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.OcrTemplate }">
-    <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Template</ng-container>
+    <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Template</ng-container>
   </button>
 </pngx-page-header>
 
@@ -47,7 +47,7 @@
           <div class="btn-group d-block d-sm-none">
             <div ngbDropdown container="body" class="d-inline-block">
               <button type="button" class="btn btn-link" id="actionsMenuMobile{{template.id}}" (click)="$event.stopPropagation()" ngbDropdownToggle>
-                <i-bs name="three-dots-vertical"></i-bs>
+                <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
               </button>
               <div ngbDropdownMenu aria-labelledby="actionsMenuMobile{{template.id}}">
                 <button (click)="editTemplate(template)" [disabled]="!userCanEdit(template)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" ngbDropdownItem i18n>Edit</button>
@@ -58,10 +58,10 @@
           <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" [disabled]="!userCanEdit(template)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editTemplate(template)">
-                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.OcrTemplate }" [disabled]="!permissionsService.currentUserOwnsObject(template)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteTemplate(template)">
-                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
               </button>
             </div>
           </div>