fix: use 20x20 icons on smaller breakpoints

frontend/src/assets/styles/global.scss

@@ -1414,6 +1414,12 @@ Useful for scrolling to the *start* of an HTML element without having it covered
     gap: 0;
   }
 
+  .heading-buttons cds-button svg {
+    // allows icons to render at their full size.
+    block-size: auto;
+    inline-size: auto;
+  }
+
   cds-header-name::part(link) {
     gap: min(1rem, var(--cds-header-name-link-gap));
   }

frontend/src/components/MainHeaderComponent.vue

@@ -18,8 +18,12 @@ import { CONFIRMATION_ROUTE_NAME } from "@/routes";
 // @ts-ignore
 import Logout16 from "@carbon/icons-vue/es/logout/16";
 // @ts-ignore
+import Logout20 from "@carbon/icons-vue/es/logout/20";
+// @ts-ignore
 import Help16 from "@carbon/icons-vue/es/help/16";
 // @ts-ignore
+import Help20 from "@carbon/icons-vue/es/help/20";
+// @ts-ignore
 import Avatar16 from "@carbon/icons-vue/es/user--avatar/24";
 // @ts-ignore
 import Result16 from "@carbon/icons-vue/es/result/16";
@@ -143,8 +147,13 @@ const logoutBtnKind = computed(() =>
       :size="headerBarButtonsSize"
       @click.prevent="helpModalActive = true"
     >
-      <span v-if="!isSmallScreen && !isMediumScreen">Help with application</span>
-      <Help16 slot="icon" />
+      <template v-if="!isSmallScreen && !isMediumScreen">
+        <span>Help with application</span>
+        <Help16 slot="icon" />
+      </template>
+      <template v-else>
+        <Help20 slot="icon" />
+      </template>
     </cds-button>
 
     <cds-button    
@@ -154,8 +163,13 @@ const logoutBtnKind = computed(() =>
       :size="headerBarButtonsSize"
       @click.prevent="onClickLogout"
     >
-      <span v-if="!isSmallScreen && !isMediumScreen">Logout</span>
-      <Logout16 slot="icon" />
+      <template v-if="!isSmallScreen && !isMediumScreen">
+        <span>Logout</span>
+        <Logout16 slot="icon" />
+      </template>
+      <template v-else>
+        <Logout20 slot="icon" />
+      </template>
     </cds-button>
     </div>