diff --git a/webapp/packages/core-app/public/icons/icons.svg b/webapp/packages/core-app/public/icons/icons.svg
index 2b6f82e4dd..58492acbfe 100644
--- a/webapp/packages/core-app/public/icons/icons.svg
+++ b/webapp/packages/core-app/public/icons/icons.svg
@@ -194,10 +194,10 @@
     </g>
   </symbol>
 
-  <symbol id="order-arrow-up" viewBox="0 0 16 16">
+  <symbol id="order-arrow-asc" viewBox="0 0 16 16">
     <path fill="#338ECC" fill-rule="evenodd" d="M1 7l7-6 7 6h-5v8H6V7H1z" clip-rule="evenodd"/>
   </symbol>
-  <symbol id="order-arrow-down" viewBox="0 0 16 16">
+  <symbol id="order-arrow-desc" viewBox="0 0 16 16">
     <path fill="#338ECC" fill-rule="evenodd" d="M15 9l-7 6-7-6h5V1h4v8h5z" clip-rule="evenodd"/>
   </symbol>
   <symbol id="order-arrow-unknown" viewBox="0 0 16 16">
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/OrderButton.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/OrderButton.tsx
index 4755ce26ba..f6057e297c 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/OrderButton.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/OrderButton.tsx
@@ -56,9 +56,9 @@ export const OrderButton = observer<Props>(function OrderButton({
 
   let icon = 'order-arrow-unknown';
   if (currentOrder === EOrder.asc) {
-    icon = 'order-arrow-up';
+    icon = 'order-arrow-asc';
   } else if (currentOrder === EOrder.desc) {
-    icon = 'order-arrow-down';
+    icon = 'order-arrow-desc';
   }
 
   const handleSort = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -69,7 +69,7 @@ export const OrderButton = observer<Props>(function OrderButton({
     });
   };
 
-  function preventFocus(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+  function preventFocus(event: React.MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
   }