diff --git a/src-ui/src/app/components/admin/tasks/tasks.component.html b/src-ui/src/app/components/admin/tasks/tasks.component.html
index 52d85cc8e..0084d9cf6 100644
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.html
@@ -6,14 +6,10 @@
   >
   <div class="btn-toolbar col col-md-auto align-items-center">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
-      <svg class="sidebaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
     <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-      <svg class="sidebaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
-      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+      <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
     </button>
     <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
       <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
@@ -80,24 +76,18 @@
           }
           <td class="d-lg-none">
             <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
-              <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-                <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-              </svg>
+              <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
             </button>
           </td>
           <td scope="row">
             <div class="btn-group" role="group">
               <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                  </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                <i-bs name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
               </button>
               <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                 @if (task.related_document) {
                   <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                    <svg class="sidebaricon" fill="currentColor">
-                      <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                    </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
+                    <i-bs name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
                   </button>
                 }
               </ng-container>
diff --git a/src-ui/src/app/components/common/page-header/page-header.component.html b/src-ui/src/app/components/common/page-header/page-header.component.html
index b0ced88a1..e550bcffe 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@@ -7,17 +7,13 @@
       }
       @if (info) {
         <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
-          <svg class="sidebaricon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
-          </svg>
+          <i-bs name="question-circle"></i-bs>
         </button>
         <ng-template #infoPopover>
           <p [class.mb-0]="!infoLink" [innerHTML]="info"></p>
           @if (infoLink) {
             <a href="https://docs.paperless-ngx.com/{{infoLink}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
-            <svg class="sidebaricon-sm text-muted ms-1" fill="currentColor">
-              <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right"/>
-            </svg>
+            <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
           }
         </ng-template>
       }