diff --git a/client/coral-plugin-best/BestButton.js b/client/coral-plugin-best/BestButton.js
index 8130c2530..96ef45f86 100644
--- a/client/coral-plugin-best/BestButton.js
+++ b/client/coral-plugin-best/BestButton.js
@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
+import {Icon} from 'coral-ui';
 import classnames from 'classnames';
 
 // tag string for best comments
@@ -17,7 +18,8 @@ const lang = new I18n(translations);
 const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some(role => roles.includes(role));
 
 // Put this on a comment to show that it is best
-export const BestIndicator = ({children = <i className={'material-icons'} aria-hidden={true}>star</i>}) => (
+
+export const BestIndicator = ({children = <Icon name='star'/>}) => (
   <span aria-label={lang.t('commentIsBest')}>
     { children }
   </span>
@@ -97,9 +99,7 @@ export class BestButton extends Component {
               disabled={disabled}
               className={classnames(`${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
               aria-label={lang.t(isBest ? 'unsetBest' : 'setBest')}>
-        <i className={`${name}-icon material-icons`} aria-hidden={true}>
-          { isBest ? 'favorite' : 'favorite_border' }
-        </i>
+        <Icon name={ isBest ? 'star' : 'star_border' } />
       </button>
     );
   }