diff --git a/packages/banner/src/Banner.tsx b/packages/banner/src/Banner.tsx
index cc1c7b3c5..704d8af94 100644
--- a/packages/banner/src/Banner.tsx
+++ b/packages/banner/src/Banner.tsx
@@ -4,6 +4,7 @@ import { Size } from '@tablecheck/tablekit-theme';
 
 import {
   adjustedIconSizes,
+  AlertIconWrapper,
   AlertIcon,
   BannerContainer,
   BannerMessageContainer,
@@ -31,11 +32,13 @@ export const Banner = ({
     >
       <BannerMessageContainer>
         {displayedIcon && (
-          <AlertIcon
-            className="bannerIcon"
-            icon={displayedIcon}
-            size={adjustedIconSizes[size]}
-          />
+          <AlertIconWrapper size={size}>
+            <AlertIcon
+              className="bannerIcon"
+              icon={displayedIcon}
+              size={adjustedIconSizes[size]}
+            />
+          </AlertIconWrapper>
         )}
         <div>{message}</div>
       </BannerMessageContainer>
diff --git a/packages/banner/src/__tests__/__snapshots__/index.tsx.snap b/packages/banner/src/__tests__/__snapshots__/index.tsx.snap
index 0a7ea75bd..e946f0f96 100644
--- a/packages/banner/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/banner/src/__tests__/__snapshots__/index.tsx.snap
@@ -42,6 +42,18 @@ exports[`Banner should allow passing of custom className 1`] = `
 }
 
 .emotion-4 {
+  height: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-6 {
   margin-right: 8px;
 }
 
@@ -64,20 +76,30 @@ exports[`Banner should allow passing of custom className 1`] = `
         <div
           className="emotion-2 emotion-3"
         >
-          <AlertIcon
-            className="bannerIcon"
-            icon="fas-info-circle"
-            size="regular2"
+          <AlertIconWrapper
+            size="regular"
           >
             <Noop />
-            <Icon
-              className="bannerIcon emotion-4 emotion-5"
-              icon="fas-info-circle"
-              size="regular2"
+            <span
+              className="emotion-4 emotion-5"
+              size="regular"
             >
-              icon-info-circle
-            </Icon>
-          </AlertIcon>
+              <AlertIcon
+                className="bannerIcon"
+                icon="fas-info-circle"
+                size="regular2"
+              >
+                <Noop />
+                <Icon
+                  className="bannerIcon emotion-6 emotion-7"
+                  icon="fas-info-circle"
+                  size="regular2"
+                >
+                  icon-info-circle
+                </Icon>
+              </AlertIcon>
+            </span>
+          </AlertIconWrapper>
           <div>
             Test
           </div>
@@ -130,6 +152,18 @@ exports[`Banner should correctly apply styling 1`] = `
 }
 
 .emotion-4 {
+  height: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-6 {
   margin-right: 8px;
 }
 
@@ -150,20 +184,30 @@ exports[`Banner should correctly apply styling 1`] = `
         <div
           className="emotion-2 emotion-3"
         >
-          <AlertIcon
-            className="bannerIcon"
-            icon="fas-info-circle"
-            size="regular2"
+          <AlertIconWrapper
+            size="regular"
           >
             <Noop />
-            <Icon
-              className="bannerIcon emotion-4 emotion-5"
-              icon="fas-info-circle"
-              size="regular2"
+            <span
+              className="emotion-4 emotion-5"
+              size="regular"
             >
-              icon-info-circle
-            </Icon>
-          </AlertIcon>
+              <AlertIcon
+                className="bannerIcon"
+                icon="fas-info-circle"
+                size="regular2"
+              >
+                <Noop />
+                <Icon
+                  className="bannerIcon emotion-6 emotion-7"
+                  icon="fas-info-circle"
+                  size="regular2"
+                >
+                  icon-info-circle
+                </Icon>
+              </AlertIcon>
+            </span>
+          </AlertIconWrapper>
           <div>
             Test
           </div>
diff --git a/packages/banner/src/styled.ts b/packages/banner/src/styled.ts
index 94dfdf9bc..264fd3187 100644
--- a/packages/banner/src/styled.ts
+++ b/packages/banner/src/styled.ts
@@ -11,7 +11,7 @@ import { getThemeValue } from '@tablecheck/tablekit-utils';
 import type { ThemeOnlyProps } from '@tablecheck/tablekit-utils';
 
 import { bannerClassicTheme, bannerThemeNamespace } from './themes';
-import { Appearance, BannerProps } from './types';
+import { Appearance, BannerProps, BannerSizes } from './types';
 
 const sizedTypography = {
   [Size.Small]: Typography.Heading4,
@@ -73,6 +73,14 @@ export const BannerMessageContainer = styled.div`
   }
 `;
 
+export const AlertIconWrapper = styled.span<{
+  size: BannerSizes;
+}>`
+  height: ${({ size }) => `${sizedTypography[size].lineHeight}`};
+  display: flex;
+  align-items: center;
+`;
+
 export const AlertIcon = styled(Icon)`
   margin-right: ${Spacing.L2};
 `;