diff --git a/components/data-display.html b/components/data-display.html
index 0da2bcc..7f80f15 100644
--- a/components/data-display.html
+++ b/components/data-display.html
@@ -86,31 +86,31 @@
         <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0">
           <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren">
             <span class="sg-large-table__sort-label">Spalte 1</span>
-            <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
           </button>
         </div>
         <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1">
           <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren">
             <span class="sg-large-table__sort-label">Spalte 2</span>
-            <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
           </button>
         </div>
         <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2">
           <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren">
             <span class="sg-large-table__sort-label">Spalte 3</span>
-            <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
           </button>
         </div>
         <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3">
           <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren">
             <span class="sg-large-table__sort-label">Spalte 4</span>
-            <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
           </button>
         </div>
         <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4">
           <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren">
             <span class="sg-large-table__sort-label">Spalte 5</span>
-            <span class="sg-large-table__sort-icon" aria-hidden="true">▴</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
           </button>
         </div>
       </div>
@@ -221,7 +221,7 @@
 
           cell.setAttribute('aria-sort', isActive ? direction : 'none');
           if (icon) {
-            icon.textContent = isActive ? (direction === 'ascending' ? '▴' : '▾') : '▴';
+            icon.dataset.direction = isActive ? direction : 'ascending';
           }
         });
 
diff --git a/styles/42-components-data-display.css b/styles/42-components-data-display.css
index fc0ffe3..f37315a 100644
--- a/styles/42-components-data-display.css
+++ b/styles/42-components-data-display.css
@@ -105,7 +105,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.15rem;
+  gap: 0.2rem;
   width: 100%;
   padding: 0 var(--spacing-small);
   border: var(--border-none);
@@ -124,7 +124,25 @@
 
 .sg-large-table__sort-icon {
   flex: 0 0 auto;
-  font-size: 1.15em;
-  font-weight: var(--font-weight-semibold);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.7rem;
+  height: 0.7rem;
   line-height: 1;
+  transform: translateY(0.02em);
+}
+
+.sg-large-table__sort-icon::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 0.28rem solid transparent;
+  border-right: 0.28rem solid transparent;
+  border-bottom: 0.42rem solid currentColor;
+}
+
+.sg-large-table__sort-icon[data-direction="descending"]::before {
+  transform: rotate(180deg);
 }