diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 856c06a..c6edbef 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -32,10 +32,7 @@
       @if (headerConfig().showSearch) {
       <div class="platform-search-wrapper">
         <div class="platform-search-box">
-          <svg class="platform-search-icon" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#576463" />
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#576463" />
-          </svg>
+          <app-icon name="search" [size]="20" class="platform-search-icon" />
           <input type="text" [placeholder]="'header.searchPlaceholder' | translate" class="platform-search-input" (click)="navigateToSearch()" readonly />
         </div>
       </div>
@@ -44,10 +41,7 @@
       <!-- Search Icon (mobile only) -->
       @if (headerConfig().showSearch) {
       <button class="platform-search-mobile" (click)="navigateToSearch()" [attr.aria-label]="'header.search' | translate">
-        <svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#1e3c38" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#1e3c38" />
-        </svg>
+        <app-icon name="search" [size]="18" />
       </button>
       }
 
@@ -55,7 +49,7 @@
       <div class="platform-actions">
         @if (headerConfig().showWishlist && features().wishlist && userExperienceConfig().wishlist.enabled) {
           <button type="button" class="platform-ux-btn" (click)="navigateToWishlist()" [attr.aria-label]="'header.wishlist' | translate">
-            <span class="platform-ux-icon">♥</span>
+            <app-icon name="heart" [size]="16" class="platform-ux-icon" />
             @if (userExperienceConfig().wishlist.headerBadgeEnabled && wishlistCount() > 0) {
               <span class="platform-ux-badge">{{ wishlistCount() }}</span>
             }
@@ -64,7 +58,7 @@
 
         @if (headerConfig().showCompare && features().compare && userExperienceConfig().compare.enabled) {
           <button type="button" class="platform-ux-btn" (click)="navigateToCompare()" [attr.aria-label]="'header.compare' | translate">
-            <span class="platform-ux-icon">⇄</span>
+            <app-icon name="scale" [size]="16" class="platform-ux-icon" />
             @if (compareCount() > 0) {
               <span class="platform-ux-badge">{{ compareCount() }}</span>
             }
@@ -75,11 +69,7 @@
         @if (headerConfig().showCart) {
         <a [routerLink]="'/cart' | langRoute" routerLinkActive="platform-cart-active" class="platform-cart-btn" (click)="closeMenu()">
           <span class="platform-cart-icon">
-            <svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" />
-              <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
-              <path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
-            </svg>
+            <app-icon name="cart" [size]="24" />
             @if (cartItemCount() > 0) {
               <span class="platform-cart-badge">{{ cartItemCount() }}</span>
             }
@@ -123,33 +113,23 @@
   <div class="platform-mobile-menu" [class.platform-mobile-menu-open]="menuOpen">
       <a [routerLink]="'/' | langRoute" routerLinkActive="platform-mobile-active" [routerLinkActiveOptions]="{exact: true}" 
          (click)="closeMenu()" class="platform-mobile-item">
-        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
-          <path d="M16.185 2.22124C15.8067 1.84292 15.1933 1.84292 14.815 2.22124L3.18999 13.8462C3.00831 14.0279 2.90625 14.2743 2.90625 14.5312V28.0938C2.90625 28.6288 3.33997 29.0625 3.875 29.0625H12.5938C13.1288 29.0625 13.5625 28.6288 13.5625 28.0938V20.3438H17.4375V28.0938C17.4375 28.6288 17.8712 29.0625 18.4062 29.0625H27.125C27.66 29.0625 28.0938 28.6288 28.0938 28.0938V14.5312C28.0938 14.2743 27.9917 14.0279 27.81 13.8462L25.1875 11.2237V4.84375C25.1875 4.30872 24.7538 3.875 24.2188 3.875H22.2812C21.7462 3.875 21.3125 4.30872 21.3125 4.84375V7.34873L16.185 2.22124ZM4.84375 27.125V14.9325L15.5 4.27627L26.1562 14.9325V27.125H19.375V19.375C19.375 18.84 18.9413 18.4062 18.4062 18.4062H12.5938C12.0587 18.4062 11.625 18.84 11.625 19.375V27.125H4.84375Z" fill="#497671" />
-        </svg>
+        <app-icon name="home" [size]="24" />
         <span>{{ 'header.home' | translate }}</span>
-        <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
-          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
       </a>
 
       @if (headerConfig().showCategories) {
       <button type="button" (click)="navigateToCatalog()" class="platform-mobile-item">
-        <svg width="24" height="24" viewBox="0 0 31 31" fill="none">
-          <path d="M1.9375 4.84375C1.9375 3.23867 3.23867 1.9375 4.84375 1.9375L10.6562 1.9375C12.2613 1.9375 13.5625 3.23867 13.5625 4.84375V10.6562C13.5625 12.2613 12.2613 13.5625 10.6562 13.5625H4.84375C3.23867 13.5625 1.9375 12.2613 1.9375 10.6562L1.9375 4.84375ZM4.84375 3.875C4.30872 3.875 3.875 4.30872 3.875 4.84375V10.6562C3.875 11.1913 4.30872 11.625 4.84375 11.625H10.6562C11.1913 11.625 11.625 11.1913 11.625 10.6562V4.84375C11.625 4.30872 11.1913 3.875 10.6562 3.875H4.84375ZM17.4375 4.84375C17.4375 3.23867 18.7387 1.9375 20.3438 1.9375L26.1562 1.9375C27.7613 1.9375 29.0625 3.23867 29.0625 4.84375V10.6562C29.0625 12.2613 27.7613 13.5625 26.1562 13.5625H20.3438C18.7387 13.5625 17.4375 12.2613 17.4375 10.6562V4.84375ZM20.3438 3.875C19.8087 3.875 19.375 4.30872 19.375 4.84375V10.6562C19.375 11.1913 19.8087 11.625 20.3438 11.625H26.1562C26.6913 11.625 27.125 11.1913 27.125 10.6562V4.84375C27.125 4.30872 26.6913 3.875 26.1562 3.875H20.3438ZM1.9375 20.3438C1.9375 18.7387 3.23867 17.4375 4.84375 17.4375H10.6562C12.2613 17.4375 13.5625 18.7387 13.5625 20.3438V26.1562C13.5625 27.7613 12.2613 29.0625 10.6562 29.0625H4.84375C3.23867 29.0625 1.9375 27.7613 1.9375 26.1562L1.9375 20.3438ZM4.84375 19.375C4.30872 19.375 3.875 19.8087 3.875 20.3438V26.1562C3.875 26.6913 4.30872 27.125 4.84375 27.125H10.6562C11.1913 27.125 11.625 26.6913 11.625 26.1562V20.3438C11.625 19.8087 11.1913 19.375 10.6562 19.375H4.84375ZM17.4375 20.3438C17.4375 18.7387 18.7387 17.4375 20.3438 17.4375H26.1562C27.7613 17.4375 29.0625 18.7387 29.0625 20.3438V26.1562C29.0625 27.7613 27.7613 29.0625 26.1562 29.0625H20.3438C18.7387 29.0625 17.4375 27.7613 17.4375 26.1562V20.3438ZM20.3438 19.375C19.8087 19.375 19.375 19.8087 19.375 20.3438V26.1562C19.375 26.6913 19.8087 27.125 20.3438 27.125H26.1562C26.6913 27.125 27.125 26.6913 27.125 26.1562V20.3438C27.125 19.8087 26.6913 19.375 26.1562 19.375H20.3438Z" fill="#497671" />
-        </svg>
+        <app-icon name="layoutGrid" [size]="24" />
         <span>{{ 'header.catalog' | translate }}</span>
-        <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
-          <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
       </button>
       }
 
       @for (page of headerPages(); track page.id) {
         <button type="button" (click)="navigateToStatic(page.route)" class="platform-mobile-item">
           <span>{{ page.title }}</span>
-          <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
-            <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
+          <app-icon name="chevronRight" [size]="16" class="platform-mobile-chevron" />
         </button>
       }
 
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 04089dd..93b06d4 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -299,20 +299,10 @@
     background: #497671;
     color: #ffffff;
     border-color: #497671;
-
-    svg path {
-      fill: #ffffff;
-    }
-
-    .platform-mobile-chevron path {
-      stroke: #ffffff;
-    }
   }
 
-  svg:first-child {
+  app-icon:first-child {
     flex-shrink: 0;
-    width: 24px;
-    height: 24px;
   }
 
   span {
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 16e9644..142f5ed 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -13,10 +13,11 @@ import { ConfigService } from '../../core/config/config.service';
 import { FeatureConfigService } from '../../core/config/feature-config.service';
 import { DEFAULT_HEADER_CONFIG, DEFAULT_USER_EXPERIENCE_CONFIG } from '../../shared/models/config';
 import { StaticPageResolverService } from '../../core/config/static-page-resolver.service';
+import { IconComponent } from '../../shared/ui/icon/icon.component';
 
 @Component({
   selector: 'app-header',
-  imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, RegionSelectorComponent, LangRoutePipe, TranslatePipe],
+  imports: [RouterLink, RouterLinkActive, LogoComponent, LanguageSelectorComponent, RegionSelectorComponent, LangRoutePipe, TranslatePipe, IconComponent],
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html
index b0d72f0..86ed5ff 100644
--- a/src/app/pages/search/search.component.html
+++ b/src/app/pages/search/search.component.html
@@ -11,12 +11,7 @@
         class="search-input"
         autofocus
       />
-      <span class="search-icon">
-        <svg width="22" height="22" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#697777" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#697777" />
-        </svg>
-      </span>
+      <app-icon name="search" [size]="20" class="search-icon" />
     </div>
   </div>
 
@@ -43,10 +38,7 @@
   @if (isQueryTooShort()) {
     <div class="empty-state">
       <div class="empty-state-icon">
-        <svg width="56" height="56" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#d3dad9" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#d3dad9" />
-        </svg>
+        <app-icon name="search" [size]="40" />
       </div>
       <p>{{ 'search.minLength' | translate:{ count: minSearchLength } }}</p>
     </div>
@@ -55,10 +47,7 @@
   @if (!loading() && searchQuery && !isQueryTooShort() && items().length === 0 && !error()) {
     <div class="no-results">
       <div class="no-results-icon">
-        <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#a1b4b5" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#a1b4b5" />
-        </svg>
+        <app-icon name="search" [size]="32" />
       </div>
       <h2>{{ 'search.noResults' | translate }}</h2>
       <p>{{ 'search.noResultsFor' | translate:{ query: searchQuery } }}</p>
@@ -108,10 +97,7 @@
   @if (!searchQuery) {
     <div class="empty-state">
       <div class="empty-state-icon">
-        <svg width="56" height="56" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#d3dad9" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#d3dad9" />
-        </svg>
+        <app-icon name="search" [size]="40" />
       </div>
       <p>{{ 'search.emptyState' | translate }}</p>
     </div>
diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss
index d78e539..d9bb107 100644
--- a/src/app/pages/search/search.component.scss
+++ b/src/app/pages/search/search.component.scss
@@ -44,6 +44,7 @@
     transform: translateY(-50%);
     display: flex;
     align-items: center;
+    color: #697777;
     pointer-events: none;
   }
 }
@@ -77,6 +78,7 @@
     background: #f5f3f9;
     border-radius: 50%;
     margin-bottom: 20px;
+    color: #d3dad9;
   }
 
   p {
@@ -102,6 +104,7 @@
     background: #f5f3f9;
     border-radius: 50%;
     margin-bottom: 20px;
+    color: #a1b4b5;
   }
 
   h2 {
diff --git a/src/app/pages/search/search.component.ts b/src/app/pages/search/search.component.ts
index adcd130..7ecdcf8 100644
--- a/src/app/pages/search/search.component.ts
+++ b/src/app/pages/search/search.component.ts
@@ -12,10 +12,11 @@ import { TranslateService } from '../../i18n/translate.service';
 import { SEARCH_DEBOUNCE_MS, ITEMS_PER_PAGE, SCROLL_THRESHOLD_PX, SCROLL_DEBOUNCE_MS } from '../../config/constants';
 import { ProductFacade } from '../../facades/platform/product.facade';
 import { ProductCardComponent } from '../../components/product-card/product-card.component';
+import { IconComponent } from '../../shared/ui/icon/icon.component';
 
 @Component({
   selector: 'app-search',
-  imports: [FormsModule, TranslatePipe, ProductCardComponent],
+  imports: [FormsModule, TranslatePipe, ProductCardComponent, IconComponent],
   templateUrl: './search.component.html',
   styleUrls: ['./search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush