diff --git a/app/assets/stylesheets/components/_alert-icon.scss b/app/assets/stylesheets/components/_alert-icon.scss
index bcf0023df12..49f7d41275c 100644
--- a/app/assets/stylesheets/components/_alert-icon.scss
+++ b/app/assets/stylesheets/components/_alert-icon.scss
@@ -22,3 +22,9 @@
     background-image: url('status/personal-key.svg');
   }
 }
+.alert-icon--centered-top {
+  position: absolute;
+  left: 50%;
+  top: 0px;
+  transform: translateX(-50%) translateY(-50%);
+}
diff --git a/app/views/account_reset/confirm_delete_account/show.html.erb b/app/views/account_reset/confirm_delete_account/show.html.erb
index 4c70af1a123..e37d4f48331 100644
--- a/app/views/account_reset/confirm_delete_account/show.html.erb
+++ b/app/views/account_reset/confirm_delete_account/show.html.erb
@@ -2,7 +2,7 @@
 <div class="margin-y-2 padding-y-6 padding-x-4 tablet:padding-x-6 border border-error rounded-xl position-relative">
   <%= render AlertIconComponent.new(
         icon_name: :delete,
-        class: 'pin-top pin-x margin-top-neg-5 margin-x-auto',
+        class: 'alert-icon--centered-top',
       ) %>
   <%= render PageHeadingComponent.new.with_content(t('account_reset.confirm_delete_account.title')) %>
   <p><%= t('account_reset.confirm_delete_account.info_html', email: email) %></p>