diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
index 0792538400..900d9fa925 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
@@ -8,3 +8,4 @@ export * from './modal/modal.component';
 export * from './profile/profile.component';
 export * from './table-empty-message/table-empty-message.component';
 export * from './toast/toast.component';
+export * from './sort-order-icon/sort-order-icon.component';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html
new file mode 100644
index 0000000000..e554610d3c
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.html
@@ -0,0 +1,3 @@
+<span [class]="float-right {{ iconClass }}">
+  <i [class]="fa {{ icon }}"></i>
+</span>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts
new file mode 100644
index 0000000000..0a71a4b9d7
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'abp-sort-order-icon',
+  templateUrl: './sort-order-icon.component.html',
+})
+export class SortOrderIconComponent implements OnInit {
+  @Input()
+  selectedKey: string;
+
+  @Input()
+  key: string;
+
+  @Input()
+  order: string;
+
+  @Input()
+  iconClass: string;
+
+  get icon(): string {
+    if (!this.selectedKey) return 'fa-sort';
+    if (this.selectedKey === this.key) return `fa-sort-${this.order}`;
+    else return '';
+  }
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index a1839f6217..2c7292ebc4 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -14,6 +14,7 @@ import { LoaderBarComponent } from './components/loader-bar/loader-bar.component
 import { ModalComponent } from './components/modal/modal.component';
 import { ProfileComponent } from './components/profile/profile.component';
 import { ToastComponent } from './components/toast/toast.component';
+import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
 import { chartJsLoaded$ } from './utils/widget-utils';
@@ -32,8 +33,8 @@ export function appendScript(injector: Injector) {
         'style',
         styles,
         'head',
-        'afterbegin'
-      ) /* lazyLoadService.load(null, 'script', scripts) */
+        'afterbegin',
+      ) /* lazyLoadService.load(null, 'script', scripts) */,
     ).pipe(take(1));
   };
 
@@ -53,7 +54,8 @@ export function appendScript(injector: Injector) {
     ModalComponent,
     ProfileComponent,
     TableEmptyMessageComponent,
-    ToastComponent
+    ToastComponent,
+    SortOrderIconComponent,
   ],
   exports: [
     BreadcrumbComponent,
@@ -65,9 +67,10 @@ export function appendScript(injector: Injector) {
     ModalComponent,
     ProfileComponent,
     TableEmptyMessageComponent,
-    ToastComponent
+    ToastComponent,
+    SortOrderIconComponent,
   ],
-  entryComponents: [ErrorComponent]
+  entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {
   static forRoot(): ModuleWithProviders {
@@ -78,10 +81,10 @@ export class ThemeSharedModule {
           provide: APP_INITIALIZER,
           multi: true,
           deps: [Injector, ErrorHandler],
-          useFactory: appendScript
+          useFactory: appendScript,
         },
-        { provide: MessageService, useClass: MessageService }
-      ]
+        { provide: MessageService, useClass: MessageService },
+      ],
     };
   }
 }