diff --git a/superset-frontend/src/explore/components/ControlHeader.jsx b/superset-frontend/src/explore/components/ControlHeader.jsx
index c1b073459..9a45917f6 100644
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@@ -18,10 +18,11 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { t, css } from '@superset-ui/core';
+import { t, css, withTheme } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
 import { FormLabel } from 'src/components/Form';
+import Icons from 'src/components/Icons';
 
 const propTypes = {
   name: PropTypes.string,
@@ -45,7 +46,7 @@ const defaultProps = {
   name: undefined,
 };
 
-export default class ControlHeader extends React.Component {
+class ControlHeader extends React.Component {
   renderOptionalIcons() {
     if (this.props.hovered) {
       return (
@@ -91,6 +92,9 @@ export default class ControlHeader extends React.Component {
     }
     const labelClass =
       this.props.validationErrors.length > 0 ? 'text-danger' : '';
+
+    const { theme } = this.props;
+
     return (
       <div className="ControlHeader" data-test={`${this.props.name}-header`}>
         <div className="pull-left">
@@ -117,7 +121,10 @@ export default class ControlHeader extends React.Component {
                   placement="top"
                   title={this.props.warning}
                 >
-                  <i className="fa fa-exclamation-circle text-warning" />
+                  <Icons.AlertSolid
+                    iconColor={theme.colors.alert.base}
+                    iconSize="s"
+                  />
                 </Tooltip>{' '}
               </span>
             )}
@@ -128,7 +135,10 @@ export default class ControlHeader extends React.Component {
                   placement="top"
                   title={this.props.danger}
                 >
-                  <i className="fa fa-exclamation-circle text-danger" />
+                  <Icons.ErrorSolid
+                    iconColor={theme.colors.error.base}
+                    iconSize="s"
+                  />
                 </Tooltip>{' '}
               </span>
             )}
@@ -139,7 +149,10 @@ export default class ControlHeader extends React.Component {
                   placement="top"
                   title={this.props.validationErrors.join(' ')}
                 >
-                  <i className="fa fa-exclamation-circle text-danger" />
+                  <Icons.ErrorSolid
+                    iconColor={theme.colors.error.base}
+                    iconSize="s"
+                  />
                 </Tooltip>{' '}
               </span>
             )}
@@ -157,3 +170,5 @@ export default class ControlHeader extends React.Component {
 
 ControlHeader.propTypes = propTypes;
 ControlHeader.defaultProps = defaultProps;
+
+export default withTheme(ControlHeader);