diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
index 2aac04c12df..86cc54af372 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -13,9 +13,19 @@
   padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal;
   min-width: fit-content;
   user-select: none;
+  display: grid;
+  grid-auto-flow: column;
+  align-self: center;
+  gap: 5px;
 
   &:hover {
     background-color: $cardview-header-item-hovered-background-color;
     border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
   }
 }
+
+.dx-cardview-header-item-sorting {
+  display: grid;
+  grid-auto-flow: column;
+  align-self: center;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
index 8dfadf79f82..1ef277cc885 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
@@ -6,5 +6,5 @@ $cardview-header-item-hovered-border-color: null !default;
 
 $cardview-header-item-border-width: null !default;
 $cardview-header-item-border-radius: null !default;
-$cardview-header-item-padding-horizontal: 12px !default;
+$cardview-header-item-padding-horizontal: 8px !default;
 $cardview-header-item-padding-vertical: 6px !default;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
index caaa0e80e0e..87f87b82046 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
@@ -10,6 +10,7 @@ export const CLASSES = {
     container: 'dx-cardview-header-item-sorting',
     order: 'dx-cardview-header-item-sorting-order',
   },
+  icon: 'dx-icon',
 };
 
 // TODO: extract icons to separate component
@@ -26,8 +27,8 @@ const ICONS = {
       <path d="M8.35355 0.146447C8.25978 0.0526784 8.13261 0 8 0C7.86739 0 7.74021 0.0526784 7.64645 0.146447L5.14645 2.64645C4.95118 2.84171 4.95118 3.15829 5.14645 3.35355C5.34171 3.54882 5.65829 3.54882 5.85355 3.35355L7.5 1.70711V5.5C7.5 5.77614 7.72386 6 8 6C8.27614 6 8.5 5.77614 8.5 5.5V1.70711L10.1464 3.35355C10.3417 3.54882 10.6583 3.54882 10.8536 3.35355C11.0488 3.15829 11.0488 2.84171 10.8536 2.64645L8.35355 0.146447ZM0.146447 7.64645C0.0526784 7.74021 0 7.86739 0 8C0 8.13261 0.0526784 8.25979 0.146447 8.35355L2.64645 10.8536C2.84171 11.0488 3.15829 11.0488 3.35355 10.8536C3.54882 10.6583 3.54882 10.3417 3.35355 10.1464L1.70711 8.5H5.5C5.77614 8.5 6 8.27614 6 8C6 7.72386 5.77614 7.5 5.5 7.5H1.70711L3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645C3.15829 4.95118 2.84171 4.95118 2.64645 5.14645L0.146447 7.64645ZM8 16C7.86739 16 7.74021 15.9473 7.64645 15.8536L5.14645 13.3536C4.95118 13.1583 4.95118 12.8417 5.14645 12.6464C5.34171 12.4512 5.65829 12.4512 5.85355 12.6464L7.5 14.2929L7.5 10.5C7.5 10.2239 7.72386 10 8 10C8.27614 10 8.5 10.2239 8.5 10.5V14.2929L10.1464 12.6464C10.3417 12.4512 10.6583 12.4512 10.8536 12.6464C11.0488 12.8417 11.0488 13.1583 10.8536 13.3536L8.35355 15.8536C8.25979 15.9473 8.13261 16 8 16ZM15.8536 8.35355C15.9473 8.25978 16 8.13261 16 8C16 7.86739 15.9473 7.74021 15.8536 7.64645L13.3536 5.14645C13.1583 4.95118 12.8417 4.95118 12.6464 5.14645C12.4512 5.34171 12.4512 5.65829 12.6464 5.85355L14.2929 7.5L10.5 7.5C10.2239 7.5 10 7.72386 10 8C10 8.27614 10.2239 8.5 10.5 8.5L14.2929 8.5L12.6464 10.1464C12.4512 10.3417 12.4512 10.6583 12.6464 10.8536C12.8417 11.0488 13.1583 11.0488 13.3536 10.8536L15.8536 8.35355Z" fill="#242424"/>
     </svg>
   ),
-  sortUp: <i className='dx-icon dx-icon-sortup'/>,
-  sortDown: <i className='dx-icon dx-icon-sortdown'/>,
+  sortUp: <div className={`${CLASSES.icon} dx-icon-sortup`}/>,
+  sortDown: <div className={`${CLASSES.icon} dx-icon-sortdown`}/>,
 };
 
 interface SortIconProps {
@@ -38,17 +39,17 @@ interface SortIconProps {
 
 function SortIcon(props: SortIconProps): JSX.Element {
   return (
-    <span className={CLASSES.sorting.container}>
+    <div className={CLASSES.sorting.container}>
       {props.sortOrder === 'asc' && ICONS.sortUp}
       {props.sortOrder === 'desc' && ICONS.sortDown}
       {
         props.showSortIndex && (
-          <span className={CLASSES.sorting.order}>
+          <div className={CLASSES.sorting.order}>
             {props.sortIndex}
-          </span>
+          </div>
         )
       }
-    </span>
+    </div>
   );
 }