diff --git a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap
index ccfe1176ac..2e8e68dfae 100644
--- a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap
+++ b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap
@@ -50,13 +50,22 @@ exports[`AlertBanner should render correctly with props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -64,10 +73,10 @@ exports[`AlertBanner should render correctly with props 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -98,13 +107,22 @@ exports[`AlertBanner should render correctly without props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -112,10 +130,10 @@ exports[`AlertBanner should render correctly without props 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -229,13 +247,22 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -243,10 +270,10 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -321,13 +348,22 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -335,10 +371,10 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -409,13 +445,22 @@ exports[`AlertBanner should render with correctly with text and link 2`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -423,10 +468,10 @@ exports[`AlertBanner should render with correctly with text and link 2`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
diff --git a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/alertBanner-snapshot-tests.test.js.snap b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/alertBanner-snapshot-tests.test.js.snap
index a929e51b5f..c2de5ce52a 100644
--- a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/alertBanner-snapshot-tests.test.js.snap
+++ b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/alertBanner-snapshot-tests.test.js.snap
@@ -17,13 +17,22 @@ exports[`AlertBanner should render correctly with background color 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -31,10 +40,10 @@ exports[`AlertBanner should render correctly with background color 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -81,13 +90,22 @@ exports[`AlertBanner should render correctly without props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -95,10 +113,10 @@ exports[`AlertBanner should render correctly without props 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -212,13 +230,22 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -226,10 +253,10 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -300,13 +327,22 @@ exports[`AlertBanner should render with correctly with text and button 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -314,10 +350,10 @@ exports[`AlertBanner should render with correctly with text and button 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -392,13 +428,22 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -406,10 +451,10 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"
@@ -457,13 +502,22 @@ exports[`AlertBanner shuold render correctly with props 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-label="Close"
-      className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor"
+      className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding"
       data-testid="alert-banner-close-button"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "height": "32px",
+          "justifyContent": "center",
+          "padding": 0,
+          "width": "32px",
+        }
+      }
       type="button"
     >
       <svg
@@ -471,10 +525,10 @@ exports[`AlertBanner shuold render correctly with props 1`] = `
         className="icon noFocusStyle"
         data-testid="icon"
         fill="currentColor"
-        height="20px"
+        height="20"
         onClick={[Function]}
         viewBox="0 0 20 20"
-        width="20px"
+        width="20"
       >
         <path
           clipRule="evenodd"