diff --git a/src-ui/e2e/document-list/document-list.spec.ts b/src-ui/e2e/document-list/document-list.spec.ts
index 06b512a28..e74897257 100644
--- a/src-ui/e2e/document-list/document-list.spec.ts
+++ b/src-ui/e2e/document-list/document-list.spec.ts
@@ -131,7 +131,7 @@ test('sorting', async ({ page }) => {
   await page.getByRole('button', { name: 'Notes' }).click()
   await expect(page).toHaveURL(/sort=num_notes/)
   await page.getByRole('button', { name: 'Sort' }).click()
-  await page.locator('.w-100 > label > .toolbaricon').first().click()
+  await page.locator('.w-100 > label > i-bs').first().click()
   await expect(page).not.toHaveURL(/reverse=1/)
 })
 
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 a24bad504..8106312a1 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
@@ -145,7 +145,7 @@
                   popoverClass="popover-slim">
                   <i-bs class="me-1" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
                   <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                    <i-bs class="toolbaricon" name="x"></i-bs>
+                    <i-bs name="x"></i-bs>
                   </span>
                 </a>
               </li>
diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
index 2bbfef04e..744cde733 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html
@@ -1,6 +1,6 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose()">
     <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
-      <i-bs class="toolbaricon" name="ui-radios"></i-bs>
+      <i-bs name="ui-radios"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.scss b/src-ui/src/app/components/common/input/document-link/document-link.component.scss
index 51f6fa055..5541def31 100644
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.scss
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.scss
@@ -7,7 +7,7 @@
     }
 }
 
-.sidebaricon {
+i-bs {
     cursor: pointer;
 }
 
diff --git a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
index 9cf389d88..f95434c8f 100644
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
@@ -1,6 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs class="toolbaricon" name="person-fill-lock"></i-bs>
+    <i-bs name="person-fill-lock"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
diff --git a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
index 15b588b10..9d3b01d74 100644
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html
@@ -1,6 +1,6 @@
 <div ngbDropdown>
   <button class="btn btn-sm btn-outline-primary" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
-    <i-bs class="toolbaricon" name="link"></i-bs>
+    <i-bs name="link"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Share Links</ng-container></div>
   </button>
   <div ngbDropdownMenu aria-labelledby="shareLinksDropdown" class="shadow share-links-dropdown">
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 aeb5554d0..7435fac36 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
@@ -39,7 +39,7 @@
 
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary me-2" id="actionsDropdown" ngbDropdownToggle>
-      <i-bs class="toolbaricon" name="three-dots"></i-bs>
+      <i-bs name="three-dots"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
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 79ff6af07..b101c2742 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
@@ -72,7 +72,7 @@
 
               <div ngbDropdown>
                 <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
-                  <i-bs class="toolbaricon" name="three-dots"></i-bs>
+                  <i-bs name="three-dots"></i-bs>
                   <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
@@ -84,7 +84,7 @@
             <div class="btn-group btn-group-sm">
               <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
                 @if (!awaitingDownload) {
-                  <i-bs class="toolbaricon" name="arrow-down"></i-bs>
+                  <i-bs name="arrow-down"></i-bs>
                 }
                 @if (awaitingDownload) {
                   <div class="spinner-border spinner-border-sm" role="status">
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index fe57c15d8..c4df1728a 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -2,7 +2,7 @@
 
   <div ngbDropdown class="me-2 d-flex">
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
-      <i-bs class="toolbaricon" name="text-indent-left"></i-bs>
+      <i-bs name="text-indent-left"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
@@ -14,15 +14,15 @@
   <div class="btn-group flex-fill" role="group">
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="details" (ngModelChange)="saveDisplayMode()" id="displayModeDetails" name="displayModeDetails">
     <label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
-      <i-bs class="toolbaricon" name="list-ul"></i-bs>
+      <i-bs name="list-ul"></i-bs>
     </label>
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="smallCards" (ngModelChange)="saveDisplayMode()" id="displayModeSmall" name="displayModeSmall">
     <label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
-      <i-bs class="toolbaricon" name="grid"></i-bs>
+      <i-bs name="grid"></i-bs>
     </label>
     <input type="radio" class="btn-check" [(ngModel)]="displayMode" value="largeCards" (ngModelChange)="saveDisplayMode()" id="displayModeLarge" name="displayModeLarge">
     <label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
-      <i-bs class="toolbaricon" name="hdd-stack"></i-bs>
+      <i-bs name="hdd-stack"></i-bs>
     </label>
   </div>
 
@@ -32,11 +32,11 @@
       <div class="w-100 d-flex pb-2 mb-1 border-bottom">
         <input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
         <label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
-          <i-bs class="toolbaricon" name="sort-alpha-down"></i-bs>
+          <i-bs name="sort-alpha-down"></i-bs>
         </label>
         <input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
         <label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
-          <i-bs class="toolbaricon" name="sort-alpha-up-alt"></i-bs>
+          <i-bs name="sort-alpha-up-alt"></i-bs>
         </label>
       </div>
       <div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 75a3a34af..54427ad31 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -85,7 +85,7 @@
       </div>
       <div class="d-flex flex-wrap d-none d-sm-inline-block">
         <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
-          <i-bs class="toolbaricon ms-n1" name="x"></i-bs><ng-container i18n>Reset filters</ng-container>
+          <i-bs class="ms-n1" name="x"></i-bs><ng-container i18n>Reset filters</ng-container>
           </button>
         </div>
       </div>
diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.html b/src-ui/src/app/components/manage/management-list/management-list.component.html
index f20f73aaf..6d2f279f7 100644
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -73,7 +73,7 @@
                 <div class="btn-group d-block d-sm-none">
                   <div ngbDropdown class="d-inline-block">
                     <button type="button" class="btn btn-link" id="actionsMenuMobile" ngbDropdownToggle>
-                      <i-bs class="toolbaricon" name="three-dots-vertical"></i-bs>
+                      <i-bs name="three-dots-vertical"></i-bs>
                     </button>
                     <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
                       <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents</button>
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index ea4bca8da..1b982b2b0 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -139,10 +139,6 @@ table .btn-link {
   }
 }
 
-.nav-item .sidebaricon {
-  color: var(--bs-secondary);
-}
-
 .btn:focus,
 .btn:active:focus,
 .dropdown-item:focus,