swisspost · alionazherdetska · Oct 28, 2025 · Sep 12, 2025 · Sep 13, 2025 · Sep 13, 2025
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Replaced `Post Icons` with their corresponding `UI Icon` equivalents across the package to align icon usage with the current design guidelines.
@@ -49,7 +49,7 @@ describe('accordion', () => {
         cy.get('@collapsibles').each(($item) => {
           cy.wrap($item)
             .shadow()
-            .find('post-icon[name="2051"]')
+            .find('post-icon[name="chevrondown"]')
             .should('exist');
         });
       });

@@ -96,7 +96,7 @@ export class PostAccordionItem {
                   <slot name="logo" onSlotchange={this.onSlotLogoChange.bind(this)}></slot>
                 </span>
                 <slot name="header" />
-                <post-icon name="2051"></post-icon>
+                <post-icon name="chevrondown"></post-icon>
               </button>
             </HeadingTag>
           </post-collapsible-trigger>

@@ -118,7 +118,7 @@ export class PostBackToTop {
           tabindex={this.belowFold ? '0' : '-1'}
           onClick={this.scrollToTop}
         >
-          <post-icon aria-hidden="true" name="3026"></post-icon>
+          <post-icon aria-hidden="true" name="arrowup"></post-icon>
           <span class="visually-hidden">{this.label}</span>
         </button>
       </Host>

@@ -64,7 +64,7 @@ export class PostBreadcrumbItem {
 
     return (
       <Host data-version={version}>
-        <post-icon name="2111" class="breadcrumb-item-icon" />
+        <post-icon name="chevronright" class="breadcrumb-item-icon" />
         <BreadcrumbTag
           class="breadcrumb-item"
           {...(this.validUrl ? { href: this.validUrl } : {})}

@@ -160,7 +160,7 @@ export class PostBreadcrumbs {
                   }
                 }}
               >
-                <post-icon name="2111" class="breadcrumb-item-icon" />
+                <post-icon name="chevronright" class="breadcrumb-item-icon" />
                 <div class="actual-menu">
                   <post-menu-trigger for="breadcrumb-menu" tabIndex={0}>
                     <button class="btn test" tabIndex={-1}>

@@ -10,7 +10,7 @@
 @use '@swisspost/design-system-styles/variables/elevation';
 @use '@swisspost/design-system-styles/variables/color';
 
-@include icons.custom-property('2113');
+@include icons.custom-property('chevrondown');
 
 post-mainnavigation {
   // reset links and buttons
@@ -49,7 +49,7 @@ post-mainnavigation {
   post-megadropdown-trigger button {
     &::after {
       content: '';
-      @include icons.mask-image(2113);
+      @include icons.mask-image('chevrondown');
       height: 24px;
       width: 24px;
     }

@@ -169,8 +169,8 @@ export class PostRating {
               onMouseEnter={e => this.hoverHandler(i, e)}
               onMouseLeave={e => this.hoverHandler(i, e)}
             >
-              <post-icon name="2062" class="stroke"></post-icon>
-              <post-icon name="2574" class="fill"></post-icon>
+              <post-icon name="favoritestar" class="stroke"></post-icon>
+              <post-icon name="favoritestar-solid" class="fill"></post-icon>
             </div>
           ))}
         </div>

@@ -2,7 +2,19 @@
 
 // Load all icon CSS files used in this component
 @include post.custom-property(
-  ('2040', '2015', '2113', '2060', '2127', '2112', '3026', '3022', '3035', '2043', '2070')
+  (
+    'plus',
+    'trash',
+    'chevrondown',
+    'filter',
+    'updown',
+    'chevronup',
+    'arrowup',
+    'arrowdown',
+    'checkmark',
+    'closex',
+    'burger'
+  )
 );
 
 @mixin custom-icon($icon) {
@@ -18,49 +30,49 @@
 }
 
 plusicon {
-  @include custom-icon(2040);
+  @include custom-icon('plus');
 }
 
 trashicon {
-  @include custom-icon(2015);
+  @include custom-icon('trash');
 }
 
 chevrondownicon {
-  @include custom-icon(2113);
+  @include custom-icon('chevrondown');
 }
 
 filtericon {
-  @include custom-icon(2060);
+  @include custom-icon('filter');
 }
 
 sortalticon {
-  @include custom-icon(2127);
+  @include custom-icon('updown');
 }
 
 sortamountupalticon {
-  @include custom-icon(2112);
+  @include custom-icon('chevronup');
 }
 
 sortamountdownicon {
-  @include custom-icon(2113);
+  @include custom-icon('chevrondown');
 }
 
 arrowupicon {
-  @include custom-icon(3026);
+  @include custom-icon('arrowup');
 }
 
 arrowdownicon {
-  @include custom-icon(3022);
+  @include custom-icon('arrowdown');
 }
 
 checkicon {
-  @include custom-icon(3035);
+  @include custom-icon('checkmark');
 }
 
 timesicon {
-  @include custom-icon(2043);
+  @include custom-icon('closex');
 }
 
 .p-datatable-reorderablerow-handle {
-  @include custom-icon(2070);
+  @include custom-icon('burger');
 }
@@ -10,7 +10,7 @@
 
 tokens.$default-map: components.$post-cards;
 
-@include icons-mx.custom-property(3020);
+@include icons-mx.custom-property('arrowright');
 
 .card {
   display: flex;
@@ -104,7 +104,7 @@ tokens.$default-map: components.$post-cards;
     -ms-flex-align: center;
 
     &::before {
-      @include icons-mx.mask-image(3020);
+      @include icons-mx.mask-image('arrowright');
       content: '';
       display: inline-block;
       width: icons.$icon-size-default;

@@ -6,7 +6,7 @@
 
 tokens.$default-map: components.$post-listcheck;
 
-@include icons-mx.custom-property('3035');
+@include icons-mx.custom-property('checkmark');
 
 ul.list-check {
   @include utilities.reset-list;
@@ -70,7 +70,7 @@ ul.list-check {
       width: tokens.get('list-check-sizing-icon');
       height: tokens.get('list-check-sizing-icon');
       content: '';
-      @include icons-mx.mask-image('3035');
+      @include icons-mx.mask-image('checkmark');
       color: tokens.get('list-check-color-icon-fg');
 
       @include media.max(sm) {

@@ -12,7 +12,7 @@
 
 tokens.$default-map: utilities.$post-spacing;
 
-@include icons-mx.custom-property(2105);
+@include icons-mx.custom-property('checkmark');
 
 // for backward compatibility
 .stepper-container {
@@ -174,7 +174,7 @@ tokens.$default-map: utilities.$post-spacing;
 
 // check icon
 .stepper-link::after {
-  @include icons-mx.mask-image(2105);
+  @include icons-mx.mask-image('checkmark');
   display: block;
   position: absolute;
   top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);

@@ -29,19 +29,3 @@
     }
   }
 }
-
-// DEPRECATED
-@mixin hover-animation-svg-icon($color, $icon-name, $stroke-width: null) {
-  &:not(:disabled):not(.disabled) > span {
-    &::after {
-      @if ($stroke-width == null) {
-        $icon: icons.get-colored-svg-url($icon-name, $color);
-        background-image: url('#{$icon}');
-      } @else {
-        $icon: icons.get-colored-svg-url($icon-name, $color);
-        $icon: icons.add-stroke-color($icon, $color, $stroke-width);
-        background-image: url('#{$icon}');
-      }
-    }
-  }
-}
@@ -2,8 +2,6 @@
 @use './../color';
 @use './../animation';
 
-@use './../../functions/icons' as icon-fn;
-
 @use '../../tokens/utilities';
 @use '../../functions/tokens';
 
@@ -19,7 +17,7 @@ $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
 $stepper-indicator-font-weight: type.$font-weight-bold;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$stepper-indicator-check-size: tokens.get('utility-gap-24');
+$stepper-indicator-check-icon-size: tokens.get('utility-gap-24');
 $stepper-indicator-transition:
   color animation.$transition-base-timing,
   background-color animation.$transition-base-timing;
@@ -29,9 +27,6 @@ $stepper-indicator-hover-bg: color.$black;
 
 $stepper-indicator-future-bg: color.$gray-60;
 $stepper-indicator-future-color: color.$white;
-$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url('2105', $stepper-indicator-color);
-$stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}');
-$stepper-indicator-check-icon-size: $stepper-indicator-check-size;
 
 $stepper-link-line-height: type.$line-height-sm;
 $stepper-link-gap: tokens.get('utility-gap-8');

@@ -13,14 +13,6 @@ $expected-add-fill-color-output: "data:image/svg+xml,%3Csvg xmlns='http://www.w3
   $expected-add-fill-color-output
 );
 
-$expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-width='2px' stroke='%23ffffff' opacity='1' fill='%23000000' d='M32 14 19.8 1.7l-.4-.4-18 18 .4.4L6 24H0v5.3h11.3L10 28H1.3v-2.7h6L14 32l2.6-2.6H32V24H22zM18.5 4.1l.3 13.2c0 .4-.1.7-.4 1s-.6.4-1 .4h-.1l-13.2-.2zM14.9 20h2.4c1.5 0 2.8-1.3 2.7-2.9l-.1-3 9.5.3-14.2 14.5zm14.5-6.7-9.4-.4-.2-9.3zM13.6 20l.3 10.1L3.7 19.8zm17.1 5.4V28H18l2.7-2.7h10z'/%3E%3C/svg%3E";
-
-// add-stroke-color
-@include jest.equal(
-  icons.add-stroke-color(icons.get-colored-svg-url('1000', #000), #fff, 2px),
-  $expected-add-stroke-color-output
-);
-
 // get-colored-svg-url
 .test {
   @each $name, $path in icon-vars.$svg-icon-map {

@@ -2,5 +2,4 @@
 
 body {
   @include animation.hover-animation(10px, 500px, 500px);
-  @include animation.hover-animation-svg-icon(red, 2021);
 }
@@ -3,7 +3,6 @@
 
 body {
   @include mixins.hover-animation(10px, 500px, 500px);
-  @include mixins.hover-animation-svg-icon(red, 2021);
   @include mixins.focus-outline();
 
   @include mixins.font-smoothing();
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,5 +2,4 @@ @@
     body {
       @include animation.hover-animation(10px, 500px, 500px);
-      @include animation.hover-animation-svg-icon(red, 2021);
     }