diff --git a/projects/hslayers/components/add-data/catalogue/catalogue-list-item/catalogue-list-item.component.html b/projects/hslayers/components/add-data/catalogue/catalogue-list-item/catalogue-list-item.component.html
index fbad537615..3b4a5b3a07 100644
--- a/projects/hslayers/components/add-data/catalogue/catalogue-list-item/catalogue-list-item.component.html
+++ b/projects/hslayers/components/add-data/catalogue/catalogue-list-item/catalogue-list-item.component.html
@@ -19,7 +19,7 @@
       <div class="btn-group" (click)="$event.stopPropagation()">
         <button type="button" class="btn btn-sm border-0" [class.disabled]="!layerAvailable"
           (click)="selectTypeAndAdd('WMS',$event)">
-          <i class="fa-solid fa-plus fa-primary"></i>
+          <i class="fa-solid fa-plus icon-primary"></i>
           @if (layerAvailable) {
           <span class="ms-1">{{'COMMON.addToMap' |
             translateHs }}</span>
@@ -34,13 +34,13 @@
         }
       </div>
       <a class="btn btn-sm border-0" (click)="showMetadata(layer.endpoint, layer)">
-        <i class="fa-solid fa-circle-info fa-primary"></i><span class="ms-1">{{'COMMON.metadata' |
+        <i class="fa-solid fa-circle-info icon-primary"></i><span class="ms-1">{{'COMMON.metadata' |
           translateHs }}</span>
       </a>
       <a class="btn btn-sm border-0" (click)="$event.stopPropagation();showPermissions(layer)" data-toggle="tooltip"
         data-placement="bottom"
         [title]="layer.editable ? '' : 'DATASOURCE_SELECTOR.datasourceListItem.notAllowedToEditLayer' | translateHs ">
-        <i class="fa-solid fa-lock fa-primary" [ngClass]="{'text-muted': !layer.editable}"
+        <i class="fa-solid fa-lock icon-primary" [ngClass]="{'text-muted': !layer.editable}"
           [ngStyle]="{'cursor' : layer.editable ? 'pointer' : 'default'}"></i>@if (layer.editable) {
         <span class="ms-1">{{'COMMON.setPermissions' | translateHs }}</span>
         }
diff --git a/projects/hslayers/components/add-data/catalogue/catalogue.component.html b/projects/hslayers/components/add-data/catalogue/catalogue.component.html
index dd08e8cbaa..6d1de84e07 100644
--- a/projects/hslayers/components/add-data/catalogue/catalogue.component.html
+++ b/projects/hslayers/components/add-data/catalogue/catalogue.component.html
@@ -6,7 +6,7 @@
         <input type="search" class="form-control w-50" [placeholder]="'COMMON.search' | translateHs   " name="search"
           [(ngModel)]="data.query.textFilter" (ngModelChange)="queryByFilter()">
         <button class="input-group-text text-secondary border-start-0" (click)="queryByFilter()">
-          <i class="fa-solid fa-magnifying-glass fa-primary"></i>
+          <i class="fa-solid fa-magnifying-glass icon-primary"></i>
         </button>
       </div>
       <hs-layman-current-user [endpoint]="ctx.layman"></hs-layman-current-user>
diff --git a/projects/hslayers/components/compositions/compositions-list-item.component.html b/projects/hslayers/components/compositions/compositions-list-item.component.html
index 37b9688e25..3824a91f0b 100644
--- a/projects/hslayers/components/compositions/compositions-list-item.component.html
+++ b/projects/hslayers/components/compositions/compositions-list-item.component.html
@@ -3,22 +3,22 @@
   <hr class="hs-dotted-line">
   <div class="btn-group w-100 align-items-center" role="group">
     <a class="btn btn-sm border-0" (click)="$event.stopPropagation();openComposition(composition)">
-      <i class="fa-solid fa-map fa-primary"></i><span class="ms-1">{{'COMMON.open' |
+      <i class="fa-solid fa-map icon-primary"></i><span class="ms-1">{{'COMMON.open' |
     translateHs }}</span>
   </a>
   <a class="btn btn-sm border-0" (click)="$event.stopPropagation();detailComposition(composition)">
-    <i class="fa-solid fa-circle-info fa-primary"></i><span class="ms-1">{{'COMMON.metadata' |
+    <i class="fa-solid fa-circle-info icon-primary"></i><span class="ms-1">{{'COMMON.metadata' |
   translateHs }}</span>
 </a>
 <a class="btn btn-sm border-0" (click)="$event.stopPropagation();shareComposition(composition)">
-  <i class="fa-solid fa-share-nodes fa-primary"></i><span class="ms-1">{{'COMMON.share' |
+  <i class="fa-solid fa-share-nodes icon-primary"></i><span class="ms-1">{{'COMMON.share' |
 translateHs }}</span>
 </a>
 @if (composition.endpoint?.authenticated) {
   <a class="btn btn-sm border-0" (click)="$event.stopPropagation();showPermissions(composition)"
     data-toggle="tooltip" data-placement="bottom"
     [title]="composition.editable ? '' : 'COMPOSITIONS.notAllowedToEditLayer' | translateHs ">
-    <i class="fa-solid fa-lock fa-primary" [ngClass]="{'text-muted': !composition.editable}"
+    <i class="fa-solid fa-lock icon-primary" [ngClass]="{'text-muted': !composition.editable}"
     [ngStyle]="{'cursor' : composition.editable ? 'pointer' : 'default'}"></i><span
     [hidden]="!composition.editable" class="ms-1">{{'COMMON.setPermissions' |
   translateHs }}</span>
@@ -26,7 +26,7 @@
 <a class="btn btn-sm border-0" (click)="$event.stopPropagation();confirmDelete(composition)"
   data-toggle="tooltip" data-placement="bottom"
   [title]="composition.editable ? '' : 'COMPOSITIONS.notAllowedToEditLayer' | translateHs ">
-  <i class="fa-solid fa-trash fa-primary" [ngClass]="{'text-muted': !composition.editable}"
+  <i class="fa-solid fa-trash icon-primary" [ngClass]="{'text-muted': !composition.editable}"
   [ngStyle]="{'cursor' : composition.editable ? 'pointer' : 'default'}"></i><span
   [hidden]="!composition.editable" class="ms-1">{{'COMMON.delete' |
 translateHs }}</span>
diff --git a/projects/hslayers/components/compositions/compositions.component.html b/projects/hslayers/components/compositions/compositions.component.html
index 83cb640822..fe086075fc 100644
--- a/projects/hslayers/components/compositions/compositions.component.html
+++ b/projects/hslayers/components/compositions/compositions.component.html
@@ -36,7 +36,7 @@
               name="search" [(ngModel)]="hsCompositionsCatalogueService.data.query.title"
               (ngModelChange)="loadFilteredCompositions()">
             <button class="input-group-text text-secondary border-start-0" (click)="loadFilteredCompositions()">
-              <i class="fa-solid fa-magnifying-glass fa-primary"></i>
+              <i class="fa-solid fa-magnifying-glass icon-primary"></i>
             </button>
           </div>
           <hs-layman-current-user [endpoint]="ctx.layman"><!-- TODO: Remove function call from template -->