diff --git a/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx b/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
index fc67512b3..bb09f6f07 100644
--- a/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
@@ -41,7 +41,11 @@ export default function Alert({
     <section className={classNames} role={ariaRole} aria-live={ariaLive}>
       <div className={styles.content}>
         <span className={styles.iconWrapper}>
-          <IconByAlertType alertType={type} className={styles.icon} />
+          <IconByAlertType
+            alertType={type}
+            className={styles.icon}
+            variant={variant}
+          />
         </span>
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>
diff --git a/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx b/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
index c58aa5f6c..bf96fb4f8 100644
--- a/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
@@ -4,25 +4,35 @@ import {
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { AlertTypeEnum } from "@/types/enums/alert"
+import type { AlertProps } from "./alert"
 
 interface IconByAlertProps {
   alertType: AlertTypeEnum
+  variant?: AlertProps["variant"]
 }
 
 export function IconByAlertType({
   alertType,
+  variant = "inline",
   ...props
 }: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
   switch (alertType) {
     case AlertTypeEnum.Alarm:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="cancel" {...props} />
+        <MaterialIcon
+          color={variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Error"}
+          isFilled
+          icon="error"
+          {...props}
+        />
       )
     case AlertTypeEnum.Warning:
       return (
         <MaterialIcon
           icon="warning"
-          color="Icon/Inverted"
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Warning"
+          }
           isFilled
           {...props}
         />
@@ -30,7 +40,14 @@ export function IconByAlertType({
     case AlertTypeEnum.Info:
     default:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+        <MaterialIcon
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Information"
+          }
+          isFilled
+          icon="info"
+          {...props}
+        />
       )
   }
 }