diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index 1f84016877..4746ca25c9 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -59,6 +59,11 @@
   height: 24px;
 }
 
+.icon-size-28 {
+  width: 28px;
+  height: 28px;
+}
+
 .icon-size-32 {
   width: 32px;
   height: 32px;
diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
index 670e87510c..9282f90273 100644
--- a/web/src/assets/styles/variables.scss
+++ b/web/src/assets/styles/variables.scss
@@ -60,7 +60,7 @@
   --gradient-border-start-color: var(--color-gray);
   --gradient-border-end-color: transparent;
 
-  --icon-size-m: 32px;
+  --icon-size-m: 28px;
 
   --header-block-size: auto;
   --footer-block-size: auto;
diff --git a/web/src/components/core/Page.jsx b/web/src/components/core/Page.jsx
index 227182e70e..a9c0a2ece2 100644
--- a/web/src/components/core/Page.jsx
+++ b/web/src/components/core/Page.jsx
@@ -87,7 +87,7 @@ export default function Page({
   return (
     <>
       { title && <Title>{title}</Title> }
-      { icon && <PageIcon><Icon name={icon} /></PageIcon> }
+      { icon && <PageIcon><Icon name={icon} size="32" /></PageIcon> }
       <MainActions>
         { action ||
           <Button size="lg" variant={actionVariant} onClick={pageAction}>
diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index afa24592ed..25197dbf90 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -150,7 +150,7 @@ const icons = {
  * @param {object} [props.otherProps] Other props sent to SVG icon.
  *
  */
-export default function Icon({ name, className = "", size = 32, ...otherProps }) {
+export default function Icon({ name, className = "", size = 28, ...otherProps }) {
   if (!name) {
     console.error(`Icon called without name. '${name}' given instead. Rendering nothing.`);
     return null;