diff --git a/src/common/_common.scss b/src/common/_common.scss
index 5817539e378b95..7411c91206020c 100644
--- a/src/common/_common.scss
+++ b/src/common/_common.scss
@@ -4,4 +4,5 @@
 @import './themeOverrides';
 @import './focusBorder';
 @import './semanticColorVariables';
+@import './fabricExtraIcons';
 
diff --git a/src/common/_fabricExtraIcons.scss b/src/common/_fabricExtraIcons.scss
new file mode 100644
index 00000000000000..79b050863cca60
--- /dev/null
+++ b/src/common/_fabricExtraIcons.scss
@@ -0,0 +1,2 @@
+.ms-Icon--groupingAscending:before { content: '\e31d'; }
+.ms-Icon--groupingDescending:before { content: '\e31e'; }
\ No newline at end of file
diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx
index 40432c59b486d1..6d2a4d39b501d8 100644
--- a/src/components/DetailsList/DetailsHeader.tsx
+++ b/src/components/DetailsList/DetailsHeader.tsx
@@ -163,7 +163,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                   ) }
 
                   { column.isGrouped && (
-                    <i className='ms-Icon ms-Icon--listGroup2' />
+                    <i className='ms-Icon ms-Icon--groupingDescending' />
                   ) }
 
                   { column.iconClassName && (
diff --git a/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx b/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx
index 9a9ad6d12e7622..2d71ccd519bdc5 100644
--- a/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx
+++ b/src/demo/pages/DetailsListPage/examples/DetailsList.Advanced.Example.tsx
@@ -373,7 +373,7 @@ export class DetailsListAdvancedExample extends React.Component<any, IDetailsLis
       items.push({
         key: 'groupBy',
         name: 'Group By ' + column.name,
-        icon: 'listGroup2',
+        icon: 'groupingDescending',
         canCheck: true,
         isChecked: column.isGrouped,
         onClick: () => this._onGroupByColumn(column)