diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
index 265d98c17..838bc3e28 100644
--- a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
@@ -20,5 +20,10 @@ export function MaterialIcon({
   ...props
 }: MaterialIconProps) {
   const classNames = iconVariants({ className, color })
-  return <MaterialSymbol className={classNames} {...props} fill={isFilled} />
+  return (
+    // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
+    <span>
+      <MaterialSymbol className={classNames} {...props} fill={isFilled} />
+    </span>
+  )
 }
diff --git a/packages/design-system/lib/components/Icons/icon.module.css b/packages/design-system/lib/components/Icons/icon.module.css
index fcccd83c6..8165bd79f 100644
--- a/packages/design-system/lib/components/Icons/icon.module.css
+++ b/packages/design-system/lib/components/Icons/icon.module.css
@@ -1,5 +1,6 @@
 .icon {
   margin: 0;
+  vertical-align: middle;
 }
 
 /* Icon */