diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f000c081..8138cfda0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc
# Next
- [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
+- [Fix] The center alignment between the `Alert` component's icon and message is now more accurate when the message is only one-line long.
# v26.0.0
diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css
index d5b95121a..926df0f82 100644
--- a/src/alert/alert.module.css
+++ b/src/alert/alert.module.css
@@ -3,8 +3,15 @@
border-width: 1px;
color: var(--reactist-content-primary);
padding: var(--reactist-spacing-small);
+}
+
+.content {
/* this is to make sure it always has the same minimum height, whether it has a close button or not */
- min-height: calc(2 * var(--reactist-spacing-small) + var(--reactist-button-small-height) + 2px);
+ min-height: var(--reactist-button-small-height);
+}
+
+.icon {
+ display: block;
}
.tone-info {
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index ccd00f5ef..bce2f8fc3 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { getClassNames } from '../utils/responsive-props'
import { Box } from '../box'
-import { Button } from '../button'
+import { IconButton } from '../button'
import { Columns, Column } from '../columns'
import { AlertIcon } from '../icons/alert-icon'
@@ -41,13 +41,16 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
{children}
{onClose != null && closeLabel != null ? (
-