diff --git a/client/src/components/Alert.constants.ts b/client/src/components/Alert.constants.ts
new file mode 100644
index 000000000..41c7437f0
--- /dev/null
+++ b/client/src/components/Alert.constants.ts
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const ALERT_ICON_SIZE = 32;
diff --git a/client/src/components/Alert.jsx b/client/src/components/Alert.jsx
index 1c3bbbc2d..bff24ce5e 100644
--- a/client/src/components/Alert.jsx
+++ b/client/src/components/Alert.jsx
@@ -24,13 +24,14 @@
 import cx from "classnames";
 import { Component } from "react";
 import { Alert } from "reactstrap";
-
 import {
-  CheckCircleFill,
-  ExclamationTriangleFill,
-  InfoCircleFill,
+  CheckCircle,
+  ExclamationTriangle,
+  InfoCircle,
 } from "react-bootstrap-icons";
 
+import { ALERT_ICON_SIZE } from "./Alert.constants";
+
 /**
  * Display a alert that can be dismissed.
  *
@@ -85,10 +86,10 @@ class RenkuAlert extends Component {
 
   getIcon() {
     const icon = {
-      danger: <ExclamationTriangleFill className={cx("bi", "text-danger")} />,
-      info: <InfoCircleFill className={cx("bi", "text-info")} />,
-      warning: <ExclamationTriangleFill className={cx("bi", "text-warning")} />,
-      success: <CheckCircleFill className={cx("bi", "text-success")} />,
+      danger: <ExclamationTriangle size={ALERT_ICON_SIZE} />,
+      info: <InfoCircle size={ALERT_ICON_SIZE} />,
+      warning: <ExclamationTriangle size={ALERT_ICON_SIZE} />,
+      success: <CheckCircle size={ALERT_ICON_SIZE} />,
     }[this.props.color];
 
     return icon;
@@ -108,7 +109,7 @@ class RenkuAlert extends Component {
         data-cy={this.props.dataCy}
       >
         <div className={cx("d-flex", "gap-3")}>
-          <div className={cx("fs-1", "my-auto")}>{alertIcon}</div>
+          <div>{alertIcon}</div>
           <div className={cx("my-auto", "overflow-auto", "w-100")}>
             {this.props.children}
           </div>