diff --git a/src/common/_fabricExtraIcons.scss b/src/common/_fabricExtraIcons.scss
index b7f8d561e036bb..9bc6b96418aa0e 100644
--- a/src/common/_fabricExtraIcons.scss
+++ b/src/common/_fabricExtraIcons.scss
@@ -1,2 +1,4 @@
 .ms-Icon--GroupedAscending:before { content: '\EE67'; }
 .ms-Icon--GroupedDescending:before { content: '\EE66'; }
+.ms-Icon--SortUp:before { content: '\EE68'; }
+.ms-Icon--SortDown:before { content: '\EE69'; }
\ No newline at end of file
diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx
index f328148570cdff..442612bdd10bbb 100644
--- a/src/components/DetailsList/DetailsHeader.tsx
+++ b/src/components/DetailsList/DetailsHeader.tsx
@@ -157,8 +157,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
                   { column.isSorted && (
                     <i className={ css('ms-Icon', {
-                      'ms-Icon--Up': !column.isSortedDescending,
-                      'ms-Icon--Down': column.isSortedDescending
+                      'ms-Icon--SortUp': !column.isSortedDescending,
+                      'ms-Icon--SortDown': column.isSortedDescending
                     }) } />
                   ) }