From ed203649440cec81d10f0c0e730a59ffd66e06c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 15 May 2026 15:37:50 +0200
Subject: [PATCH 1/4] refactor(components): standardize icon alignment in
 buttons and update spacing guidelines, tokens update on some components

---
 .../skills/qovery-ui/references/components.md |  1 +
 .../qovery-ui/references/spacing-layout.md    |  9 +---
 .../cluster/$clusterId/settings/general.tsx   |  2 +-
 .../organization/$organizationId/clusters.tsx | 16 +++---
 .../$environmentId/overview/route.tsx         |  3 +-
 apps/console/src/routes/login/index.tsx       |  2 +-
 .../feature/src/lib/audit-logs/audit-logs.tsx |  4 +-
 .../src/lib/filter-section/filter-section.tsx | 15 ++++--
 .../cluster-scw-control-plane-feature.tsx     |  1 +
 .../cluster-access-modal.spec.tsx.snap        | 21 +++++---
 .../cluster-actions.spec.tsx.snap             | 18 +++----
 .../lib/cluster-actions/cluster-actions.tsx   |  6 +--
 .../cluster-card-feature.tsx                  |  2 +-
 .../__snapshots__/cluster-card.spec.tsx.snap  |  8 +--
 .../cluster-new/cluster-new.tsx               |  2 +-
 .../button-popover-subnets.tsx                |  2 +-
 .../step-summary-presentation.tsx             |  4 +-
 .../cluster-delete-modal.spec.tsx.snap        | 12 ++---
 .../cluster-installation-guide-modal.tsx      |  3 +-
 .../cluster-logs-list/cluster-logs-list.tsx   |  4 +-
 .../cluster-migration-modal.spec.tsx.snap     |  4 +-
 .../cluster-network-settings.tsx              |  6 +--
 .../cluster-resources-settings.tsx            |  5 +-
 .../__snapshots__/cluster-setup.spec.tsx.snap |  7 +--
 .../src/lib/cluster-setup/cluster-setup.tsx   |  2 +-
 .../gpu-resources-settings.tsx                |  3 +-
 .../scaleway-static-ip/scaleway-static-ip.tsx |  2 +-
 .../section-production-health.tsx             |  3 +-
 .../environment-stages/environment-stages.tsx |  6 +--
 .../list-pre-check-logs.tsx                   |  6 +--
 ...eate-clone-environment-modal.spec.tsx.snap |  4 +-
 .../environment-action-toolbar.spec.tsx.snap  | 12 ++---
 .../table-filter-trigger-by.tsx               |  4 +-
 .../environment-last-deployment-section.tsx   |  4 +-
 .../environment-section.tsx                   |  4 +-
 .../environments-table/environments-table.tsx |  3 +-
 .../terraform-export-modal.spec.tsx.snap      |  4 +-
 .../update-all-modal.spec.tsx.snap            |  6 +--
 .../alert-rules-action-bar.tsx                |  8 +--
 .../alert-rules-overview.tsx                  |  7 +--
 .../issue-overview/issue-overview.tsx         |  3 +-
 .../notification-channel-overview.tsx         | 16 +++---
 .../database-rds-dashboard.tsx                | 25 ++++++----
 .../select-time-range/select-time-range.tsx   |  2 +-
 .../src/lib/modal-chart/modal-chart.tsx       |  4 +-
 .../service-alerting/service-alerting.tsx     |  3 +-
 .../select-time-range/select-time-range.tsx   |  2 +-
 .../service-dashboard/service-dashboard.tsx   | 25 ++++++----
 .../lib/step-personalize/step-personalize.tsx | 11 +---
 .../feature/src/lib/step-plans/step-plans.tsx |  6 +--
 .../src/lib/step-project/step-project.tsx     | 11 +---
 ...annotation-create-edit-modal.spec.tsx.snap | 11 ++--
 .../annotation-create-edit-modal.tsx          |  2 +-
 .../git-repository-service-settings.tsx       |  2 +-
 .../git-repository-settings.tsx               |  4 +-
 .../git-token-list.spec.tsx.snap              | 12 ++---
 .../label-create-edit-modal.spec.tsx.snap     | 11 ++--
 .../label-create-edit-modal.tsx               |  2 +-
 .../settings-api-token/settings-api-token.tsx |  4 +-
 .../settings-argocd-integration.tsx           |  8 +--
 .../settings-billing-details.tsx              |  3 +-
 .../settings-billing-summary.tsx              |  4 +-
 .../settings-cloud-credentials.tsx            |  4 +-
 .../settings-container-registries.tsx         |  4 +-
 .../section-github-app/section-github-app.tsx |  3 +-
 .../settings-git-repository-access.tsx        |  4 +-
 .../settings-helm-repositories.tsx            |  4 +-
 .../settings-labels-annotations.tsx           |  4 +-
 .../row-member/row-member.tsx                 |  7 ++-
 .../lib/settings-members/settings-members.tsx |  4 +-
 .../src/lib/settings-roles/settings-roles.tsx |  4 +-
 .../lib/settings-webhook/settings-webhook.tsx |  4 +-
 .../deployment-rules/deployement-rules.tsx    |  5 +-
 .../src/lib/project-list/project-list.tsx     |  8 +--
 ...etworking-port-setting-modal.spec.tsx.snap |  8 +--
 ...s-override-arguments-setting.spec.tsx.snap | 23 +++++----
 .../values-override-arguments-setting.tsx     |  9 ++--
 ...alues-override-files-setting.spec.tsx.snap |  5 +-
 .../values-override-yaml-modal.spec.tsx.snap  |  4 +-
 .../dockerfile-settings.tsx                   |  2 +-
 .../deployment-logs-placeholder.tsx           |  6 +--
 .../src/lib/header-logs/header-logs.tsx       | 12 ++---
 .../list-deployment-logs.tsx                  |  9 ++--
 .../header-service-logs.tsx                   | 20 +++++---
 .../service-logs-placeholder.tsx              |  2 +-
 .../show-new-logs-button.tsx                  |  4 +-
 ...plication-container-port-settings-list.tsx |  2 +-
 ...application-container-storage-settings.tsx |  3 +-
 .../helm-networking-settings.tsx              |  4 +-
 ...rvice-deployment-restrictions-settings.tsx |  3 +-
 .../service-domain-settings.tsx               |  5 +-
 .../terraform-tfvars-popover.tsx              | 14 ++----
 ...file-fragment-inline-setting.spec.tsx.snap |  7 +--
 .../terraform-tfvars-popover.tsx              | 14 ++----
 .../terraform-variables-table.tsx             |  8 +--
 .../auto-deploy-badge/auto-deploy-badge.tsx   |  4 +-
 ...ation-cancel-lifecycle-modal.spec.tsx.snap |  4 +-
 .../force-unlock-modal.spec.tsx.snap          |  4 +-
 .../__snapshots__/last-commit.spec.tsx.snap   |  5 +-
 .../src/lib/last-commit/last-commit.tsx       | 11 ++--
 .../__snapshots__/last-version.spec.tsx.snap  |  3 +-
 .../src/lib/last-version/last-version.tsx     |  4 +-
 .../__snapshots__/pod-details.spec.tsx.snap   | 12 +++--
 .../src/lib/pod-details/pod-details.tsx       |  4 +-
 .../redeploy-modal.spec.tsx.snap              |  4 +-
 .../select-commit-modal.spec.tsx.snap         |  4 +-
 .../select-version-modal.spec.tsx.snap        |  8 +--
 .../copy-button/copy-button.tsx               |  4 +-
 .../service-access-modal.tsx                  |  4 +-
 .../service-actions.spec.tsx.snap             | 12 ++---
 .../service-clone-modal.spec.tsx.snap         |  4 +-
 .../application-container-port-list.tsx       |  2 +-
 .../service-deployment-list.tsx               | 18 +++----
 .../table-filter-trigger-by.tsx               |  4 +-
 .../service-list-action-bar.spec.tsx.snap     |  6 ++-
 .../__snapshots__/service-list.spec.tsx.snap  | 32 +++++++-----
 .../service-list/service-list-action-bar.tsx  |  8 +--
 .../src/lib/service-list/service-list.tsx     |  3 +-
 .../instance-metrics.spec.tsx.snap            |  2 +-
 .../service-header/service-header.tsx         | 24 +++++----
 .../service-last-deployment.tsx               | 11 ++--
 .../service-terminal.spec.tsx.snap            |  8 +--
 .../__snapshots__/input-search.spec.tsx.snap  | 10 ++--
 .../input-search/input-search.tsx             |  2 +-
 .../lib/service-terminal/service-terminal.tsx |  3 +-
 .../services-deployment-pipeline.tsx          |  3 +-
 .../create-update-variable-modal.tsx          | 10 +---
 .../flow-create-variable.tsx                  |  4 +-
 .../variable-row/variable-row.tsx             |  4 +-
 .../__snapshots__/variable-list.spec.tsx.snap | 35 +++++++------
 .../variables-action-toolbar.tsx              |  8 +--
 .../feature/src/lib/need-help/need-help.tsx   |  4 +-
 .../section-ai-copilot-configuration.tsx      |  2 +-
 .../section-ai-copilot-opt-in.tsx             |  2 +-
 .../devops-copilot-button.tsx                 |  3 +-
 .../assistant-message/assistant-message.tsx   |  6 +--
 .../devops-copilot-panel.tsx                  |  4 +-
 .../enable-copilot-screen.tsx                 |  4 +-
 .../input/__snapshots__/input.spec.tsx.snap   |  6 ++-
 .../lib/devops-copilot-panel/input/input.tsx  |  3 +-
 .../ui/src/lib/components/banner/banner.tsx   |  4 +-
 .../button-primitive.spec.tsx.snap            |  2 +-
 .../button-primitive.spec.tsx                 | 50 ++++++++++++++++++-
 .../button-primitive/button-primitive.tsx     |  8 +--
 .../button/__snapshots__/button.spec.tsx.snap |  4 +-
 .../src/lib/components/button/button.spec.tsx | 16 +++++-
 .../lib/components/button/button.stories.tsx  | 13 +++++
 .../ui/src/lib/components/callout/callout.tsx |  4 +-
 .../code-editor-inline-setting.tsx            |  2 +-
 .../components/copy-button/copy-button.tsx    |  4 +-
 .../error-boundary/error-boundary.tsx         |  4 +-
 .../components/funnel-flow/funnel-flow.tsx    |  2 +-
 .../__snapshots__/input-filter.spec.tsx.snap  |  8 +--
 .../inputs/input-filter/input-filter.tsx      |  6 +--
 .../modal-confirmation.spec.tsx.snap          | 12 ++---
 .../modal-multi-confirmation.spec.tsx.snap    |  8 +--
 .../components/table-filter/table-filter.tsx  |  4 +-
 .../table-head-datepicker.tsx                 |  8 +--
 .../table-head-filter/table-head-filter.tsx   | 14 ++----
 .../table-head-hierarchical-filter.tsx        | 14 ++----
 160 files changed, 604 insertions(+), 530 deletions(-)

diff --git a/.agents/skills/qovery-ui/references/components.md b/.agents/skills/qovery-ui/references/components.md
index adbadabea9d..e332b1bf011 100644
--- a/.agents/skills/qovery-ui/references/components.md
+++ b/.agents/skills/qovery-ui/references/components.md
@@ -13,6 +13,7 @@ Always use `<Button>`. `ButtonPrimitive` is the internal primitive it wraps —
 - `solid` + `brand` → primary CTA
 - `outline` or `surface` + `neutral` → secondary / cancel
 - `solid` + `red` → destructive actions only
+- Icons inside buttons use `data-align="prefix"` when they appear before the label and `data-align="suffix"` when they appear after it. Do not add manual `ml-*`, `mr-*`, or `gap-*` spacing to button icons — `<Button>` / `<ButtonPrimitive>` applies the correct size-aware spacing.
 - Icon-only buttons always need `aria-label`
 
 ### "I need to show a system status"
diff --git a/.agents/skills/qovery-ui/references/spacing-layout.md b/.agents/skills/qovery-ui/references/spacing-layout.md
index c6dcf6481a0..04617009c3b 100644
--- a/.agents/skills/qovery-ui/references/spacing-layout.md
+++ b/.agents/skills/qovery-ui/references/spacing-layout.md
@@ -93,14 +93,7 @@ Example: a card with `rounded-2xl` (16px) and `p-2` (8px) padding → the inner
 Geometric centering often looks off. Adjust for perceived visual weight.
 
 - **Play triangle in a circle:** nudge right — the triangle's visual center is not its geometric center.
-- **Button with icon + text:** use slightly less padding on the icon side. Rule of thumb: icon-side padding = text-side padding − 2px.
-
-```tsx
-<button className="flex items-center gap-2 pl-4 pr-3.5">
-  <span>Continue</span>
-  <ArrowRightIcon />
-</button>
-```
+- **Button with icon + text:** use `<Button>` and mark icons with `data-align="prefix"` or `data-align="suffix"` so the button primitive applies the correct size-aware spacing. Do not add manual icon margins or custom gaps inside buttons.
 
 - **Asymmetric icons** (stars, arrows, carets): best fixed in the SVG directly. Fallback: `margin-left: 1px` or similar.
 - **Heavy glyph next to a light one:** optical baseline shift.
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general.tsx
index b94f1b051a8..33d25ed6998 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general.tsx
@@ -90,7 +90,7 @@ function ClusterGeneralSettingsForm({ cluster }: { cluster: Cluster }) {
           <SettingsHeading title="General settings" />
           <div className="max-w-content-with-navigation-left">
             {cluster.cloud_provider !== 'ON_PREMISE' && (
-              <Callout.Root color="sky" className="mb-4">
+              <Callout.Root color="sky" className="mb-4 items-start">
                 <Callout.Icon>
                   <Icon iconName="circle-exclamation" iconStyle="regular" />
                 </Callout.Icon>
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
index 6687fa6f389..790afce4ddd 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
@@ -24,10 +24,12 @@ const Clusters = () => {
           to="/organization/$organizationId/cluster/new"
           params={{ organizationId }}
           as="button"
-          className="items-center gap-2"
+          className="items-center"
+          color="neutral"
+          variant="outline"
           size="md"
         >
-          <Icon iconName="circle-plus" iconStyle="regular" />
+          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
           Add Cluster
         </Link>
       </EmptyState>
@@ -57,14 +59,8 @@ function RouteComponent() {
         <div className="flex flex-col gap-6">
           <div className="flex justify-between">
             <Heading>Clusters</Heading>
-            <Link
-              to="/organization/$organizationId/cluster/new"
-              params={{ organizationId }}
-              as="button"
-              className="gap-2"
-              size="md"
-            >
-              <Icon iconName="circle-plus" iconStyle="regular" />
+            <Link to="/organization/$organizationId/cluster/new" params={{ organizationId }} as="button" size="md">
+              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
               Add cluster
             </Link>
           </div>
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
index c5d0fdf235f..053f79e3bad 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
@@ -117,11 +117,10 @@ function RouteComponent() {
               <Link
                 as="button"
                 variant="outline"
-                className="gap-2"
                 to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
                 params={{ organizationId, projectId, environmentId }}
               >
-                <Icon iconName="circle-plus" iconStyle="regular" />
+                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
                 New service
               </Link>
             </div>
diff --git a/apps/console/src/routes/login/index.tsx b/apps/console/src/routes/login/index.tsx
index d7cac8d28a6..a990f812fd4 100644
--- a/apps/console/src/routes/login/index.tsx
+++ b/apps/console/src/routes/login/index.tsx
@@ -429,7 +429,7 @@ function RouteComponent() {
                           setAuth0Error(null)
                         }}
                       >
-                        <Icon iconName="lock" className="mr-1.5 text-sm text-neutral-subtle" />
+                        <Icon data-align="prefix" iconName="lock" className="text-sm text-neutral-subtle" />
                         Continue with SAML SSO
                         <LastUsedBadge visible={lastUsedLoginAtPageLoad === 'saml_sso'} />
                       </Button>
diff --git a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
index c8adf0d54c6..26c955b81c4 100644
--- a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
@@ -329,9 +329,9 @@ export function AuditLogs({
               <div className="flex h-14 items-center justify-center border-b border-neutral">
                 <p className="flex items-center gap-3 text-sm text-neutral">
                   {auditLogsRetentionInDays} days limit reached.
-                  <Button type="button" variant="outline" className="gap-1.5" onClick={() => showIntercom()}>
+                  <Button type="button" variant="outline" onClick={() => showIntercom()}>
                     <span>Upgrade plan</span>
-                    <Icon iconName="arrow-up-right-from-square" className="text-neutral" />
+                    <Icon data-align="suffix" iconName="arrow-up-right-from-square" className="text-neutral" />
                   </Button>
                 </p>
               </div>
diff --git a/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx b/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
index 66a49f44208..f25c564e9c8 100644
--- a/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
@@ -183,7 +183,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
               variant="surface"
               color="neutral"
               size="xs"
-              className="pl-9.5 justify-center gap-1.5 active:scale-[1]"
+              className="pl-9.5 justify-center active:scale-[1]"
               key={badge.key}
             >
               {`${badge.displayedName}: `}
@@ -191,6 +191,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
               {badge.key !== 'timestamp' && <Truncate text={badge.value} truncateLimit={23} />}
               {badge.isDeletable && (
                 <Icon
+                  data-align="suffix"
                   iconName="xmark"
                   className="text-xs leading-4 text-neutral-subtle hover:text-neutral"
                   onClick={() => deleteFilter(badge.key, setFilter)}
@@ -225,7 +226,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
                     variant="surface"
                     color="neutral"
                     size="xs"
-                    className={clsx('justify-center gap-1.5 active:scale-[1]', {
+                    className={clsx('justify-center active:scale-[1]', {
                       'rounded-l-full rounded-r-none border-r-0 pr-4': isFirst && !isLast,
                       'rounded-full': isFirst && isLast,
                       'rounded-l-none rounded-r-full border-l-0 pl-4': isLast && !isFirst,
@@ -244,7 +245,11 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
                       aria-label="Delete filter"
                     >
                       {badge.isDeletable && (
-                        <Icon iconName="xmark" className="text-xs leading-4 text-neutral-subtle hover:text-neutral" />
+                        <Icon
+                          data-align="suffix"
+                          iconName="xmark"
+                          className="text-xs leading-4 text-neutral-subtle hover:text-neutral"
+                        />
                       )}
                     </button>
                   </Button>
@@ -269,9 +274,9 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
 
       {/* RIGHT: Button stays fixed at top-right */}
       {badges.filter((b) => b.isDeletable).length > 0 && (
-        <Button className="gap-2" size="xs" color="neutral" variant="surface" onClick={clearFilter}>
+        <Button size="xs" color="neutral" variant="surface" onClick={clearFilter}>
           Clear all filters
-          <Icon iconName="xmark" iconStyle="regular" />
+          <Icon data-align="suffix" iconName="xmark" iconStyle="regular" />
         </Button>
       )}
     </div>
diff --git a/libs/domains/cloud-providers/feature/src/lib/cluster-scw-control-plane-feature/cluster-scw-control-plane-feature.tsx b/libs/domains/cloud-providers/feature/src/lib/cluster-scw-control-plane-feature/cluster-scw-control-plane-feature.tsx
index c80474f4d32..59237bbbc30 100644
--- a/libs/domains/cloud-providers/feature/src/lib/cluster-scw-control-plane-feature/cluster-scw-control-plane-feature.tsx
+++ b/libs/domains/cloud-providers/feature/src/lib/cluster-scw-control-plane-feature/cluster-scw-control-plane-feature.tsx
@@ -71,6 +71,7 @@ export function ClusterSCWControlPlaneFeature({ production }: ClusterSCWControlP
               <ExternalLink
                 size="xs"
                 href="https://www.scaleway.com/en/docs/kubernetes/reference-content/kubernetes-control-plane-offers/"
+                className="text-infoInvert"
               >
                 Scaleway documentation
               </ExternalLink>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
index e8e4946d6b2..2456357b9b7 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
@@ -70,13 +70,14 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               qovery cluster kubeconfig --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -108,13 +109,14 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               export KUBECONFIG=&lt;path&gt;
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -141,13 +143,14 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -163,13 +166,14 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -251,13 +255,14 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               qovery cluster debug-pod --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -284,13 +289,14 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
@@ -306,13 +312,14 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
+                data-align="suffix"
               />
             </button>
           </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
index f70503b6120..ef1921a93ee 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
@@ -22,13 +22,13 @@ exports[`ClusterActions should match manage deployment snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:r6:"
       type="button"
     >
       <div
-        class="flex h-full w-full items-center justify-center gap-1.5"
+        class="flex h-full w-full items-center justify-center"
         data-state="closed"
       >
         <i
@@ -41,7 +41,7 @@ exports[`ClusterActions should match manage deployment snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:r9:"
       type="button"
@@ -137,13 +137,13 @@ exports[`ClusterActions should match other actions snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:rk:"
       type="button"
     >
       <div
-        class="flex h-full w-full items-center justify-center gap-1.5"
+        class="flex h-full w-full items-center justify-center"
         data-state="closed"
       >
         <i
@@ -157,7 +157,7 @@ exports[`ClusterActions should match other actions snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:rn:"
       type="button"
@@ -297,13 +297,13 @@ exports[`ClusterActions should match outdated snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="closed"
       id="radix-:r15:"
       type="button"
     >
       <div
-        class="flex h-full w-full items-center justify-center gap-1.5"
+        class="flex h-full w-full items-center justify-center"
         data-state="closed"
       >
         <i
@@ -317,7 +317,7 @@ exports[`ClusterActions should match outdated snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:r18:"
       type="button"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
index 27b82cf25d3..f2aa4602a92 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
@@ -241,12 +241,12 @@ function MenuManageDeployment({
           iconOnly={!hasTextActionButton}
         >
           <Tooltip content="Manage Deployment">
-            <div className="flex h-full w-full items-center justify-center gap-1.5">
-              <Icon iconName="rocket" />
+            <div className="flex h-full w-full items-center justify-center">
+              <Icon iconName="rocket" data-align={hasTextActionButton ? 'prefix' : undefined} />
               {hasTextActionButton && (
                 <>
                   {deployActionLabel}
-                  <Icon iconName="chevron-down" />
+                  <Icon iconName="chevron-down" data-align="suffix" />
                 </>
               )}
             </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-card-feature/cluster-card-feature.tsx b/libs/domains/clusters/feature/src/lib/cluster-card-feature/cluster-card-feature.tsx
index ef15aa9e0bf..d85792b9635 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-card-feature/cluster-card-feature.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-card-feature/cluster-card-feature.tsx
@@ -86,7 +86,7 @@ export function ClusterCardFeature({
                 <ExternalLink
                   as="button"
                   href={feature.cloud_provider_feature_documentation ?? undefined}
-                  className="gap-1 px-1.5 text-neutralInvert"
+                  className="px-1.5 text-neutralInvert"
                   color="neutral"
                   variant="surface"
                   size="xs"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
index 48760e60c24..2da61140db5 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
@@ -141,13 +141,13 @@ exports[`ClusterCard should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Manage Deployment"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-sm h-8 justify-center px-0 rounded-md w-8 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
               data-state="closed"
               id="radix-:rn:"
               type="button"
             >
               <div
-                class="flex h-full w-full items-center justify-center gap-1.5"
+                class="flex h-full w-full items-center justify-center"
                 data-state="closed"
               >
                 <i
@@ -158,7 +158,7 @@ exports[`ClusterCard should match snapshot 1`] = `
             </button>
             <button
               aria-label="Logs"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               data-state="closed"
             >
               <i
@@ -170,7 +170,7 @@ exports[`ClusterCard should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Other actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               data-state="closed"
               id="radix-:rr:"
               type="button"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
index 53fe342a077..ef7158c0c15 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
@@ -658,7 +658,7 @@ export function ClusterNew() {
                     params={{ organizationId }}
                   >
                     Add credit card
-                    <Icon iconName="arrow-right" className="ml-1" iconStyle="regular" />
+                    <Icon data-align="suffix" iconName="arrow-right" iconStyle="regular" />
                   </ButtonLink>
                 </Callout.TextDescription>
               </Callout.Text>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
index 191196315f5..add1176f03d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
@@ -132,7 +132,7 @@ export function SubnetsForm({ control, name, title, callout, required = false }:
         onClick={() => append({ A: '', B: '', C: '' })}
       >
         Add subnets
-        <Icon iconName="plus" className="ml-2 text-base" />
+        <Icon data-align="suffix" iconName="plus" />
       </Button>
     </div>
   )
diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-summary/step-summary-presentation.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-summary/step-summary-presentation.tsx
index 01b4172759e..0505a3238ab 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-summary/step-summary-presentation.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-summary/step-summary-presentation.tsx
@@ -92,7 +92,7 @@ export function StepSummaryPresentation(props: StepSummaryPresentationProps) {
 
       <div className="mb-10">
         {props.generalData.installation_type === 'MANAGED' && (
-          <Callout.Root color="sky" className="mb-5">
+          <Callout.Root color="sky" className="mb-5 items-start">
             <Callout.Icon>
               <Icon iconName="circle-exclamation" iconStyle="regular" />
             </Callout.Icon>
@@ -111,7 +111,7 @@ export function StepSummaryPresentation(props: StepSummaryPresentationProps) {
           </Callout.Root>
         )}
         {props.generalData.cloud_provider === 'GCP' && (
-          <Callout.Root color="yellow" className="mb-2">
+          <Callout.Root color="yellow" className="mb-2 items-start">
             <Callout.Icon>
               <Icon iconName="triangle-exclamation" iconStyle="regular" />
             </Callout.Icon>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
index ef1c7c42134..8ac0bfa6fe9 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
@@ -144,7 +144,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="flex flex-row gap-x-4 p-4 border rounded-md text-sm items-center border-info-component bg-surface-info-subtle text-info mb-3"
+            class="flex flex-row gap-x-3 p-4 border rounded-md text-sm items-center border-info-component bg-surface-info-subtle text-info mb-3"
             data-accent-color="sky"
           >
             <div
@@ -156,7 +156,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
               />
             </div>
             <div
-              class="-order-1 mr-auto gap-x-4 text-neutral"
+              class="-order-1 mr-auto gap-x-3 text-neutral"
             >
               Before deleting, Qovery reconciles the cluster state. Missing managed resources can be recreated temporarily so the deletion workflow can clean everything up and avoid orphan cloud resources.
             </div>
@@ -234,7 +234,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="flex flex-row gap-x-4 p-4 border rounded-md text-sm items-center border-warning-component bg-surface-warning-subtle text-warning mt-3"
+            class="flex flex-row gap-x-3 p-4 border rounded-md text-sm items-center border-warning-component bg-surface-warning-subtle text-warning mt-3"
             data-accent-color="yellow"
           >
             <div
@@ -246,7 +246,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
               />
             </div>
             <div
-              class="-order-1 mr-auto gap-x-4 text-neutral"
+              class="-order-1 mr-auto gap-x-3 text-neutral"
             >
               <p>
                 Please note that you will have to manually delete on your cloud account:
@@ -271,13 +271,13 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
           class="flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
             disabled=""
             type="submit"
           >
diff --git a/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx b/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
index 2a4850a12cf..3a4593767a8 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
@@ -65,10 +65,9 @@ export function ClusterInstallationGuideModal({ type, onClose, ...props }: Clust
                   color="brand"
                   onClick={downloadInstallationValues}
                   loading={isLoading}
-                  className="gap-1"
                 >
                   Download configuration
-                  <Icon iconName="download" />
+                  <Icon data-align="suffix" iconName="download" />
                 </Button>
               </span>
             </li>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
index c0d7f7dd23f..d56f73c6212 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
@@ -93,7 +93,7 @@ export function ClusterLogsList({ logs, firstDate, refScrollSection }: ClusterLo
       </div>
       {isScrolledUp && (
         <Button
-          className="absolute bottom-[7px] left-1/2 flex w-72 -translate-x-1/2 items-center justify-center gap-2 text-sm"
+          className="absolute bottom-[7px] left-1/2 flex w-72 -translate-x-1/2 items-center justify-center text-sm"
           variant="solid"
           radius="full"
           size="md"
@@ -109,7 +109,7 @@ export function ClusterLogsList({ logs, firstDate, refScrollSection }: ClusterLo
               {bufferedLogsCount > 999 ? '999+' : bufferedLogsCount}
             </span>
           )}
-          <Icon iconName="arrow-down" />
+          <Icon data-align="suffix" iconName="arrow-down" />
         </Button>
       )}
     </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
index e53f606dd74..28b3956308d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
@@ -182,14 +182,14 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
index e06c22651dc..1c149cbbc70 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
@@ -53,7 +53,7 @@ function Subnets({ title, value }: { title: string; value?: string[] | null }) {
 
 function AWSExistingVPC({ feature }: { feature: ClusterFeatureAwsExistingVpc }) {
   return (
-    <div className="mb-5 flex flex-col justify-between rounded border border-neutral bg-surface-neutral-component p-4">
+    <div className="mb-5 flex flex-col justify-between rounded border border-neutral bg-surface-neutral-subtle p-4">
       <h4 className="mb-1 text-sm font-medium text-neutral">Deploy on an existing VPC</h4>
       <p className="mb-4 text-sm text-neutral-subtle">In your VPC settings, you have to enable DNS hostnames.</p>
       <InputText name="vpc_id" label="VPC ID" value={feature.aws_vpc_eks_id} className="mb-4" disabled />
@@ -130,7 +130,7 @@ function AWSExistingVPC({ feature }: { feature: ClusterFeatureAwsExistingVpc })
 
 function GcpExistingVPC({ feature }: { feature: ClusterFeatureGcpExistingVpc }) {
   return (
-    <div className="flex flex-col justify-between gap-4 rounded border border-neutral bg-surface-neutral-component p-4">
+    <div className="flex flex-col justify-between gap-4 rounded border border-neutral bg-surface-neutral-subtle p-4">
       <div>
         <h4 className="mb-1 text-sm font-medium text-neutral">Deploy on an existing VPC</h4>
         <ExternalLink
@@ -557,7 +557,7 @@ export function ClusterNetworkSettings({ organizationId, clusterId }: ClusterNet
                       type="button"
                     >
                       Add route
-                      <Icon iconName="circle-plus" iconStyle="regular" className="ml-1" />
+                      <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
                     </Button>
                   </div>
                 </BlockContent>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
index 7673368b5d6..af553511969 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
@@ -304,9 +304,8 @@ export function ClusterResourcesSettings(props: ClusterResourcesSettingsProps) {
                               <Button
                                 type="button"
                                 color="neutral"
-                                variant="surface"
+                                variant="outline"
                                 size="md"
-                                className="gap-2"
                                 onClick={() => {
                                   openModal({
                                     options: {
@@ -331,7 +330,7 @@ export function ClusterResourcesSettings(props: ClusterResourcesSettingsProps) {
                                   })
                                 }}
                               >
-                                Edit <Icon iconName="pen" iconStyle="solid" />
+                                Edit <Icon data-align="suffix" iconName="pen" />
                               </Button>
                             </div>
                             <div className="flex flex-col gap-4 border-t border-neutral p-4">
diff --git a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
index 9f8c747dbf7..553e76386be 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
 <body>
   <div>
     <div
-      class="flex flex-row gap-x-4 p-4 border rounded-md text-sm items-center border-info-component bg-surface-info-subtle text-info"
+      class="flex flex-row gap-x-3 p-4 border rounded-md text-sm border-info-component bg-surface-info-subtle text-info items-start"
       data-accent-color="sky"
     >
       <div
@@ -16,7 +16,7 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
         />
       </div>
       <div
-        class="-order-1 mr-auto gap-x-4 text-neutral"
+        class="-order-1 mr-auto gap-x-3 text-neutral"
       >
         <p>
           This guide walks you through the process of installing Qovery on your existing Kubernetes cluster, where you will have full control over the infrastructure. You will be responsible for managing updates and upgrades. Please note that advanced Kubernetes knowledge is required.
@@ -78,13 +78,14 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
             qovery cluster install
           </span>
           <button
-            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
             type="button"
           >
             Copy
             <i
               aria-hidden="true"
               class="fa-regular fa-copy text-xs"
+              data-align="suffix"
             />
           </button>
         </pre>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-setup/cluster-setup.tsx b/libs/domains/clusters/feature/src/lib/cluster-setup/cluster-setup.tsx
index 6d45318a8ce..99e71b2984d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-setup/cluster-setup.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-setup/cluster-setup.tsx
@@ -4,7 +4,7 @@ export function ClusterSetup({ type }: { type: 'LOCAL_DEMO' | 'SELF_MANAGED' })
   return (
     <>
       {type === 'SELF_MANAGED' && (
-        <Callout.Root color="sky">
+        <Callout.Root color="sky" className="items-start">
           <Callout.Icon>
             <Icon iconName="info-circle" iconStyle="regular" />
           </Callout.Icon>
diff --git a/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx b/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
index c2b8886757f..0640931fd43 100644
--- a/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
@@ -40,7 +40,6 @@ export const GpuResourcesSettings = ({ cluster, clusterRegion = '' }: GpuResourc
         color="neutral"
         variant="surface"
         size="md"
-        className="gap-2"
         onClick={() => {
           openModal({
             options: {
@@ -74,7 +73,7 @@ export const GpuResourcesSettings = ({ cluster, clusterRegion = '' }: GpuResourc
           })
         }}
       >
-        Edit <Icon iconName="pen" iconStyle="solid" />
+        Edit <Icon data-align="suffix" iconName="pen" />
       </Button>
     </div>
   )
diff --git a/libs/domains/clusters/feature/src/lib/scaleway-static-ip/scaleway-static-ip.tsx b/libs/domains/clusters/feature/src/lib/scaleway-static-ip/scaleway-static-ip.tsx
index ffa1591e8f9..a21179264a5 100644
--- a/libs/domains/clusters/feature/src/lib/scaleway-static-ip/scaleway-static-ip.tsx
+++ b/libs/domains/clusters/feature/src/lib/scaleway-static-ip/scaleway-static-ip.tsx
@@ -72,7 +72,7 @@ export function ScalewayStaticIp({
                     <ExternalLink
                       as="button"
                       href={staticIpFeature.cloud_provider_feature_documentation ?? undefined}
-                      className="relative -top-1 gap-1 px-1.5"
+                      className="relative -top-1 px-1.5"
                       color="neutral"
                       variant="surface"
                       size="xs"
diff --git a/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx b/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
index 1a6484a5058..b2f166fbfd9 100644
--- a/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
+++ b/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
@@ -197,11 +197,10 @@ export function SectionProductionHealth() {
               as="button"
               color="neutral"
               size="md"
-              className="gap-1.5"
               to="/organization/$organizationId/cluster/new"
               params={{ organizationId }}
             >
-              <Icon iconName="circle-plus" />
+              <Icon data-align="prefix" iconName="circle-plus" />
               Create cluster
             </Link>
           </EmptyState>
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
index fd9e062cd92..7d498444bdd 100644
--- a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
@@ -70,14 +70,14 @@ export function EnvironmentStages({
         <div className="flex items-center gap-2">
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
-              <Button variant="outline" className="gap-1.5" size="md">
-                <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
+              <Button variant="outline" size="md">
+                <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
                 {isLastVersion
                   ? 'Latest'
                   : dateYearMonthDayHourMinuteSecond(
                       new Date(currentDeploymentHistory?.auditing_data.created_at ?? '')
                     )}
-                <Icon iconName="angle-down" />
+                <Icon data-align="suffix" iconName="angle-down" />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
index f1319b30355..5cad54840d7 100644
--- a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
@@ -100,14 +100,14 @@ export function ListPreCheckLogs({ environment, environmentStatus, preCheckStage
           <div className="flex items-center gap-4">
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
-                <Button variant="outline" className="gap-1.5">
-                  <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
+                <Button variant="outline">
+                  <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
                   {isLastVersion
                     ? 'Latest'
                     : dateYearMonthDayHourMinuteSecond(
                         new Date(currentDeploymentHistory?.auditing_data.created_at ?? '')
                       )}
-                  <Icon iconName="angle-down" />
+                  <Icon data-align="suffix" iconName="angle-down" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
diff --git a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
index 3d62f71a3a2..77d5278b5d1 100644
--- a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
@@ -275,14 +275,14 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
index d19fc7ec35d..69c708325f0 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         aria-expanded="true"
         aria-haspopup="menu"
         aria-label="Manage Deployment"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
         data-state="open"
         id="radix-:r6:"
         type="button"
@@ -40,7 +40,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         </div>
       </button>
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
         params="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
@@ -54,7 +54,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Other actions"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
         data-state="closed"
         id="radix-:ra:"
         type="button"
@@ -210,7 +210,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Manage Deployment"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
         data-state="closed"
         id="radix-:rq:"
         type="button"
@@ -226,7 +226,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         </div>
       </button>
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
         params="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
@@ -241,7 +241,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         aria-expanded="true"
         aria-haspopup="menu"
         aria-label="Other actions"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
         data-state="open"
         id="radix-:ru:"
         type="button"
diff --git a/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx b/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
index 632b5f0535b..aa6f8888831 100644
--- a/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
@@ -79,7 +79,7 @@ export function TableFilterTriggerBy({
         <div className="relative inline-block">
           <Popover.Trigger>
             <Button
-              className={twMerge('gap-1 whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
+              className={twMerge('whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
               color={column.getIsFiltered() ? 'brand' : 'neutral'}
               variant={column.getIsFiltered() ? 'solid' : 'surface'}
             >
@@ -97,7 +97,7 @@ export function TableFilterTriggerBy({
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon iconName="chevron-down" />
+                  <Icon data-align="suffix" iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
index d795dadfc0a..f7e1cfed82e 100644
--- a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
@@ -201,8 +201,8 @@ const EnvironmentLastDeploymentContent = () => {
           description="Create and deploy your first service"
         >
           {serviceCount > 0 && (
-            <Button onClick={handleDeploy} color="neutral" size="md" className="gap-1.5">
-              <Icon iconName="rocket" />
+            <Button onClick={handleDeploy} color="neutral" size="md">
+              <Icon data-align="prefix" iconName="rocket" />
               Deploy environment
             </Button>
           )}
diff --git a/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx b/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
index 001645ad956..cac58d43b61 100644
--- a/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
+++ b/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
@@ -188,8 +188,8 @@ export function EnvironmentSection({
         return (
           <>
             <span className="text-sm text-neutral-subtle">No {title.toLowerCase()} environment created yet</span>
-            <Button size="md" variant="outline" className="gap-2" onClick={onCreateEnvClicked}>
-              <Icon iconName="circle-plus" iconStyle="regular" />
+            <Button size="md" variant="outline" onClick={onCreateEnvClicked}>
+              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
               Create
             </Button>
           </>
diff --git a/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx b/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
index e4f6979fd7c..d8f6b0c2d40 100644
--- a/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
+++ b/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
@@ -172,10 +172,9 @@ function EnvironmentsTableContent() {
                 onCreateEnvClicked()
               }}
               variant="solid"
-              className="gap-1.5"
               size="md"
             >
-              <Icon iconName="circle-plus" iconStyle="regular" />
+              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
               New Environment
             </Button>
           </div>
diff --git a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
index be43a407d3e..0381ad3b584 100644
--- a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
@@ -62,14 +62,14 @@ exports[`TerraformExportModal should match with snapshots 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
index 1f90b10c0a6..292259677dc 100644
--- a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
           </strong>
         </p>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
           data-testid="deselect-all"
         >
           Deselect All
@@ -377,13 +377,13 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
         class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-background py-6"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           type="submit"
         >
diff --git a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
index b9523656a67..d40611f9872 100644
--- a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
@@ -85,18 +85,18 @@ export function AlertRulesActionBar({
                 Unselect
               </button>
               <div className="flex gap-3">
-                <Button size="md" variant="outline" className="items-center gap-2" onClick={handleCloneAlertRules}>
-                  <Icon iconName="clone" />
+                <Button size="md" variant="outline" className="items-center" onClick={handleCloneAlertRules}>
+                  <Icon data-align="prefix" iconName="clone" />
                   Clone
                 </Button>
                 <Button
                   size="md"
                   variant="outline"
-                  className="items-center gap-2 text-negative"
+                  className="items-center text-negative"
                   onClick={handleDeleteAllAlertRules}
                   disabled={deletableAlertRules.length === 0}
                 >
-                  <Icon iconName="trash-can" iconStyle="regular" />
+                  <Icon data-align="prefix" iconName="trash-can" iconStyle="regular" />
                   Delete
                 </Button>
               </div>
diff --git a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
index bd6ba970db3..b9d387b833a 100644
--- a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
@@ -255,8 +255,8 @@ export function AlertRulesOverview({
       {onCreateKeyAlerts && (
         <Tooltip content="You need to deploy your service to create alerts" disabled={canCreateAlerts}>
           <div>
-            <Button size="md" className="gap-1.5" onClick={onCreateKeyAlerts} disabled={!canCreateAlerts}>
-              <Icon iconName="plus-large" className="text-xs" />
+            <Button size="md" onClick={onCreateKeyAlerts} disabled={!canCreateAlerts}>
+              <Icon data-align="prefix" iconName="plus-large" className="text-xs" />
               New alert
             </Button>
           </div>
@@ -393,7 +393,7 @@ export function AlertRulesOverview({
                       variant="surface"
                       color="neutral"
                       size="xs"
-                      className="justify-center gap-1.5 pl-0.5"
+                      className="justify-center pl-0.5"
                       to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/monitoring/alerts"
                       params={{
                         organizationId,
@@ -404,6 +404,7 @@ export function AlertRulesOverview({
                     >
                       <span className="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-surface-neutral-subtle">
                         <Icon
+                          data-align="prefix"
                           name={match(alertRule.target?.target_type)
                             .with('CONTAINER', () => 'APPLICATION')
                             .otherwise((s) => s)}
diff --git a/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
index 77a0da50df7..7ccf4a66220 100644
--- a/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
@@ -95,7 +95,7 @@ export function IssueOverview() {
                         variant="surface"
                         color="neutral"
                         size="xs"
-                        className="justify-center gap-1.5 pl-0.5"
+                        className="justify-center pl-0.5"
                         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/monitoring/alerts"
                         params={{
                           organizationId,
@@ -106,6 +106,7 @@ export function IssueOverview() {
                       >
                         <span className="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-white">
                           <Icon
+                            data-align="prefix"
                             name={match(alert.target.target_type)
                               .with('CONTAINER', () => 'APPLICATION')
                               .otherwise((s) => s)}
diff --git a/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
index 632259575eb..a8985d3cf78 100644
--- a/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
@@ -82,8 +82,8 @@ export function NotificationChannelOverview() {
       <div className="mt-8 flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <Heading level={2}>Slack channels</Heading>
-          <Button variant="plain" color="brand" size="md" className="gap-1.5" onClick={createSlackChannelModal}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button variant="plain" color="brand" size="md" onClick={createSlackChannelModal}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add channel
           </Button>
         </div>
@@ -94,8 +94,8 @@ export function NotificationChannelOverview() {
             </div>
             <p className="font-medium">No slack channel added yet</p>
             <p className="mb-3 text-sm text-neutral-subtle">Add your first channel to start sending notifications</p>
-            <Button size="md" variant="outline" color="neutral" className="gap-1.5" onClick={createSlackChannelModal}>
-              <Icon iconName="circle-plus" iconStyle="regular" />
+            <Button size="md" variant="outline" color="neutral" onClick={createSlackChannelModal}>
+              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
               Add channel
             </Button>
           </div>
@@ -155,8 +155,8 @@ export function NotificationChannelOverview() {
       <div className="mt-8 flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <Heading level={2}>Email</Heading>
-          <Button variant="plain" color="brand" size="md" className="gap-1.5" onClick={createEmailChannelModal}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button variant="plain" color="brand" size="md" onClick={createEmailChannelModal}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             New email
           </Button>
         </div>
@@ -167,8 +167,8 @@ export function NotificationChannelOverview() {
             </div>
             <p className="font-medium">No email group added yet</p>
             <p className="mb-3 text-sm text-neutral-subtle">Add your first email to start sending notifications</p>
-            <Button size="md" variant="outline" color="neutral" className="gap-1.5" onClick={createEmailChannelModal}>
-              <Icon iconName="circle-plus" iconStyle="regular" />
+            <Button size="md" variant="outline" color="neutral" onClick={createEmailChannelModal}>
+              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
               Add email group
             </Button>
           </div>
diff --git a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
index eb516e65883..30b7d49d9e5 100644
--- a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
+++ b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
@@ -67,7 +67,7 @@ function DatabaseRdsDashboardContent() {
                 variant={isLiveUpdateEnabled ? 'solid' : 'surface'}
                 color={isLiveUpdateEnabled ? 'brand' : 'neutral'}
                 size="md"
-                className={clsx('gap-1.5 pl-2.5', isLiveUpdateEnabled && 'border border-transparent')}
+                className={clsx('pl-2.5', isLiveUpdateEnabled && 'border border-transparent')}
                 onClick={() => {
                   if (!isLiveUpdateEnabled) {
                     if (timeRange !== '5m' && timeRange !== '15m' && timeRange !== '30m' && timeRange !== '1h') {
@@ -77,7 +77,11 @@ function DatabaseRdsDashboardContent() {
                   setIsLiveUpdateEnabled(!isLiveUpdateEnabled)
                 }}
               >
-                <Icon iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'} iconStyle="regular" />
+                <Icon
+                  data-align="prefix"
+                  iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'}
+                  iconStyle="regular"
+                />
                 Live
               </Button>
             </Tooltip>
@@ -95,23 +99,22 @@ function DatabaseRdsDashboardContent() {
             />
           </div>
           <div className="flex flex-wrap gap-2">
-            <Button
-              variant="plain"
-              size="xs"
-              className="flex items-center gap-1"
-              onClick={() => setHideEvents(!hideEvents)}
-            >
+            <Button variant="plain" size="xs" className="flex items-center" onClick={() => setHideEvents(!hideEvents)}>
               {hideEvents ? 'Show events' : 'Hide events'}
-              <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+              <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
             </Button>
             <Button
               variant="plain"
               size="xs"
-              className="flex items-center gap-1"
+              className="flex items-center"
               onClick={() => setExpandCharts(!expandCharts)}
             >
               {expandCharts ? 'Collapse charts' : 'Expand charts'}
-              <Icon iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'} iconStyle="light" />
+              <Icon
+                data-align="suffix"
+                iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'}
+                iconStyle="light"
+              />
             </Button>
           </div>
         </div>
diff --git a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
index c4ea9f0a8df..231f772711b 100644
--- a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
+++ b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
@@ -86,7 +86,7 @@ export function SelectTimeRange() {
                 handleTimeRangeChange(lastDropdownTimeRange)
               }}
             >
-              <Icon iconName="xmark" />
+              <Icon data-align="suffix" iconName="xmark" />
             </span>
           </Button>
         )}
diff --git a/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx b/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
index 1c24ba2d1ca..c55401aa1a7 100644
--- a/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
+++ b/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
@@ -52,11 +52,11 @@ export function ModalChart({ children, open, onOpenChange, title, description }:
                   <Button
                     variant="plain"
                     size="xs"
-                    className="flex items-center gap-1"
+                    className="flex items-center"
                     onClick={() => setHideEvents(!hideEvents)}
                   >
                     {hideEvents ? 'Show events' : 'Hide events'}
-                    <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+                    <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
                   </Button>
                   <SelectTimeRange />
                   <InputSelectSmall
diff --git a/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx b/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
index f4a2148a9be..0a099db1b13 100644
--- a/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
@@ -48,11 +48,10 @@ export function ServiceAlerting({ children }: PropsWithChildren) {
                 variant="outline"
                 color="neutral"
                 size="md"
-                className="gap-1.5"
                 onClick={createKeyAlertsModal}
                 disabled={!canCreateAlerts}
               >
-                <Icon iconName="circle-plus" iconStyle="regular" className="text-xs" />
+                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" className="text-xs" />
                 New alert
               </Button>
             </div>
diff --git a/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx b/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
index c4ea9f0a8df..231f772711b 100644
--- a/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
@@ -86,7 +86,7 @@ export function SelectTimeRange() {
                 handleTimeRangeChange(lastDropdownTimeRange)
               }}
             >
-              <Icon iconName="xmark" />
+              <Icon data-align="suffix" iconName="xmark" />
             </span>
           </Button>
         )}
diff --git a/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx b/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
index 2630a4ca888..dff39ffa408 100644
--- a/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
@@ -187,7 +187,7 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
                 variant={isLiveUpdateEnabled ? 'solid' : 'surface'}
                 color={isLiveUpdateEnabled ? 'brand' : 'neutral'}
                 size="md"
-                className={clsx('gap-1.5 pl-2.5', isLiveUpdateEnabled && 'border border-transparent')}
+                className={clsx('pl-2.5', isLiveUpdateEnabled && 'border border-transparent')}
                 onClick={() => {
                   // If timeRange is '30m' or greater, set to '15m' when enabling live update
                   if (!isLiveUpdateEnabled) {
@@ -198,7 +198,11 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
                   setIsLiveUpdateEnabled(!isLiveUpdateEnabled)
                 }}
               >
-                <Icon iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'} iconStyle="regular" />
+                <Icon
+                  data-align="prefix"
+                  iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'}
+                  iconStyle="regular"
+                />
                 Live
               </Button>
             </Tooltip>
@@ -216,23 +220,22 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
             />
           </div>
           <div className="flex gap-2">
-            <Button
-              variant="plain"
-              size="xs"
-              className="flex items-center gap-1"
-              onClick={() => setHideEvents(!hideEvents)}
-            >
+            <Button variant="plain" size="xs" className="flex items-center" onClick={() => setHideEvents(!hideEvents)}>
               {hideEvents ? 'Show events' : 'Hide events'}
-              <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+              <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
             </Button>
             <Button
               variant="plain"
               size="xs"
-              className="flex items-center gap-1"
+              className="flex items-center"
               onClick={() => setExpandCharts(!expandCharts)}
             >
               {expandCharts ? 'Collapse charts' : 'Expand charts'}
-              <Icon iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'} iconStyle="light" />
+              <Icon
+                data-align="suffix"
+                iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'}
+                iconStyle="light"
+              />
             </Button>
           </div>
         </div>
diff --git a/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx b/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
index 430a0744e08..9dd65074f25 100644
--- a/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
@@ -163,15 +163,8 @@ export function StepPersonalize(props: StepPersonalizeProps) {
           )}
         />
         <div className="mt-10 flex justify-between border-t border-surface-neutral-subtle pt-5">
-          <Button
-            className="gap-2"
-            type="button"
-            color="neutral"
-            variant="surface"
-            size="lg"
-            onClick={() => authLogout()}
-          >
-            <Icon iconName="arrow-left" />
+          <Button type="button" color="neutral" variant="surface" size="lg" onClick={() => authLogout()}>
+            <Icon data-align="prefix" iconName="arrow-left" />
             Disconnect
           </Button>
           <Button type="submit" size="lg" disabled={!formState.isValid}>
diff --git a/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx b/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
index c645cf82277..1ae17f0d92f 100644
--- a/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
@@ -167,10 +167,9 @@ export default function StepPlans(props: StepPlansProps) {
                     size="lg"
                     color="neutral"
                     variant="surface"
-                    className="gap-2"
                     onClick={() => navigate({ to: '/onboarding/personalize' })}
                   >
-                    <Icon iconName="arrow-left" iconStyle="solid" />
+                    <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
                     Back
                   </Button>
                 ) : (
@@ -179,7 +178,6 @@ export default function StepPlans(props: StepPlansProps) {
                     size="lg"
                     color="neutral"
                     variant="surface"
-                    className="gap-2"
                     onClick={() => {
                       if (currentOrganizationId) {
                         navigate({ to: ENVIRONMENTS_URL(currentOrganizationId, currentProjectId) })
@@ -188,7 +186,7 @@ export default function StepPlans(props: StepPlansProps) {
                       }
                     }}
                   >
-                    <Icon iconName="arrow-left" iconStyle="solid" />
+                    <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
                     Back
                   </Button>
                 )}
diff --git a/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx b/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
index 609e73a4136..eebd2b63e0a 100644
--- a/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
@@ -62,15 +62,8 @@ export function StepProject(props: StepProjectProps) {
         />
         <div className="mt-10 flex justify-between border-t border-neutral pt-5">
           {onFirstStepBack ? (
-            <Button
-              type="button"
-              size="lg"
-              color="neutral"
-              variant="surface"
-              className="gap-2"
-              onClick={onFirstStepBack}
-            >
-              <Icon iconName="arrow-left" iconStyle="solid" />
+            <Button type="button" size="lg" color="neutral" variant="surface" onClick={onFirstStepBack}>
+              <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
               Back
             </Button>
           ) : (
diff --git a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
index 2528c487fb8..0ff60243f23 100644
--- a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
@@ -127,7 +127,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -139,13 +139,14 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add annotation
             <i
               aria-hidden="true"
-              class="fa-regular fa-plus ml-2"
+              class="fa-regular fa-plus "
+              data-align="suffix"
             />
           </button>
         </div>
@@ -432,14 +433,14 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
index e47c97714e7..ac684cc2ff0 100644
--- a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
+++ b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
@@ -181,7 +181,7 @@ export function AnnotationCreateEditModal({
             }
           >
             Add annotation
-            <Icon iconName="plus" className="ml-2" />
+            <Icon data-align="suffix" iconName="plus" />
           </Button>
         </div>
         <span className="mb-2 mt-4 block text-sm text-neutral">Select scope (Kubernetes objects)</span>
diff --git a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
index ff13fcf66b9..47acc5b63a1 100644
--- a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
+++ b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
@@ -140,7 +140,7 @@ export function GitRepositoryServiceSettings({
             }
           >
             Edit
-            <Icon iconName="triangle-exclamation" className="ml-2 text-sm text-yellow-500" />
+            <Icon data-align="suffix" iconName="triangle-exclamation" className="text-sm text-yellow-500" />
           </Button>
         </div>
       )}
diff --git a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
index 9e7b1e7cf7b..3bf08c377bc 100644
--- a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
+++ b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
@@ -133,7 +133,7 @@ export function GitRepositorySettings({
             type="button"
             variant="surface"
             size="md"
-            className="gap-1 pr-2"
+            className="pr-2"
             onClick={() =>
               openModal({
                 content: (
@@ -148,7 +148,7 @@ export function GitRepositorySettings({
             }
           >
             Edit
-            <Icon iconName="triangle-exclamation" className="text-sm text-warning" />
+            <Icon data-align="suffix" iconName="triangle-exclamation" className="text-sm text-warning" />
           </Button>
         </div>
       )}
diff --git a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
index e110426eea8..0cc3debf081 100644
--- a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
@@ -70,7 +70,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -84,7 +84,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -92,7 +92,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               >
                 <i
                   aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -176,7 +176,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -184,7 +184,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               >
                 <i
                   aria-hidden="true"
diff --git a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
index ac55bba9e9a..5745e5f82c7 100644
--- a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
@@ -166,7 +166,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -178,13 +178,14 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add label
             <i
               aria-hidden="true"
-              class="fa-regular fa-plus ml-2"
+              class="fa-regular fa-plus "
+              data-align="suffix"
             />
           </button>
         </div>
@@ -192,14 +193,14 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
index 3369682d3bc..3a39f6ab06f 100644
--- a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
+++ b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
@@ -164,7 +164,7 @@ export function LabelCreateEditModal({ isEdit, labelsGroup, organizationId, onCl
             }
           >
             Add label
-            <Icon iconName="plus" className="ml-2" />
+            <Icon data-align="suffix" iconName="plus" />
           </Button>
         </div>
       </ModalCrud>
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
index b7e188fb5b9..334477ba41d 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
@@ -128,13 +128,13 @@ export function SettingsApiToken() {
           />
 
           <Button
-            className="absolute right-0 top-0 gap-2"
+            className="absolute right-0 top-0"
             size="md"
             onClick={() => {
               openModal({ content: <CrudModalFeature organizationId={organizationId} onClose={closeModal} /> })
             }}
           >
-            <Icon iconName="circle-plus" iconStyle="regular" />
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add new
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
index 301528a0b33..06a0617b4f2 100644
--- a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
@@ -308,8 +308,8 @@ function SettingsArgoCdIntegrationCreateButton() {
   }
 
   return (
-    <Button className="gap-1.5" size="md" onClick={openCreateModal}>
-      <Icon iconName="circle-plus" iconStyle="regular" />
+    <Button size="md" onClick={openCreateModal}>
+      <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
       Add ArgoCD
     </Button>
   )
@@ -420,8 +420,8 @@ function SettingsArgoCdIntegrationContent() {
         icon="link"
         className="h-auto min-h-[146px] w-full max-w-[648px] p-8"
       >
-        <Button variant="outline" color="neutral" size="md" className="gap-2" onClick={openCreateModal}>
-          <Icon iconName="circle-plus" iconStyle="regular" />
+        <Button variant="outline" color="neutral" size="md" onClick={openCreateModal}>
+          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
           Add ArgoCD
         </Button>
       </EmptyState>
diff --git a/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx b/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
index 978b4609816..3db9c61fdfb 100644
--- a/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
@@ -245,11 +245,10 @@ function SettingsBillingDetailsContent({ organizationId }: { organizationId: str
                         onClick={() => handleAddCard()}
                         size="md"
                         variant="outline"
-                        className="gap-2"
                         data-testid="add-new-card-button"
                       >
                         Add new card
-                        <Icon iconName="circle-plus" iconStyle="regular" />
+                        <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
                       </Button>
                     </div>
                   </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx b/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
index f4dfcac5640..20ece250293 100644
--- a/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
@@ -125,9 +125,9 @@ export function PageOrganizationBillingSummary(props: PageOrganizationBillingSum
         <div className="relative">
           <SettingsHeading title="Plan details" showNeedHelp={false} />
           <div className="absolute right-0 top-0 flex shrink-0 gap-3">
-            <Button className="gap-1" variant="surface" color="neutral" size="md" onClick={props.onShowUsageClick}>
+            <Button variant="surface" color="neutral" size="md" onClick={props.onShowUsageClick}>
               Show usage
-              <Icon iconName="gauge-high" iconStyle="regular" />
+              <Icon data-align="suffix" iconName="gauge-high" iconStyle="regular" />
             </Button>
             <Button variant="surface" color="neutral" size="md" onClick={props.onPromoCodeClick}>
               Promo code
diff --git a/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx b/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
index a1757caf15e..00c9a4d89f0 100644
--- a/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
@@ -410,8 +410,8 @@ export function SettingsCloudCredentials() {
 
           <DropdownMenu.Root open={isCreateMenuOpen} onOpenChange={setIsCreateMenuOpen}>
             <DropdownMenu.Trigger asChild>
-              <Button size="md" className="absolute right-0 top-0 shrink-0 gap-2">
-                <Icon iconName="circle-plus" iconStyle="regular" />
+              <Button size="md" className="absolute right-0 top-0 shrink-0">
+                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
                 New credential
               </Button>
             </DropdownMenu.Trigger>
diff --git a/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx b/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
index cfa1b628475..9709038aac6 100644
--- a/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
@@ -268,8 +268,8 @@ export function SettingsContainerRegistries() {
             description="Define and manage the container registry to be used within your organization to deploy applications."
           />
 
-          <Button className="absolute right-0 top-0 gap-2" size="md" onClick={() => onAddRegistry()}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button className="absolute right-0 top-0" size="md" onClick={() => onAddRegistry()}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add registry
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
index 3ed3590b6f3..6e674b12f07 100644
--- a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
@@ -43,13 +43,12 @@ export function SectionGithubApp(props: SectionGithubAppProps) {
               <div className="flex gap-2">
                 <Button
                   data-testid="disconnect-button"
-                  className="gap-1"
                   type="button"
                   size="md"
                   onClick={() => props.onDisconnect && props.onDisconnect(false)}
                 >
                   Disconnect
-                  <Icon iconName="circle-xmark" />
+                  <Icon data-align="suffix" iconName="circle-xmark" />
                 </Button>
                 <Button data-testid="permission-button" type="button" size="md" onClick={props.onConfigure}>
                   Manage Permissions
diff --git a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
index f3c6776554e..8d7fcd7db29 100644
--- a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
@@ -107,14 +107,14 @@ export function SettingsGitRepositoryAccess() {
 
           <Button
             size="md"
-            className="absolute right-0 top-0 shrink-0 gap-2"
+            className="absolute right-0 top-0 shrink-0"
             onClick={() => {
               openModal({
                 content: <GitTokenCreateEditModal organizationId={organizationId} onClose={closeModal} />,
               })
             }}
           >
-            <Icon iconName="circle-plus" iconStyle="regular" />
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add new token
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx b/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
index 53fbb4e775e..be35b7186df 100644
--- a/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
@@ -143,9 +143,9 @@ export function PageOrganizationHelmRepositories({
             title="Helm repositories"
             description="Define and manage the helm repository to be used within your organization to deploy applications."
           />
-          <Button size="md" className="absolute right-0 top-0 shrink-0 gap-2" onClick={() => onAddRepository()}>
+          <Button size="md" className="absolute right-0 top-0 shrink-0" onClick={() => onAddRepository()}>
             Add repository
-            <Icon iconName="circle-plus" iconStyle="regular" />
+            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
           </Button>
         </div>
         <div className="max-w-content-with-navigation-left">
diff --git a/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx b/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
index fbb8aee066b..e3fa638082b 100644
--- a/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
@@ -253,8 +253,8 @@ export function SettingsLabelsAnnotations() {
 
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
-              <Button size="md" className="absolute right-0 top-0 shrink-0 gap-2">
-                <Icon iconName="circle-plus" iconStyle="regular" />
+              <Button size="md" className="absolute right-0 top-0 shrink-0">
+                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
                 Add new
               </Button>
             </DropdownMenu.Trigger>
diff --git a/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx b/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
index 3efec7fe92c..e6e4f3300ce 100644
--- a/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
@@ -249,7 +249,12 @@ export function RowMember(props: RowMemberProps) {
                 disabled={!canEditRole || loadingUpdateRole}
               >
                 <span className="truncate">{selectedRoleLabel}</span>
-                <Icon iconName="angle-down" iconStyle="solid" className="text-sm text-neutral-subtle" />
+                <Icon
+                  data-align="suffix"
+                  iconName="angle-down"
+                  iconStyle="solid"
+                  className="text-sm text-neutral-subtle"
+                />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
diff --git a/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx b/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
index d7c99d79387..ed95b011f87 100644
--- a/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
@@ -469,8 +469,8 @@ export function SettingsMembers() {
               role to each of them. You can invite someone to join your organization via email."
           />
 
-          <Button className="absolute right-0 top-0 gap-2" size="md" onClick={onAddMember}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button className="absolute right-0 top-0" size="md" onClick={onAddMember}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add member
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx b/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
index 68804dca614..0ac73de7a86 100644
--- a/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
@@ -182,8 +182,8 @@ export function SettingsRoles() {
             description="Manage the existing custom roles or create a new one."
           />
 
-          <Button className="absolute right-0 top-0 gap-2" size="md" onClick={onAddRole}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button className="absolute right-0 top-0" size="md" onClick={onAddRole}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add new role
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
index 3675fe9f7e6..57c64d001f7 100644
--- a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
@@ -184,8 +184,8 @@ export function SettingsWebhook() {
             description="Qovery allows you to create webhooks at organization-level so that, when an event happens on an
               environment within your organization, you can get notified on external applications (for instance, Slack)."
           />
-          <Button size="md" className="absolute right-0 top-0 shrink-0 gap-2" onClick={openAddNew}>
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button size="md" className="absolute right-0 top-0 shrink-0" onClick={openAddNew}>
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add new
           </Button>
         </div>
diff --git a/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx b/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
index d3643a03d7a..226001bc6a9 100644
--- a/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
+++ b/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
@@ -198,7 +198,6 @@ function DeploymentRulesContent({ organizationId, projectId, linkNewRule }: Depl
       }
     >
       <Button
-        className="gap-2"
         size="md"
         variant="outline"
         onClick={() =>
@@ -206,7 +205,7 @@ function DeploymentRulesContent({ organizationId, projectId, linkNewRule }: Depl
         }
       >
         {hasClusters ? 'Add rule' : 'Create a Cluster'}
-        <Icon iconName="circle-plus" iconStyle="regular" />
+        <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
       </Button>
     </EmptyState>
   ) : (
@@ -253,7 +252,7 @@ export function DeploymentRules() {
             <NeedHelp className="mt-2" />
           </div>
           <Button size="md" onClick={() => navigate({ to: linkNewRule })}>
-            Add rule <Icon className="ml-2" iconName="circle-plus" iconStyle="regular" />
+            Add rule <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
           </Button>
         </div>
         <div className="max-w-content-with-navigation-left">
diff --git a/libs/domains/projects/feature/src/lib/project-list/project-list.tsx b/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
index fee227422bc..1c4c7a4f89c 100644
--- a/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
+++ b/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
@@ -27,8 +27,8 @@ export function ProjectList() {
         <Heading className="flex items-center gap-2">
           Your {pluralize(projects?.length ?? 0, 'project', 'projects')}
         </Heading>
-        <Button type="button" color="brand" size="sm" className="gap-1.5" onClick={() => createProjectModal()}>
-          <Icon iconName="circle-plus" />
+        <Button type="button" color="brand" size="sm" onClick={() => createProjectModal()}>
+          <Icon data-align="prefix" iconName="circle-plus" />
           New project
         </Button>
       </div>
@@ -38,8 +38,8 @@ export function ProjectList() {
           description="Create your first project and environments to start deploying apps"
           icon="folder-closed"
         >
-          <Button color="neutral" size="md" className="gap-1.5" onClick={() => createProjectModal()}>
-            <Icon iconName="circle-plus" />
+          <Button color="neutral" size="md" onClick={() => createProjectModal()}>
+            <Icon data-align="prefix" iconName="circle-plus" />
             Create project
           </Button>
         </EmptyState>
diff --git a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
index 7429deea20f..92d665161d2 100644
--- a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
@@ -273,14 +273,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
@@ -600,14 +600,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
index ccb5a997960..d5b6af2e9f7 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
@@ -22,13 +22,14 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
           </p>
         </div>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert gap-2"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="button"
         >
           Add Variable
           <i
             aria-hidden="true"
             class="fa-regular fa-plus-circle "
+            data-align="suffix"
           />
         </button>
       </div>
@@ -47,13 +48,14 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
         />
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
         type="button"
       >
         See default values.yaml 
         <i
           aria-hidden="true"
           class="fa-regular fa-arrow-up-right-from-square text-xs"
+          data-align="suffix"
         />
       </button>
       <form
@@ -144,7 +146,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -212,17 +214,18 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 </div>
               </div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral h-[36px] justify-between"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral h-[36px] justify-between"
                 type="button"
               >
                 Close json
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-angle-down "
+                  data-align="suffix"
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -301,7 +304,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -340,13 +343,14 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
           </p>
         </div>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert gap-2"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="button"
         >
           Add Variable
           <i
             aria-hidden="true"
             class="fa-regular fa-plus-circle "
+            data-align="suffix"
           />
         </button>
       </div>
@@ -365,13 +369,14 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
         />
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
         type="button"
       >
         See default values.yaml 
         <i
           aria-hidden="true"
           class="fa-regular fa-arrow-up-right-from-square text-xs"
+          data-align="suffix"
         />
       </button>
       <form
@@ -462,7 +467,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
index 97882bf42f0..f76e4f57063 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
+++ b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
@@ -97,7 +97,7 @@ function Row({ index, remove, environmentId }: { index: number; remove: UseField
             onClick={() => setOpenEditor(!openEditor)}
           >
             {openEditor ? 'Close json' : 'Open json'}
-            <Icon iconName="angle-down" />
+            <Icon data-align="suffix" iconName="angle-down" />
           </Button>
         ) : (
           <Controller
@@ -183,7 +183,6 @@ export function ValuesOverrideArgumentsSetting({
   const addVariableButton = (
     <Button
       type="button"
-      className="gap-2"
       size={isSetting ? 'md' : 'lg'}
       onClick={() =>
         append({
@@ -194,7 +193,7 @@ export function ValuesOverrideArgumentsSetting({
       }
     >
       Add Variable
-      <Icon iconName="plus-circle" iconStyle={isSetting ? 'regular' : undefined} />
+      <Icon data-align="suffix" iconName="plus-circle" iconStyle={isSetting ? 'regular' : undefined} />
     </Button>
   )
 
@@ -247,10 +246,10 @@ export function ValuesOverrideArgumentsSetting({
         size="md"
         variant="outline"
         color="neutral"
-        className="mb-10 gap-2"
+        className="mb-10"
         onClick={() => createHelmDefaultValuesMutation()}
       >
-        See default values.yaml <Icon className="text-xs" iconName="arrow-up-right-from-square" />
+        See default values.yaml <Icon data-align="suffix" className="text-xs" iconName="arrow-up-right-from-square" />
       </Button>
       {!isSetting ? (
         <form onSubmit={onSubmit} className="w-full">
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
index ed559636f45..55c9f91e31a 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
@@ -483,12 +483,13 @@ exports[`ValuesOverrideFilesSetting should match snapshot with YAML type 1`] = `
                     No override defined.
                   </p>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa-regular fa-plus mr-2"
+                      class="fa-regular fa-plus "
+                      data-align="prefix"
                     />
                     Create override
                   </button>
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
index 93e380f375c..e7c66e55cad 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
@@ -94,14 +94,14 @@ exports[`ValuesOverrideYamlModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx b/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
index afa3c031107..1eaedb0ef86 100644
--- a/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
+++ b/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
@@ -200,7 +200,7 @@ export function DockerfileSettings({
                       <Icon iconName="wave-pulse" className="text-neutral-subtle" />
                       <p className="mb-3 mt-1 text-xs font-medium text-neutral-subtle">No Dockerfile defined</p>
                       <Button type="button" size="md" onClick={() => openModalDockerfileRaw(field)}>
-                        Create Dockerfile <Icon iconName="pen" className="ml-2" />
+                        Create Dockerfile <Icon data-align="suffix" iconName="pen" />
                       </Button>
                     </div>
                   )}
diff --git a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
index fafd802f197..636fff95d9c 100644
--- a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
+++ b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
@@ -190,7 +190,6 @@ export function DeploymentLogsPlaceholder({
         <ErrorIcon />
         <span className="text-neutral">An error occurred during the precheck step.</span>
         <Link
-          className="gap-1.5"
           as="button"
           variant="surface"
           color="neutral"
@@ -203,7 +202,7 @@ export function DeploymentLogsPlaceholder({
           }}
         >
           Open precheck
-          <Icon iconName="list-check" />
+          <Icon data-align="suffix" iconName="list-check" />
         </Link>
       </div>
     )
@@ -220,7 +219,6 @@ export function DeploymentLogsPlaceholder({
         <ErrorIcon />
         <span className="text-neutral">An error occurred during deployment of another service.</span>
         <Link
-          className="gap-1.5"
           as="button"
           variant="surface"
           color="neutral"
@@ -233,7 +231,7 @@ export function DeploymentLogsPlaceholder({
           }}
         >
           Open pipeline
-          <Icon iconName="timeline" />
+          <Icon data-align="suffix" iconName="timeline" />
         </Link>
       </div>
     )
diff --git a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
index cea6bc81c9e..e73bbf91586 100644
--- a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
@@ -105,10 +105,10 @@ export function HeaderLogs({
                         align="start"
                       >
                         <Button variant="outline" color="neutral" size="sm" className="relative">
-                          <div className="flex items-center gap-1">
-                            <Icon iconName="link" iconStyle="regular" />
+                          <div className="flex items-center">
+                            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
                             {pluralize(filteredLinks.length, 'Link', 'Links')}
-                            <Icon iconName="angle-down" />
+                            <Icon data-align="suffix" iconName="angle-down" />
                           </div>
                         </Button>
                       </ServiceLinksPopover>
@@ -176,10 +176,10 @@ export function HeaderLogs({
                         align="start"
                       >
                         <Button variant="outline" color="neutral" size="sm" className="relative">
-                          <div className="flex items-center gap-1">
-                            <Icon iconName="link" iconStyle="regular" />
+                          <div className="flex items-center">
+                            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
                             {pluralize(filteredLinks.length, 'Link', 'Links')}
-                            <Icon iconName="angle-down" />
+                            <Icon data-align="suffix" iconName="angle-down" />
                           </div>
                         </Button>
                       </ServiceLinksPopover>
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
index cdaa08ddd26..44db3664039 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
@@ -188,14 +188,14 @@ const DeploymentLogsHeader = memo(function DeploymentLogsHeader({
       <div className="flex items-center gap-4">
         <DropdownMenu.Root open={open} onOpenChange={setOpen}>
           <DropdownMenu.Trigger asChild>
-            <Button variant="outline" className="gap-1.5">
-              <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
+            <Button variant="outline">
+              <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
               {isLastVersion
                 ? 'Latest'
                 : selectedDeploymentDate
                   ? dateYearMonthDayHourMinuteSecond(new Date(selectedDeploymentDate))
                   : 'Not available'}
-              <Icon iconName="angle-down" />
+              <Icon data-align="suffix" iconName="angle-down" />
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
@@ -478,7 +478,6 @@ function DeploymentLogsBody({
             <Button
               color="brand"
               variant="surface"
-              className="gap-1.5"
               onClick={() => {
                 posthog.capture('ai-copilot-troubleshoot-triggered', {
                   source: 'deployment-logs',
@@ -490,7 +489,7 @@ function DeploymentLogsBody({
                 sendMessageRef?.current?.(message)
               }}
             >
-              <Icon iconName="sparkles" iconStyle="solid" />
+              <Icon data-align="prefix" iconName="sparkles" iconStyle="solid" />
               Launch diagnostic for this error
             </Button>
           )}
diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
index 46b96249992..11b84d58439 100644
--- a/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
@@ -89,7 +89,7 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
             variant="surface"
             color={isLiveMode ? 'brand' : 'neutral'}
             size="md"
-            className={clsx('gap-1.5 pl-2.5', {
+            className={clsx('pl-2.5', {
               'bg-surface-brand-subtle hover:!bg-surface-brand-component focus:!bg-surface-brand-component': isLiveMode,
             })}
             onClick={() => {
@@ -107,9 +107,14 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
           >
             <span className="relative block h-3.5 w-3.5">
               {isLiveMode ? (
-                <Icon iconName="loader" iconStyle="regular" className="absolute left-0 animate-spin" />
+                <Icon
+                  data-align="suffix"
+                  iconName="loader"
+                  iconStyle="regular"
+                  className="absolute left-0 animate-spin"
+                />
               ) : (
-                <Icon iconName="circle-play" iconStyle="regular" className="absolute left-0" />
+                <Icon data-align="suffix" iconName="circle-play" iconStyle="regular" className="absolute left-0" />
               )}
             </span>
             Live
@@ -136,12 +141,11 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
                 type="button"
                 variant="outline"
                 color="neutral"
-                className="gap-2"
                 size="md"
                 onClick={() => setIsOpenDatePicker(!isOpenDatePicker)}
               >
                 Timeframe
-                <Icon iconName="clock" iconStyle="regular" className="relative top-[1px]" />
+                <Icon data-align="suffix" iconName="clock" iconStyle="regular" className="relative top-[1px]" />
               </Button>
             ) : (
               <Button type="button" size="md" onClick={() => setIsOpenDatePicker(!isOpenDatePicker)}>
@@ -164,16 +168,16 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
                     clearDate()
                   }}
                 >
-                  <Icon iconName="xmark" />
+                  <Icon data-align="suffix" iconName="xmark" />
                 </span>
               </Button>
             )}
           </DatePicker>
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
-              <Button size="md" variant="outline" color="neutral" className="gap-1.5">
+              <Button size="md" variant="outline" color="neutral">
                 {updateTimeContextValue.utc ? 'UTC' : 'Browser time'}
-                <Icon iconName="chevron-down" iconStyle="regular" />
+                <Icon data-align="suffix" iconName="chevron-down" iconStyle="regular" />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content className="z-header">
diff --git a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
index b68cc9f8f38..698f6dff7fc 100644
--- a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
+++ b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
@@ -296,7 +296,7 @@ export function ServiceLogsPlaceholder({
               }}
             >
               Go to latest deployment
-              <Icon iconName="arrow-right" className="ml-1" />
+              <Icon data-align="suffix" iconName="arrow-right" />
             </Link>
           </>
         ) : (
diff --git a/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx b/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
index fe941c78735..1117ed7ef5b 100644
--- a/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
+++ b/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
@@ -15,7 +15,7 @@ export function ShowNewLogsButton({ pauseLogs, setPauseLogs, bufferedLogsCount }
   if (pauseLogs) {
     return (
       <Button
-        className="absolute bottom-[7px] left-1/2 flex w-72 -translate-x-1/2 items-center justify-center gap-2 text-sm"
+        className="absolute bottom-[7px] left-1/2 flex w-72 -translate-x-1/2 items-center justify-center text-sm"
         variant="solid"
         radius="full"
         size="md"
@@ -31,7 +31,7 @@ export function ShowNewLogsButton({ pauseLogs, setPauseLogs, bufferedLogsCount }
             {bufferedLogsCount > 999 ? '999+' : bufferedLogsCount}
           </span>
         )}
-        <Icon iconName="arrow-down" />
+        <Icon data-align="suffix" iconName="arrow-down" />
       </Button>
     )
   }
diff --git a/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx b/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
index e0b1e8b4d38..7b0bdd59d4a 100644
--- a/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
+++ b/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
@@ -30,7 +30,7 @@ export function ApplicationContainerPortSettingsList({
         >
           <Button size="md" variant="solid" color="brand" type="button" data-testid="add-button" onClick={onAddPort}>
             Add port
-            <Icon iconName="circle-plus" iconStyle="regular" className="ml-2" />
+            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
       </div>
diff --git a/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx b/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
index 7c4daffe139..3ee89a82b50 100644
--- a/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
@@ -193,10 +193,9 @@ export function ApplicationContainerStorageSettings() {
               type="button"
               onClick={() => openStorageModal()}
               disabled={disableAdd}
-              className="gap-2"
             >
               Add Storage
-              <Icon iconName="circle-plus" iconStyle="regular" />
+              <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
             </Button>
           </Tooltip>
         </SettingsHeading>
diff --git a/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx b/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
index 2dfd57a84e9..7bc8bbc9ea5 100644
--- a/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
@@ -142,9 +142,9 @@ export function HelmNetworkingSettings({ children }: HelmNetworkingSettingsProps
           title="Networking"
           description="You can expose publicly over HTTP/gRPC the Kubernetes services deployed."
         >
-          <Button className="gap-2" size="md" variant="solid" color="brand" onClick={onAddPortClick}>
+          <Button size="md" variant="solid" color="brand" onClick={onAddPortClick}>
             Add Port
-            <Icon iconName="plus-circle" iconStyle="regular" />
+            <Icon data-align="suffix" iconName="plus-circle" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
diff --git a/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx b/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
index 5c70c234828..1234850fa74 100644
--- a/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
@@ -82,12 +82,11 @@ export function ServiceDeploymentRestrictionsSettings() {
             variant="solid"
             color="brand"
             type="button"
-            className="gap-2"
             onClick={() => openCrudModal()}
             disabled={!isSupportedService(service)}
           >
             New Restriction
-            <Icon iconName="circle-plus" iconStyle="regular" />
+            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
diff --git a/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx b/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
index ed11e4c1025..38cfca44270 100644
--- a/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
@@ -80,7 +80,7 @@ export function ServiceDomainSettings() {
             disabled={!canAddDomain}
           >
             Add Domain
-            <Icon iconName="circle-plus" iconStyle="regular" className="ml-2" />
+            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
@@ -281,14 +281,13 @@ function ServiceDomainSettingsContent({
             <Link
               to={noPublicLinkCta.to}
               params={{ organizationId, projectId, environmentId, serviceId }}
-              className="gap-1"
               variant="solid"
               color="brand"
               as="button"
               size="sm"
             >
               {noPublicLinkCta.label}
-              <Icon iconName="arrow-right" className="text-xs" />
+              <Icon data-align="suffix" iconName="arrow-right" className="text-xs" />
             </Link>
             <ExternalLink
               as="button"
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 1d297993fa9..de87f3f663a 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -157,20 +157,14 @@ export const TfvarsFilesPopover = () => {
                 </span>
               }
             >
-              <Button
-                size="md"
-                variant="outline"
-                className="gap-1.5"
-                type="button"
-                data-testid="open-tfvars-files-button"
-              >
-                <Icon iconName="file-lines" iconStyle="regular" />
+              <Button size="md" variant="outline" type="button" data-testid="open-tfvars-files-button">
+                <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
                 .tfvars files
               </Button>
             </Indicator>
           ) : (
-            <Button size="md" variant="solid" className="gap-1.5" type="button" data-testid="open-tfvars-files-button">
-              <Icon iconName="file-lines" iconStyle="regular" />
+            <Button size="md" variant="solid" type="button" data-testid="open-tfvars-files-button">
+              <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
           )}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
index 59731808ac1..b55908a0ef0 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`DockerfileFragmentInlineSetting should match snapshot with content 1`]
         </h2>
         <button
           aria-label="Edit Commands"
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
           type="button"
         >
           <i
@@ -92,12 +92,13 @@ exports[`DockerfileFragmentInlineSetting should match snapshot without content 1
             No commands defined.
           </p>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
             type="button"
           >
             <i
               aria-hidden="true"
-              class="fa-regular fa-plus mr-2"
+              class="fa-regular fa-plus "
+              data-align="prefix"
             />
             Add commands
           </button>
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 500d2819ba3..92df5a1f665 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -156,20 +156,14 @@ export const TfvarsFilesPopover = () => {
                 </span>
               }
             >
-              <Button
-                size="md"
-                variant="outline"
-                className="gap-1.5"
-                type="button"
-                data-testid="open-tfvars-files-button"
-              >
-                <Icon iconName="file-lines" iconStyle="regular" />
+              <Button size="md" variant="outline" type="button" data-testid="open-tfvars-files-button">
+                <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
                 .tfvars files
               </Button>
             </Indicator>
           ) : (
-            <Button size="md" variant="solid" className="gap-1.5" type="button" data-testid="open-tfvars-files-button">
-              <Icon iconName="file-lines" iconStyle="regular" />
+            <Button size="md" variant="solid" type="button" data-testid="open-tfvars-files-button">
+              <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
           )}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 54f074336f4..5229984eac4 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -406,14 +406,14 @@ export const TerraformVariablesTable = () => {
         className={twMerge('flex items-center px-4 py-3', selectedRows.length > 0 ? 'justify-between' : 'justify-end')}
       >
         {selectedRows.length > 0 && (
-          <Button size="md" variant="solid" color="red" className="gap-1.5" type="button" onClick={deleteSelectedRows}>
-            <Icon iconName="trash-can" iconStyle="regular" />
+          <Button size="md" variant="solid" color="red" type="button" onClick={deleteSelectedRows}>
+            <Icon data-align="prefix" iconName="trash-can" iconStyle="regular" />
             Delete selected
           </Button>
         )}
-        <Button size="md" variant="outline" className="gap-1.5" type="button" onClick={onAddVariable}>
+        <Button size="md" variant="outline" type="button" onClick={onAddVariable}>
           Add variable
-          <Icon iconName="plus" iconStyle="regular" />
+          <Icon data-align="suffix" iconName="plus" iconStyle="regular" />
         </Button>
       </div>
     </div>
diff --git a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
index 440c807f008..6e98175a458 100644
--- a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
+++ b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
@@ -63,12 +63,12 @@ export function AutoDeployBadge({ serviceId }: AutoDeployBadgeProps) {
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/general"
         params={{ organizationId, projectId, environmentId, serviceId: routeServiceId }}
       >
-        <Icon className="text-neutral" iconName="arrows-rotate" />
+        <Icon data-align="prefix" className="text-neutral" iconName="arrows-rotate" />
         <span className="ml-1.5">Auto-deploy</span>
         {isLoading ? (
           <LoaderSpinner classWidth="w-3 ml-0.5" />
         ) : (
-          config && <Icon iconName={config.icon} className={`ml-1 text-xs ${config.iconClassName}`} />
+          config && <Icon data-align="suffix" iconName={config.icon} className={`text-xs ${config.iconClassName}`} />
         )}
       </Link>
     </Tooltip>
diff --git a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
index 4669c0b9747..328c54f5f2d 100644
--- a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
@@ -56,14 +56,14 @@ exports[`ConfirmationCancelLifecycleModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
index 7bf90b15b8a..c4b3299fac6 100644
--- a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
@@ -67,14 +67,14 @@ exports[`ForceUnlockModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
index 0c8783bc3d4..dde69258e46 100644
--- a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
@@ -11,19 +11,20 @@ exports[`LastCommit should match snapshot 1`] = `
         data-state="closed"
       >
         <button
-          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center gap-1 pl-1 rounded-r-none border-r-0"
+          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
           type="button"
         >
           <i
             aria-hidden="true"
             class="fa-regular fa-code-commit w-4"
+            data-align="suffix"
           />
           ddd1cee
         </button>
       </span>
       <button
         aria-label="Deploy from another version"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx b/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
index d66b8647aa6..dba5d0d9801 100644
--- a/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
+++ b/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
@@ -91,13 +91,17 @@ export function LastCommit({
               variant="outline"
               color="neutral"
               size="xs"
-              className={clsx('gap-1 pl-1', {
+              className={clsx('pl-1', {
                 'rounded-r-none border-r-0': showDeployFromAnotherVersionButton,
               })}
               onMouseEnter={() => setHover(true)}
               onMouseLeave={() => setHover(false)}
             >
-              {hover ? <Icon iconName="copy" className="w-4" /> : <Icon iconName="code-commit" className="w-4" />}
+              {hover ? (
+                <Icon data-align="suffix" iconName="copy" className="w-4" />
+              ) : (
+                <Icon data-align="suffix" iconName="code-commit" className="w-4" />
+              )}
               {deployedCommit.git_commit_id.substring(0, 7)}
             </Button>
           </CopyToClipboard>
@@ -111,7 +115,8 @@ export function LastCommit({
             variant={delta > 0 ? 'solid' : 'outline'}
             color={delta > 0 ? 'brand' : 'neutral'}
             size="xs"
-            className="w-7 justify-center gap-1 rounded-l-none px-1.5"
+            iconOnly
+            className="w-7 justify-center rounded-l-none px-1.5"
             onClick={deployCommitVersion}
           >
             <span className="flex h-full items-center justify-center">
diff --git a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
index 91429d75203..f2d1b01f9e7 100644
--- a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
@@ -16,7 +16,8 @@ exports[`LastVersion should match snapshot 1`] = `
         </span>
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+        aria-label="Deploy from another version"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/last-version/last-version.tsx b/libs/domains/services/feature/src/lib/last-version/last-version.tsx
index 0110e39d7a0..e18f75bf9b0 100644
--- a/libs/domains/services/feature/src/lib/last-version/last-version.tsx
+++ b/libs/domains/services/feature/src/lib/last-version/last-version.tsx
@@ -125,9 +125,11 @@ export function LastVersion({ organizationId, projectId, service, version }: Las
       <Tooltip content="Deploy from another version">
         <Button
           type="button"
+          aria-label="Deploy from another version"
           variant="outline"
           size="xs"
-          className="w-7 justify-center gap-1 rounded-l-none px-1.5"
+          iconOnly
+          className="w-7 justify-center rounded-l-none px-1.5"
           onClick={(e) => deployVersion(e)}
         >
           <span className="flex h-full items-center justify-center">
diff --git a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
index 9ea17abdbff..bda2adddf3f 100644
--- a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`PodDetails should match snapshot with container based pod and with mult
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit gap-0.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -17,6 +17,7 @@ exports[`PodDetails should match snapshot with container based pod and with mult
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
+          data-align="suffix"
         />
       </a>
       <div
@@ -143,7 +144,7 @@ exports[`PodDetails should match snapshot with git based pod and with last_termi
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit gap-0.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -153,6 +154,7 @@ exports[`PodDetails should match snapshot with git based pod and with last_termi
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
+          data-align="suffix"
         />
       </a>
       <div
@@ -270,7 +272,7 @@ exports[`PodDetails should match snapshot with git based pod and without last_te
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit gap-0.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -280,6 +282,7 @@ exports[`PodDetails should match snapshot with git based pod and without last_te
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
+          data-align="suffix"
         />
       </a>
       <div
@@ -366,7 +369,7 @@ exports[`PodDetails should match snapshot with pod error with 0 containers 1`] =
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit gap-0.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -376,6 +379,7 @@ exports[`PodDetails should match snapshot with pod error with 0 containers 1`] =
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
+          data-align="suffix"
         />
       </a>
       <dl
diff --git a/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx b/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
index e3e5ba30ac8..8089ab7ee56 100644
--- a/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
+++ b/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
@@ -62,10 +62,10 @@ export function PodDetails({ pod, serviceId, serviceType }: PodDetailsProps) {
         size="sm"
         color="neutral"
         variant="outline"
-        className="relative z-dropdown max-w-fit gap-0.5"
+        className="relative z-dropdown max-w-fit"
       >
         Logs
-        <Icon iconName="scroll" />
+        <Icon data-align="suffix" iconName="scroll" />
       </Link>
       {filteredContainers.length > 1 && (
         <div className="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-surface-neutral-component" />
diff --git a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
index c4aeea47b42..4b09bdd1b66 100644
--- a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
@@ -71,14 +71,14 @@ exports[`RedeployModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
index 606bccaa0a3..843176a2b1c 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
@@ -258,12 +258,12 @@ exports[`SelectCommitModal should match snapshot 1`] = `
       class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
diff --git a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
index 371b52416f6..651dd53f3ea 100644
--- a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
@@ -136,12 +136,12 @@ exports[`SelectVersionModal should match snapshot 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
@@ -280,12 +280,12 @@ exports[`SelectVersionModal should match snapshot with helm version 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       >
         Deploy
       </button>
diff --git a/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx b/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
index 66ba297c8f1..5abdd940051 100644
--- a/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
+++ b/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
@@ -25,10 +25,10 @@ export function CopyButton({ content }: CopyButtonProps) {
       color="neutral"
       variant="surface"
       onClick={() => onClickCopyToClipboard(content)}
-      className="cursor-pointer gap-2 font-sans font-medium"
+      className="cursor-pointer font-sans font-medium"
     >
       Copy
-      <Icon iconName={icon} className="text-xs" />
+      <Icon data-align="suffix" iconName={icon} className="text-xs" />
     </Button>
   )
 }
diff --git a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
index dc6ee918f40..fcdc349348f 100644
--- a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
+++ b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
@@ -81,14 +81,14 @@ function SectionDatabaseConnectionUri({ service }: { service: Database }) {
         Get the connection URI and connect to the database with your favourite client.
       </p>
       <Button
-        className="max-w-max gap-2"
+        className="max-w-max"
         color="neutral"
         variant="outline"
         size="md"
         onClick={() => handleCopyCredentials(masterCredentials!)}
       >
         Copy connection URI
-        <Icon className="text-sm" iconName="key" iconStyle="regular" />
+        <Icon data-align="suffix" className="text-sm" iconName="key" iconStyle="regular" />
       </Button>
     </div>
   )
diff --git a/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
index fcd5520a9cf..30e1bcf2e97 100644
--- a/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="open"
       id="radix-:r6:"
       type="button"
@@ -38,7 +38,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       </div>
     </button>
     <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
     >
@@ -51,7 +51,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:ra:"
       type="button"
@@ -160,7 +160,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="closed"
       id="radix-:rm:"
       type="button"
@@ -176,7 +176,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       </div>
     </button>
     <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
     >
@@ -190,7 +190,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:rq:"
       type="button"
diff --git a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
index f776982e7e0..2e406a545d4 100644
--- a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
@@ -317,14 +317,14 @@ exports[`ServiceCloneModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx b/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
index 3ad8ba3c855..ce707fe519a 100644
--- a/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
@@ -64,7 +64,7 @@ export function ApplicationContainerPortList({
           <div className="flex items-center justify-end px-4 py-3">
             <Button data-testid="add-button" size="md" variant="solid" color="brand" type="button" onClick={onAddPort}>
               Add port
-              <Icon iconName="circle-plus" iconStyle="regular" className="ml-2" />
+              <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
             </Button>
           </div>
         </BlockContent>
diff --git a/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx b/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
index 7a711477b07..5b4ce2e38c0 100644
--- a/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
@@ -326,12 +326,12 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                 >
                   <span>
                     <CopyToClipboard text={commit.git_commit_id} className="inline-flex justify-center">
-                      <Button type="button" variant="surface" color="neutral" size="xs" className="group gap-1">
+                      <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                         <span className="group-hover:hidden">
-                          <Icon iconName="copy" iconStyle="solid" className="w-4" />
+                          <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
                         </span>
                         <span className="hidden group-hover:block">
-                          <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
+                          <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
                         </span>
                         {commit.git_commit_id.substring(0, 7)}
                       </Button>
@@ -359,12 +359,12 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                   >
                     <span>
                       <CopyToClipboard text={repository.chart_version} className="inline-flex justify-center">
-                        <Button type="button" variant="surface" color="neutral" size="xs" className="group gap-1">
+                        <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                           <span className="group-hover:hidden">
-                            <Icon iconName="copy" iconStyle="solid" className="w-4" />
+                            <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
                           </span>
                           <span className="hidden group-hover:block">
-                            <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
+                            <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
                           </span>
                           {truncateText(repository.chart_version, 18)}
                         </Button>
@@ -391,12 +391,12 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                   >
                     <span>
                       <CopyToClipboard text={tag} className="inline-flex justify-center">
-                        <Button type="button" variant="surface" color="neutral" size="xs" className="group gap-1">
+                        <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                           <span className="group-hover:hidden">
-                            <Icon iconName="copy" iconStyle="solid" className="w-4" />
+                            <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
                           </span>
                           <span className="hidden group-hover:block">
-                            <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
+                            <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
                           </span>
                           {tag.length >= 8 ? truncateText(tag, 8) + '...' : tag}
                         </Button>
diff --git a/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx b/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
index eeb3a6e6416..93dc2e4eee7 100644
--- a/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
+++ b/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
@@ -79,7 +79,7 @@ export function TableFilterTriggerBy({
         <div className="relative inline-block">
           <Popover.Trigger>
             <Button
-              className={twMerge('gap-1 whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
+              className={twMerge('whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
               color={column.getIsFiltered() ? 'brand' : 'neutral'}
               variant={column.getIsFiltered() ? 'solid' : 'surface'}
             >
@@ -92,7 +92,7 @@ export function TableFilterTriggerBy({
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon iconName="chevron-down" />
+                  <Icon data-align="suffix" iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
index 4f328389e0f..29bf3668d1b 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
@@ -29,18 +29,19 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
             class="flex gap-3"
           >
             <button
-              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
             >
               Deploy selected 
               <i
                 aria-hidden="true"
                 class="fa-regular fa-play "
+                data-align="suffix"
               />
             </button>
             <button
               aria-expanded="false"
               aria-haspopup="menu"
-              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
               data-state="closed"
               id="radix-:rf:"
               type="button"
@@ -49,6 +50,7 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
               <i
                 aria-hidden="true"
                 class="fa-regular fa-angle-down "
+                data-align="suffix"
               />
             </button>
           </div>
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
index d8c876a09e9..89cc372aaa6 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
@@ -237,7 +237,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -424,19 +424,20 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center gap-1 pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
+                            data-align="suffix"
                           />
                           2f74448
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -624,7 +625,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -810,7 +811,8 @@ exports[`ServiceList should match snapshot 1`] = `
                         </span>
                       </span>
                       <button
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+                        aria-label="Deploy from another version"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -1300,7 +1302,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -1496,19 +1498,20 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center gap-1 pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
+                            data-align="suffix"
                           />
                           10ad354
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -1791,7 +1794,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -1987,19 +1990,20 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center gap-1 pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
+                            data-align="suffix"
                           />
                           10ad354
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -2059,7 +2063,7 @@ exports[`ServiceList should match snapshot 1`] = `
               class="flex gap-3"
             >
               <button
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
                 data-state="closed"
                 disabled=""
               >
@@ -2067,12 +2071,13 @@ exports[`ServiceList should match snapshot 1`] = `
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-play "
+                  data-align="suffix"
                 />
               </button>
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
                 data-state="closed"
                 id="radix-:r2g:"
                 type="button"
@@ -2081,6 +2086,7 @@ exports[`ServiceList should match snapshot 1`] = `
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-angle-down "
+                  data-align="suffix"
                 />
               </button>
             </div>
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
index b316ca632d9..4f34d6d5806 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
@@ -362,17 +362,17 @@ export function ServiceListActionBar({ environment, selectedRows, resetRowSelect
               <Button
                 color="brand"
                 size="md"
-                className="items-center gap-2"
+                className="items-center"
                 onClick={() => handleDeployAllServices()}
                 disabled={deployableServices.length === 0}
               >
-                Deploy selected <Icon iconName="play" />
+                Deploy selected <Icon data-align="suffix" iconName="play" />
               </Button>
             </Tooltip>
             <DropdownMenu.Root modal={false}>
               <DropdownMenu.Trigger asChild>
-                <Button color="neutral" size="md" variant="surface" className="items-center gap-2">
-                  More <Icon iconName="angle-down" />
+                <Button color="neutral" size="md" variant="surface" className="items-center">
+                  More <Icon data-align="suffix" iconName="angle-down" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content>
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index a532d0fb00f..0ab843ba8bb 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -351,11 +351,10 @@ export function ServiceList({ className, containerClassName, environment, ...pro
           as="button"
           size="md"
           color="neutral"
-          className="gap-1.5"
           to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
           params={{ organizationId, projectId, environmentId }}
         >
-          <Icon iconName="circle-plus" iconStyle="regular" />
+          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
           New service
         </Link>
       </EmptyState>
diff --git a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
index 7888d5e6672..69c0255fc13 100644
--- a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
@@ -127,7 +127,7 @@ exports[`InstanceMetrics should match snapshot with data 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral truncate"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral truncate"
               >
                 foobar
               </button>
diff --git a/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx b/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
index cba58aae750..c9eb91ebaf4 100644
--- a/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
+++ b/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
@@ -54,8 +54,8 @@ export function GitRepository({ gitRepository }: { gitRepository: ApplicationGit
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Button color="neutral" variant="outline" size="xs" className="gap-1">
-            <Icon iconName="code-branch" iconStyle="regular" height={14} width={14} />
+          <Button color="neutral" variant="outline" size="xs">
+            <Icon data-align="prefix" iconName="code-branch" iconStyle="regular" height={14} width={14} />
             <Truncate text={gitRepository.branch} truncateLimit={17} />
           </Button>
         </a>
@@ -234,9 +234,13 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
               color="neutral"
               size="xs"
               as="button"
-              className="gap-1"
             >
-              <Icon width={16} height={16} name={containerRegistryKindToIcon(containerImage.registry.kind)} />
+              <Icon
+                data-align="prefix"
+                width={16}
+                height={16}
+                name={containerRegistryKindToIcon(containerImage.registry.kind)}
+              />
               <span className="truncate">
                 <Truncate text={containerImage.registry.name.toLowerCase()} truncateLimit={18} />
               </span>
@@ -261,9 +265,8 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
               color="neutral"
               size="xs"
               as="button"
-              className="gap-1"
             >
-              <Icon width={16} name={IconEnum.HELM_OFFICIAL} />
+              <Icon data-align="prefix" width={16} name={IconEnum.HELM_OFFICIAL} />
               <Truncate text={helmRepository.repository.name ?? ''} truncateLimit={18} />
             </ExternalLink>
           )}
@@ -288,7 +291,6 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
               color="neutral"
               variant="outline"
               size="xs"
-              className="gap-1"
               onClick={() => {
                 if (!databaseSource.masterCredentials) {
                   return
@@ -296,7 +298,7 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
                 handleCopyCredentials(databaseSource.masterCredentials)
               }}
             >
-              <Icon iconName="key" iconStyle="regular" />
+              <Icon data-align="prefix" iconName="key" iconStyle="regular" />
               Connection URI
             </Button>
           )}
@@ -342,10 +344,10 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
           environmentId={environmentId}
           serviceId={serviceId}
         >
-          <Button className="gap-1" size="xs" color="neutral" variant="outline">
-            <Icon iconName="link" iconStyle="regular" />
+          <Button size="xs" color="neutral" variant="outline">
+            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
             Links
-            <Icon iconName="angle-down" iconStyle="regular" />
+            <Icon data-align="suffix" iconName="angle-down" iconStyle="regular" />
           </Button>
         </ServiceLinksPopover>
       )}
diff --git a/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx b/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
index bca9b1f62bc..d64720a5584 100644
--- a/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
+++ b/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
@@ -101,7 +101,6 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
         description={`Deploy the ${service?.serviceType.toLowerCase() ?? 'service'} first`}
       >
         <Button
-          className="gap-1"
           color="neutral"
           variant="outline"
           size="md"
@@ -118,7 +117,7 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
             })
           }}
         >
-          <Icon iconName="rocket" />
+          <Icon data-align="prefix" iconName="rocket" />
           Deploy now
         </Button>
       </EmptyState>
@@ -137,8 +136,8 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
         .with({ repository: P.select({ chart_name: P.string, chart_version: P.string }) }, ({ chart_version }) => (
           <Tooltip content={`Chart version: ${chart_version}`}>
             <span className="inline-flex" onClick={preventParentLinkNavigation}>
-              <Button type="button" variant="surface" color="neutral" size="xs" className="gap-1">
-                <Icon iconName="code-commit" className="w-4" />
+              <Button type="button" variant="surface" color="neutral" size="xs">
+                <Icon data-align="prefix" iconName="code-commit" className="w-4" />
                 {chart_version.length >= 18 ? `${chart_version.slice(0, 15)}…` : chart_version}
               </Button>
             </span>
@@ -148,8 +147,8 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
           <Tooltip content={`Image tag: ${tag}`}>
             <span className="inline-flex" onClick={preventParentLinkNavigation}>
               <CopyToClipboard text={tag} className="inline-flex justify-center">
-                <Button type="button" variant="surface" color="neutral" size="xs" className="gap-1">
-                  <Icon iconName="code-commit" className="w-4" />
+                <Button type="button" variant="surface" color="neutral" size="xs">
+                  <Icon data-align="prefix" iconName="code-commit" className="w-4" />
                   {tag.length >= 8 ? `${tag.slice(0, 8)}…` : tag}
                 </Button>
               </CopyToClipboard>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
index 7fd1770aaf0..b78ba8a9ab5 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
@@ -19,12 +19,13 @@ exports[`ServiceTerminal should match snapshot 1`] = `
               class="relative z-10"
             >
               <button
-                class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+                class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
               >
                 <span>
                   <i
                     aria-hidden="true"
-                    class="fa-regular fa-xmark ml-2 text-sm"
+                    class="fa-regular fa-xmark text-sm"
+                    data-align="suffix"
                   />
                 </span>
               </button>
@@ -81,7 +82,7 @@ exports[`ServiceTerminal should match snapshot 1`] = `
           </div>
         </div>
         <a
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1.5"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
           href="https://www.qovery.com/docs/cli/overview"
           rel="noopener noreferrer"
           target="_blank"
@@ -89,6 +90,7 @@ exports[`ServiceTerminal should match snapshot 1`] = `
           <i
             aria-hidden="true"
             class="fa-regular fa-book "
+            data-align="prefix"
           />
           CLI docs
         </a>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index da21d40c04c..5aa6eb8478d 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -7,13 +7,14 @@ exports[`InputSearch should match snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
           <i
             aria-hidden="true"
-            class="fa-regular fa-xmark ml-2 text-sm"
+            class="fa-regular fa-xmark text-sm"
+            data-align="suffix"
           />
         </span>
       </button>
@@ -70,13 +71,14 @@ exports[`InputSearch should match with snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
           <i
             aria-hidden="true"
-            class="fa-regular fa-xmark ml-2 text-sm"
+            class="fa-regular fa-xmark text-sm"
+            data-align="suffix"
           />
         </span>
       </button>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index d0444a94f05..b638c7fc80f 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -45,7 +45,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel }: I
       >
         {value}
         <span>
-          <Icon iconName="xmark" className="ml-2 text-sm" />
+          <Icon data-align="suffix" iconName="xmark" className="text-sm" />
         </span>
       </Button>
       <div className={clsx({ hidden: selectedItem }, 'relative')}>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index dcc7dc1ef82..aec294c5834 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -240,9 +240,8 @@ export function ServiceTerminal({
           variant="surface"
           color="neutral"
           size="md"
-          className="gap-1.5"
         >
-          <Icon iconName="book" />
+          <Icon data-align="prefix" iconName="book" />
           CLI docs
         </ExternalLink>
       </div>
diff --git a/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx b/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
index 8ec72594f39..a2d4c097f0f 100644
--- a/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
+++ b/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
@@ -191,7 +191,6 @@ export function ServicesDeploymentPipeline() {
             size="sm"
             variant="outline"
             color="neutral"
-            className="gap-1.5"
             onClick={() =>
               openModal({
                 content: <ServicesDeploymentStageModal environmentId={environmentId} onClose={closeModal} />,
@@ -201,7 +200,7 @@ export function ServicesDeploymentPipeline() {
               })
             }
           >
-            <Icon iconName="circle-plus" iconStyle="regular" />
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             Add stage
           </Button>
         </div>
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
index 8fcd97dc45c..e507d617c0d 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
@@ -411,14 +411,8 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
             render={({ field: { name, onChange, value }, fieldState: { error } }) => (
               <>
                 <div className="mb-2 flex justify-end">
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="outline"
-                    className="gap-1.5"
-                    onClick={() => setIsValueEditorOpen(true)}
-                  >
-                    <Icon iconName="arrows-maximize" iconStyle="regular" className="text-xs" />
+                  <Button type="button" size="sm" variant="outline" onClick={() => setIsValueEditorOpen(true)}>
+                    <Icon data-align="prefix" iconName="arrows-maximize" iconStyle="regular" className="text-xs" />
                     Open editor
                   </Button>
                 </div>
diff --git a/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx b/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
index c5a7099be8b..01547d12f17 100644
--- a/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
+++ b/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
@@ -33,9 +33,9 @@ export function FlowCreateVariable({
     <Section>
       <div className="flex justify-between">
         <Heading className="mb-2">Environment variables</Heading>
-        <Button className="gap-2" size="md" onClick={onAdd}>
+        <Button size="md" onClick={onAdd}>
           Add Variable
-          <Icon iconName="plus-circle" iconStyle="regular" />
+          <Icon data-align="suffix" iconName="plus-circle" iconStyle="regular" />
         </Button>
       </div>
 
diff --git a/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx b/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
index 062aa5f0b8e..e7e28917986 100644
--- a/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
+++ b/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
@@ -88,12 +88,12 @@ export function VariableRow(props: VariableRowProps) {
             {openEditor ? (
               <>
                 Close
-                <Icon iconName="angle-up" className="text-neutral-subtle" />
+                <Icon data-align="prefix" iconName="angle-up" className="text-neutral-subtle" />
               </>
             ) : (
               <>
                 Edit
-                <Icon iconName="edit" className="text-neutral-subtle" />
+                <Icon data-align="suffix" iconName="edit" className="text-neutral-subtle" />
               </>
             )}
           </Button>
diff --git a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
index 4f6b1b6c22e..95e6660d1d7 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
@@ -86,7 +86,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r28:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -94,6 +94,7 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
+                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -108,7 +109,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r2b:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -116,6 +117,7 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
+                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -130,7 +132,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r2e:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -138,6 +140,7 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
+                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -225,7 +228,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2g:"
                     type="button"
@@ -327,7 +330,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2k:"
                     type="button"
@@ -418,7 +421,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2o:"
                     type="button"
@@ -612,7 +615,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2s:"
                     type="button"
@@ -719,7 +722,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r31:"
                     type="button"
@@ -969,7 +972,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r37:"
                     type="button"
@@ -1178,7 +1181,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3d:"
                     type="button"
@@ -1301,7 +1304,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3i:"
                     type="button"
@@ -1409,7 +1412,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r3n:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -1417,6 +1420,7 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
+                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -1431,7 +1435,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r3q:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -1439,6 +1443,7 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
+                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -1494,7 +1499,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3s:"
                     type="button"
@@ -1578,7 +1583,7 @@ exports[`VariableList should match snapshot 1`] = `
             Deselect
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-8 px-2.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
             data-testid="submit-button"
             disabled=""
             type="button"
diff --git a/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx b/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
index 484b616e45c..ec8ee780132 100644
--- a/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
+++ b/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
@@ -58,8 +58,8 @@ export function VariablesActionToolbar({
       <DropdownMenu.Root>
         {showImportButton ? (
           <DropdownMenu.Trigger asChild>
-            <Button color="neutral" variant="outline" size="md" className="gap-2">
-              <Icon iconName="arrow-up-from-line" iconStyle="regular" />
+            <Button color="neutral" variant="outline" size="md">
+              <Icon data-align="prefix" iconName="arrow-up-from-line" iconStyle="regular" />
               Import variable
             </Button>
           </DropdownMenu.Trigger>
@@ -102,8 +102,8 @@ export function VariablesActionToolbar({
       </DropdownMenu.Root>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
-          <Button color="brand" variant="solid" size="md" className="gap-2">
-            <Icon iconName="circle-plus" iconStyle="regular" />
+          <Button color="brand" variant="solid" size="md">
+            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
             New variable
           </Button>
         </DropdownMenu.Trigger>
diff --git a/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx b/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
index a7f211e67fa..9b40cee75f8 100644
--- a/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
+++ b/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
@@ -14,10 +14,10 @@ export function NeedHelp({ className }: NeedHelpProps) {
       size="xs"
       color="brand"
       variant="surface"
-      className={twMerge('w-fit items-center gap-1', className)}
+      className={twMerge('w-fit items-center', className)}
       onClick={toggleAssistantOpen}
     >
-      <Icon iconName="circle-question" iconStyle="regular" className="p-0.5 text-xs" />
+      <Icon data-align="prefix" iconName="circle-question" iconStyle="regular" className="p-0.5 text-xs" />
       <span>Need help here?</span>
     </Button>
   )
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
index 3b565eb5132..434a4a4a3c9 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
@@ -139,7 +139,7 @@ export function SectionAICopilotConfiguration({
               {hasUnsavedChanges && (
                 <div className="flex items-center gap-3">
                   <Button size="md" color="brand" onClick={handleSaveMode} loading={isUpdating}>
-                    <Icon iconName="check" className="mr-2" />
+                    <Icon data-align="prefix" iconName="check" />
                     Save changes
                   </Button>
                   <Button size="md" color="neutral" variant="outline" onClick={handleCancelMode} disabled={isUpdating}>
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
index b6ceb8c9d87..ae20bb4fac5 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
@@ -489,7 +489,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                   />
 
                   <Button type="submit" size="md" color="brand" disabled={!isValid} className="mt-4">
-                    <Icon iconName="circle-check" className="mr-2" />
+                    <Icon data-align="prefix" iconName="circle-check" />
                     Enable AI Copilot
                   </Button>
                 </div>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
index 133e7d0301b..e162ca6723c 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
@@ -33,9 +33,8 @@ export function DevopsCopilotButton() {
           trigger: 'button-click',
         })
       }}
-      className="gap-1.5"
     >
-      <Icon iconName="sparkles" iconStyle="solid" className="text-xs text-brand" />
+      <Icon data-align="prefix" iconName="sparkles" iconStyle="solid" className="text-xs text-brand" />
       AI Copilot
     </Button>
   )
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/assistant-message/assistant-message.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/assistant-message/assistant-message.tsx
index acfeea84c19..7615e1945c2 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/assistant-message/assistant-message.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/assistant-message/assistant-message.tsx
@@ -28,7 +28,7 @@ function VoteButtons({ messageId }: { messageId: string }) {
       <Button
         type="button"
         variant="surface"
-        className={clsx('flex items-center gap-1 px-2 py-1', {
+        className={clsx('flex items-center px-2 py-1', {
           'text-brand-500': response === 'up',
         })}
         onClick={() => respond('up')}
@@ -38,7 +38,7 @@ function VoteButtons({ messageId }: { messageId: string }) {
       <Button
         type="button"
         variant="surface"
-        className={clsx('flex items-center gap-1 px-2 py-1', {
+        className={clsx('flex items-center px-2 py-1', {
           'text-brand-500': response === 'down',
         })}
         onClick={() => respond('down')}
@@ -64,7 +64,7 @@ export function AssistantMessage({ message, plan, showPlans, setShowPlans }: Ass
           onClick={() => setShowPlans((prev) => ({ ...prev, [message.id]: !prev[message.id] }))}
         >
           <div className="w-fit text-ssm font-medium italic text-neutral-subtle">Plan steps</div>
-          <div className="">
+          <div>
             <Icon
               iconName={isPlanVisible ? 'chevron-circle-up' : 'chevron-circle-down'}
               iconStyle="regular"
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
index d49a13efb99..d7ed22eb50d 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
@@ -430,13 +430,13 @@ export function DevopsCopilotPanel({ onClose, style }: DevopsCopilotPanelProps)
                             key={`${label}${link}`}
                             type="button"
                             variant="surface"
-                            className="inline-flex max-w-max gap-2 truncate"
+                            className="inline-flex max-w-max truncate"
                             onClick={() => {
                               setInputMessage(label)
                               handleSendMessage(label)
                             }}
                           >
-                            <Icon iconName="arrow-right" />
+                            <Icon data-align="prefix" iconName="arrow-right" />
                             {label}
                           </Button>
                         ))}
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
index 47d8900a2a3..08a99ea24cc 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
@@ -21,8 +21,8 @@ export function EnableCopilotScreen({ organizationId, onClose }: EnableCopilotSc
       className="h-full w-full rounded-none border-none"
     >
       <Link to="/organization/$organizationId/settings/ai-copilot" params={{ organizationId }} onClick={onClose}>
-        <Button className="flex gap-2" size="md">
-          <Icon iconName="sparkles" />
+        <Button className="flex" size="md">
+          <Icon data-align="prefix" iconName="sparkles" />
           Enable AI Copilot
         </Button>
       </Link>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
index 7bca95144b1..61413866bc6 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`Input should match snapshot when loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
           data-state="closed"
           type="button"
         >
@@ -25,6 +25,7 @@ exports[`Input should match snapshot when loading 1`] = `
           <i
             aria-hidden="true"
             class="fa-light fa-stop absolute left-0 right-0 m-auto opacity-0 group-hover:opacity-100"
+            data-align="suffix"
           />
         </button>
       </div>
@@ -47,13 +48,14 @@ exports[`Input should match snapshot when not loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
           data-state="closed"
           type="button"
         >
           <i
             aria-hidden="true"
             class="fa-regular fa-arrow-up "
+            data-align="suffix"
           />
         </button>
       </div>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
index d54e802b208..75a6c17fcb4 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
@@ -46,11 +46,12 @@ export const Input = forwardRef<HTMLTextAreaElement, InputProps>(({ onClick, sto
             }}
           >
             {!loading ? (
-              <Icon iconName="arrow-up" className={loading ? 'opacity-0' : ''} />
+              <Icon data-align="suffix" iconName="arrow-up" className={loading ? 'opacity-0' : ''} />
             ) : (
               <>
                 <LoaderSpinner className="absolute left-0 right-0 m-auto group-hover:opacity-0" />
                 <Icon
+                  data-align="suffix"
                   className="absolute left-0 right-0 m-auto opacity-0 group-hover:opacity-100"
                   iconName="stop"
                   iconStyle="light"
diff --git a/libs/shared/ui/src/lib/components/banner/banner.tsx b/libs/shared/ui/src/lib/components/banner/banner.tsx
index c4923b920f3..e5b7c2b8775 100644
--- a/libs/shared/ui/src/lib/components/banner/banner.tsx
+++ b/libs/shared/ui/src/lib/components/banner/banner.tsx
@@ -55,9 +55,9 @@ export const Banner = forwardRef<HTMLDivElement, PropsWithChildren<BannerProps>>
     <div className={twMerge(bannerVariants({ color }), 'relative', className)} ref={forwardedRef} {...props}>
       {children}
       {buttonLabel && (
-        <Button type="button" className="ml-4 gap-1" variant="solid" color={buttonColor} onClick={onClickButton}>
+        <Button type="button" className="ml-4" variant="solid" color={buttonColor} onClick={onClickButton}>
           {buttonLabel}
-          {buttonIconRight && <Icon iconName={buttonIconRight} />}
+          {buttonIconRight && <Icon data-align="suffix" iconName={buttonIconRight} />}
         </Button>
       )}
       {dismissible && (
diff --git a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
index 6d4eba94ae1..f2c1ef0446d 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ButtonPrimitive should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
diff --git a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
index 13675875875..e4600673d74 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
+++ b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
@@ -1,4 +1,4 @@
-import { renderWithProviders } from '@qovery/shared/util-tests'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { ButtonPrimitive } from './button-primitive'
 
 describe('ButtonPrimitive', () => {
@@ -6,4 +6,52 @@ describe('ButtonPrimitive', () => {
     const { baseElement } = renderWithProviders(<ButtonPrimitive type="button">Foobar</ButtonPrimitive>)
     expect(baseElement).toMatchSnapshot()
   })
+
+  it('should render icon alignment markers around children', () => {
+    renderWithProviders(
+      <ButtonPrimitive type="button">
+        <span data-align="prefix">Prefix</span>
+        Foobar
+        <span data-align="suffix">Suffix</span>
+      </ButtonPrimitive>
+    )
+
+    expect(screen.getByRole('button')).toHaveTextContent('PrefixFoobarSuffix')
+  })
+
+  it('should use compact icon margins for xs and sm buttons', () => {
+    renderWithProviders(
+      <>
+        <ButtonPrimitive type="button" size="xs">
+          <span data-align="prefix">Prefix</span>
+          Extra small
+        </ButtonPrimitive>
+        <ButtonPrimitive type="button" size="sm">
+          Small
+          <span data-align="suffix">Suffix</span>
+        </ButtonPrimitive>
+      </>
+    )
+
+    expect(screen.getByText('Extra small').closest('button')?.className).toContain('[&_[data-align=prefix]]:mr-1')
+    expect(screen.getByText('Small').closest('button')?.className).toContain('[&_[data-align=suffix]]:ml-1')
+  })
+
+  it('should use larger icon margins for md and lg buttons', () => {
+    renderWithProviders(
+      <>
+        <ButtonPrimitive type="button" size="md">
+          <span data-align="prefix">Prefix</span>
+          Medium
+        </ButtonPrimitive>
+        <ButtonPrimitive type="button" size="lg">
+          Large
+          <span data-align="suffix">Suffix</span>
+        </ButtonPrimitive>
+      </>
+    )
+
+    expect(screen.getByText('Medium').closest('button')?.className).toContain('[&_[data-align=prefix]]:mr-1.5')
+    expect(screen.getByText('Large').closest('button')?.className).toContain('[&_[data-align=suffix]]:ml-1.5')
+  })
 })
diff --git a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
index 10a3453b498..f25b1c98578 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
+++ b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
@@ -37,10 +37,10 @@ const _buttonVariants = cva(
         current: [''],
       },
       size: {
-        xs: ['text-xs', 'h-6', 'px-1.5'],
-        sm: ['text-xs', 'h-7', 'px-2'],
-        md: ['text-sm', 'h-8', 'px-2.5'],
-        lg: ['text-sm', 'h-10', 'px-3'],
+        xs: ['text-ssm', 'h-6', 'px-1.5', '[&_[data-align=prefix]]:mr-1', '[&_[data-align=suffix]]:ml-1'],
+        sm: ['text-ssm', 'h-7', 'px-2', '[&_[data-align=prefix]]:mr-1', '[&_[data-align=suffix]]:ml-1'],
+        md: ['text-sm', 'h-8', 'px-2.5', '[&_[data-align=prefix]]:mr-1.5', '[&_[data-align=suffix]]:ml-1.5'],
+        lg: ['text-sm', 'h-10', 'px-3', '[&_[data-align=prefix]]:mr-1.5', '[&_[data-align=suffix]]:ml-1.5'],
       },
       radius: {
         none: [],
diff --git a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
index 5e796d30950..c69ef046da7 100644
--- a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
@@ -17,7 +17,7 @@ exports[`Button should match snapshot with loading 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert pointer-events-none relative !text-transparent"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert pointer-events-none relative !text-transparent"
       type="button"
     >
       <div
diff --git a/libs/shared/ui/src/lib/components/button/button.spec.tsx b/libs/shared/ui/src/lib/components/button/button.spec.tsx
index 02f77d7253d..f4963c35177 100644
--- a/libs/shared/ui/src/lib/components/button/button.spec.tsx
+++ b/libs/shared/ui/src/lib/components/button/button.spec.tsx
@@ -1,4 +1,4 @@
-import { renderWithProviders } from '@qovery/shared/util-tests'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { Button } from './button'
 
 describe('Button', () => {
@@ -15,4 +15,18 @@ describe('Button', () => {
     )
     expect(baseElement).toMatchSnapshot()
   })
+
+  it('should support icon alignment markers', () => {
+    renderWithProviders(
+      <Button type="button">
+        <span data-align="prefix">Prefix</span>
+        Foobar
+        <span data-align="suffix">Suffix</span>
+      </Button>
+    )
+
+    expect(screen.getByRole('button')).toHaveTextContent('PrefixFoobarSuffix')
+    expect(screen.getByRole('button').className).toContain('[&_[data-align=prefix]]:mr-1')
+    expect(screen.getByRole('button').className).toContain('[&_[data-align=suffix]]:ml-1')
+  })
 })
diff --git a/libs/shared/ui/src/lib/components/button/button.stories.tsx b/libs/shared/ui/src/lib/components/button/button.stories.tsx
index a0d6b876afe..bd9ae512afe 100644
--- a/libs/shared/ui/src/lib/components/button/button.stories.tsx
+++ b/libs/shared/ui/src/lib/components/button/button.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react-webpack5'
+import { Icon } from '../icon/icon'
 import { Button } from './button'
 
 const Story: Meta<typeof Button> = {
@@ -19,4 +20,16 @@ export const Primary = {
   },
 }
 
+export const WithIcons = {
+  args: {
+    children: (
+      <>
+        <Icon data-align="prefix" iconName="arrow-left" />
+        Upload
+        <Icon data-align="suffix" iconName="arrow-right" />
+      </>
+    ),
+  },
+}
+
 export default Story
diff --git a/libs/shared/ui/src/lib/components/callout/callout.tsx b/libs/shared/ui/src/lib/components/callout/callout.tsx
index 4155de9c166..35f1f0811e4 100644
--- a/libs/shared/ui/src/lib/components/callout/callout.tsx
+++ b/libs/shared/ui/src/lib/components/callout/callout.tsx
@@ -3,7 +3,7 @@ import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'reac
 import { twMerge } from '@qovery/shared/util-js'
 
 const calloutRootVariants = cva(
-  ['flex', 'flex-row', 'gap-x-4', 'p-4', 'border', 'rounded-md', 'text-sm', 'items-center'],
+  ['flex', 'flex-row', 'gap-x-3', 'p-4', 'border', 'rounded-md', 'text-sm', 'items-center'],
   {
     variants: {
       color: {
@@ -53,7 +53,7 @@ const CalloutText = forwardRef<ElementRef<'div'>, CalloutTextProps>(function Cal
   ref
 ) {
   return (
-    <div {...props} className={twMerge('-order-1 mr-auto gap-x-4 text-neutral', className)} ref={ref}>
+    <div {...props} className={twMerge('-order-1 mr-auto gap-x-3 text-neutral', className)} ref={ref}>
       {children}
     </div>
   )
diff --git a/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx b/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
index 8ef30bef11b..adba25c928f 100644
--- a/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
+++ b/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
@@ -49,7 +49,7 @@ export function CodeEditorInlineSetting({
           <Icon iconName="wave-pulse" className="text-neutral-subtle" />
           <p className="mb-3 mt-1 text-xs font-medium text-neutral-subtle">{emptyStateText}</p>
           <Button type="button" size="md" variant="outline" onClick={onOpenModal}>
-            <Icon iconName="plus" className="mr-2" />
+            <Icon data-align="prefix" iconName="plus" />
             {addButtonLabel}
           </Button>
         </div>
diff --git a/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx b/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
index f367ef3e49e..c7bb0c8a2df 100644
--- a/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
+++ b/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
@@ -26,10 +26,10 @@ export function CopyButton({ content }: CopyButtonProps) {
       color="neutral"
       variant="outline"
       onClick={() => onClickCopyToClipboard(content)}
-      className="cursor-pointer gap-2 font-sans font-medium"
+      className="cursor-pointer font-sans font-medium"
     >
       Copy
-      <Icon iconName={icon} className="text-xs" />
+      <Icon data-align="suffix" iconName={icon} className="text-xs" />
     </Button>
   )
 }
diff --git a/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx b/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
index ebd62988a1d..e930e932d45 100644
--- a/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
+++ b/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
@@ -15,9 +15,9 @@ export function ErrorFallback({ className, error, resetErrorBoundary }: Fallback
           <Heading className="font-medium text-neutral">Something went wrong</Heading>
           <p className="text-sm text-neutral-subtle">{error.message}</p>
         </div>
-        <Button onClick={resetErrorBoundary} size="md" className="flex gap-2">
+        <Button onClick={resetErrorBoundary} size="md" className="flex">
           Try again
-          <Icon iconName="refresh" />
+          <Icon data-align="suffix" iconName="refresh" />
         </Button>
       </div>
     </Section>
diff --git a/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx b/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
index 88454bdd80a..9b44b2dfc49 100644
--- a/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
+++ b/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
@@ -31,7 +31,7 @@ const FunnelFlowContent = (props: FunnelFlowProps) => {
         {props.onExit && (
           <div className="flex h-full items-center border-l border-l-neutral pl-5">
             <Button onClick={props.onExit} variant="surface" size="md">
-              Close <Icon iconName="xmark" iconStyle="regular" className="ml-2 text-base" />
+              Close <Icon data-align="suffix" iconName="xmark" iconStyle="regular" className="text-base" />
             </Button>
           </div>
         )}
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
index ec825b47a72..e87cddf12a2 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`InputFilter should match input filter with loading 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       <div
@@ -24,7 +24,7 @@ exports[`InputFilter should match input filter with value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       Option 1
@@ -36,6 +36,7 @@ exports[`InputFilter should match input filter with value 1`] = `
         <i
           aria-hidden="true"
           class="fa-regular fa-xmark "
+          data-align="suffix"
         />
       </span>
     </button>
@@ -47,13 +48,14 @@ exports[`InputFilter should match input filter without value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-2"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       Filter
       <i
         aria-hidden="true"
         class="fa-regular fa-magnifying-glass "
+        data-align="suffix"
       />
     </button>
   </div>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
index e70f6d43b96..f860c0b507f 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
@@ -34,9 +34,9 @@ export function InputFilter({ name, nameKey, options, onChange, defaultValue, is
   return (
     <div>
       {!isOpen && (
-        <Button onClick={() => setIsOpen(true)} type="button" variant="surface" color="neutral" className="gap-2">
+        <Button onClick={() => setIsOpen(true)} type="button" variant="surface" color="neutral">
           {name}
-          <Icon iconName="magnifying-glass" />
+          <Icon data-align="suffix" iconName="magnifying-glass" />
         </Button>
       )}
       {isOpen && (
@@ -74,7 +74,7 @@ export function InputFilter({ name, nameKey, options, onChange, defaultValue, is
                       setIsOpen(false)
                     }}
                   >
-                    <Icon iconName="xmark" />
+                    <Icon data-align="suffix" iconName="xmark" />
                   </span>
                 </>
               )}
diff --git a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
index 07658740b2c..fcf7cb0a477 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
@@ -55,13 +55,13 @@ exports[`ModalConfirmation should match confirm mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="submit"
         >
           Confirm
@@ -115,13 +115,13 @@ exports[`ModalConfirmation should match delete mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           type="submit"
         >
           Confirm
@@ -179,13 +179,13 @@ exports[`ModalConfirmation should match delete mode without description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           type="submit"
         >
           Confirm
diff --git a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
index fc7e9416113..59665281a69 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
     />
     <form>
       <div
-        class="flex-row gap-x-4 p-4 border rounded-md text-sm items-center border-negative-component bg-surface-negative-subtle text-negative mb-5 grid grid-cols-[1fr_auto] gap-y-3"
+        class="flex-row gap-x-3 p-4 border rounded-md text-sm items-center border-negative-component bg-surface-negative-subtle text-negative mb-5 grid grid-cols-[1fr_auto] gap-y-3"
         data-accent-color="red"
       >
         <div
@@ -29,7 +29,7 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
           />
         </div>
         <div
-          class="-order-1 mr-auto gap-x-4 text-neutral"
+          class="-order-1 mr-auto gap-x-3 text-neutral"
         >
           <div
             class="flex flex-col gap-3"
@@ -112,13 +112,13 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           disabled=""
           type="submit"
         >
diff --git a/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx b/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
index 2562a69b420..4d3b5f060b1 100644
--- a/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
@@ -39,7 +39,7 @@ export function TableFilter({ column }: { column: Column<any, unknown> }) {
         <div className="relative inline-block">
           <Popover.Trigger>
             <Button
-              className={twMerge('gap-1 whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
+              className={twMerge('whitespace-nowrap text-xs', column.getIsFiltered() ? 'pr-6' : '')}
               color={column.getIsFiltered() ? 'brand' : 'neutral'}
               variant={column.getIsFiltered() ? 'solid' : 'surface'}
             >
@@ -55,7 +55,7 @@ export function TableFilter({ column }: { column: Column<any, unknown> }) {
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon iconName="chevron-down" />
+                  <Icon data-align="suffix" iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
index a5edece3b61..98597f9b461 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
@@ -115,7 +115,7 @@ export function TableHeadDatePickerFilter({
               type="button"
               color="neutral"
               size="sm"
-              className="gap-1.5 whitespace-nowrap"
+              className="whitespace-nowrap"
               onClick={() => setIsOpenTimestamp(!isOpenTimestamp)}
             >
               {title}
@@ -124,7 +124,7 @@ export function TableHeadDatePickerFilter({
                 className="relative flex h-6 cursor-pointer items-center font-code text-xs"
                 onClick={(event) => cleanFilter(event)}
               >
-                <Icon iconName="xmark" />
+                <Icon data-align="suffix" iconName="xmark" />
               </span>
             </Button>
           ) : (
@@ -132,13 +132,13 @@ export function TableHeadDatePickerFilter({
               type="button"
               color="neutral"
               size="sm"
-              className="items-center gap-1.5 font-code"
+              className="items-center font-code"
               onClick={() => {
                 setIsOpenTimestamp(!isOpenTimestamp)
               }}
             >
               {title}
-              <Icon iconName="angle-down" />
+              <Icon data-align="suffix" iconName="angle-down" />
             </Button>
           )}
         </div>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx b/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
index c3e77a055e6..28d0552516e 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
@@ -269,22 +269,16 @@ export function TableHeadFilter<T>({
         trigger={
           <div className="flex">
             {hasFilter ? (
-              <Button type="button" color="neutral" size="sm" className="gap-1.5 whitespace-nowrap font-code">
+              <Button type="button" color="neutral" size="sm" className="whitespace-nowrap font-code">
                 {title} {!hideFilterNumber ? `(${dataFilterNumber})` : ''}
                 <span role="button" className="flex" onClick={(event) => cleanFilter(event)}>
-                  <Icon iconName="xmark" />
+                  <Icon data-align="suffix" iconName="xmark" />
                 </span>
               </Button>
             ) : (
-              <Button
-                type="button"
-                variant="surface"
-                color="neutral"
-                size="sm"
-                className="items-center gap-1.5 font-code"
-              >
+              <Button type="button" variant="surface" color="neutral" size="sm" className="items-center font-code">
                 {title}
-                <Icon iconName="angle-down" />
+                <Icon data-align="suffix" iconName="angle-down" />
               </Button>
             )}
           </div>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx b/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
index 9b0a4e5a8e4..3a067208b80 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
@@ -379,26 +379,20 @@ export function TableHeadHierarchicalFilter({
         trigger={
           <div className="flex">
             {hasFilter ? (
-              <Button type="button" color="neutral" size="sm" className="gap-1.5 whitespace-nowrap font-code">
+              <Button type="button" color="neutral" size="sm" className="whitespace-nowrap font-code">
                 {title}
                 <span
                   role="button"
                   className="relative flex h-6 cursor-pointer items-center text-xs"
                   onClick={(event) => cleanFilter(event)}
                 >
-                  <Icon iconName="xmark" />
+                  <Icon data-align="suffix" iconName="xmark" />
                 </span>
               </Button>
             ) : (
-              <Button
-                type="button"
-                variant="surface"
-                color="neutral"
-                size="sm"
-                className="items-center gap-1.5 font-code"
-              >
+              <Button type="button" variant="surface" color="neutral" size="sm" className="items-center font-code">
                 {title}
-                <Icon iconName="angle-down" />
+                <Icon data-align="suffix" iconName="angle-down" />
               </Button>
             )}
           </div>

From cf63f0c9b03cd9cead3ee575a48939e680f41523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 15 May 2026 15:47:00 +0200
Subject: [PATCH 2/4] test(button): fix linter error

---
 libs/shared/ui/src/lib/components/button/button.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/button/button.spec.tsx b/libs/shared/ui/src/lib/components/button/button.spec.tsx
index f4963c35177..3355bd31b03 100644
--- a/libs/shared/ui/src/lib/components/button/button.spec.tsx
+++ b/libs/shared/ui/src/lib/components/button/button.spec.tsx
@@ -26,7 +26,7 @@ describe('Button', () => {
     )
 
     expect(screen.getByRole('button')).toHaveTextContent('PrefixFoobarSuffix')
-    expect(screen.getByRole('button').className).toContain('[&_[data-align=prefix]]:mr-1')
-    expect(screen.getByRole('button').className).toContain('[&_[data-align=suffix]]:ml-1')
+    expect(screen.getByRole('button')).toHaveClass('[&_[data-align=prefix]]:mr-1')
+    expect(screen.getByRole('button')).toHaveClass('[&_[data-align=suffix]]:ml-1')
   })
 })

From 4b6ff9d63159559a6a17b7be991db0cc6781cfd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 15 May 2026 17:02:24 +0200
Subject: [PATCH 3/4] refactor(components): remove manual icon alignment in
 buttons and standardize spacing across various components

---
 .../skills/qovery-ui/references/components.md |  1 -
 .../qovery-ui/references/spacing-layout.md    |  2 --
 .../organization/$organizationId/clusters.tsx |  4 +--
 .../$environmentId/overview/route.tsx         |  2 +-
 apps/console/src/routes/login/index.tsx       | 13 +++----
 .../feature/src/lib/audit-logs/audit-logs.tsx |  2 +-
 .../src/lib/filter-section/filter-section.tsx |  9 ++---
 .../cluster-access-modal.spec.tsx.snap        | 21 ++++-------
 .../cluster-actions.spec.tsx.snap             | 12 +++----
 .../lib/cluster-actions/cluster-actions.tsx   |  4 +--
 .../__snapshots__/cluster-card.spec.tsx.snap  |  6 ++--
 .../cluster-new/cluster-new.tsx               |  2 +-
 .../button-popover-subnets.tsx                |  2 +-
 .../cluster-delete-modal.spec.tsx.snap        |  4 +--
 .../cluster-installation-guide-modal.tsx      |  2 +-
 .../cluster-logs-list/cluster-logs-list.tsx   |  2 +-
 .../cluster-migration-modal.spec.tsx.snap     |  4 +--
 .../cluster-network-settings.tsx              |  2 +-
 .../cluster-resources-settings.tsx            |  2 +-
 .../__snapshots__/cluster-setup.spec.tsx.snap |  3 +-
 .../gpu-resources-settings.tsx                |  2 +-
 .../section-production-health.tsx             |  2 +-
 .../environment-stages/environment-stages.tsx |  4 +--
 .../list-pre-check-logs.tsx                   |  4 +--
 ...eate-clone-environment-modal.spec.tsx.snap |  4 +--
 .../environment-action-toolbar.spec.tsx.snap  | 12 +++----
 .../table-filter-trigger-by.tsx               |  2 +-
 .../environment-last-deployment-section.tsx   |  2 +-
 .../environment-section.tsx                   |  2 +-
 .../environments-table/environments-table.tsx |  2 +-
 .../terraform-export-modal.spec.tsx.snap      |  4 +--
 .../update-all-modal.spec.tsx.snap            |  6 ++--
 .../alert-rules-action-bar.tsx                |  4 +--
 .../alert-rules-overview.tsx                  |  3 +-
 .../issue-overview/issue-overview.tsx         |  1 -
 .../notification-channel-overview.tsx         |  8 ++---
 .../database-rds-dashboard.tsx                | 14 ++------
 .../select-time-range/select-time-range.tsx   |  2 +-
 .../src/lib/modal-chart/modal-chart.tsx       |  2 +-
 .../service-alerting/service-alerting.tsx     |  2 +-
 .../select-time-range/select-time-range.tsx   |  2 +-
 .../service-dashboard/service-dashboard.tsx   | 14 ++------
 .../lib/step-personalize/step-personalize.tsx |  2 +-
 .../feature/src/lib/step-plans/step-plans.tsx |  4 +--
 .../src/lib/step-project/step-project.tsx     |  2 +-
 ...annotation-create-edit-modal.spec.tsx.snap |  9 +++--
 .../annotation-create-edit-modal.tsx          |  2 +-
 .../git-repository-service-settings.tsx       |  2 +-
 .../git-repository-settings.tsx               |  2 +-
 .../git-token-list.spec.tsx.snap              | 12 +++----
 .../label-create-edit-modal.spec.tsx.snap     |  9 +++--
 .../label-create-edit-modal.tsx               |  2 +-
 .../settings-api-token/settings-api-token.tsx |  2 +-
 .../settings-argocd-integration.tsx           |  4 +--
 .../settings-billing-details.tsx              |  2 +-
 .../settings-billing-summary.tsx              |  2 +-
 .../settings-cloud-credentials.tsx            |  2 +-
 .../settings-container-registries.tsx         |  2 +-
 .../section-github-app/section-github-app.tsx |  2 +-
 .../settings-git-repository-access.tsx        |  2 +-
 .../settings-helm-repositories.tsx            |  2 +-
 .../settings-labels-annotations.tsx           |  2 +-
 .../row-member/row-member.tsx                 |  7 +---
 .../lib/settings-members/settings-members.tsx |  2 +-
 .../src/lib/settings-roles/settings-roles.tsx |  2 +-
 .../lib/settings-webhook/settings-webhook.tsx |  2 +-
 .../deployment-rules/deployement-rules.tsx    |  4 +--
 .../src/lib/project-list/project-list.tsx     |  4 +--
 ...etworking-port-setting-modal.spec.tsx.snap |  8 ++---
 ...s-override-arguments-setting.spec.tsx.snap | 23 +++++-------
 .../values-override-arguments-setting.tsx     |  6 ++--
 ...alues-override-files-setting.spec.tsx.snap |  3 +-
 .../values-override-yaml-modal.spec.tsx.snap  |  4 +--
 .../dockerfile-settings.tsx                   |  2 +-
 .../deployment-logs-placeholder.tsx           |  4 +--
 .../src/lib/header-logs/header-logs.tsx       |  8 ++---
 .../list-deployment-logs.tsx                  |  6 ++--
 .../header-service-logs.tsx                   | 15 +++-----
 .../service-logs-placeholder.tsx              |  2 +-
 .../show-new-logs-button.tsx                  |  2 +-
 ...plication-container-port-settings-list.tsx |  2 +-
 ...application-container-storage-settings.tsx |  2 +-
 .../helm-networking-settings.tsx              |  2 +-
 ...rvice-deployment-restrictions-settings.tsx |  2 +-
 .../service-domain-settings.tsx               |  4 +--
 .../terraform-tfvars-popover.tsx              |  4 +--
 ...file-fragment-inline-setting.spec.tsx.snap |  5 ++-
 .../terraform-tfvars-popover.tsx              |  4 +--
 .../terraform-variables-table.tsx             |  4 +--
 .../auto-deploy-badge/auto-deploy-badge.tsx   |  4 +--
 ...ation-cancel-lifecycle-modal.spec.tsx.snap |  4 +--
 .../force-unlock-modal.spec.tsx.snap          |  4 +--
 .../__snapshots__/last-commit.spec.tsx.snap   |  5 ++-
 .../src/lib/last-commit/last-commit.tsx       |  6 +---
 .../__snapshots__/last-version.spec.tsx.snap  |  2 +-
 .../__snapshots__/pod-details.spec.tsx.snap   | 12 +++----
 .../src/lib/pod-details/pod-details.tsx       |  2 +-
 .../redeploy-modal.spec.tsx.snap              |  4 +--
 .../select-commit-modal.spec.tsx.snap         |  4 +--
 .../select-version-modal.spec.tsx.snap        |  8 ++---
 .../copy-button/copy-button.tsx               |  2 +-
 .../service-access-modal.tsx                  |  2 +-
 .../service-actions.spec.tsx.snap             | 12 +++----
 .../service-clone-modal.spec.tsx.snap         |  4 +--
 .../application-container-port-list.tsx       |  2 +-
 .../service-deployment-list.tsx               | 12 +++----
 .../table-filter-trigger-by.tsx               |  2 +-
 .../service-list-action-bar.spec.tsx.snap     |  6 ++--
 .../__snapshots__/service-list.spec.tsx.snap  | 31 +++++++---------
 .../service-list/service-list-action-bar.tsx  |  4 +--
 .../src/lib/service-list/service-list.tsx     |  2 +-
 .../instance-metrics.spec.tsx.snap            |  2 +-
 .../service-header/service-header.tsx         | 17 ++++-----
 .../service-last-deployment.tsx               |  6 ++--
 .../service-terminal.spec.tsx.snap            |  6 ++--
 .../__snapshots__/input-search.spec.tsx.snap  |  6 ++--
 .../input-search/input-search.tsx             |  2 +-
 .../lib/service-terminal/service-terminal.tsx |  2 +-
 .../services-deployment-pipeline.tsx          |  2 +-
 .../create-update-variable-modal.tsx          |  2 +-
 .../flow-create-variable.tsx                  |  2 +-
 .../variable-row/variable-row.tsx             |  4 +--
 .../__snapshots__/variable-list.spec.tsx.snap | 35 ++++++++-----------
 .../variables-action-toolbar.tsx              |  4 +--
 .../feature/src/lib/need-help/need-help.tsx   |  2 +-
 .../section-ai-copilot-configuration.tsx      |  2 +-
 .../section-ai-copilot-opt-in.tsx             |  2 +-
 .../devops-copilot-button.tsx                 |  2 +-
 .../devops-copilot-panel.tsx                  |  2 +-
 .../enable-copilot-screen.tsx                 |  2 +-
 .../input/__snapshots__/input.spec.tsx.snap   |  6 ++--
 .../lib/devops-copilot-panel/input/input.tsx  |  3 +-
 .../ui/src/lib/components/banner/banner.tsx   |  2 +-
 .../button-primitive.spec.tsx.snap            |  2 +-
 .../button-primitive.spec.tsx                 | 26 +++++++-------
 .../button-primitive/button-primitive.tsx     |  8 ++---
 .../button/__snapshots__/button.spec.tsx.snap |  4 +--
 .../src/lib/components/button/button.spec.tsx |  9 +++--
 .../lib/components/button/button.stories.tsx  |  4 +--
 .../code-editor-inline-setting.tsx            |  2 +-
 .../components/copy-button/copy-button.tsx    |  2 +-
 .../error-boundary/error-boundary.tsx         |  2 +-
 .../components/funnel-flow/funnel-flow.tsx    |  2 +-
 .../__snapshots__/input-filter.spec.tsx.snap  |  8 ++---
 .../inputs/input-filter/input-filter.tsx      |  4 +--
 .../modal-confirmation.spec.tsx.snap          | 12 +++----
 .../modal-multi-confirmation.spec.tsx.snap    |  4 +--
 .../components/table-filter/table-filter.tsx  |  2 +-
 .../table-head-datepicker.tsx                 |  4 +--
 .../table-head-filter/table-head-filter.tsx   |  4 +--
 .../table-head-hierarchical-filter.tsx        |  4 +--
 151 files changed, 328 insertions(+), 420 deletions(-)

diff --git a/.agents/skills/qovery-ui/references/components.md b/.agents/skills/qovery-ui/references/components.md
index e332b1bf011..adbadabea9d 100644
--- a/.agents/skills/qovery-ui/references/components.md
+++ b/.agents/skills/qovery-ui/references/components.md
@@ -13,7 +13,6 @@ Always use `<Button>`. `ButtonPrimitive` is the internal primitive it wraps —
 - `solid` + `brand` → primary CTA
 - `outline` or `surface` + `neutral` → secondary / cancel
 - `solid` + `red` → destructive actions only
-- Icons inside buttons use `data-align="prefix"` when they appear before the label and `data-align="suffix"` when they appear after it. Do not add manual `ml-*`, `mr-*`, or `gap-*` spacing to button icons — `<Button>` / `<ButtonPrimitive>` applies the correct size-aware spacing.
 - Icon-only buttons always need `aria-label`
 
 ### "I need to show a system status"
diff --git a/.agents/skills/qovery-ui/references/spacing-layout.md b/.agents/skills/qovery-ui/references/spacing-layout.md
index 04617009c3b..569609a7f78 100644
--- a/.agents/skills/qovery-ui/references/spacing-layout.md
+++ b/.agents/skills/qovery-ui/references/spacing-layout.md
@@ -93,8 +93,6 @@ Example: a card with `rounded-2xl` (16px) and `p-2` (8px) padding → the inner
 Geometric centering often looks off. Adjust for perceived visual weight.
 
 - **Play triangle in a circle:** nudge right — the triangle's visual center is not its geometric center.
-- **Button with icon + text:** use `<Button>` and mark icons with `data-align="prefix"` or `data-align="suffix"` so the button primitive applies the correct size-aware spacing. Do not add manual icon margins or custom gaps inside buttons.
-
 - **Asymmetric icons** (stars, arrows, carets): best fixed in the SVG directly. Fallback: `margin-left: 1px` or similar.
 - **Heavy glyph next to a light one:** optical baseline shift.
 
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
index 790afce4ddd..aa914b677a4 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx
@@ -29,7 +29,7 @@ const Clusters = () => {
           variant="outline"
           size="md"
         >
-          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+          <Icon iconName="circle-plus" iconStyle="regular" />
           Add Cluster
         </Link>
       </EmptyState>
@@ -60,7 +60,7 @@ function RouteComponent() {
           <div className="flex justify-between">
             <Heading>Clusters</Heading>
             <Link to="/organization/$organizationId/cluster/new" params={{ organizationId }} as="button" size="md">
-              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
               Add cluster
             </Link>
           </div>
diff --git a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
index 053f79e3bad..ea8ee3b6953 100644
--- a/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
+++ b/apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx
@@ -120,7 +120,7 @@ function RouteComponent() {
                 to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
                 params={{ organizationId, projectId, environmentId }}
               >
-                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+                <Icon iconName="circle-plus" iconStyle="regular" />
                 New service
               </Link>
             </div>
diff --git a/apps/console/src/routes/login/index.tsx b/apps/console/src/routes/login/index.tsx
index a990f812fd4..55bf2a37bf3 100644
--- a/apps/console/src/routes/login/index.tsx
+++ b/apps/console/src/routes/login/index.tsx
@@ -381,14 +381,14 @@ function RouteComponent() {
                         variant="outline"
                         color="neutral"
                         size="lg"
-                        className="relative w-full justify-center"
+                        className="relative w-full justify-center gap-x-2"
                         onClick={() => onClickAuthLogin(AuthEnum.GOOGLE_SSO)}
                         loading={loading?.provider === AuthEnum.GOOGLE_SSO ? loading.active : false}
                       >
                         <Icon
                           width="16"
                           className={clsx(
-                            'mr-2 text-neutral-subtle',
+                            'text-neutral-subtle',
                             loading?.provider === AuthEnum.GOOGLE_SSO && 'opacity-0'
                           )}
                           name={IconEnum.GOOGLE}
@@ -401,16 +401,13 @@ function RouteComponent() {
                         variant="solid"
                         color="neutral"
                         size="lg"
-                        className="relative w-full justify-center"
+                        className="relative w-full justify-center gap-x-2"
                         onClick={() => onClickAuthLogin(AuthEnum.GITHUB)}
                         loading={loading?.provider === AuthEnum.GITHUB ? loading.active : false}
                       >
                         <Icon
                           width="16"
-                          className={clsx(
-                            'mr-2 text-neutralInvert',
-                            loading?.provider === AuthEnum.GITHUB && 'opacity-0'
-                          )}
+                          className={clsx('text-neutralInvert', loading?.provider === AuthEnum.GITHUB && 'opacity-0')}
                           fill="currentColor"
                           name={IconEnum.GITHUB_WHITE}
                         />
@@ -429,7 +426,7 @@ function RouteComponent() {
                           setAuth0Error(null)
                         }}
                       >
-                        <Icon data-align="prefix" iconName="lock" className="text-sm text-neutral-subtle" />
+                        <Icon iconName="lock" className="text-sm text-neutral-subtle" />
                         Continue with SAML SSO
                         <LastUsedBadge visible={lastUsedLoginAtPageLoad === 'saml_sso'} />
                       </Button>
diff --git a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
index 26c955b81c4..6c50201c72c 100644
--- a/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx
@@ -331,7 +331,7 @@ export function AuditLogs({
                   {auditLogsRetentionInDays} days limit reached.
                   <Button type="button" variant="outline" onClick={() => showIntercom()}>
                     <span>Upgrade plan</span>
-                    <Icon data-align="suffix" iconName="arrow-up-right-from-square" className="text-neutral" />
+                    <Icon iconName="arrow-up-right-from-square" className="text-neutral" />
                   </Button>
                 </p>
               </div>
diff --git a/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx b/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
index f25c564e9c8..2c83f038ef6 100644
--- a/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
+++ b/libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx
@@ -191,7 +191,6 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
               {badge.key !== 'timestamp' && <Truncate text={badge.value} truncateLimit={23} />}
               {badge.isDeletable && (
                 <Icon
-                  data-align="suffix"
                   iconName="xmark"
                   className="text-xs leading-4 text-neutral-subtle hover:text-neutral"
                   onClick={() => deleteFilter(badge.key, setFilter)}
@@ -245,11 +244,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
                       aria-label="Delete filter"
                     >
                       {badge.isDeletable && (
-                        <Icon
-                          data-align="suffix"
-                          iconName="xmark"
-                          className="text-xs leading-4 text-neutral-subtle hover:text-neutral"
-                        />
+                        <Icon iconName="xmark" className="text-xs leading-4 text-neutral-subtle hover:text-neutral" />
                       )}
                     </button>
                   </Button>
@@ -276,7 +271,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
       {badges.filter((b) => b.isDeletable).length > 0 && (
         <Button size="xs" color="neutral" variant="surface" onClick={clearFilter}>
           Clear all filters
-          <Icon data-align="suffix" iconName="xmark" iconStyle="regular" />
+          <Icon iconName="xmark" iconStyle="regular" />
         </Button>
       )}
     </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
index 2456357b9b7..2de98ac1947 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
@@ -70,14 +70,13 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               qovery cluster kubeconfig --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -109,14 +108,13 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               export KUBECONFIG=&lt;path&gt;
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -143,14 +141,13 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -166,14 +163,13 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -255,14 +251,13 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               qovery cluster debug-pod --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -289,14 +284,13 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
@@ -312,14 +306,13 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
               <i
                 aria-hidden="true"
                 class="fa-regular fa-copy text-xs"
-                data-align="suffix"
               />
             </button>
           </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
index ef1921a93ee..c512b522e00 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/__snapshots__/cluster-actions.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ClusterActions should match manage deployment snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:r6:"
       type="button"
@@ -41,7 +41,7 @@ exports[`ClusterActions should match manage deployment snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:r9:"
       type="button"
@@ -137,7 +137,7 @@ exports[`ClusterActions should match other actions snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:rk:"
       type="button"
@@ -157,7 +157,7 @@ exports[`ClusterActions should match other actions snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:rn:"
       type="button"
@@ -297,7 +297,7 @@ exports[`ClusterActions should match outdated snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="closed"
       id="radix-:r15:"
       type="button"
@@ -317,7 +317,7 @@ exports[`ClusterActions should match outdated snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:r18:"
       type="button"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
index f2aa4602a92..4298b5a979a 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-actions/cluster-actions.tsx
@@ -242,11 +242,11 @@ function MenuManageDeployment({
         >
           <Tooltip content="Manage Deployment">
             <div className="flex h-full w-full items-center justify-center">
-              <Icon iconName="rocket" data-align={hasTextActionButton ? 'prefix' : undefined} />
+              <Icon iconName="rocket" />
               {hasTextActionButton && (
                 <>
                   {deployActionLabel}
-                  <Icon iconName="chevron-down" data-align="suffix" />
+                  <Icon iconName="chevron-down" />
                 </>
               )}
             </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
index 2da61140db5..a732bcece59 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
@@ -141,7 +141,7 @@ exports[`ClusterCard should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Manage Deployment"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
               data-state="closed"
               id="radix-:rn:"
               type="button"
@@ -158,7 +158,7 @@ exports[`ClusterCard should match snapshot 1`] = `
             </button>
             <button
               aria-label="Logs"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               data-state="closed"
             >
               <i
@@ -170,7 +170,7 @@ exports[`ClusterCard should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Other actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               data-state="closed"
               id="radix-:rr:"
               type="button"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
index ef7158c0c15..c43fcd5e48b 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
@@ -658,7 +658,7 @@ export function ClusterNew() {
                     params={{ organizationId }}
                   >
                     Add credit card
-                    <Icon data-align="suffix" iconName="arrow-right" iconStyle="regular" />
+                    <Icon iconName="arrow-right" iconStyle="regular" />
                   </ButtonLink>
                 </Callout.TextDescription>
               </Callout.Text>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
index add1176f03d..64828ea8517 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/step-features/button-popover-subnets/button-popover-subnets.tsx
@@ -132,7 +132,7 @@ export function SubnetsForm({ control, name, title, callout, required = false }:
         onClick={() => append({ A: '', B: '', C: '' })}
       >
         Add subnets
-        <Icon data-align="suffix" iconName="plus" />
+        <Icon iconName="plus" />
       </Button>
     </div>
   )
diff --git a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
index 8ac0bfa6fe9..e1c5370d698 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
@@ -271,13 +271,13 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
           class="flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
             disabled=""
             type="submit"
           >
diff --git a/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx b/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
index 3a4593767a8..2a2f6e64864 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
@@ -67,7 +67,7 @@ export function ClusterInstallationGuideModal({ type, onClose, ...props }: Clust
                   loading={isLoading}
                 >
                   Download configuration
-                  <Icon data-align="suffix" iconName="download" />
+                  <Icon iconName="download" />
                 </Button>
               </span>
             </li>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
index d56f73c6212..f1469890fec 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-logs-list/cluster-logs-list.tsx
@@ -109,7 +109,7 @@ export function ClusterLogsList({ logs, firstDate, refScrollSection }: ClusterLo
               {bufferedLogsCount > 999 ? '999+' : bufferedLogsCount}
             </span>
           )}
-          <Icon data-align="suffix" iconName="arrow-down" />
+          <Icon iconName="arrow-down" />
         </Button>
       )}
     </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
index 28b3956308d..e3a5ad72763 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
@@ -182,14 +182,14 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
index 1c149cbbc70..0c5587cd39d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-network-settings/cluster-network-settings.tsx
@@ -557,7 +557,7 @@ export function ClusterNetworkSettings({ organizationId, clusterId }: ClusterNet
                       type="button"
                     >
                       Add route
-                      <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+                      <Icon iconName="circle-plus" iconStyle="regular" />
                     </Button>
                   </div>
                 </BlockContent>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx b/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
index af553511969..c9f92a4ad0d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-resources-settings/cluster-resources-settings.tsx
@@ -330,7 +330,7 @@ export function ClusterResourcesSettings(props: ClusterResourcesSettingsProps) {
                                   })
                                 }}
                               >
-                                Edit <Icon data-align="suffix" iconName="pen" />
+                                Edit <Icon iconName="pen" />
                               </Button>
                             </div>
                             <div className="flex flex-col gap-4 border-t border-neutral p-4">
diff --git a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
index 553e76386be..6227332cbac 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
@@ -78,14 +78,13 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
             qovery cluster install
           </span>
           <button
-            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
+            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
             type="button"
           >
             Copy
             <i
               aria-hidden="true"
               class="fa-regular fa-copy text-xs"
-              data-align="suffix"
             />
           </button>
         </pre>
diff --git a/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx b/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
index 0640931fd43..7f9eef69f1a 100644
--- a/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
+++ b/libs/domains/clusters/feature/src/lib/gpu-resources-settings/gpu-resources-settings.tsx
@@ -73,7 +73,7 @@ export const GpuResourcesSettings = ({ cluster, clusterRegion = '' }: GpuResourc
           })
         }}
       >
-        Edit <Icon data-align="suffix" iconName="pen" />
+        Edit <Icon iconName="pen" />
       </Button>
     </div>
   )
diff --git a/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx b/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
index b2f166fbfd9..5557bef3cc0 100644
--- a/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
+++ b/libs/domains/clusters/feature/src/lib/section-production-health/section-production-health.tsx
@@ -200,7 +200,7 @@ export function SectionProductionHealth() {
               to="/organization/$organizationId/cluster/new"
               params={{ organizationId }}
             >
-              <Icon data-align="prefix" iconName="circle-plus" />
+              <Icon iconName="circle-plus" />
               Create cluster
             </Link>
           </EmptyState>
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
index 7d498444bdd..de7d70e5660 100644
--- a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
@@ -71,13 +71,13 @@ export function EnvironmentStages({
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
               <Button variant="outline" size="md">
-                <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
+                <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
                 {isLastVersion
                   ? 'Latest'
                   : dateYearMonthDayHourMinuteSecond(
                       new Date(currentDeploymentHistory?.auditing_data.created_at ?? '')
                     )}
-                <Icon data-align="suffix" iconName="angle-down" />
+                <Icon iconName="angle-down" />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
index 5cad54840d7..cf9ee4d549d 100644
--- a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
@@ -101,13 +101,13 @@ export function ListPreCheckLogs({ environment, environmentStatus, preCheckStage
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
                 <Button variant="outline">
-                  <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
+                  <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
                   {isLastVersion
                     ? 'Latest'
                     : dateYearMonthDayHourMinuteSecond(
                         new Date(currentDeploymentHistory?.auditing_data.created_at ?? '')
                       )}
-                  <Icon data-align="suffix" iconName="angle-down" />
+                  <Icon iconName="angle-down" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
diff --git a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
index 77d5278b5d1..15937c0f0f6 100644
--- a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
@@ -275,14 +275,14 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
index 69c708325f0..f42fbb9b6ef 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         aria-expanded="true"
         aria-haspopup="menu"
         aria-label="Manage Deployment"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
         data-state="open"
         id="radix-:r6:"
         type="button"
@@ -40,7 +40,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         </div>
       </button>
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
         params="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
@@ -54,7 +54,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Other actions"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
         data-state="closed"
         id="radix-:ra:"
         type="button"
@@ -210,7 +210,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Manage Deployment"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
         data-state="closed"
         id="radix-:rq:"
         type="button"
@@ -226,7 +226,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         </div>
       </button>
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
         params="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
@@ -241,7 +241,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         aria-expanded="true"
         aria-haspopup="menu"
         aria-label="Other actions"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
         data-state="open"
         id="radix-:ru:"
         type="button"
diff --git a/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx b/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
index aa6f8888831..d1f32bda327 100644
--- a/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
@@ -97,7 +97,7 @@ export function TableFilterTriggerBy({
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon data-align="suffix" iconName="chevron-down" />
+                  <Icon iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
index f7e1cfed82e..d8c2738e815 100644
--- a/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx
@@ -202,7 +202,7 @@ const EnvironmentLastDeploymentContent = () => {
         >
           {serviceCount > 0 && (
             <Button onClick={handleDeploy} color="neutral" size="md">
-              <Icon data-align="prefix" iconName="rocket" />
+              <Icon iconName="rocket" />
               Deploy environment
             </Button>
           )}
diff --git a/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx b/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
index cac58d43b61..ddc0f72950f 100644
--- a/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
+++ b/libs/domains/environments/feature/src/lib/environments-table/environment-section/environment-section.tsx
@@ -189,7 +189,7 @@ export function EnvironmentSection({
           <>
             <span className="text-sm text-neutral-subtle">No {title.toLowerCase()} environment created yet</span>
             <Button size="md" variant="outline" onClick={onCreateEnvClicked}>
-              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
               Create
             </Button>
           </>
diff --git a/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx b/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
index d8f6b0c2d40..3d1884b4ed8 100644
--- a/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
+++ b/libs/domains/environments/feature/src/lib/environments-table/environments-table.tsx
@@ -174,7 +174,7 @@ function EnvironmentsTableContent() {
               variant="solid"
               size="md"
             >
-              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
               New Environment
             </Button>
           </div>
diff --git a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
index 0381ad3b584..ad31b5994da 100644
--- a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
@@ -62,14 +62,14 @@ exports[`TerraformExportModal should match with snapshots 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
index 292259677dc..032ac287df3 100644
--- a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
           </strong>
         </p>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
           data-testid="deselect-all"
         >
           Deselect All
@@ -377,13 +377,13 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
         class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-background py-6"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           type="submit"
         >
diff --git a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
index d40611f9872..8b4519ac28c 100644
--- a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-action-bar/alert-rules-action-bar.tsx
@@ -86,7 +86,7 @@ export function AlertRulesActionBar({
               </button>
               <div className="flex gap-3">
                 <Button size="md" variant="outline" className="items-center" onClick={handleCloneAlertRules}>
-                  <Icon data-align="prefix" iconName="clone" />
+                  <Icon iconName="clone" />
                   Clone
                 </Button>
                 <Button
@@ -96,7 +96,7 @@ export function AlertRulesActionBar({
                   onClick={handleDeleteAllAlertRules}
                   disabled={deletableAlertRules.length === 0}
                 >
-                  <Icon data-align="prefix" iconName="trash-can" iconStyle="regular" />
+                  <Icon iconName="trash-can" iconStyle="regular" />
                   Delete
                 </Button>
               </div>
diff --git a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
index b9d387b833a..04272fb985b 100644
--- a/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/alert-rules-overview/alert-rules-overview.tsx
@@ -256,7 +256,7 @@ export function AlertRulesOverview({
         <Tooltip content="You need to deploy your service to create alerts" disabled={canCreateAlerts}>
           <div>
             <Button size="md" onClick={onCreateKeyAlerts} disabled={!canCreateAlerts}>
-              <Icon data-align="prefix" iconName="plus-large" className="text-xs" />
+              <Icon iconName="plus-large" className="text-xs" />
               New alert
             </Button>
           </div>
@@ -404,7 +404,6 @@ export function AlertRulesOverview({
                     >
                       <span className="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-surface-neutral-subtle">
                         <Icon
-                          data-align="prefix"
                           name={match(alertRule.target?.target_type)
                             .with('CONTAINER', () => 'APPLICATION')
                             .otherwise((s) => s)}
diff --git a/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
index 7ccf4a66220..dfa5ff0bb7d 100644
--- a/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/issue-overview/issue-overview.tsx
@@ -106,7 +106,6 @@ export function IssueOverview() {
                       >
                         <span className="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-white">
                           <Icon
-                            data-align="prefix"
                             name={match(alert.target.target_type)
                               .with('CONTAINER', () => 'APPLICATION')
                               .otherwise((s) => s)}
diff --git a/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx b/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
index a8985d3cf78..51149222b50 100644
--- a/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
+++ b/libs/domains/observability/feature/src/lib/alerting/notification-channel-overview/notification-channel-overview.tsx
@@ -83,7 +83,7 @@ export function NotificationChannelOverview() {
         <div className="flex items-center justify-between">
           <Heading level={2}>Slack channels</Heading>
           <Button variant="plain" color="brand" size="md" onClick={createSlackChannelModal}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add channel
           </Button>
         </div>
@@ -95,7 +95,7 @@ export function NotificationChannelOverview() {
             <p className="font-medium">No slack channel added yet</p>
             <p className="mb-3 text-sm text-neutral-subtle">Add your first channel to start sending notifications</p>
             <Button size="md" variant="outline" color="neutral" onClick={createSlackChannelModal}>
-              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
               Add channel
             </Button>
           </div>
@@ -156,7 +156,7 @@ export function NotificationChannelOverview() {
         <div className="flex items-center justify-between">
           <Heading level={2}>Email</Heading>
           <Button variant="plain" color="brand" size="md" onClick={createEmailChannelModal}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             New email
           </Button>
         </div>
@@ -168,7 +168,7 @@ export function NotificationChannelOverview() {
             <p className="font-medium">No email group added yet</p>
             <p className="mb-3 text-sm text-neutral-subtle">Add your first email to start sending notifications</p>
             <Button size="md" variant="outline" color="neutral" onClick={createEmailChannelModal}>
-              <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
               Add email group
             </Button>
           </div>
diff --git a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
index 30b7d49d9e5..54e97f92bc1 100644
--- a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
+++ b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/database-rds-dashboard.tsx
@@ -77,11 +77,7 @@ function DatabaseRdsDashboardContent() {
                   setIsLiveUpdateEnabled(!isLiveUpdateEnabled)
                 }}
               >
-                <Icon
-                  data-align="prefix"
-                  iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'}
-                  iconStyle="regular"
-                />
+                <Icon iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'} iconStyle="regular" />
                 Live
               </Button>
             </Tooltip>
@@ -101,7 +97,7 @@ function DatabaseRdsDashboardContent() {
           <div className="flex flex-wrap gap-2">
             <Button variant="plain" size="xs" className="flex items-center" onClick={() => setHideEvents(!hideEvents)}>
               {hideEvents ? 'Show events' : 'Hide events'}
-              <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+              <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
             </Button>
             <Button
               variant="plain"
@@ -110,11 +106,7 @@ function DatabaseRdsDashboardContent() {
               onClick={() => setExpandCharts(!expandCharts)}
             >
               {expandCharts ? 'Collapse charts' : 'Expand charts'}
-              <Icon
-                data-align="suffix"
-                iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'}
-                iconStyle="light"
-              />
+              <Icon iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'} iconStyle="light" />
             </Button>
           </div>
         </div>
diff --git a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
index 231f772711b..c4ea9f0a8df 100644
--- a/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
+++ b/libs/domains/observability/feature/src/lib/database/database-rds-dashboard/select-time-range/select-time-range.tsx
@@ -86,7 +86,7 @@ export function SelectTimeRange() {
                 handleTimeRangeChange(lastDropdownTimeRange)
               }}
             >
-              <Icon data-align="suffix" iconName="xmark" />
+              <Icon iconName="xmark" />
             </span>
           </Button>
         )}
diff --git a/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx b/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
index c55401aa1a7..5b268fa289d 100644
--- a/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
+++ b/libs/domains/observability/feature/src/lib/modal-chart/modal-chart.tsx
@@ -56,7 +56,7 @@ export function ModalChart({ children, open, onOpenChange, title, description }:
                     onClick={() => setHideEvents(!hideEvents)}
                   >
                     {hideEvents ? 'Show events' : 'Hide events'}
-                    <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+                    <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
                   </Button>
                   <SelectTimeRange />
                   <InputSelectSmall
diff --git a/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx b/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
index 0a099db1b13..7c4cf93532f 100644
--- a/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-alerting/service-alerting.tsx
@@ -51,7 +51,7 @@ export function ServiceAlerting({ children }: PropsWithChildren) {
                 onClick={createKeyAlertsModal}
                 disabled={!canCreateAlerts}
               >
-                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" className="text-xs" />
+                <Icon iconName="circle-plus" iconStyle="regular" className="text-xs" />
                 New alert
               </Button>
             </div>
diff --git a/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx b/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
index 231f772711b..c4ea9f0a8df 100644
--- a/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-dashboard/select-time-range/select-time-range.tsx
@@ -86,7 +86,7 @@ export function SelectTimeRange() {
                 handleTimeRangeChange(lastDropdownTimeRange)
               }}
             >
-              <Icon data-align="suffix" iconName="xmark" />
+              <Icon iconName="xmark" />
             </span>
           </Button>
         )}
diff --git a/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx b/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
index dff39ffa408..d89b9172f61 100644
--- a/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
+++ b/libs/domains/observability/feature/src/lib/service/service-dashboard/service-dashboard.tsx
@@ -198,11 +198,7 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
                   setIsLiveUpdateEnabled(!isLiveUpdateEnabled)
                 }}
               >
-                <Icon
-                  data-align="prefix"
-                  iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'}
-                  iconStyle="regular"
-                />
+                <Icon iconName={isLiveUpdateEnabled ? 'circle-stop' : 'circle-play'} iconStyle="regular" />
                 Live
               </Button>
             </Tooltip>
@@ -222,7 +218,7 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
           <div className="flex gap-2">
             <Button variant="plain" size="xs" className="flex items-center" onClick={() => setHideEvents(!hideEvents)}>
               {hideEvents ? 'Show events' : 'Hide events'}
-              <Icon data-align="suffix" iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
+              <Icon iconName={hideEvents ? 'eye' : 'eye-slash'} iconStyle="regular" />
             </Button>
             <Button
               variant="plain"
@@ -231,11 +227,7 @@ function ServiceDashboardContent({ environmentId, serviceId }: { environmentId:
               onClick={() => setExpandCharts(!expandCharts)}
             >
               {expandCharts ? 'Collapse charts' : 'Expand charts'}
-              <Icon
-                data-align="suffix"
-                iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'}
-                iconStyle="light"
-              />
+              <Icon iconName={expandCharts ? 'arrows-minimize' : 'arrows-maximize'} iconStyle="light" />
             </Button>
           </div>
         </div>
diff --git a/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx b/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
index 9dd65074f25..b0d7c1fcb5a 100644
--- a/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-personalize/step-personalize.tsx
@@ -164,7 +164,7 @@ export function StepPersonalize(props: StepPersonalizeProps) {
         />
         <div className="mt-10 flex justify-between border-t border-surface-neutral-subtle pt-5">
           <Button type="button" color="neutral" variant="surface" size="lg" onClick={() => authLogout()}>
-            <Icon data-align="prefix" iconName="arrow-left" />
+            <Icon iconName="arrow-left" />
             Disconnect
           </Button>
           <Button type="submit" size="lg" disabled={!formState.isValid}>
diff --git a/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx b/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
index 1ae17f0d92f..da59819dd1a 100644
--- a/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-plans/step-plans.tsx
@@ -169,7 +169,7 @@ export default function StepPlans(props: StepPlansProps) {
                     variant="surface"
                     onClick={() => navigate({ to: '/onboarding/personalize' })}
                   >
-                    <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
+                    <Icon iconName="arrow-left" iconStyle="solid" />
                     Back
                   </Button>
                 ) : (
@@ -186,7 +186,7 @@ export default function StepPlans(props: StepPlansProps) {
                       }
                     }}
                   >
-                    <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
+                    <Icon iconName="arrow-left" iconStyle="solid" />
                     Back
                   </Button>
                 )}
diff --git a/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx b/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
index eebd2b63e0a..f382ffb45a2 100644
--- a/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
+++ b/libs/domains/onboarding/feature/src/lib/step-project/step-project.tsx
@@ -63,7 +63,7 @@ export function StepProject(props: StepProjectProps) {
         <div className="mt-10 flex justify-between border-t border-neutral pt-5">
           {onFirstStepBack ? (
             <Button type="button" size="lg" color="neutral" variant="surface" onClick={onFirstStepBack}>
-              <Icon data-align="prefix" iconName="arrow-left" iconStyle="solid" />
+              <Icon iconName="arrow-left" iconStyle="solid" />
               Back
             </Button>
           ) : (
diff --git a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
index 0ff60243f23..8f794cc3a78 100644
--- a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
@@ -127,7 +127,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -139,14 +139,13 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add annotation
             <i
               aria-hidden="true"
               class="fa-regular fa-plus "
-              data-align="suffix"
             />
           </button>
         </div>
@@ -433,14 +432,14 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
index ac684cc2ff0..f7405dd1c5e 100644
--- a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
+++ b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/annotation-create-edit-modal.tsx
@@ -181,7 +181,7 @@ export function AnnotationCreateEditModal({
             }
           >
             Add annotation
-            <Icon data-align="suffix" iconName="plus" />
+            <Icon iconName="plus" />
           </Button>
         </div>
         <span className="mb-2 mt-4 block text-sm text-neutral">Select scope (Kubernetes objects)</span>
diff --git a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
index 47acc5b63a1..b54e671d062 100644
--- a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
+++ b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-service-settings.tsx
@@ -140,7 +140,7 @@ export function GitRepositoryServiceSettings({
             }
           >
             Edit
-            <Icon data-align="suffix" iconName="triangle-exclamation" className="text-sm text-yellow-500" />
+            <Icon iconName="triangle-exclamation" className="text-sm text-yellow-500" />
           </Button>
         </div>
       )}
diff --git a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
index 3bf08c377bc..87dcdd949d6 100644
--- a/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
+++ b/libs/domains/organizations/feature/src/lib/git-repository-service-settings/git-repository-settings.tsx
@@ -148,7 +148,7 @@ export function GitRepositorySettings({
             }
           >
             Edit
-            <Icon data-align="suffix" iconName="triangle-exclamation" className="text-sm text-warning" />
+            <Icon iconName="triangle-exclamation" className="text-sm text-warning" />
           </Button>
         </div>
       )}
diff --git a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
index 0cc3debf081..a2c30cf9be1 100644
--- a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
@@ -70,7 +70,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -84,7 +84,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -92,7 +92,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               >
                 <i
                   aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -176,7 +176,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -184,7 +184,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 gap-x-1.5 justify-center px-0 rounded-md w-8 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
               >
                 <i
                   aria-hidden="true"
diff --git a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
index 5745e5f82c7..604233a3d46 100644
--- a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
@@ -166,7 +166,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -178,14 +178,13 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add label
             <i
               aria-hidden="true"
               class="fa-regular fa-plus "
-              data-align="suffix"
             />
           </button>
         </div>
@@ -193,14 +192,14 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
index 3a39f6ab06f..2954f7e727d 100644
--- a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
+++ b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/label-create-edit-modal.tsx
@@ -164,7 +164,7 @@ export function LabelCreateEditModal({ isEdit, labelsGroup, organizationId, onCl
             }
           >
             Add label
-            <Icon data-align="suffix" iconName="plus" />
+            <Icon iconName="plus" />
           </Button>
         </div>
       </ModalCrud>
diff --git a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
index 334477ba41d..c794dc8bcc6 100644
--- a/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-api-token/settings-api-token.tsx
@@ -134,7 +134,7 @@ export function SettingsApiToken() {
               openModal({ content: <CrudModalFeature organizationId={organizationId} onClose={closeModal} /> })
             }}
           >
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add new
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
index 06a0617b4f2..29b94a683b8 100644
--- a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
@@ -309,7 +309,7 @@ function SettingsArgoCdIntegrationCreateButton() {
 
   return (
     <Button size="md" onClick={openCreateModal}>
-      <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+      <Icon iconName="circle-plus" iconStyle="regular" />
       Add ArgoCD
     </Button>
   )
@@ -421,7 +421,7 @@ function SettingsArgoCdIntegrationContent() {
         className="h-auto min-h-[146px] w-full max-w-[648px] p-8"
       >
         <Button variant="outline" color="neutral" size="md" onClick={openCreateModal}>
-          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+          <Icon iconName="circle-plus" iconStyle="regular" />
           Add ArgoCD
         </Button>
       </EmptyState>
diff --git a/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx b/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
index 3db9c61fdfb..49e05fec0ad 100644
--- a/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-billing-details/settings-billing-details.tsx
@@ -248,7 +248,7 @@ function SettingsBillingDetailsContent({ organizationId }: { organizationId: str
                         data-testid="add-new-card-button"
                       >
                         Add new card
-                        <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+                        <Icon iconName="circle-plus" iconStyle="regular" />
                       </Button>
                     </div>
                   </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx b/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
index 20ece250293..9c06ebd0c38 100644
--- a/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-billing-summary/settings-billing-summary.tsx
@@ -127,7 +127,7 @@ export function PageOrganizationBillingSummary(props: PageOrganizationBillingSum
           <div className="absolute right-0 top-0 flex shrink-0 gap-3">
             <Button variant="surface" color="neutral" size="md" onClick={props.onShowUsageClick}>
               Show usage
-              <Icon data-align="suffix" iconName="gauge-high" iconStyle="regular" />
+              <Icon iconName="gauge-high" iconStyle="regular" />
             </Button>
             <Button variant="surface" color="neutral" size="md" onClick={props.onPromoCodeClick}>
               Promo code
diff --git a/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx b/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
index 00c9a4d89f0..12611afebc2 100644
--- a/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-cloud-credentials/settings-cloud-credentials.tsx
@@ -411,7 +411,7 @@ export function SettingsCloudCredentials() {
           <DropdownMenu.Root open={isCreateMenuOpen} onOpenChange={setIsCreateMenuOpen}>
             <DropdownMenu.Trigger asChild>
               <Button size="md" className="absolute right-0 top-0 shrink-0">
-                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+                <Icon iconName="circle-plus" iconStyle="regular" />
                 New credential
               </Button>
             </DropdownMenu.Trigger>
diff --git a/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx b/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
index 9709038aac6..da66f6c7376 100644
--- a/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-container-registries/settings-container-registries.tsx
@@ -269,7 +269,7 @@ export function SettingsContainerRegistries() {
           />
 
           <Button className="absolute right-0 top-0" size="md" onClick={() => onAddRegistry()}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add registry
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
index 6e674b12f07..78fc8550c0b 100644
--- a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/section-github-app/section-github-app.tsx
@@ -48,7 +48,7 @@ export function SectionGithubApp(props: SectionGithubAppProps) {
                   onClick={() => props.onDisconnect && props.onDisconnect(false)}
                 >
                   Disconnect
-                  <Icon data-align="suffix" iconName="circle-xmark" />
+                  <Icon iconName="circle-xmark" />
                 </Button>
                 <Button data-testid="permission-button" type="button" size="md" onClick={props.onConfigure}>
                   Manage Permissions
diff --git a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
index 8d7fcd7db29..9b120ffb33f 100644
--- a/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-git-repository-access/settings-git-repository-access.tsx
@@ -114,7 +114,7 @@ export function SettingsGitRepositoryAccess() {
               })
             }}
           >
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add new token
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx b/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
index be35b7186df..44574c6a3ea 100644
--- a/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-helm-repositories/settings-helm-repositories.tsx
@@ -145,7 +145,7 @@ export function PageOrganizationHelmRepositories({
           />
           <Button size="md" className="absolute right-0 top-0 shrink-0" onClick={() => onAddRepository()}>
             Add repository
-            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
           </Button>
         </div>
         <div className="max-w-content-with-navigation-left">
diff --git a/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx b/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
index e3fa638082b..2412332d493 100644
--- a/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-labels-annotations/settings-labels-annotations.tsx
@@ -254,7 +254,7 @@ export function SettingsLabelsAnnotations() {
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
               <Button size="md" className="absolute right-0 top-0 shrink-0">
-                <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+                <Icon iconName="circle-plus" iconStyle="regular" />
                 Add new
               </Button>
             </DropdownMenu.Trigger>
diff --git a/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx b/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
index e6e4f3300ce..3efec7fe92c 100644
--- a/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-members/row-member/row-member.tsx
@@ -249,12 +249,7 @@ export function RowMember(props: RowMemberProps) {
                 disabled={!canEditRole || loadingUpdateRole}
               >
                 <span className="truncate">{selectedRoleLabel}</span>
-                <Icon
-                  data-align="suffix"
-                  iconName="angle-down"
-                  iconStyle="solid"
-                  className="text-sm text-neutral-subtle"
-                />
+                <Icon iconName="angle-down" iconStyle="solid" className="text-sm text-neutral-subtle" />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
diff --git a/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx b/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
index ed95b011f87..1a65775803e 100644
--- a/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-members/settings-members.tsx
@@ -470,7 +470,7 @@ export function SettingsMembers() {
           />
 
           <Button className="absolute right-0 top-0" size="md" onClick={onAddMember}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add member
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx b/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
index 0ac73de7a86..8ee7ae3b1ba 100644
--- a/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-roles/settings-roles.tsx
@@ -183,7 +183,7 @@ export function SettingsRoles() {
           />
 
           <Button className="absolute right-0 top-0" size="md" onClick={onAddRole}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add new role
           </Button>
         </div>
diff --git a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
index 57c64d001f7..bff317e5325 100644
--- a/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
+++ b/libs/domains/organizations/feature/src/lib/settings-webhook/settings-webhook.tsx
@@ -185,7 +185,7 @@ export function SettingsWebhook() {
               environment within your organization, you can get notified on external applications (for instance, Slack)."
           />
           <Button size="md" className="absolute right-0 top-0 shrink-0" onClick={openAddNew}>
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add new
           </Button>
         </div>
diff --git a/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx b/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
index 226001bc6a9..03fbcbcb3e5 100644
--- a/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
+++ b/libs/domains/projects/feature/src/lib/deployment-rules/deployement-rules.tsx
@@ -205,7 +205,7 @@ function DeploymentRulesContent({ organizationId, projectId, linkNewRule }: Depl
         }
       >
         {hasClusters ? 'Add rule' : 'Create a Cluster'}
-        <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+        <Icon iconName="circle-plus" iconStyle="regular" />
       </Button>
     </EmptyState>
   ) : (
@@ -252,7 +252,7 @@ export function DeploymentRules() {
             <NeedHelp className="mt-2" />
           </div>
           <Button size="md" onClick={() => navigate({ to: linkNewRule })}>
-            Add rule <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+            Add rule <Icon iconName="circle-plus" iconStyle="regular" />
           </Button>
         </div>
         <div className="max-w-content-with-navigation-left">
diff --git a/libs/domains/projects/feature/src/lib/project-list/project-list.tsx b/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
index 1c4c7a4f89c..c2de8bdb513 100644
--- a/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
+++ b/libs/domains/projects/feature/src/lib/project-list/project-list.tsx
@@ -28,7 +28,7 @@ export function ProjectList() {
           Your {pluralize(projects?.length ?? 0, 'project', 'projects')}
         </Heading>
         <Button type="button" color="brand" size="sm" onClick={() => createProjectModal()}>
-          <Icon data-align="prefix" iconName="circle-plus" />
+          <Icon iconName="circle-plus" />
           New project
         </Button>
       </div>
@@ -39,7 +39,7 @@ export function ProjectList() {
           icon="folder-closed"
         >
           <Button color="neutral" size="md" onClick={() => createProjectModal()}>
-            <Icon data-align="prefix" iconName="circle-plus" />
+            <Icon iconName="circle-plus" />
             Create project
           </Button>
         </EmptyState>
diff --git a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
index 92d665161d2..ec2b2811cdc 100644
--- a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
@@ -273,14 +273,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
@@ -600,14 +600,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
index d5b6af2e9f7..c1e363afc45 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap
@@ -22,14 +22,13 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
           </p>
         </div>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="button"
         >
           Add Variable
           <i
             aria-hidden="true"
             class="fa-regular fa-plus-circle "
-            data-align="suffix"
           />
         </button>
       </div>
@@ -48,14 +47,13 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
         />
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
         type="button"
       >
         See default values.yaml 
         <i
           aria-hidden="true"
           class="fa-regular fa-arrow-up-right-from-square text-xs"
-          data-align="suffix"
         />
       </button>
       <form
@@ -146,7 +144,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -214,18 +212,17 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 </div>
               </div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral h-[36px] justify-between"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral h-[36px] justify-between"
                 type="button"
               >
                 Close json
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-angle-down "
-                  data-align="suffix"
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -304,7 +301,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
@@ -343,14 +340,13 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
           </p>
         </div>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="button"
         >
           Add Variable
           <i
             aria-hidden="true"
             class="fa-regular fa-plus-circle "
-            data-align="suffix"
           />
         </button>
       </div>
@@ -369,14 +365,13 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
         />
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral mb-10"
         type="button"
       >
         See default values.yaml 
         <i
           aria-hidden="true"
           class="fa-regular fa-arrow-up-right-from-square text-xs"
-          data-align="suffix"
         />
       </button>
       <form
@@ -467,7 +462,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot for the v5-compati
                 value="test"
               />
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral h-[36px] w-[36px]"
                 type="button"
               >
                 <i
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
index f76e4f57063..ed915d6b11f 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
+++ b/libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx
@@ -97,7 +97,7 @@ function Row({ index, remove, environmentId }: { index: number; remove: UseField
             onClick={() => setOpenEditor(!openEditor)}
           >
             {openEditor ? 'Close json' : 'Open json'}
-            <Icon data-align="suffix" iconName="angle-down" />
+            <Icon iconName="angle-down" />
           </Button>
         ) : (
           <Controller
@@ -193,7 +193,7 @@ export function ValuesOverrideArgumentsSetting({
       }
     >
       Add Variable
-      <Icon data-align="suffix" iconName="plus-circle" iconStyle={isSetting ? 'regular' : undefined} />
+      <Icon iconName="plus-circle" iconStyle={isSetting ? 'regular' : undefined} />
     </Button>
   )
 
@@ -249,7 +249,7 @@ export function ValuesOverrideArgumentsSetting({
         className="mb-10"
         onClick={() => createHelmDefaultValuesMutation()}
       >
-        See default values.yaml <Icon data-align="suffix" className="text-xs" iconName="arrow-up-right-from-square" />
+        See default values.yaml <Icon className="text-xs" iconName="arrow-up-right-from-square" />
       </Button>
       {!isSetting ? (
         <form onSubmit={onSubmit} className="w-full">
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
index 55c9f91e31a..76822c43b1a 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-files-setting/__snapshots__/values-override-files-setting.spec.tsx.snap
@@ -483,13 +483,12 @@ exports[`ValuesOverrideFilesSetting should match snapshot with YAML type 1`] = `
                     No override defined.
                   </p>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
                     type="button"
                   >
                     <i
                       aria-hidden="true"
                       class="fa-regular fa-plus "
-                      data-align="prefix"
                     />
                     Create override
                   </button>
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
index e7c66e55cad..9a86e316c72 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
@@ -94,14 +94,14 @@ exports[`ValuesOverrideYamlModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx b/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
index 1eaedb0ef86..15c06e97a42 100644
--- a/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
+++ b/libs/domains/service-job/feature/src/lib/dockerfile-settings/dockerfile-settings.tsx
@@ -200,7 +200,7 @@ export function DockerfileSettings({
                       <Icon iconName="wave-pulse" className="text-neutral-subtle" />
                       <p className="mb-3 mt-1 text-xs font-medium text-neutral-subtle">No Dockerfile defined</p>
                       <Button type="button" size="md" onClick={() => openModalDockerfileRaw(field)}>
-                        Create Dockerfile <Icon data-align="suffix" iconName="pen" />
+                        Create Dockerfile <Icon iconName="pen" />
                       </Button>
                     </div>
                   )}
diff --git a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
index 636fff95d9c..d3e1231a51e 100644
--- a/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
+++ b/libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx
@@ -202,7 +202,7 @@ export function DeploymentLogsPlaceholder({
           }}
         >
           Open precheck
-          <Icon data-align="suffix" iconName="list-check" />
+          <Icon iconName="list-check" />
         </Link>
       </div>
     )
@@ -231,7 +231,7 @@ export function DeploymentLogsPlaceholder({
           }}
         >
           Open pipeline
-          <Icon data-align="suffix" iconName="timeline" />
+          <Icon iconName="timeline" />
         </Link>
       </div>
     )
diff --git a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
index e73bbf91586..d2bdf9180d4 100644
--- a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
@@ -106,9 +106,9 @@ export function HeaderLogs({
                       >
                         <Button variant="outline" color="neutral" size="sm" className="relative">
                           <div className="flex items-center">
-                            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
+                            <Icon iconName="link" iconStyle="regular" />
                             {pluralize(filteredLinks.length, 'Link', 'Links')}
-                            <Icon data-align="suffix" iconName="angle-down" />
+                            <Icon iconName="angle-down" />
                           </div>
                         </Button>
                       </ServiceLinksPopover>
@@ -177,9 +177,9 @@ export function HeaderLogs({
                       >
                         <Button variant="outline" color="neutral" size="sm" className="relative">
                           <div className="flex items-center">
-                            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
+                            <Icon iconName="link" iconStyle="regular" />
                             {pluralize(filteredLinks.length, 'Link', 'Links')}
-                            <Icon data-align="suffix" iconName="angle-down" />
+                            <Icon iconName="angle-down" />
                           </div>
                         </Button>
                       </ServiceLinksPopover>
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
index 44db3664039..672e04370f4 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
@@ -189,13 +189,13 @@ const DeploymentLogsHeader = memo(function DeploymentLogsHeader({
         <DropdownMenu.Root open={open} onOpenChange={setOpen}>
           <DropdownMenu.Trigger asChild>
             <Button variant="outline">
-              <Icon data-align="prefix" iconName="clock-rotate-left" className="text-neutral-subtle" />
+              <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
               {isLastVersion
                 ? 'Latest'
                 : selectedDeploymentDate
                   ? dateYearMonthDayHourMinuteSecond(new Date(selectedDeploymentDate))
                   : 'Not available'}
-              <Icon data-align="suffix" iconName="angle-down" />
+              <Icon iconName="angle-down" />
             </Button>
           </DropdownMenu.Trigger>
           <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
@@ -489,7 +489,7 @@ function DeploymentLogsBody({
                 sendMessageRef?.current?.(message)
               }}
             >
-              <Icon data-align="prefix" iconName="sparkles" iconStyle="solid" />
+              <Icon iconName="sparkles" iconStyle="solid" />
               Launch diagnostic for this error
             </Button>
           )}
diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
index 11b84d58439..babd51393cf 100644
--- a/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/header-service-logs/header-service-logs.tsx
@@ -107,14 +107,9 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
           >
             <span className="relative block h-3.5 w-3.5">
               {isLiveMode ? (
-                <Icon
-                  data-align="suffix"
-                  iconName="loader"
-                  iconStyle="regular"
-                  className="absolute left-0 animate-spin"
-                />
+                <Icon iconName="loader" iconStyle="regular" className="absolute left-0 animate-spin" />
               ) : (
-                <Icon data-align="suffix" iconName="circle-play" iconStyle="regular" className="absolute left-0" />
+                <Icon iconName="circle-play" iconStyle="regular" className="absolute left-0" />
               )}
             </span>
             Live
@@ -145,7 +140,7 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
                 onClick={() => setIsOpenDatePicker(!isOpenDatePicker)}
               >
                 Timeframe
-                <Icon data-align="suffix" iconName="clock" iconStyle="regular" className="relative top-[1px]" />
+                <Icon iconName="clock" iconStyle="regular" className="relative top-[1px]" />
               </Button>
             ) : (
               <Button type="button" size="md" onClick={() => setIsOpenDatePicker(!isOpenDatePicker)}>
@@ -168,7 +163,7 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
                     clearDate()
                   }}
                 >
-                  <Icon data-align="suffix" iconName="xmark" />
+                  <Icon iconName="xmark" />
                 </span>
               </Button>
             )}
@@ -177,7 +172,7 @@ export function HeaderServiceLogs({ logs, isLiveMode, refetchHistoryLogs }: Head
             <DropdownMenu.Trigger asChild>
               <Button size="md" variant="outline" color="neutral">
                 {updateTimeContextValue.utc ? 'UTC' : 'Browser time'}
-                <Icon data-align="suffix" iconName="chevron-down" iconStyle="regular" />
+                <Icon iconName="chevron-down" iconStyle="regular" />
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content className="z-header">
diff --git a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
index 698f6dff7fc..e5b615cabe5 100644
--- a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
+++ b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
@@ -296,7 +296,7 @@ export function ServiceLogsPlaceholder({
               }}
             >
               Go to latest deployment
-              <Icon data-align="suffix" iconName="arrow-right" />
+              <Icon iconName="arrow-right" />
             </Link>
           </>
         ) : (
diff --git a/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx b/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
index 1117ed7ef5b..e42a1d6b2be 100644
--- a/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
+++ b/libs/domains/service-logs/feature/src/lib/show-new-logs-button/show-new-logs-button.tsx
@@ -31,7 +31,7 @@ export function ShowNewLogsButton({ pauseLogs, setPauseLogs, bufferedLogsCount }
             {bufferedLogsCount > 999 ? '999+' : bufferedLogsCount}
           </span>
         )}
-        <Icon data-align="suffix" iconName="arrow-down" />
+        <Icon iconName="arrow-down" />
       </Button>
     )
   }
diff --git a/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx b/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
index 7b0bdd59d4a..33727ce11b2 100644
--- a/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
+++ b/libs/domains/service-settings/feature/src/lib/application-container-port-settings/application-container-port-settings/application-container-port-settings-list.tsx
@@ -30,7 +30,7 @@ export function ApplicationContainerPortSettingsList({
         >
           <Button size="md" variant="solid" color="brand" type="button" data-testid="add-button" onClick={onAddPort}>
             Add port
-            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
       </div>
diff --git a/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx b/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
index 3ee89a82b50..abc727f789d 100644
--- a/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/application-container-storage-settings/application-container-storage-settings/application-container-storage-settings.tsx
@@ -195,7 +195,7 @@ export function ApplicationContainerStorageSettings() {
               disabled={disableAdd}
             >
               Add Storage
-              <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
             </Button>
           </Tooltip>
         </SettingsHeading>
diff --git a/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx b/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
index 7bc8bbc9ea5..b69af6658c0 100644
--- a/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/helm-networking-settings/helm-networking-settings.tsx
@@ -144,7 +144,7 @@ export function HelmNetworkingSettings({ children }: HelmNetworkingSettingsProps
         >
           <Button size="md" variant="solid" color="brand" onClick={onAddPortClick}>
             Add Port
-            <Icon data-align="suffix" iconName="plus-circle" iconStyle="regular" />
+            <Icon iconName="plus-circle" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
diff --git a/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx b/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
index 1234850fa74..6252e35c408 100644
--- a/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings.tsx
@@ -86,7 +86,7 @@ export function ServiceDeploymentRestrictionsSettings() {
             disabled={!isSupportedService(service)}
           >
             New Restriction
-            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
diff --git a/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx b/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
index 38cfca44270..bf8aa907913 100644
--- a/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
+++ b/libs/domains/service-settings/feature/src/lib/service-domain-settings/service-domain-settings/service-domain-settings.tsx
@@ -80,7 +80,7 @@ export function ServiceDomainSettings() {
             disabled={!canAddDomain}
           >
             Add Domain
-            <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
           </Button>
         </SettingsHeading>
 
@@ -287,7 +287,7 @@ function ServiceDomainSettingsContent({
               size="sm"
             >
               {noPublicLinkCta.label}
-              <Icon data-align="suffix" iconName="arrow-right" className="text-xs" />
+              <Icon iconName="arrow-right" className="text-xs" />
             </Link>
             <ExternalLink
               as="button"
diff --git a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index de87f3f663a..942e9927689 100644
--- a/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -158,13 +158,13 @@ export const TfvarsFilesPopover = () => {
               }
             >
               <Button size="md" variant="outline" type="button" data-testid="open-tfvars-files-button">
-                <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
+                <Icon iconName="file-lines" iconStyle="regular" />
                 .tfvars files
               </Button>
             </Indicator>
           ) : (
             <Button size="md" variant="solid" type="button" data-testid="open-tfvars-files-button">
-              <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
+              <Icon iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
           )}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
index b55908a0ef0..b0805812c08 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`DockerfileFragmentInlineSetting should match snapshot with content 1`]
         </h2>
         <button
           aria-label="Edit Commands"
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral justify-center p-0"
           type="button"
         >
           <i
@@ -92,13 +92,12 @@ exports[`DockerfileFragmentInlineSetting should match snapshot without content 1
             No commands defined.
           </p>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
             type="button"
           >
             <i
               aria-hidden="true"
               class="fa-regular fa-plus "
-              data-align="prefix"
             />
             Add commands
           </button>
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 92df5a1f665..c02e1df83e4 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -157,13 +157,13 @@ export const TfvarsFilesPopover = () => {
               }
             >
               <Button size="md" variant="outline" type="button" data-testid="open-tfvars-files-button">
-                <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
+                <Icon iconName="file-lines" iconStyle="regular" />
                 .tfvars files
               </Button>
             </Indicator>
           ) : (
             <Button size="md" variant="solid" type="button" data-testid="open-tfvars-files-button">
-              <Icon data-align="prefix" iconName="file-lines" iconStyle="regular" />
+              <Icon iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
           )}
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 5229984eac4..4934d7455c6 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -407,13 +407,13 @@ export const TerraformVariablesTable = () => {
       >
         {selectedRows.length > 0 && (
           <Button size="md" variant="solid" color="red" type="button" onClick={deleteSelectedRows}>
-            <Icon data-align="prefix" iconName="trash-can" iconStyle="regular" />
+            <Icon iconName="trash-can" iconStyle="regular" />
             Delete selected
           </Button>
         )}
         <Button size="md" variant="outline" type="button" onClick={onAddVariable}>
           Add variable
-          <Icon data-align="suffix" iconName="plus" iconStyle="regular" />
+          <Icon iconName="plus" iconStyle="regular" />
         </Button>
       </div>
     </div>
diff --git a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
index 6e98175a458..c43aed27fdc 100644
--- a/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
+++ b/libs/domains/services/feature/src/lib/auto-deploy-badge/auto-deploy-badge.tsx
@@ -63,12 +63,12 @@ export function AutoDeployBadge({ serviceId }: AutoDeployBadgeProps) {
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/general"
         params={{ organizationId, projectId, environmentId, serviceId: routeServiceId }}
       >
-        <Icon data-align="prefix" className="text-neutral" iconName="arrows-rotate" />
+        <Icon className="text-neutral" iconName="arrows-rotate" />
         <span className="ml-1.5">Auto-deploy</span>
         {isLoading ? (
           <LoaderSpinner classWidth="w-3 ml-0.5" />
         ) : (
-          config && <Icon data-align="suffix" iconName={config.icon} className={`text-xs ${config.iconClassName}`} />
+          config && <Icon iconName={config.icon} className={`text-xs ${config.iconClassName}`} />
         )}
       </Link>
     </Tooltip>
diff --git a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
index 328c54f5f2d..cc930d4ce09 100644
--- a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
@@ -56,14 +56,14 @@ exports[`ConfirmationCancelLifecycleModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
index c4b3299fac6..68a2f1ea741 100644
--- a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
@@ -67,14 +67,14 @@ exports[`ForceUnlockModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
index dde69258e46..d80ee23e3ce 100644
--- a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
@@ -11,20 +11,19 @@ exports[`LastCommit should match snapshot 1`] = `
         data-state="closed"
       >
         <button
-          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
+          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
           type="button"
         >
           <i
             aria-hidden="true"
             class="fa-regular fa-code-commit w-4"
-            data-align="suffix"
           />
           ddd1cee
         </button>
       </span>
       <button
         aria-label="Deploy from another version"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx b/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
index dba5d0d9801..bbcd1d26a4d 100644
--- a/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
+++ b/libs/domains/services/feature/src/lib/last-commit/last-commit.tsx
@@ -97,11 +97,7 @@ export function LastCommit({
               onMouseEnter={() => setHover(true)}
               onMouseLeave={() => setHover(false)}
             >
-              {hover ? (
-                <Icon data-align="suffix" iconName="copy" className="w-4" />
-              ) : (
-                <Icon data-align="suffix" iconName="code-commit" className="w-4" />
-              )}
+              {hover ? <Icon iconName="copy" className="w-4" /> : <Icon iconName="code-commit" className="w-4" />}
               {deployedCommit.git_commit_id.substring(0, 7)}
             </Button>
           </CopyToClipboard>
diff --git a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
index f2d1b01f9e7..fa25e27a034 100644
--- a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`LastVersion should match snapshot 1`] = `
       </span>
       <button
         aria-label="Deploy from another version"
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
index bda2adddf3f..a748a11ce3f 100644
--- a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`PodDetails should match snapshot with container based pod and with mult
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -17,7 +17,6 @@ exports[`PodDetails should match snapshot with container based pod and with mult
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
-          data-align="suffix"
         />
       </a>
       <div
@@ -144,7 +143,7 @@ exports[`PodDetails should match snapshot with git based pod and with last_termi
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -154,7 +153,6 @@ exports[`PodDetails should match snapshot with git based pod and with last_termi
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
-          data-align="suffix"
         />
       </a>
       <div
@@ -272,7 +270,7 @@ exports[`PodDetails should match snapshot with git based pod and without last_te
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -282,7 +280,6 @@ exports[`PodDetails should match snapshot with git based pod and without last_te
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
-          data-align="suffix"
         />
       </a>
       <div
@@ -369,7 +366,7 @@ exports[`PodDetails should match snapshot with pod error with 0 containers 1`] =
       class="relative flex flex-col gap-y-3 overflow-hidden bg-surface-neutral-subtle pb-4 pl-4 pr-20 pt-3"
     >
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral relative z-dropdown max-w-fit"
         params="[object Object]"
         search="[object Object]"
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
@@ -379,7 +376,6 @@ exports[`PodDetails should match snapshot with pod error with 0 containers 1`] =
         <i
           aria-hidden="true"
           class="fa-regular fa-scroll "
-          data-align="suffix"
         />
       </a>
       <dl
diff --git a/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx b/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
index 8089ab7ee56..15361ba02f3 100644
--- a/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
+++ b/libs/domains/services/feature/src/lib/pod-details/pod-details.tsx
@@ -65,7 +65,7 @@ export function PodDetails({ pod, serviceId, serviceType }: PodDetailsProps) {
         className="relative z-dropdown max-w-fit"
       >
         Logs
-        <Icon data-align="suffix" iconName="scroll" />
+        <Icon iconName="scroll" />
       </Link>
       {filteredContainers.length > 1 && (
         <div className="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-surface-neutral-component" />
diff --git a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
index 4b09bdd1b66..6ce6059d4f3 100644
--- a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
@@ -71,14 +71,14 @@ exports[`RedeployModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
index 843176a2b1c..38729b58872 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
@@ -258,12 +258,12 @@ exports[`SelectCommitModal should match snapshot 1`] = `
       class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
diff --git a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
index 651dd53f3ea..36e75e65886 100644
--- a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
@@ -136,12 +136,12 @@ exports[`SelectVersionModal should match snapshot 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
@@ -280,12 +280,12 @@ exports[`SelectVersionModal should match snapshot with helm version 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       >
         Deploy
       </button>
diff --git a/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx b/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
index 5abdd940051..d05d7699fdc 100644
--- a/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
+++ b/libs/domains/services/feature/src/lib/service-access-modal/copy-button/copy-button.tsx
@@ -28,7 +28,7 @@ export function CopyButton({ content }: CopyButtonProps) {
       className="cursor-pointer font-sans font-medium"
     >
       Copy
-      <Icon data-align="suffix" iconName={icon} className="text-xs" />
+      <Icon iconName={icon} className="text-xs" />
     </Button>
   )
 }
diff --git a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
index fcdc349348f..0b88601809b 100644
--- a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
+++ b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
@@ -88,7 +88,7 @@ function SectionDatabaseConnectionUri({ service }: { service: Database }) {
         onClick={() => handleCopyCredentials(masterCredentials!)}
       >
         Copy connection URI
-        <Icon data-align="suffix" className="text-sm" iconName="key" iconStyle="regular" />
+        <Icon className="text-sm" iconName="key" iconStyle="regular" />
       </Button>
     </div>
   )
diff --git a/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
index 30e1bcf2e97..23e31f75301 100644
--- a/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-actions/__snapshots__/service-actions.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="open"
       id="radix-:r6:"
       type="button"
@@ -38,7 +38,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       </div>
     </button>
     <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
     >
@@ -51,7 +51,7 @@ exports[`ServiceActions should match manage deployment snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       id="radix-:ra:"
       type="button"
@@ -160,7 +160,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
       data-state="closed"
       id="radix-:rm:"
       type="button"
@@ -176,7 +176,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       </div>
     </button>
     <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="closed"
       to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs"
     >
@@ -190,7 +190,7 @@ exports[`ServiceActions should match other actions snapshot 1`] = `
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 gap-x-1 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
       data-state="open"
       id="radix-:rq:"
       type="button"
diff --git a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
index 2e406a545d4..ad2503ba96e 100644
--- a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
@@ -317,14 +317,14 @@ exports[`ServiceCloneModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx b/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
index ce707fe519a..dd04b450a64 100644
--- a/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-creation-flow/application-container/application-container-port/application-container-port-list/application-container-port-list.tsx
@@ -64,7 +64,7 @@ export function ApplicationContainerPortList({
           <div className="flex items-center justify-end px-4 py-3">
             <Button data-testid="add-button" size="md" variant="solid" color="brand" type="button" onClick={onAddPort}>
               Add port
-              <Icon data-align="suffix" iconName="circle-plus" iconStyle="regular" />
+              <Icon iconName="circle-plus" iconStyle="regular" />
             </Button>
           </div>
         </BlockContent>
diff --git a/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx b/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
index 5b4ce2e38c0..83284bfea58 100644
--- a/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-deployment-list/service-deployment-list.tsx
@@ -328,10 +328,10 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                     <CopyToClipboard text={commit.git_commit_id} className="inline-flex justify-center">
                       <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                         <span className="group-hover:hidden">
-                          <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
+                          <Icon iconName="copy" iconStyle="solid" className="w-4" />
                         </span>
                         <span className="hidden group-hover:block">
-                          <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
+                          <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
                         </span>
                         {commit.git_commit_id.substring(0, 7)}
                       </Button>
@@ -361,10 +361,10 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                       <CopyToClipboard text={repository.chart_version} className="inline-flex justify-center">
                         <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                           <span className="group-hover:hidden">
-                            <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
+                            <Icon iconName="copy" iconStyle="solid" className="w-4" />
                           </span>
                           <span className="hidden group-hover:block">
-                            <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
+                            <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
                           </span>
                           {truncateText(repository.chart_version, 18)}
                         </Button>
@@ -393,10 +393,10 @@ export function ServiceDeploymentList({ environment, serviceId }: ServiceDeploym
                       <CopyToClipboard text={tag} className="inline-flex justify-center">
                         <Button type="button" variant="surface" color="neutral" size="xs" className="group">
                           <span className="group-hover:hidden">
-                            <Icon data-align="prefix" iconName="copy" iconStyle="solid" className="w-4" />
+                            <Icon iconName="copy" iconStyle="solid" className="w-4" />
                           </span>
                           <span className="hidden group-hover:block">
-                            <Icon data-align="prefix" iconName="code-commit" iconStyle="regular" className="w-4" />
+                            <Icon iconName="code-commit" iconStyle="regular" className="w-4" />
                           </span>
                           {tag.length >= 8 ? truncateText(tag, 8) + '...' : tag}
                         </Button>
diff --git a/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx b/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
index 93dc2e4eee7..5653f4dd8e8 100644
--- a/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
+++ b/libs/domains/services/feature/src/lib/service-deployment-list/table-filter-trigger-by/table-filter-trigger-by.tsx
@@ -92,7 +92,7 @@ export function TableFilterTriggerBy({
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon data-align="suffix" iconName="chevron-down" />
+                  <Icon iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
index 29bf3668d1b..d7c575164c9 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
@@ -29,19 +29,18 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
             class="flex gap-3"
           >
             <button
-              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
             >
               Deploy selected 
               <i
                 aria-hidden="true"
                 class="fa-regular fa-play "
-                data-align="suffix"
               />
             </button>
             <button
               aria-expanded="false"
               aria-haspopup="menu"
-              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
               data-state="closed"
               id="radix-:rf:"
               type="button"
@@ -50,7 +49,6 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
               <i
                 aria-hidden="true"
                 class="fa-regular fa-angle-down "
-                data-align="suffix"
               />
             </button>
           </div>
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
index 89cc372aaa6..5e401915a88 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
@@ -237,7 +237,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -424,20 +424,19 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
-                            data-align="suffix"
                           />
                           2f74448
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -625,7 +624,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -812,7 +811,7 @@ exports[`ServiceList should match snapshot 1`] = `
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -1302,7 +1301,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -1498,20 +1497,19 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
-                            data-align="suffix"
                           />
                           10ad354
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -1794,7 +1792,7 @@ exports[`ServiceList should match snapshot 1`] = `
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Links"
-                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
+                        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded-full justify-center px-0 w-6 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral hidden"
                         data-state="closed"
                         type="button"
                       >
@@ -1990,20 +1988,19 @@ exports[`ServiceList should match snapshot 1`] = `
                         data-state="closed"
                       >
                         <button
-                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
+                          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 px-1.5 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral flex min-w-[81px] justify-center pl-1 rounded-r-none border-r-0"
                           type="button"
                         >
                           <i
                             aria-hidden="true"
                             class="fa-regular fa-code-commit w-4"
-                            data-align="suffix"
                           />
                           10ad354
                         </button>
                       </span>
                       <button
                         aria-label="Deploy from another version"
-                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
+                        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-6 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7 justify-center rounded-l-none px-1.5"
                         data-state="closed"
                         type="button"
                       >
@@ -2063,7 +2060,7 @@ exports[`ServiceList should match snapshot 1`] = `
               class="flex gap-3"
             >
               <button
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center"
                 data-state="closed"
                 disabled=""
               >
@@ -2071,13 +2068,12 @@ exports[`ServiceList should match snapshot 1`] = `
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-play "
-                  data-align="suffix"
                 />
               </button>
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center"
                 data-state="closed"
                 id="radix-:r2g:"
                 type="button"
@@ -2086,7 +2082,6 @@ exports[`ServiceList should match snapshot 1`] = `
                 <i
                   aria-hidden="true"
                   class="fa-regular fa-angle-down "
-                  data-align="suffix"
                 />
               </button>
             </div>
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
index 4f34d6d5806..024c9ba5c4b 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-action-bar.tsx
@@ -366,13 +366,13 @@ export function ServiceListActionBar({ environment, selectedRows, resetRowSelect
                 onClick={() => handleDeployAllServices()}
                 disabled={deployableServices.length === 0}
               >
-                Deploy selected <Icon data-align="suffix" iconName="play" />
+                Deploy selected <Icon iconName="play" />
               </Button>
             </Tooltip>
             <DropdownMenu.Root modal={false}>
               <DropdownMenu.Trigger asChild>
                 <Button color="neutral" size="md" variant="surface" className="items-center">
-                  More <Icon data-align="suffix" iconName="angle-down" />
+                  More <Icon iconName="angle-down" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content>
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index 0ab843ba8bb..f9fec42e3ee 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -354,7 +354,7 @@ export function ServiceList({ className, containerClassName, environment, ...pro
           to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
           params={{ organizationId, projectId, environmentId }}
         >
-          <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+          <Icon iconName="circle-plus" iconStyle="regular" />
           New service
         </Link>
       </EmptyState>
diff --git a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
index 69c0255fc13..f2d2a5a167c 100644
--- a/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-overview/instance-metrics/__snapshots__/instance-metrics.spec.tsx.snap
@@ -127,7 +127,7 @@ exports[`InstanceMetrics should match snapshot with data 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral truncate"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral truncate"
               >
                 foobar
               </button>
diff --git a/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx b/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
index c9eb91ebaf4..1348f4e2e4f 100644
--- a/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
+++ b/libs/domains/services/feature/src/lib/service-overview/service-header/service-header.tsx
@@ -55,7 +55,7 @@ export function GitRepository({ gitRepository }: { gitRepository: ApplicationGit
           rel="noopener noreferrer"
         >
           <Button color="neutral" variant="outline" size="xs">
-            <Icon data-align="prefix" iconName="code-branch" iconStyle="regular" height={14} width={14} />
+            <Icon iconName="code-branch" iconStyle="regular" height={14} width={14} />
             <Truncate text={gitRepository.branch} truncateLimit={17} />
           </Button>
         </a>
@@ -235,12 +235,7 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
               size="xs"
               as="button"
             >
-              <Icon
-                data-align="prefix"
-                width={16}
-                height={16}
-                name={containerRegistryKindToIcon(containerImage.registry.kind)}
-              />
+              <Icon width={16} height={16} name={containerRegistryKindToIcon(containerImage.registry.kind)} />
               <span className="truncate">
                 <Truncate text={containerImage.registry.name.toLowerCase()} truncateLimit={18} />
               </span>
@@ -266,7 +261,7 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
               size="xs"
               as="button"
             >
-              <Icon data-align="prefix" width={16} name={IconEnum.HELM_OFFICIAL} />
+              <Icon width={16} name={IconEnum.HELM_OFFICIAL} />
               <Truncate text={helmRepository.repository.name ?? ''} truncateLimit={18} />
             </ExternalLink>
           )}
@@ -298,7 +293,7 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
                 handleCopyCredentials(databaseSource.masterCredentials)
               }}
             >
-              <Icon data-align="prefix" iconName="key" iconStyle="regular" />
+              <Icon iconName="key" iconStyle="regular" />
               Connection URI
             </Button>
           )}
@@ -345,9 +340,9 @@ function ServiceHeaderMetadata({ service }: ServiceHeaderMetadataProps) {
           serviceId={serviceId}
         >
           <Button size="xs" color="neutral" variant="outline">
-            <Icon data-align="prefix" iconName="link" iconStyle="regular" />
+            <Icon iconName="link" iconStyle="regular" />
             Links
-            <Icon data-align="suffix" iconName="angle-down" iconStyle="regular" />
+            <Icon iconName="angle-down" iconStyle="regular" />
           </Button>
         </ServiceLinksPopover>
       )}
diff --git a/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx b/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
index d64720a5584..fd8da016a3d 100644
--- a/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
+++ b/libs/domains/services/feature/src/lib/service-overview/service-last-deployment/service-last-deployment.tsx
@@ -117,7 +117,7 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
             })
           }}
         >
-          <Icon data-align="prefix" iconName="rocket" />
+          <Icon iconName="rocket" />
           Deploy now
         </Button>
       </EmptyState>
@@ -137,7 +137,7 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
           <Tooltip content={`Chart version: ${chart_version}`}>
             <span className="inline-flex" onClick={preventParentLinkNavigation}>
               <Button type="button" variant="surface" color="neutral" size="xs">
-                <Icon data-align="prefix" iconName="code-commit" className="w-4" />
+                <Icon iconName="code-commit" className="w-4" />
                 {chart_version.length >= 18 ? `${chart_version.slice(0, 15)}…` : chart_version}
               </Button>
             </span>
@@ -148,7 +148,7 @@ function ServiceLastDeploymentContent({ serviceId, serviceType, service }: Servi
             <span className="inline-flex" onClick={preventParentLinkNavigation}>
               <CopyToClipboard text={tag} className="inline-flex justify-center">
                 <Button type="button" variant="surface" color="neutral" size="xs">
-                  <Icon data-align="prefix" iconName="code-commit" className="w-4" />
+                  <Icon iconName="code-commit" className="w-4" />
                   {tag.length >= 8 ? `${tag.slice(0, 8)}…` : tag}
                 </Button>
               </CopyToClipboard>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
index b78ba8a9ab5..072f64039f3 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
@@ -19,13 +19,12 @@ exports[`ServiceTerminal should match snapshot 1`] = `
               class="relative z-10"
             >
               <button
-                class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+                class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
               >
                 <span>
                   <i
                     aria-hidden="true"
                     class="fa-regular fa-xmark text-sm"
-                    data-align="suffix"
                   />
                 </span>
               </button>
@@ -82,7 +81,7 @@ exports[`ServiceTerminal should match snapshot 1`] = `
           </div>
         </div>
         <a
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
           href="https://www.qovery.com/docs/cli/overview"
           rel="noopener noreferrer"
           target="_blank"
@@ -90,7 +89,6 @@ exports[`ServiceTerminal should match snapshot 1`] = `
           <i
             aria-hidden="true"
             class="fa-regular fa-book "
-            data-align="prefix"
           />
           CLI docs
         </a>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index 5aa6eb8478d..56b5227ffeb 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -7,14 +7,13 @@ exports[`InputSearch should match snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
           <i
             aria-hidden="true"
             class="fa-regular fa-xmark text-sm"
-            data-align="suffix"
           />
         </span>
       </button>
@@ -71,14 +70,13 @@ exports[`InputSearch should match with snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
           <i
             aria-hidden="true"
             class="fa-regular fa-xmark text-sm"
-            data-align="suffix"
           />
         </span>
       </button>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index b638c7fc80f..2d3a434d0c8 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -45,7 +45,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel }: I
       >
         {value}
         <span>
-          <Icon data-align="suffix" iconName="xmark" className="text-sm" />
+          <Icon iconName="xmark" className="text-sm" />
         </span>
       </Button>
       <div className={clsx({ hidden: selectedItem }, 'relative')}>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index aec294c5834..d603434de20 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -241,7 +241,7 @@ export function ServiceTerminal({
           color="neutral"
           size="md"
         >
-          <Icon data-align="prefix" iconName="book" />
+          <Icon iconName="book" />
           CLI docs
         </ExternalLink>
       </div>
diff --git a/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx b/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
index a2d4c097f0f..88cb181187a 100644
--- a/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
+++ b/libs/domains/services/feature/src/lib/services-deployment-pipeline/services-deployment-pipeline/services-deployment-pipeline.tsx
@@ -200,7 +200,7 @@ export function ServicesDeploymentPipeline() {
               })
             }
           >
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             Add stage
           </Button>
         </div>
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
index e507d617c0d..bdfa719c393 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
@@ -412,7 +412,7 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
               <>
                 <div className="mb-2 flex justify-end">
                   <Button type="button" size="sm" variant="outline" onClick={() => setIsValueEditorOpen(true)}>
-                    <Icon data-align="prefix" iconName="arrows-maximize" iconStyle="regular" className="text-xs" />
+                    <Icon iconName="arrows-maximize" iconStyle="regular" className="text-xs" />
                     Open editor
                   </Button>
                 </div>
diff --git a/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx b/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
index 01547d12f17..2d9d43be2e6 100644
--- a/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
+++ b/libs/domains/variables/feature/src/lib/flow-create-variable/flow-create-variable.tsx
@@ -35,7 +35,7 @@ export function FlowCreateVariable({
         <Heading className="mb-2">Environment variables</Heading>
         <Button size="md" onClick={onAdd}>
           Add Variable
-          <Icon data-align="suffix" iconName="plus-circle" iconStyle="regular" />
+          <Icon iconName="plus-circle" iconStyle="regular" />
         </Button>
       </div>
 
diff --git a/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx b/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
index e7e28917986..062aa5f0b8e 100644
--- a/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
+++ b/libs/domains/variables/feature/src/lib/flow-create-variable/variable-row/variable-row.tsx
@@ -88,12 +88,12 @@ export function VariableRow(props: VariableRowProps) {
             {openEditor ? (
               <>
                 Close
-                <Icon data-align="prefix" iconName="angle-up" className="text-neutral-subtle" />
+                <Icon iconName="angle-up" className="text-neutral-subtle" />
               </>
             ) : (
               <>
                 Edit
-                <Icon data-align="suffix" iconName="edit" className="text-neutral-subtle" />
+                <Icon iconName="edit" className="text-neutral-subtle" />
               </>
             )}
           </Button>
diff --git a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
index 95e6660d1d7..e9b7169a2d9 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
@@ -86,7 +86,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r28:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -94,7 +94,6 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
-                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -109,7 +108,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r2b:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -117,7 +116,6 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
-                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -132,7 +130,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r2e:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -140,7 +138,6 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
-                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -228,7 +225,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2g:"
                     type="button"
@@ -330,7 +327,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2k:"
                     type="button"
@@ -421,7 +418,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2o:"
                     type="button"
@@ -615,7 +612,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r2s:"
                     type="button"
@@ -722,7 +719,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r31:"
                     type="button"
@@ -972,7 +969,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r37:"
                     type="button"
@@ -1181,7 +1178,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3d:"
                     type="button"
@@ -1304,7 +1301,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3i:"
                     type="button"
@@ -1412,7 +1409,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r3n:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -1420,7 +1417,6 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
-                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -1435,7 +1431,7 @@ exports[`VariableList should match snapshot 1`] = `
                       aria-controls="radix-:r3q:"
                       aria-expanded="false"
                       aria-haspopup="dialog"
-                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
+                      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral whitespace-nowrap text-xs"
                       data-state="closed"
                       type="button"
                     >
@@ -1443,7 +1439,6 @@ exports[`VariableList should match snapshot 1`] = `
                       <i
                         aria-hidden="true"
                         class="fa-regular fa-chevron-down "
-                        data-align="suffix"
                       />
                     </button>
                   </div>
@@ -1499,7 +1494,7 @@ exports[`VariableList should match snapshot 1`] = `
                     aria-expanded="false"
                     aria-haspopup="menu"
                     aria-label="actions"
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-8 justify-center"
                     data-state="closed"
                     id="radix-:r3s:"
                     type="button"
@@ -1583,7 +1578,7 @@ exports[`VariableList should match snapshot 1`] = `
             Deselect
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-8 px-2.5 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-8 px-2.5 gap-x-1.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
             data-testid="submit-button"
             disabled=""
             type="button"
diff --git a/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx b/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
index ec8ee780132..3328e893741 100644
--- a/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
+++ b/libs/domains/variables/feature/src/lib/variables-action-toolbar/variables-action-toolbar.tsx
@@ -59,7 +59,7 @@ export function VariablesActionToolbar({
         {showImportButton ? (
           <DropdownMenu.Trigger asChild>
             <Button color="neutral" variant="outline" size="md">
-              <Icon data-align="prefix" iconName="arrow-up-from-line" iconStyle="regular" />
+              <Icon iconName="arrow-up-from-line" iconStyle="regular" />
               Import variable
             </Button>
           </DropdownMenu.Trigger>
@@ -103,7 +103,7 @@ export function VariablesActionToolbar({
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
           <Button color="brand" variant="solid" size="md">
-            <Icon data-align="prefix" iconName="circle-plus" iconStyle="regular" />
+            <Icon iconName="circle-plus" iconStyle="regular" />
             New variable
           </Button>
         </DropdownMenu.Trigger>
diff --git a/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx b/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
index 9b40cee75f8..f9ec0f19628 100644
--- a/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
+++ b/libs/shared/assistant/feature/src/lib/need-help/need-help.tsx
@@ -17,7 +17,7 @@ export function NeedHelp({ className }: NeedHelpProps) {
       className={twMerge('w-fit items-center', className)}
       onClick={toggleAssistantOpen}
     >
-      <Icon data-align="prefix" iconName="circle-question" iconStyle="regular" className="p-0.5 text-xs" />
+      <Icon iconName="circle-question" iconStyle="regular" className="p-0.5 text-xs" />
       <span>Need help here?</span>
     </Button>
   )
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
index 434a4a4a3c9..c49c892e8b8 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx
@@ -139,7 +139,7 @@ export function SectionAICopilotConfiguration({
               {hasUnsavedChanges && (
                 <div className="flex items-center gap-3">
                   <Button size="md" color="brand" onClick={handleSaveMode} loading={isUpdating}>
-                    <Icon data-align="prefix" iconName="check" />
+                    <Icon iconName="check" />
                     Save changes
                   </Button>
                   <Button size="md" color="neutral" variant="outline" onClick={handleCancelMode} disabled={isUpdating}>
diff --git a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
index ae20bb4fac5..35f41f653f2 100644
--- a/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/section-ai-copilot-opt-in/section-ai-copilot-opt-in.tsx
@@ -489,7 +489,7 @@ export function SectionAICopilotOptIn({ organization, isLoading, onEnable }: Sec
                   />
 
                   <Button type="submit" size="md" color="brand" disabled={!isValid} className="mt-4">
-                    <Icon data-align="prefix" iconName="circle-check" />
+                    <Icon iconName="circle-check" />
                     Enable AI Copilot
                   </Button>
                 </div>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
index e162ca6723c..6d5b8001cee 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/devops-copilot-button.tsx
@@ -34,7 +34,7 @@ export function DevopsCopilotButton() {
         })
       }}
     >
-      <Icon data-align="prefix" iconName="sparkles" iconStyle="solid" className="text-xs text-brand" />
+      <Icon iconName="sparkles" iconStyle="solid" className="text-xs text-brand" />
       AI Copilot
     </Button>
   )
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
index d7ed22eb50d..9fc49da220a 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx
@@ -436,7 +436,7 @@ export function DevopsCopilotPanel({ onClose, style }: DevopsCopilotPanelProps)
                               handleSendMessage(label)
                             }}
                           >
-                            <Icon data-align="prefix" iconName="arrow-right" />
+                            <Icon iconName="arrow-right" />
                             {label}
                           </Button>
                         ))}
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
index 08a99ea24cc..b9781512955 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/enable-copilot-screen/enable-copilot-screen.tsx
@@ -22,7 +22,7 @@ export function EnableCopilotScreen({ organizationId, onClose }: EnableCopilotSc
     >
       <Link to="/organization/$organizationId/settings/ai-copilot" params={{ organizationId }} onClick={onClose}>
         <Button className="flex" size="md">
-          <Icon data-align="prefix" iconName="sparkles" />
+          <Icon iconName="sparkles" />
           Enable AI Copilot
         </Button>
       </Link>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
index 61413866bc6..d0b0e164be8 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`Input should match snapshot when loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 gap-x-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
           data-state="closed"
           type="button"
         >
@@ -25,7 +25,6 @@ exports[`Input should match snapshot when loading 1`] = `
           <i
             aria-hidden="true"
             class="fa-light fa-stop absolute left-0 right-0 m-auto opacity-0 group-hover:opacity-100"
-            data-align="suffix"
           />
         </button>
       </div>
@@ -48,14 +47,13 @@ exports[`Input should match snapshot when not loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm px-2 gap-x-1 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-subtle transition-colors hover:text-neutral"
           data-state="closed"
           type="button"
         >
           <i
             aria-hidden="true"
             class="fa-regular fa-arrow-up "
-            data-align="suffix"
           />
         </button>
       </div>
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
index 75a6c17fcb4..d54e802b208 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/input.tsx
@@ -46,12 +46,11 @@ export const Input = forwardRef<HTMLTextAreaElement, InputProps>(({ onClick, sto
             }}
           >
             {!loading ? (
-              <Icon data-align="suffix" iconName="arrow-up" className={loading ? 'opacity-0' : ''} />
+              <Icon iconName="arrow-up" className={loading ? 'opacity-0' : ''} />
             ) : (
               <>
                 <LoaderSpinner className="absolute left-0 right-0 m-auto group-hover:opacity-0" />
                 <Icon
-                  data-align="suffix"
                   className="absolute left-0 right-0 m-auto opacity-0 group-hover:opacity-100"
                   iconName="stop"
                   iconStyle="light"
diff --git a/libs/shared/ui/src/lib/components/banner/banner.tsx b/libs/shared/ui/src/lib/components/banner/banner.tsx
index e5b7c2b8775..fd17d3bdcee 100644
--- a/libs/shared/ui/src/lib/components/banner/banner.tsx
+++ b/libs/shared/ui/src/lib/components/banner/banner.tsx
@@ -57,7 +57,7 @@ export const Banner = forwardRef<HTMLDivElement, PropsWithChildren<BannerProps>>
       {buttonLabel && (
         <Button type="button" className="ml-4" variant="solid" color={buttonColor} onClick={onClickButton}>
           {buttonLabel}
-          {buttonIconRight && <Icon data-align="suffix" iconName={buttonIconRight} />}
+          {buttonIconRight && <Icon iconName={buttonIconRight} />}
         </Button>
       )}
       {dismissible && (
diff --git a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
index f2c1ef0446d..bb2f0145e5d 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ButtonPrimitive should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
diff --git a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
index e4600673d74..5c3cdbc0d7e 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
+++ b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.spec.tsx
@@ -7,51 +7,51 @@ describe('ButtonPrimitive', () => {
     expect(baseElement).toMatchSnapshot()
   })
 
-  it('should render icon alignment markers around children', () => {
+  it('should render children with icon spacing', () => {
     renderWithProviders(
       <ButtonPrimitive type="button">
-        <span data-align="prefix">Prefix</span>
+        <span>Prefix</span>
         Foobar
-        <span data-align="suffix">Suffix</span>
+        <span>Suffix</span>
       </ButtonPrimitive>
     )
 
     expect(screen.getByRole('button')).toHaveTextContent('PrefixFoobarSuffix')
   })
 
-  it('should use compact icon margins for xs and sm buttons', () => {
+  it('should use compact icon gaps for xs and sm buttons', () => {
     renderWithProviders(
       <>
         <ButtonPrimitive type="button" size="xs">
-          <span data-align="prefix">Prefix</span>
+          <span>Prefix</span>
           Extra small
         </ButtonPrimitive>
         <ButtonPrimitive type="button" size="sm">
           Small
-          <span data-align="suffix">Suffix</span>
+          <span>Suffix</span>
         </ButtonPrimitive>
       </>
     )
 
-    expect(screen.getByText('Extra small').closest('button')?.className).toContain('[&_[data-align=prefix]]:mr-1')
-    expect(screen.getByText('Small').closest('button')?.className).toContain('[&_[data-align=suffix]]:ml-1')
+    expect(screen.getByRole('button', { name: /Extra small/ })).toHaveClass('gap-x-1')
+    expect(screen.getByRole('button', { name: /Small/ })).toHaveClass('gap-x-1')
   })
 
-  it('should use larger icon margins for md and lg buttons', () => {
+  it('should use larger icon gaps for md and lg buttons', () => {
     renderWithProviders(
       <>
         <ButtonPrimitive type="button" size="md">
-          <span data-align="prefix">Prefix</span>
+          <span>Prefix</span>
           Medium
         </ButtonPrimitive>
         <ButtonPrimitive type="button" size="lg">
           Large
-          <span data-align="suffix">Suffix</span>
+          <span>Suffix</span>
         </ButtonPrimitive>
       </>
     )
 
-    expect(screen.getByText('Medium').closest('button')?.className).toContain('[&_[data-align=prefix]]:mr-1.5')
-    expect(screen.getByText('Large').closest('button')?.className).toContain('[&_[data-align=suffix]]:ml-1.5')
+    expect(screen.getByRole('button', { name: /Medium/ })).toHaveClass('gap-x-1.5')
+    expect(screen.getByRole('button', { name: /Large/ })).toHaveClass('gap-x-1.5')
   })
 })
diff --git a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
index f25b1c98578..84d1f015313 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
+++ b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
@@ -37,10 +37,10 @@ const _buttonVariants = cva(
         current: [''],
       },
       size: {
-        xs: ['text-ssm', 'h-6', 'px-1.5', '[&_[data-align=prefix]]:mr-1', '[&_[data-align=suffix]]:ml-1'],
-        sm: ['text-ssm', 'h-7', 'px-2', '[&_[data-align=prefix]]:mr-1', '[&_[data-align=suffix]]:ml-1'],
-        md: ['text-sm', 'h-8', 'px-2.5', '[&_[data-align=prefix]]:mr-1.5', '[&_[data-align=suffix]]:ml-1.5'],
-        lg: ['text-sm', 'h-10', 'px-3', '[&_[data-align=prefix]]:mr-1.5', '[&_[data-align=suffix]]:ml-1.5'],
+        xs: ['text-ssm', 'h-6', 'px-1.5', 'gap-x-1'],
+        sm: ['text-ssm', 'h-7', 'px-2', 'gap-x-1'],
+        md: ['text-sm', 'h-8', 'px-2.5', 'gap-x-1.5'],
+        lg: ['text-sm', 'h-10', 'px-3', 'gap-x-1.5'],
       },
       radius: {
         none: [],
diff --git a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
index c69ef046da7..38416947f42 100644
--- a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
@@ -17,7 +17,7 @@ exports[`Button should match snapshot with loading 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert pointer-events-none relative !text-transparent"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert pointer-events-none relative !text-transparent"
       type="button"
     >
       <div
diff --git a/libs/shared/ui/src/lib/components/button/button.spec.tsx b/libs/shared/ui/src/lib/components/button/button.spec.tsx
index 3355bd31b03..61c3ef67679 100644
--- a/libs/shared/ui/src/lib/components/button/button.spec.tsx
+++ b/libs/shared/ui/src/lib/components/button/button.spec.tsx
@@ -16,17 +16,16 @@ describe('Button', () => {
     expect(baseElement).toMatchSnapshot()
   })
 
-  it('should support icon alignment markers', () => {
+  it('should support icon spacing', () => {
     renderWithProviders(
       <Button type="button">
-        <span data-align="prefix">Prefix</span>
+        <span>Prefix</span>
         Foobar
-        <span data-align="suffix">Suffix</span>
+        <span>Suffix</span>
       </Button>
     )
 
     expect(screen.getByRole('button')).toHaveTextContent('PrefixFoobarSuffix')
-    expect(screen.getByRole('button')).toHaveClass('[&_[data-align=prefix]]:mr-1')
-    expect(screen.getByRole('button')).toHaveClass('[&_[data-align=suffix]]:ml-1')
+    expect(screen.getByRole('button')).toHaveClass('gap-x-1')
   })
 })
diff --git a/libs/shared/ui/src/lib/components/button/button.stories.tsx b/libs/shared/ui/src/lib/components/button/button.stories.tsx
index bd9ae512afe..e5e41004bec 100644
--- a/libs/shared/ui/src/lib/components/button/button.stories.tsx
+++ b/libs/shared/ui/src/lib/components/button/button.stories.tsx
@@ -24,9 +24,9 @@ export const WithIcons = {
   args: {
     children: (
       <>
-        <Icon data-align="prefix" iconName="arrow-left" />
+        <Icon iconName="arrow-left" />
         Upload
-        <Icon data-align="suffix" iconName="arrow-right" />
+        <Icon iconName="arrow-right" />
       </>
     ),
   },
diff --git a/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx b/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
index adba25c928f..1519e7eecac 100644
--- a/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
+++ b/libs/shared/ui/src/lib/components/code-editor-inline-setting/code-editor-inline-setting.tsx
@@ -49,7 +49,7 @@ export function CodeEditorInlineSetting({
           <Icon iconName="wave-pulse" className="text-neutral-subtle" />
           <p className="mb-3 mt-1 text-xs font-medium text-neutral-subtle">{emptyStateText}</p>
           <Button type="button" size="md" variant="outline" onClick={onOpenModal}>
-            <Icon data-align="prefix" iconName="plus" />
+            <Icon iconName="plus" />
             {addButtonLabel}
           </Button>
         </div>
diff --git a/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx b/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
index c7bb0c8a2df..7263bc46dd3 100644
--- a/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
+++ b/libs/shared/ui/src/lib/components/copy-button/copy-button.tsx
@@ -29,7 +29,7 @@ export function CopyButton({ content }: CopyButtonProps) {
       className="cursor-pointer font-sans font-medium"
     >
       Copy
-      <Icon data-align="suffix" iconName={icon} className="text-xs" />
+      <Icon iconName={icon} className="text-xs" />
     </Button>
   )
 }
diff --git a/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx b/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
index e930e932d45..6a2e9221131 100644
--- a/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
+++ b/libs/shared/ui/src/lib/components/error-boundary/error-boundary.tsx
@@ -17,7 +17,7 @@ export function ErrorFallback({ className, error, resetErrorBoundary }: Fallback
         </div>
         <Button onClick={resetErrorBoundary} size="md" className="flex">
           Try again
-          <Icon data-align="suffix" iconName="refresh" />
+          <Icon iconName="refresh" />
         </Button>
       </div>
     </Section>
diff --git a/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx b/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
index 9b44b2dfc49..a244822eac2 100644
--- a/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
+++ b/libs/shared/ui/src/lib/components/funnel-flow/funnel-flow.tsx
@@ -31,7 +31,7 @@ const FunnelFlowContent = (props: FunnelFlowProps) => {
         {props.onExit && (
           <div className="flex h-full items-center border-l border-l-neutral pl-5">
             <Button onClick={props.onExit} variant="surface" size="md">
-              Close <Icon data-align="suffix" iconName="xmark" iconStyle="regular" className="text-base" />
+              Close <Icon iconName="xmark" iconStyle="regular" className="text-base" />
             </Button>
           </div>
         )}
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
index e87cddf12a2..4a7a8de884e 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`InputFilter should match input filter with loading 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       <div
@@ -24,7 +24,7 @@ exports[`InputFilter should match input filter with value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       Option 1
@@ -36,7 +36,6 @@ exports[`InputFilter should match input filter with value 1`] = `
         <i
           aria-hidden="true"
           class="fa-regular fa-xmark "
-          data-align="suffix"
         />
       </span>
     </button>
@@ -48,14 +47,13 @@ exports[`InputFilter should match input filter without value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 [&_[data-align=prefix]]:mr-1 [&_[data-align=suffix]]:ml-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       Filter
       <i
         aria-hidden="true"
         class="fa-regular fa-magnifying-glass "
-        data-align="suffix"
       />
     </button>
   </div>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
index f860c0b507f..7054ed6d348 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
@@ -36,7 +36,7 @@ export function InputFilter({ name, nameKey, options, onChange, defaultValue, is
       {!isOpen && (
         <Button onClick={() => setIsOpen(true)} type="button" variant="surface" color="neutral">
           {name}
-          <Icon data-align="suffix" iconName="magnifying-glass" />
+          <Icon iconName="magnifying-glass" />
         </Button>
       )}
       {isOpen && (
@@ -74,7 +74,7 @@ export function InputFilter({ name, nameKey, options, onChange, defaultValue, is
                       setIsOpen(false)
                     }}
                   >
-                    <Icon data-align="suffix" iconName="xmark" />
+                    <Icon iconName="xmark" />
                   </span>
                 </>
               )}
diff --git a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
index fcf7cb0a477..239b1e4c1ee 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
@@ -55,13 +55,13 @@ exports[`ModalConfirmation should match confirm mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="submit"
         >
           Confirm
@@ -115,13 +115,13 @@ exports[`ModalConfirmation should match delete mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           type="submit"
         >
           Confirm
@@ -179,13 +179,13 @@ exports[`ModalConfirmation should match delete mode without description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           type="submit"
         >
           Confirm
diff --git a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
index 59665281a69..d312fc1ef5d 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
@@ -112,13 +112,13 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 [&_[data-align=prefix]]:mr-1.5 [&_[data-align=suffix]]:ml-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-negative-strong text-sm h-10 px-3 gap-x-1.5 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           disabled=""
           type="submit"
         >
diff --git a/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx b/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
index 4d3b5f060b1..13c95c071d8 100644
--- a/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table-filter/table-filter.tsx
@@ -55,7 +55,7 @@ export function TableFilter({ column }: { column: Column<any, unknown> }) {
               ) : (
                 <>
                   {column.columnDef.header?.toString()}
-                  <Icon data-align="suffix" iconName="chevron-down" />
+                  <Icon iconName="chevron-down" />
                 </>
               )}
             </Button>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
index 98597f9b461..cbb81540ab4 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-datepicker/table-head-datepicker.tsx
@@ -124,7 +124,7 @@ export function TableHeadDatePickerFilter({
                 className="relative flex h-6 cursor-pointer items-center font-code text-xs"
                 onClick={(event) => cleanFilter(event)}
               >
-                <Icon data-align="suffix" iconName="xmark" />
+                <Icon iconName="xmark" />
               </span>
             </Button>
           ) : (
@@ -138,7 +138,7 @@ export function TableHeadDatePickerFilter({
               }}
             >
               {title}
-              <Icon data-align="suffix" iconName="angle-down" />
+              <Icon iconName="angle-down" />
             </Button>
           )}
         </div>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx b/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
index 28d0552516e..26de6b854e0 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-filter/table-head-filter.tsx
@@ -272,13 +272,13 @@ export function TableHeadFilter<T>({
               <Button type="button" color="neutral" size="sm" className="whitespace-nowrap font-code">
                 {title} {!hideFilterNumber ? `(${dataFilterNumber})` : ''}
                 <span role="button" className="flex" onClick={(event) => cleanFilter(event)}>
-                  <Icon data-align="suffix" iconName="xmark" />
+                  <Icon iconName="xmark" />
                 </span>
               </Button>
             ) : (
               <Button type="button" variant="surface" color="neutral" size="sm" className="items-center font-code">
                 {title}
-                <Icon data-align="suffix" iconName="angle-down" />
+                <Icon iconName="angle-down" />
               </Button>
             )}
           </div>
diff --git a/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx b/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
index 3a067208b80..7b125b286dc 100644
--- a/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
+++ b/libs/shared/ui/src/lib/components/table/table-head-hierarchical-filter/table-head-hierarchical-filter.tsx
@@ -386,13 +386,13 @@ export function TableHeadHierarchicalFilter({
                   className="relative flex h-6 cursor-pointer items-center text-xs"
                   onClick={(event) => cleanFilter(event)}
                 >
-                  <Icon data-align="suffix" iconName="xmark" />
+                  <Icon iconName="xmark" />
                 </span>
               </Button>
             ) : (
               <Button type="button" variant="surface" color="neutral" size="sm" className="items-center font-code">
                 {title}
-                <Icon data-align="suffix" iconName="angle-down" />
+                <Icon iconName="angle-down" />
               </Button>
             )}
           </div>

From 8465d4ae2672d3843accda0975e7d96d3f59a9af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 15 May 2026 17:24:31 +0200
Subject: [PATCH 4/4] docs(spacing-layout): update button guidelines to
 standardize icon and text alignment

---
 .agents/skills/qovery-ui/references/spacing-layout.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.agents/skills/qovery-ui/references/spacing-layout.md b/.agents/skills/qovery-ui/references/spacing-layout.md
index 569609a7f78..cb8a9448145 100644
--- a/.agents/skills/qovery-ui/references/spacing-layout.md
+++ b/.agents/skills/qovery-ui/references/spacing-layout.md
@@ -93,6 +93,7 @@ Example: a card with `rounded-2xl` (16px) and `p-2` (8px) padding → the inner
 Geometric centering often looks off. Adjust for perceived visual weight.
 
 - **Play triangle in a circle:** nudge right — the triangle's visual center is not its geometric center.
+- **Button with icon + text:** use `<Button>`. Do not add manual icon margins or custom gaps inside buttons.
 - **Asymmetric icons** (stars, arrows, carets): best fixed in the SVG directly. Fallback: `margin-left: 1px` or similar.
 - **Heavy glyph next to a light one:** optical baseline shift.