diff --git a/core/themes/claro/css/components/tablesort-indicator.css b/core/themes/claro/css/components/tablesort-indicator.css
index 6e0ba738558d121cc4f12165ff832a33bf5738da..572be2b67d0f540ee7e4d84b4d1675dcac881b02 100644
--- a/core/themes/claro/css/components/tablesort-indicator.css
+++ b/core/themes/claro/css/components/tablesort-indicator.css
@@ -14,9 +14,9 @@
   position: absolute;
   top: 50%;
   inset-inline-end: 1rem;
-  width: 0.875rem; /* 14px */
+  width: 0.875rem;
   height: var(--space-m);
-  margin-block-start: -0.5rem; /* -8px */
+  margin-block-start: -0.5rem;
   opacity: 0.5;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
@@ -37,7 +37,8 @@
 }
 
 [dir="rtl"] .tablesort {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
+  /* Horizontally flip the element. */
+  transform: scaleX(-1);
 }
 
 .tablesort--asc {
diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css
index 5a79aa2b2403765367b51c54199c58b7220d53f2..eb951a37191d73ba888a73a8827a6eb056872736 100644
--- a/core/themes/claro/css/components/tablesort-indicator.pcss.css
+++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css
@@ -7,24 +7,25 @@
   position: absolute;
   top: 50%;
   inset-inline-end: 1rem;
-  width: 0.875rem; /* 14px */
+  width: 14px;
   height: var(--space-m);
-  margin-block-start: -0.5rem; /* -8px */
+  margin-block-start: -8px;
   opacity: 0.5;
-  background-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
+  background-image: url(../../images/icons/000f33/sort--inactive.svg);
   background-repeat: no-repeat;
   background-position: 0 50%;
   background-size: auto;
 
   @media (forced-colors: active) {
     background: linktext;
-    mask-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
+    mask-image: url(../../images/icons/000f33/sort--inactive.svg);
     mask-repeat: no-repeat;
     mask-position: 0 50%;
   }
 
   @nest [dir="rtl"] & {
-    background-image: url(../../images/icons/000f33/sort--inactive--rtl.svg);
+    /* Horizontally flip the element. */
+    transform: scaleX(-1);
   }
 }
 
diff --git a/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg b/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
deleted file mode 100644
index f78854f62086d3e56a42b6170637f9c54a937f3b..0000000000000000000000000000000000000000
--- a/core/themes/claro/images/icons/000f33/sort--inactive--rtl.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8"><path d="M12.25.25v1.5H1.75V.25zm0 3v1.5h-7.5v-1.5zm0 3v1.5h-4.5v-1.5z" fill="#000f33"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/000f33/sort--inactive--ltr.svg b/core/themes/claro/images/icons/000f33/sort--inactive.svg
similarity index 100%
rename from core/themes/claro/images/icons/000f33/sort--inactive--ltr.svg
rename to core/themes/claro/images/icons/000f33/sort--inactive.svg