diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
index c55bd8be43..a3dbe9dfcd 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
@@ -33,9 +33,7 @@ function AnnouncementBar(): JSX.Element | null {
       role="banner">
       {isCloseable && <div className={styles.announcementBarPlaceholder} />}
       <div
-        className={clsx(styles.announcementBarContent, {
-          [styles.announcementBarCloseable]: isCloseable,
-        })}
+        className={styles.announcementBarContent}
         // Developer provided the HTML, so assume it's safe.
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{__html: content}}
@@ -50,7 +48,9 @@ function AnnouncementBar(): JSX.Element | null {
             message: 'Close',
             description: 'The ARIA label for close button of announcement bar',
           })}>
-          <span aria-hidden="true">×</span>
+          <svg width="14" height="14" viewBox="0 0 24 24">
+            <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
+          </svg>
         </button>
       ) : null}
     </div>
diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
index 406926f048..41a1528cd7 100644
--- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
@@ -28,11 +28,9 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
 
 .announcementBarClose {
   flex: 0 0 30px;
-}
-
-.announcementBarClose {
   align-self: stretch;
   padding: 0;
+  line-height: 0;
 }
 
 .announcementBarContent {