From 1c58202b26cc738e1b51e1add6606b7e602cfda8 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Sun, 12 Apr 2020 22:20:02 +0200
Subject: [PATCH] @grafana/ui: Replace various icons using Icon component
 (#23442)

* Replace icons in dashboard and settings

* Replace icons in alerting

* Update batch of icons

* Implement icons accross various files

* Style updates

* Search: Fix recent and starred icons

* Update styling and details

* Replace new icon created by unicons

* Fix e2e test, styling

* Minor styling updates

Co-authored-by: Clarity-89 <homes89@ukr.net>
---
 .../components/AlphaNotice/AlphaNotice.tsx    |   3 +-
 .../src/components/Button/Button.story.tsx    |   2 +-
 .../ButtonCascader/ButtonCascader.tsx         |   2 +-
 .../src/components/Cascader/Cascader.tsx      |   8 +-
 .../components/ContextMenu/ContextMenu.tsx    |   9 +-
 .../components/DataLinks/DataLinkEditor.tsx   |   3 +-
 .../CustomHeadersSettings.tsx                 |   3 +-
 .../DataSourceHttpSettings.tsx                |   3 +-
 .../src/components/Drawer/Drawer.tsx          |   3 +-
 .../src/components/FormLabel/FormLabel.tsx    |   2 +-
 .../Forms/FieldValidationMessage.tsx          |   3 +-
 .../Select/ButtonSelect.story.internal.tsx    |   2 +-
 .../Forms/Legacy/Select/ButtonSelect.tsx      |   3 +-
 .../Legacy/Select/IndicatorsContainer.tsx     |   5 +-
 .../Forms/Legacy/Select/SelectOption.tsx      |   3 +-
 .../Forms/Legacy/Select/_Select.scss          |   4 +-
 .../grafana-ui/src/components/Icon/Icon.tsx   |   6 +
 .../src/components/Icon/assets/Circle.tsx     |  17 +
 .../src/components/Icon/assets/index.ts       |   1 +
 .../grafana-ui/src/components/Input/Input.tsx |   1 +
 .../src/components/Legend/LegendTable.tsx     |  13 +-
 .../src/components/Legend/SeriesIcon.tsx      |   4 +-
 .../LoadingPlaceholder/LoadingPlaceholder.tsx |   3 +-
 .../src/components/Modal/Modal.story.tsx      |   3 +-
 .../PanelOptionsGroup/PanelOptionsGroup.tsx   |   2 +-
 .../src/components/Segment/Segment.story.tsx  |   3 +-
 .../components/Segment/SegmentAsync.story.tsx |   3 +-
 .../components/Segment/SegmentInput.story.tsx |   3 +-
 .../src/components/Select/SelectBase.tsx      |   2 +-
 .../components/Select/SelectOptionGroup.tsx   |   6 +-
 .../src/components/Spinner/Spinner.tsx        |   3 +-
 .../TableInputCSV/TableInputCSV.tsx           |   3 +-
 .../src/components/TagsInput/TagItem.tsx      |  12 +-
 .../TimePickerContent/TimePickerCalendar.tsx  |  13 +-
 .../TimePickerContent/TimeRangeOption.tsx     |   3 +-
 .../FilterByNameTransformerEditor.tsx         |  15 +-
 .../FilterByRefIdTransformerEditor.tsx        |  15 +-
 packages/grafana-ui/src/types/icon.ts         | 103 +++--
 packages/grafana-ui/src/utils/dataLinks.ts    |   2 +-
 pkg/components/dashdiffs/formatter_basic.go   |   8 +-
 .../input-datasource/src/InputQueryEditor.tsx |   4 +-
 .../components/EmptyListCTA/EmptyListCTA.tsx  |   2 +-
 public/app/core/components/Footer/Footer.tsx  |   5 +-
 .../components/PageHeader/PageHeader.test.tsx |   4 +-
 .../PermissionList/PermissionListItem.tsx     |   4 +-
 .../__snapshots__/TeamPicker.test.tsx.snap    |  24 +-
 .../__snapshots__/UserPicker.test.tsx.snap    |  24 +-
 public/app/core/components/help/HelpModal.tsx |   4 +-
 .../manage_dashboards/manage_dashboards.html  |   2 +-
 .../manage_dashboards/manage_dashboards.ts    |   2 +-
 .../components/search/search_results.html     |   2 +-
 .../app/core/components/sidemenu/SignIn.tsx   |   3 +-
 .../__snapshots__/SignIn.test.tsx.snap        |   4 +-
 public/app/core/copy/appNotification.ts       |   6 +-
 public/app/core/nav_model_srv.ts              |   2 +-
 public/app/core/selectors/navModel.ts         |   2 +-
 public/app/core/services/search_srv.ts        |   4 +-
 public/app/core/services/util_srv.ts          |   2 +-
 .../app/core/specs/manage_dashboards.test.ts  |  12 +-
 .../app/features/admin/AdminEditUserCtrl.ts   |   2 +-
 .../app/features/admin/AdminListOrgsCtrl.ts   |   2 +-
 public/app/features/admin/UserSyncInfo.tsx    |   3 +-
 .../admin/ldap/LdapConnectionStatus.tsx       |   6 +-
 .../app/features/admin/ldap/LdapSyncInfo.tsx  |   3 +-
 .../features/admin/ldap/LdapUserGroups.tsx    |   6 +-
 .../admin/ldap/LdapUserPermissions.tsx        |   4 +-
 .../app/features/admin/ldap/LdapUserTeams.tsx |   4 +-
 .../app/features/admin/partials/edit_org.html |   2 +-
 .../features/admin/partials/edit_user.html    |   2 +-
 public/app/features/admin/partials/orgs.html  |   2 +-
 public/app/features/alerting/AlertTabCtrl.ts  |  18 +-
 public/app/features/alerting/StateHistory.tsx |   7 +-
 .../app/features/alerting/TestRuleResult.tsx  |   8 +-
 .../alerting/partials/alert_howto.html        |   2 +-
 .../features/alerting/partials/alert_tab.html |  18 +-
 .../alerting/partials/notifications_list.html |   2 +-
 .../app/features/alerting/state/alertDef.ts   |   2 +-
 .../features/alerting/state/reducers.test.ts  |   2 +-
 .../app/features/annotations/editor_ctrl.ts   |   2 +-
 .../features/annotations/partials/editor.html |  14 +-
 .../features/api-keys/ApiKeysAddedModal.tsx   |   2 +-
 .../ApiKeysAddedModal.test.tsx.snap           |   1 +
 .../DashLinks/DashLinksContainerCtrl.ts       |   4 +-
 .../DashLinks/DashLinksEditorCtrl.ts          |   2 +-
 .../components/DashLinks/editor.html          |  12 +-
 .../dashboard/components/DashNav/DashNav.tsx  |   7 +-
 .../components/DashboardRow/DashboardRow.tsx  |  12 +-
 .../DashboardSettings/SettingsCtrl.ts         |  22 +-
 .../DashboardSettings/template.html           |   2 +-
 .../components/RowOptions/template.html       |   2 +-
 .../components/ShareModal/ShareLink.tsx       |   2 +-
 .../components/ShareModal/ShareSnapshot.tsx   |   4 +-
 .../UnsavedChangesModalCtrl.ts                |   2 +-
 .../components/VersionHistory/template.html   |  90 +++--
 .../dashboard/containers/DashboardPage.tsx    |   4 +-
 .../__snapshots__/DashboardPage.test.tsx.snap |   5 +-
 .../dashboard/dashgrid/PanelChromeAngular.tsx |   1 +
 .../dashgrid/PanelHeader/PanelHeader.tsx      |  14 +-
 .../dashboard/panel_editor/EditorTabBody.tsx  |   4 +-
 .../dashboard/panel_editor/QueriesTab.tsx     |   2 +-
 .../dashboard/panel_editor/QueryInspector.tsx |   8 +-
 .../panel_editor/VisualizationTab.tsx         |   5 +-
 .../panel_editor/VizPickerSearch.tsx          |   3 +-
 .../features/datasources/DashboardsTable.tsx  |   5 +-
 .../DashboardsTable.test.tsx.snap             |  12 +-
 .../settings/DataSourceSettingsPage.tsx       |  11 +-
 .../app/features/explore/AdHocFilterField.tsx |   3 +-
 .../app/features/explore/ErrorContainer.tsx   |   3 +-
 .../features/explore/ExploreGraphPanel.tsx    |   3 +-
 public/app/features/explore/LiveLogs.tsx      |   6 +-
 .../app/features/explore/LiveTailButton.tsx   |   4 +-
 .../explore/NoDataSourceCallToAction.tsx      |   4 +-
 .../features/explore/QueryRowActions.test.tsx |   4 +-
 .../app/features/explore/SecondaryActions.tsx |   6 +-
 .../app/features/explore/TimeSyncButton.tsx   |   4 +-
 .../ErrorContainer.test.tsx.snap              |   4 +-
 .../TimeSyncButton.test.tsx.snap              |  30 +-
 .../features/folders/FolderSettingsPage.tsx   |   2 +-
 .../manage-dashboards/SnapshotListCtrl.ts     |   2 +-
 .../MoveToFolderModal/template.html           |   2 +-
 .../partials/snapshot_list.html               |   2 +-
 .../app/features/panel/panellinks/module.html |  95 +++--
 .../features/panel/partials/panelTime.html    |   6 +-
 .../features/playlist/partials/playlists.html |  12 +-
 .../app/features/playlist/playlists_ctrl.ts   |   2 +-
 .../plugins/partials/update_instructions.html |   2 +-
 .../search/components/DashboardSearch.tsx     |  19 +-
 public/app/features/teams/TeamGroupSync.tsx   |   4 +-
 .../__snapshots__/TeamGroupSync.test.tsx.snap |  19 +-
 .../features/templating/partials/editor.html  |  28 +-
 public/app/features/users/InviteeRow.tsx      |   2 +-
 public/app/features/users/UsersListPage.tsx   |   2 +-
 public/app/features/users/UsersTable.tsx      |   2 +-
 .../__snapshots__/UsersTable.test.tsx.snap    |  30 ++
 .../adhoc/picker/AdHocFilterBuilder.tsx       |   4 +-
 .../editor/VariableEditorContainer.tsx        |   9 +-
 .../variables/editor/VariableEditorList.tsx   |  10 +-
 public/app/partials/confirm_modal.html        |   2 +-
 public/app/partials/error.html                |  13 +-
 public/app/partials/valueSelectDropdown.html  |   2 +-
 .../cloudwatch/components/Dimensions.test.tsx |   4 +-
 .../cloudwatch/components/Dimensions.tsx      |   4 +-
 .../cloudwatch/components/QueryEditor.tsx     |   5 +-
 .../cloudwatch/components/Stats.tsx           |   4 +-
 .../__snapshots__/Stats.test.tsx.snap         |  19 +-
 .../dashboard/DashboardQueryEditor.tsx        |   4 +-
 .../elasticsearch/partials/bucket_agg.html    | 380 +++++++++++-------
 .../elasticsearch/partials/metric_agg.html    |  18 +-
 .../partials/pipeline_variables.html          |  40 +-
 .../partials/annotations.editor.html          |  40 +-
 .../partials/query.editor.html                |   8 +-
 .../graphite/FunctionEditorControls.tsx       |   2 +-
 .../datasource/graphite/add_graphite_func.ts  |   2 +-
 .../graphite/partials/query.editor.html       |   2 +-
 .../influxdb/partials/query.editor.html       |   2 +-
 .../mssql/partials/annotations.editor.html    |  31 +-
 .../mssql/partials/query.editor.html          |   8 +-
 .../mysql/partials/annotations.editor.html    |  31 +-
 .../mysql/partials/query.editor.html          |   8 +-
 .../plugins/datasource/mysql/query_ctrl.ts    |   2 +-
 .../opentsdb/partials/query.editor.html       |  16 +-
 .../postgres/partials/annotations.editor.html |  31 +-
 .../datasource/postgres/partials/config.html  |   4 +-
 .../postgres/partials/query.editor.html       |   8 +-
 .../plugins/datasource/postgres/query_ctrl.ts |   2 +-
 .../prometheus/components/PromLink.tsx        |   3 +-
 .../stackdriver/components/Aggregations.tsx   |   4 +-
 .../stackdriver/components/GroupBys.tsx       |   4 +-
 .../stackdriver/components/Help.tsx           |   5 +-
 .../stackdriver/components/LabelFilter.tsx    |   4 +-
 .../__snapshots__/Aggregations.test.tsx.snap  |  19 +-
 .../stackdriver/partials/config.html          |   6 +-
 .../plugins/datasource/testdata/module.tsx    |   2 +-
 .../app/plugins/panel/alertlist/module.html   |   2 +-
 .../app/plugins/panel/graph/Legend/Legend.tsx |   4 +-
 .../panel/graph/Legend/LegendSeriesItem.tsx   |   4 +-
 public/app/plugins/panel/graph/graph.ts       |   4 +-
 .../app/plugins/panel/graph/tab_display.html  |   8 +-
 .../plugins/panel/graph/thresholds_form.html  |  64 ++-
 .../panel/graph/time_regions_form.html        |  48 ++-
 .../app/plugins/panel/pluginlist/editor.html  |   4 +-
 .../app/plugins/panel/singlestat/editor.html  |   2 +-
 .../plugins/panel/singlestat/mappings.html    |   4 +-
 .../plugins/panel/table/column_options.html   |   6 +-
 public/app/plugins/panel/table/module.html    |  47 +--
 public/sass/components/_buttons.scss          |   3 -
 public/sass/components/_gf-form.scss          |   2 +-
 public/sass/components/_modals.scss           |   5 -
 public/sass/components/_search.scss           |   3 -
 public/sass/pages/_alerting.scss              |  34 +-
 public/sass/pages/_history.scss               |   5 +-
 public/vendor/angular-other/datepicker.js     |   2 +-
 public/views/error-template.html              |   2 +-
 193 files changed, 1256 insertions(+), 824 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Icon/assets/Circle.tsx

diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
index cc362a41f49..3a712eb66ee 100644
--- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
@@ -2,6 +2,7 @@ import React, { FC, useContext } from 'react';
 import { css, cx } from 'emotion';
 import { ThemeContext } from '../../index';
 import { PluginState } from '@grafana/data';
+import { Icon } from '../Icon/Icon';
 
 interface Props {
   state?: PluginState;
@@ -30,7 +31,7 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
 
   return (
     <div className={styles} title={tooltipContent}>
-      <i className="fa fa-warning" /> {state}
+      <Icon name="exclamation-triangle" /> {state}
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx
index 106dc4aa7bc..3c9a42932f4 100644
--- a/packages/grafana-ui/src/components/Button/Button.story.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.story.tsx
@@ -28,7 +28,7 @@ export const simple = () => {
   const icon = getIconKnob();
 
   return (
-    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon && `fa fa-${icon}`}>
+    <Button variant={variant as ButtonVariant} size={size as ComponentSize} icon={icon}>
       {buttonText}
     </Button>
   );
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index e6a166bc7b3..76282e1e0b4 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
@@ -40,7 +40,7 @@ export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
       expandIcon={null}
     >
       <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
-        {props.children} <Icon name="angle-down" />
+        {props.children} <Icon name="angle-down" style={{ marginBottom: 0, marginLeft: '4px' }} />
       </button>
     </RCCascader>
   );
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 5eb4b08c757..00834df5e2b 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -212,7 +212,13 @@ export class Cascader extends React.PureComponent<CascaderProps, CascaderState>
                 value={activeLabel}
                 onKeyDown={this.onInputKeyDown}
                 onChange={() => {}}
-                suffix={focusCascade ? <Icon name="angle-up" /> : <Icon name="angle-down" />}
+                suffix={
+                  focusCascade ? (
+                    <Icon name="angle-up" />
+                  ) : (
+                    <Icon name="angle-down" style={{ marginBottom: 0, marginLeft: '4px' }} />
+                  )
+                }
               />
             </div>
           </RCCascader>
diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
index a69a7fb4a82..2f85d15d336 100644
--- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx
@@ -5,6 +5,8 @@ import { selectThemeVariant, ThemeContext } from '../../index';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { Portal, List } from '../index';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../../types';
 import { LinkTarget } from '@grafana/data';
 
 export interface ContextMenuItem {
@@ -140,13 +142,8 @@ const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     icon: css`
       opacity: 0.7;
-      width: 12px;
-      height: 12px;
-      display: inline-block;
       margin-right: 10px;
       color: ${theme.colors.linkDisabled};
-      position: relative;
-      top: 4px;
     `,
   };
 });
@@ -226,7 +223,7 @@ const ContextMenuItem: React.FC<ContextMenuItemProps> = React.memo(
             }
           }}
         >
-          {icon && <i className={cx(`${icon}`, styles.icon)} />} {label}
+          {icon && <Icon name={icon as IconName} className={styles.icon} />} {label}
         </a>
       </div>
     );
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index d95ce24a526..f622f12ede3 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -5,6 +5,7 @@ import { Switch } from '../Switch/Switch';
 import { css } from 'emotion';
 import { ThemeContext, stylesFactory } from '../../themes/index';
 import { DataLinkInput } from './DataLinkInput';
+import { Icon } from '../Icon/Icon';
 
 interface DataLinkEditorProps {
   index: number;
@@ -60,7 +61,7 @@ export const DataLinkEditor: React.FC<DataLinkEditorProps> = React.memo(
           />
           <Switch label="Open in new tab" checked={value.targetBlank || false} onChange={onOpenInNewTabChanged} />
           <button className="gf-form-label gf-form-label--btn" onClick={onRemoveClick} title="Remove link">
-            <i className="fa fa-times" />
+            <Icon name="times" />
           </button>
         </div>
         <FormField
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
index 19a89efd121..5e528c793b7 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
@@ -4,6 +4,7 @@ import uniqueId from 'lodash/uniqueId';
 import { DataSourceSettings } from '@grafana/data';
 import { Button } from '../Button';
 import { FormField } from '../FormField/FormField';
+import { Icon } from '../Icon/Icon';
 import { SecretFormField } from '../SecretFormField/SecretFormField';
 import { stylesFactory } from '../../themes';
 
@@ -77,7 +78,7 @@ const CustomHeaderRow: React.FC<CustomHeaderRowProps> = ({ header, onBlur, onCha
         onBlur={onBlur}
       />
       <Button variant="secondary" size="xs" onClick={_e => onRemove(header.id)}>
-        <i className="fa fa-trash" />
+        <Icon name="trash-alt" />
       </Button>
     </div>
   );
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 646a04c158c..e6ec09478db 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -10,6 +10,7 @@ import { HttpSettingsProps } from './types';
 import { CustomHeadersSettings } from './CustomHeadersSettings';
 import { Select } from '../Forms/Legacy/Select/Select';
 import { Input } from '../Forms/Legacy/Input/Input';
+import { Icon } from '../Icon/Icon';
 import { FormField } from '../FormField/FormField';
 import { FormLabel } from '../FormLabel/FormLabel';
 import { Switch } from '../Switch/Switch';
@@ -139,7 +140,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
                     onClick={() => setIsAccessHelpVisible(isVisible => !isVisible)}
                   >
                     Help&nbsp;
-                    <i className={`fa fa-caret-${isAccessHelpVisible ? 'down' : 'right'}`} />
+                    <Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} />
                   </label>
                 </div>
               </div>
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index ead948eb347..9fb7d53ea29 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -3,6 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
 import { css } from 'emotion';
 import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+import { Icon } from '../Icon/Icon';
 import { stylesFactory, useTheme } from '../../themes';
 
 export interface Props {
@@ -93,7 +94,7 @@ export const Drawer: FC<Props> = ({
         <div className={drawerStyles.titleWrapper}>
           <div>{title}</div>
           <div className={drawerStyles.close} onClick={onClose}>
-            <i className="fa fa-close" />
+            <Icon name="times" />
           </div>
         </div>
       )}
diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
index ca3fd9bf4f5..19cfdf6e615 100644
--- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
+++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
@@ -34,7 +34,7 @@ export const FormLabel: FunctionComponent<Props> = ({
       {tooltip && (
         <Tooltip placement="top" content={tooltip} theme={'info'}>
           <div className="gf-form-help-icon gf-form-help-icon--right-normal">
-            <Icon name="info-circle" size="sm" style={{ marginBottom: 0 }} />
+            <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
           </div>
         </Tooltip>
       )}
diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
index f1c57a41651..6b6dc427979 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
+import { Icon } from '../Icon/Icon';
 
 export interface FieldValidationMessageProps {
   children: string;
@@ -45,7 +46,7 @@ export const FieldValidationMessage: React.FC<FieldValidationMessageProps> = ({
 
   return (
     <div className={cx(styles.fieldValidationMessage, className)}>
-      <i className={cx(styles.fieldValidationMessageIcon, 'fa', 'fa-warning')} />
+      <Icon className={styles.fieldValidationMessageIcon} name="exclamation-triangle" />
       {children}
     </div>
   );
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
index 9dff759ed59..e1575baac79 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
@@ -32,7 +32,7 @@ ButtonSelectStories.add('default', () => {
             }}
             label={value.label ? value.label : ''}
             className="refresh-select"
-            iconClass={text('iconClass', 'fa fa-clock-o fa-fw')}
+            iconClass={text('iconClass', 'clock-nine')}
           />
         );
       }}
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
index 4379b35d457..da4d801529f 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent, ReactElement } from 'react';
 import Select from './Select';
 import { PopoverContent } from '../../../Tooltip/Tooltip';
 import { Icon } from '../../../Icon/Icon';
+import { IconName } from '../../../../types';
 import { SelectableValue } from '@grafana/data';
 
 interface ButtonComponentProps {
@@ -22,7 +23,7 @@ const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
       tabIndex={0} // necessary to get onBlur to work https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
     >
       <div className="select-button">
-        {iconClass && <i className={`select-button-icon ${iconClass}`} />}
+        {iconClass && <Icon className={'select-button-icon'} name={iconClass as IconName} />}
         <span className="select-button-value">{label ? label : ''}</span>
         {!props.menuIsOpen && <Icon name="angle-down" style={{ marginBottom: 0 }} size="lg" />}
         {props.menuIsOpen && <Icon name="angle-up" style={{ marginBottom: 0 }} size="lg" />}
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx
index 260fe6ebbdf..08f78bd11e2 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon } from '../../../Icon/Icon';
 
 // Ignoring because I couldn't get @types/react-select work wih Torkel's fork
 // @ts-ignore
@@ -8,9 +9,7 @@ export const IndicatorsContainer = (props: any) => {
   const isOpen = props.selectProps.menuIsOpen;
   return (
     <components.IndicatorsContainer {...props}>
-      <span
-        className={`gf-form-select-box__select-arrow ${isOpen ? `gf-form-select-box__select-arrow--reversed` : ''}`}
-      />
+      <Icon name={isOpen ? 'angle-up' : 'angle-down'} style={{ marginTop: '7px' }} />
     </components.IndicatorsContainer>
   );
 };
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx
index b3606797918..1d7b64c7d49 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon } from '../../../Icon/Icon';
 
 // Ignoring because I couldn't get @types/react-select work wih Torkel's fork
 // @ts-ignore
@@ -24,7 +25,7 @@ export const SelectOption = (props: ExtendedOptionProps) => {
           <div>{children}</div>
           {data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
         </div>
-        {isSelected && <i className="fa fa-check" aria-hidden="true" />}
+        {isSelected && <Icon name="check" aria-hidden="true" />}
       </div>
     </components.Option>
   );
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
index effa8a5fa74..73acd2297a4 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
@@ -43,8 +43,6 @@ $select-input-bg-disabled: $input-bg-disabled;
 }
 
 .gf-form-select-box__input {
-  padding-left: 5px;
-
   input {
     line-height: inherit;
   }
@@ -122,7 +120,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__value-container {
   display: inline-block;
-  padding: 6px 16px 6px 10px;
+  padding: 6px 20px 6px 10px;
   vertical-align: middle;
 
   > div {
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index dc3a68aaa2c..f3e468f1a77 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -8,6 +8,8 @@ import { IconName, IconType, IconSize } from '../../types/icon';
 import * as DefaultIcon from '@iconscout/react-unicons';
 import * as MonoIcon from './assets';
 
+const alwaysMonoIcons = ['grafana', 'favorite'];
+
 interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: IconName;
   size?: IconSize;
@@ -43,6 +45,10 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
       return <i className={cx(name, className)} {...divElementProps} style={style} />;
     }
 
+    if (alwaysMonoIcons.includes(name)) {
+      type = 'mono';
+    }
+
     const iconName = type === 'default' ? `Uil${toPascalCase(name)}` : toPascalCase(name);
 
     /* Unicons don't have type definitions */
diff --git a/packages/grafana-ui/src/components/Icon/assets/Circle.tsx b/packages/grafana-ui/src/components/Icon/assets/Circle.tsx
new file mode 100644
index 00000000000..204a3c009b1
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/assets/Circle.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import { SvgProps } from './types';
+
+export const Circle: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      enableBackground="new 0 0 24 24"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Icon/assets/index.ts b/packages/grafana-ui/src/components/Icon/assets/index.ts
index 0d6cd925fe5..04af2a223e2 100644
--- a/packages/grafana-ui/src/components/Icon/assets/index.ts
+++ b/packages/grafana-ui/src/components/Icon/assets/index.ts
@@ -9,3 +9,4 @@ export * from './FolderPlus';
 export * from './Folder';
 export * from './Import';
 export * from './PanelAdd';
+export * from './Circle';
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index a3ff067576a..8996a281a6e 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -197,6 +197,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
         label: input-suffix;
         padding-right: ${theme.spacing.sm};
         padding-left: ${theme.spacing.xs};
+        margin-bottom: -2px;
         border-left: none;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
diff --git a/packages/grafana-ui/src/components/Legend/LegendTable.tsx b/packages/grafana-ui/src/components/Legend/LegendTable.tsx
index b4af883a970..b3046a8884c 100644
--- a/packages/grafana-ui/src/components/Legend/LegendTable.tsx
+++ b/packages/grafana-ui/src/components/Legend/LegendTable.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { css, cx } from 'emotion';
 import { LegendComponentProps } from './Legend';
+import { Icon } from '../Icon/Icon';
 import { ThemeContext } from '../../themes/ThemeContext';
 
 interface LegendTableProps extends LegendComponentProps {
@@ -53,13 +54,11 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
               >
                 {columnHeader}
                 {sortBy === columnHeader && (
-                  <span
-                    className={cx(
-                      `fa fa-caret-${sortDesc ? 'down' : 'up'}`,
-                      css`
-                        margin-left: ${theme.spacing.sm};
-                      `
-                    )}
+                  <Icon
+                    className={css`
+                      margin-left: ${theme.spacing.sm};
+                    `}
+                    name={sortDesc ? 'angle-down' : 'angle-up'}
                   />
                 )}
               </th>
diff --git a/packages/grafana-ui/src/components/Legend/SeriesIcon.tsx b/packages/grafana-ui/src/components/Legend/SeriesIcon.tsx
index 9d020aee7b7..3bc879780b6 100644
--- a/packages/grafana-ui/src/components/Legend/SeriesIcon.tsx
+++ b/packages/grafana-ui/src/components/Legend/SeriesIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cx } from 'emotion';
+import { Icon } from '../Icon/Icon';
 
 export interface SeriesIconProps {
   color: string;
@@ -7,7 +7,7 @@ export interface SeriesIconProps {
 }
 
 export const SeriesIcon: React.FunctionComponent<SeriesIconProps> = ({ color, className }) => {
-  return <i className={cx('fa', 'fa-minus', className)} style={{ color }} />;
+  return <Icon name="minus" className={className} style={{ color }} />;
 };
 
 SeriesIcon.displayName = 'SeriesIcon';
diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
index 01048014f8a..3194ff3ebb9 100644
--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -1,4 +1,5 @@
 import React, { SFC } from 'react';
+import { Icon } from '../Icon/Icon';
 
 interface LoadingPlaceholderProps {
   text: string;
@@ -6,6 +7,6 @@ interface LoadingPlaceholderProps {
 
 export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
   <div className="gf-form-group">
-    {text} <i className="fa fa-spinner fa-spin" />
+    {text} <Icon name="fa fa-spinner" className="fa-spin" />
   </div>
 );
diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
index 8485ee77437..9dcc0577910 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
@@ -5,6 +5,7 @@ import { text, boolean } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { Modal } from './Modal';
+import { Icon } from '../Icon/Icon';
 import { ModalTabsHeader } from './ModalTabsHeader';
 import { TabContent } from '../Tabs/TabContent';
 
@@ -35,7 +36,7 @@ ModalStories.add('default', () => {
     <Modal
       title={
         <div className="modal-header-title">
-          <i className="fa fa-exclamation-triangle" />
+          <Icon name="exclamation-triangle" size="lg" />
           <span className="p-l-1">My Modal</span>
         </div>
       }
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index 61e33530c41..36ed296cb91 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
@@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
         <div className="panel-options-group__header">
           <button className="panel-options-group__add-btn" onClick={props.onAdd}>
             <div className="panel-options-group__add-circle">
-              <i className="fa fa-plus" />
+              <Icon name="plus-circle" />
             </div>
             <span className="panel-options-group__title">{props.title}</span>
           </button>
diff --git a/packages/grafana-ui/src/components/Segment/Segment.story.tsx b/packages/grafana-ui/src/components/Segment/Segment.story.tsx
index 72ae6390468..0a484c7147b 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.story.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Segment } from './';
+import { Icon } from '../Icon/Icon';
 
 const AddButton = (
   <a className="gf-form-label query-part">
-    <i className="fa fa-plus" />
+    <Icon name="plus-circle" />
   </a>
 );
 
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
index 5b4157f512e..0d25f0e648b 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx
@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { SelectableValue } from '@grafana/data';
 import { SegmentAsync } from './';
+import { Icon } from '../Icon/Icon';
 
 const AddButton = (
   <a className="gf-form-label query-part">
-    <i className="fa fa-plus" />
+    <Icon name="plus-circle" />
   </a>
 );
 
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
index 34137101f6f..04c77081476 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { SegmentInput } from '.';
+import { Icon } from '../Icon/Icon';
 
 const SegmentFrame = ({ children }: any) => (
   <>
@@ -77,7 +78,7 @@ export const InputWithAutoFocus = () => {
           setInputComponents([...inputComponents, InputComponent]);
         }}
       >
-        <i className="fa fa-plus" />
+        <Icon name="plus-circle" />
       </a>
     </SegmentFrame>
   );
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index cba4a81e07c..b5e5038e591 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -243,7 +243,7 @@ export function SelectBase<T>({
             );
           },
           LoadingIndicator: (props: any) => {
-            return <i className="fa fa-spinner fa-spin" />;
+            return <Icon className="fa-spin" name="fa fa-spinner" />;
           },
           LoadingMessage: (props: any) => {
             return <div className={styles.loadingMessage}>{loadingMessage}</div>;
diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
index a5bd18c841b..8e08b9cc896 100644
--- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { GroupProps } from 'react-select';
 import { stylesFactory, withTheme, selectThemeVariant } from '../../themes';
 import { Themeable } from '../../types';
+import { Icon } from '../Icon/Icon';
 
 interface ExtendedGroupProps extends GroupProps<any>, Themeable {
   data: {
@@ -79,12 +80,11 @@ class UnthemedSelectOptionGroup extends PureComponent<ExtendedGroupProps, State>
     const { children, label, theme } = this.props;
     const { expanded } = this.state;
     const styles = getSelectOptionGroupStyles(theme);
-    const icon = expanded ? 'fa-caret-left' : 'fa-caret-down';
     return (
       <div>
         <div className={styles.header} onClick={this.onToggleChildren}>
           <span className={styles.label}>{label}</span>
-          <i className={cx('fa', icon, styles.icon)} />{' '}
+          <Icon className={styles.icon} name={expanded ? 'angle-left' : 'angle-down'} />{' '}
         </div>
         {expanded && children}
       </div>
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index 2642c019f9b..1bd416ea706 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { cx, css } from 'emotion';
 import { stylesFactory } from '../../themes';
+import { Icon } from '../Icon/Icon';
 
 const getStyles = stylesFactory((size: number, inline: boolean) => {
   return {
@@ -27,7 +28,7 @@ export const Spinner: FC<Props> = (props: Props) => {
   const styles = getStyles(size, inline);
   return (
     <div style={style} className={cx(styles.wrapper, className)}>
-      <i className={cx('fa fa-spinner fa-spin', iconClassName)} />
+      <Icon className={cx('fa-spin', iconClassName)} name="fa fa-spinner" />
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
index e370cea1d3d..5b92ef0d6cf 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
+++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
 import { DataFrame, CSVConfig, readCSV } from '@grafana/data';
+import { Icon } from '../Icon/Icon';
 
 interface Props {
   config?: CSVConfig;
@@ -75,7 +76,7 @@ export class TableInputCSV extends React.PureComponent<Props, State> {
               return (
                 <span key={index}>
                   Rows:{frame.length}, Columns:{frame.fields.length} &nbsp;
-                  <i className="fa fa-check-circle" />
+                  <Icon name="check-circle" />
                 </span>
               );
             })}
diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
index 75b62a79696..b290d2550b3 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { getTagColorsFromName } from '../../utils';
 import { stylesFactory, useTheme } from '../../themes';
+import { Icon } from '../Icon/Icon';
 import { GrafanaTheme } from '@grafana/data';
 
 interface Props {
@@ -32,13 +33,6 @@ const getStyles = stylesFactory(({ theme, name }: { theme: GrafanaTheme; name: s
     nameStyle: css`
       margin-right: 3px;
     `,
-
-    removeStyle: cx([
-      'fa fa-times',
-      css`
-        cursor: pointer;
-      `,
-    ]),
   };
 });
 
@@ -49,7 +43,7 @@ export const TagItem: FC<Props> = ({ name, onRemove }) => {
   return (
     <div className={styles.itemStyle}>
       <span className={styles.nameStyle}>{name}</span>
-      <i className={styles.removeStyle} onClick={() => onRemove(name)} />
+      <Icon name="times" onClick={() => onRemove(name)} />
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
index d2b3a06635d..4b8495c48dc 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx
@@ -1,11 +1,12 @@
 import React, { memo, useState, useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import Calendar from 'react-calendar/dist/entry.nostyle';
 import { GrafanaTheme, dateTime, TIME_FORMAT } from '@grafana/data';
 import { stringToDateTimeType } from '../time';
 import { useTheme, stylesFactory } from '../../../themes';
 import { TimePickerTitle } from './TimePickerTitle';
 import { Button } from '../../Button';
+import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { getThemeColors } from './colors';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
@@ -186,10 +187,6 @@ const getHeaderStyles = stylesFactory((theme: GrafanaTheme) => {
       justify-content: space-between;
       padding: 7px;
     `,
-    close: css`
-      cursor: pointer;
-      font-size: ${theme.typography.size.lg};
-    `,
   };
 });
 
@@ -245,7 +242,7 @@ const Header = memo<Props>(({ onClose }) => {
   return (
     <div className={styles.container}>
       <TimePickerTitle>Select a time range</TimePickerTitle>
-      <i className={cx(styles.close, 'fa', 'fa-times')} onClick={onClose} />
+      <Icon name="times" onClick={onClose} />
     </div>
   );
 });
@@ -267,8 +264,8 @@ const Body = memo<Props>(({ onChange, from, to }) => {
       className={styles.body}
       tileClassName={styles.title}
       value={value}
-      nextLabel={<span className="fa fa-angle-right" />}
-      prevLabel={<span className="fa fa-angle-left" />}
+      nextLabel={<Icon name="angle-right" />}
+      prevLabel={<Icon name="angle-left" />}
       onChange={value => valueToInput(value, onChange)}
       locale="en"
     />
diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx
index 31fa24eb482..2523e7baff9 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeOption.tsx
@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { css } from 'emotion';
 import { GrafanaTheme, TimeOption } from '@grafana/data';
 import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes';
+import { Icon } from '../../Icon/Icon';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const background = selectThemeVariant(
@@ -48,7 +49,7 @@ export const TimeRangeOption = memo<Props>(({ value, onSelect, selected = false
   return (
     <div className={styles.container} onClick={() => onSelect(value)} tabIndex={-1}>
       <span>{value.display}</span>
-      {selected ? <i className="fa fa-check" /> : null}
+      {selected ? <Icon name="check" /> : null}
     </div>
   );
 });
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
index 72251ec4615..201de526839 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
@@ -8,8 +8,9 @@ import {
   TransformerUIProps,
 } from '@grafana/data';
 import { ThemeContext } from '../../themes/ThemeContext';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { InlineList } from '../List/InlineList';
+import { Icon } from '../Icon/Icon';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
 
@@ -146,13 +147,11 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       onClick={onClick}
     >
       {selected && (
-        <i
-          className={cx(
-            'fa fa-check',
-            css`
-              margin-right: 4px;
-            `
-          )}
+        <Icon
+          className={css`
+            margin-right: 4px;
+          `}
+          name="check"
         />
       )}
       {label}
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
index f18321cca67..f6933fc805a 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
@@ -8,8 +8,9 @@ import {
   TransformerUIProps,
 } from '@grafana/data';
 import { ThemeContext } from '../../themes/ThemeContext';
-import { css, cx } from 'emotion';
+import { css } from 'emotion';
 import { InlineList } from '../List/InlineList';
+import { Icon } from '../Icon/Icon';
 
 interface FilterByRefIdTransformerEditorProps extends TransformerUIProps<FilterFramesByRefIdTransformerOptions> {}
 
@@ -146,13 +147,11 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       onClick={onClick}
     >
       {selected && (
-        <i
-          className={cx(
-            'fa fa-check',
-            css`
-              margin-right: 4px;
-            `
-          )}
+        <Icon
+          className={css`
+            margin-right: 4px;
+          `}
+          name="check"
         />
       )}
       {label}
diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts
index 58cc1bab5a7..bc9de0d9af5 100644
--- a/packages/grafana-ui/src/types/icon.ts
+++ b/packages/grafana-ui/src/types/icon.ts
@@ -6,6 +6,7 @@ export type IconName =
   | 'fa fa-fw fa-unlock'
   | 'fa fa-envelope'
   | 'fa fa-spinner'
+  | 'grafana'
   | 'question-circle'
   | 'angle-up'
   | 'history'
@@ -14,9 +15,15 @@ export type IconName =
   | 'angle-left'
   | 'angle-right'
   | 'pen'
-  | 'plane'
+  | 'envelope'
+  | 'percentage'
+  | 'rocket'
   | 'power'
   | 'trash-alt'
+  | 'slack'
+  | 'download-alt'
+  | 'mobile-android'
+  | 'slack'
   | 'plus-square'
   | 'folder-plus'
   | 'folder-open'
@@ -25,6 +32,7 @@ export type IconName =
   | 'import'
   | 'exclamation-triangle'
   | 'times'
+  | 'signin'
   | 'cloud-upload'
   | 'step-backward'
   | 'square-shape'
@@ -32,14 +40,18 @@ export type IconName =
   | 'tag-alt'
   | 'forward'
   | 'check'
+  | 'check-circle'
   | 'add-panel'
   | 'copy'
   | 'lock'
   | 'panel-add'
   | 'arrow-random'
   | 'arrow-down'
+  | 'arrows-h'
   | 'comment-alt'
+  | 'code-branch'
   | 'arrow-right'
+  | 'circle'
   | 'arrow-up'
   | 'arrow-from-right'
   | 'keyboard'
@@ -48,7 +60,8 @@ export type IconName =
   | 'search-minus'
   | 'clock-nine'
   | 'sync'
-  | 'signin'
+  | 'sign-in-alt'
+  | 'cllud-download'
   | 'cog'
   | 'bars'
   | 'save'
@@ -97,53 +110,70 @@ export type IconName =
   | 'signal'
   | 'search-plus'
   | 'search-minus'
+  | 'minus-circle'
   | 'table'
   | 'plus'
   | 'heart'
+  | 'heart-break'
+  | 'ellipsis-v'
   | 'favorite';
 
 export const getAvailableIcons = (): IconName[] => [
   'question-circle',
-  'plane',
-  'plus',
-  'plus-circle',
   'angle-up',
-  'shield',
+  'history',
   'angle-down',
+  'filter',
   'angle-left',
   'angle-right',
-  'calendar-alt',
-  'tag-alt',
-  'calculator-alt',
   'pen',
-  'repeat',
-  'external-link-alt',
+  'envelope',
+  'percentage',
+  'rocket',
   'power',
-  'play',
-  'pause',
   'trash-alt',
+  'slack',
+  'download-alt',
+  'mobile-android',
+  'slack',
+  'plus-square',
+  'folder-plus',
+  'folder-open',
+  'file-copy-alt',
+  'exchange-alt',
+  'import',
   'exclamation-triangle',
   'times',
+  'signin',
+  'cloud-upload',
   'step-backward',
   'square-shape',
   'share-alt',
-  'camera',
+  'tag-alt',
   'forward',
   'check',
+  'check-circle',
   'add-panel',
   'copy',
   'lock',
   'panel-add',
   'arrow-random',
+  'arrow-down',
+  'arrows-h',
+  'comment-alt',
+  'code-branch',
+  'arrow-right',
+  'circle',
+  'arrow-up',
   'arrow-from-right',
-  'arrow-left',
   'keyboard',
   'search',
   'chart-line',
   'search-minus',
   'clock-nine',
   'sync',
-  'signin',
+  'sign-in-alt',
+  'cllud-download',
   'cog',
   'bars',
   'save',
@@ -151,12 +181,19 @@ export const getAvailableIcons = (): IconName[] => [
   'folder-plus',
   'link',
   'upload',
+  'columns',
   'home-alt',
+  'channel-add',
+  'calendar-alt',
+  'play',
+  'pause',
+  'calculator-alt',
   'compass',
   'sliders-v-alt',
   'bell',
   'database',
   'user',
+  'camera',
   'plug',
   'shield',
   'key-skeleton-alt',
@@ -164,28 +201,32 @@ export const getAvailableIcons = (): IconName[] => [
   'graph-bar',
   'book',
   'bolt',
-  'cloud-upload',
   'comments-alt',
-  'list-ul',
   'document-info',
   'info-circle',
   'bug',
   'cube',
-  'history',
   'star',
+  'list-ul',
   'edit',
-  'columns',
+  'shield',
   'eye',
-  'channel-add',
-  'monitor',
-  'favorite',
-  'folder-plus',
-  'plus-square',
-  'import',
-  'folder-open',
-  'file-copy-alt',
-  'arrow-down',
+  'eye-slash',
   'filter',
-  'arrow-up',
-  'exchange-alt',
+  'monitor',
+  'plus-circle',
+  'arrow-left',
+  'repeat',
+  'external-link-alt',
+  'minus',
+  'signal',
+  'search-plus',
+  'search-minus',
+  'minus-circle',
+  'table',
+  'plus',
+  'heart',
+  'heart-break',
+  'ellipsis-v',
+  'favorite',
 ];
diff --git a/packages/grafana-ui/src/utils/dataLinks.ts b/packages/grafana-ui/src/utils/dataLinks.ts
index 26b4f3917ad..9939816784d 100644
--- a/packages/grafana-ui/src/utils/dataLinks.ts
+++ b/packages/grafana-ui/src/utils/dataLinks.ts
@@ -26,7 +26,7 @@ export const linkModelToContextMenuItems: (links: LinkModelSupplier<any>) => Con
       // TODO: rename to href
       url: link.href,
       target: link.target,
-      icon: `fa ${link.target === '_self' ? 'fa-link' : 'fa-external-link'}`,
+      icon: `${link.target === '_self' ? 'link' : 'external-link-alt'}`,
       onClick: link.onClick,
     };
   });
diff --git a/pkg/components/dashdiffs/formatter_basic.go b/pkg/components/dashdiffs/formatter_basic.go
index b361c83a80c..fc13a24694e 100644
--- a/pkg/components/dashdiffs/formatter_basic.go
+++ b/pkg/components/dashdiffs/formatter_basic.go
@@ -332,7 +332,7 @@ var (
 <div class="diff-group">
 	<div class="diff-block">
 		<h2 class="diff-block-title">
-			<i class="diff-circle diff-circle-{{ getChange .Change }} fa fa-circle"></i>
+			<icon class="diff-circle diff-circle-{{ getChange .Change }}" name="'circle'" type="'mono'"></icon>
 			<strong class="diff-title">{{ .Title }}</strong> {{ getChange .Change }}
 		</h2>
 
@@ -340,7 +340,7 @@ var (
 		<!-- Overview -->
 		{{ if .Old }}
 			<div class="diff-label" ng-non-bindable>{{ .Old }}</div>
-			<i class="diff-arrow fa fa-long-arrow-right"></i>
+			<icon name="'arrow-right'"></icon>
 		{{ end }}
 		{{ if .New }}
 				<div class="diff-label" ng-non-bindable>{{ .New }}</div>
@@ -381,7 +381,7 @@ var (
 		<div class="diff-change-item">
 			{{ if .Old }}
 				<div class="diff-label" ng-non-bindable>{{ .Old }}</div>
-				<i class="diff-arrow fa fa-long-arrow-right"></i>
+				<icon name="'arrow-right'"></icon>
 			{{ end }}
 			{{ if .New }}
 					<div class="diff-label" ng-non-bindable>{{ .New }}</div>
@@ -402,7 +402,7 @@ var (
 	// tplSummary is for basic summaries.
 	tplSummary = `{{ define "summary" -}}
 <div class="diff-group-name">
-	<i class="diff-circle diff-circle-{{ getChange .Change }} fa fa-circle-o diff-list-circle"></i>
+	<icon class="diff-circle diff-circle-{{ getChange .Change }} diff-list-circle" name="'circle'"></icon>
 
 	{{ if .Count }}
 		<strong>{{ .Count }}</strong>
diff --git a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
index 20a9a741566..c8dd68fe149 100644
--- a/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
+++ b/plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx
@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import { InputDatasource, describeDataFrame } from './InputDatasource';
 import { InputQuery, InputOptions } from './types';
 
-import { FormLabel, LegacyForms, TableInputCSV } from '@grafana/ui';
+import { FormLabel, LegacyForms, TableInputCSV, Icon } from '@grafana/ui';
 const { Select } = LegacyForms;
 import { DataFrame, toCSV, SelectableValue, MutableDataFrame, QueryEditorProps } from '@grafana/data';
 
@@ -78,7 +78,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
             ) : (
               <a href={`datasources/edit/${id}/`}>
                 {name}: {describeDataFrame(datasource.data)} &nbsp;&nbsp;
-                <i className="fa fa-pencil-square-o" />
+                <Icon name="pen" />
               </a>
             )}
           </div>
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index 3f745909443..c022cdb1eb4 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -45,7 +45,7 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
       <>
         {proTip ? (
           <span key="proTipFooter">
-            <Icon name="plane" />
+            <Icon name="rocket" />
             <> ProTip: {proTip} </>
             <a href={proTipLink} target={proTipTarget} className="text-link">
               {proTipLinkTitle}
diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
index f3641e1177d..71d5dc0338b 100644
--- a/public/app/core/components/Footer/Footer.tsx
+++ b/public/app/core/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import config from 'app/core/config';
+import { Icon, IconName } from '@grafana/ui';
 
 export interface FooterLink {
   text: string;
@@ -42,7 +43,7 @@ export let getVersionLinks = (): FooterLink[] => {
   if (buildInfo.hasUpdate) {
     links.push({
       text: `New version available!`,
-      icon: 'fa fa-download',
+      icon: 'download-alt',
       url: 'https://grafana.com/grafana/download?utm_source=grafana_footer',
       target: '_blank',
     });
@@ -69,7 +70,7 @@ export const Footer: FC = React.memo(() => {
           {links.map(link => (
             <li key={link.text}>
               <a href={link.url} target={link.target} rel="noopener">
-                <i className={link.icon} /> {link.text}
+                <Icon name={link.icon as IconName} /> {link.text}
               </a>
             </li>
           ))}
diff --git a/public/app/core/components/PageHeader/PageHeader.test.tsx b/public/app/core/components/PageHeader/PageHeader.test.tsx
index 1999831a6d5..f38839f145a 100644
--- a/public/app/core/components/PageHeader/PageHeader.test.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.test.tsx
@@ -9,7 +9,7 @@ describe('PageHeader', () => {
     beforeAll(() => {
       const nav = {
         main: {
-          icon: 'fa fa-folder-open',
+          icon: 'folder-open',
           id: 'node',
           subTitle: 'node subtitle',
           url: '',
@@ -30,7 +30,7 @@ describe('PageHeader', () => {
     beforeAll(() => {
       const nav = {
         main: {
-          icon: 'fa fa-folder-open',
+          icon: 'folder-open',
           id: 'child',
           subTitle: 'child subtitle',
           url: '',
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index b3f11097aad..9d0e449e8c8 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -89,11 +89,11 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td>
           {!item.inherited ? (
             <a className="btn btn-danger btn-small" onClick={this.onRemoveItem}>
-              <Icon name="times" />
+              <Icon name="times" style={{ marginBottom: 0 }} />
             </a>
           ) : (
             <button className="btn btn-inverse btn-small">
-              <Icon name="lock" />
+              <Icon name="lock" style={{ marginBottom: '3px' }} />
             </button>
           )}
         </td>
diff --git a/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
index e8b5e326941..a84db4c13e9 100644
--- a/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
@@ -83,9 +83,27 @@ exports[`TeamPicker renders correctly 1`] = `
         <div
           className="gf-form-select-box__indicators css-q46mcr-IndicatorsContainer"
         >
-          <span
-            className="gf-form-select-box__select-arrow "
-          />
+          <div
+            className="css-1cvxpvr"
+          >
+            <svg
+              className="css-sr6nr"
+              fill="currentColor"
+              height={16}
+              style={
+                Object {
+                  "marginTop": "7px",
+                }
+              }
+              viewBox="0 0 24 24"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>
diff --git a/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
index 1e53d258a76..baf205a9bdb 100644
--- a/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
@@ -83,9 +83,27 @@ exports[`UserPicker renders correctly 1`] = `
         <div
           className="gf-form-select-box__indicators css-q46mcr-IndicatorsContainer"
         >
-          <span
-            className="gf-form-select-box__select-arrow "
-          />
+          <div
+            className="css-1cvxpvr"
+          >
+            <svg
+              className="css-sr6nr"
+              fill="currentColor"
+              height={16}
+              style={
+                Object {
+                  "marginTop": "7px",
+                }
+              }
+              viewBox="0 0 24 24"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"
+              />
+            </svg>
+          </div>
         </div>
       </div>
     </div>
diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx
index 552f19e9ae1..f08c1c4bfb4 100644
--- a/public/app/core/components/help/HelpModal.tsx
+++ b/public/app/core/components/help/HelpModal.tsx
@@ -34,11 +34,11 @@ export class HelpModal extends React.PureComponent {
     'Time Range': [
       { keys: ['t', 'z'], description: 'Zoom out time range' },
       {
-        keys: ['t', <i className="fa fa-long-arrow-left" />],
+        keys: ['t', <Icon name="arrow-left" />],
         description: 'Move time range back',
       },
       {
-        keys: ['t', <i className="fa fa-long-arrow-right" />],
+        keys: ['t', <Icon name="arrow-right" />],
         description: 'Move time range forward',
       },
     ],
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html
index 40ef7c1991c..923bb7228e8 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.html
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.html
@@ -15,7 +15,7 @@
         spellcheck="false"
         ng-change="ctrl.onQueryChange()"
       />
-      <icon class="gf-form-input-icon" name="'search'"></icon>
+      <icon class="gf-form-input-icon" name="'search'" style="margin-top: -5px"></icon>
     </label>
     <div class="page-action-bar__spacer"></div>
     <a
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts
index 46328dbf6fe..307489d313e 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.ts
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts
@@ -204,7 +204,7 @@ export class ManageDashboardsCtrl {
       title: 'Delete',
       text: text,
       text2: text2,
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       yesText: 'Delete',
       onConfirm: () => {
         this.deleteFoldersAndDashboards(data.folderUids, data.dashboardUids);
diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html
index 6b40087e355..2ce9d60bf46 100644
--- a/public/app/core/components/search/search_results.html
+++ b/public/app/core/components/search/search_results.html
@@ -14,7 +14,7 @@
       >
       </gf-form-checkbox>
     </div>
-    <i class="search-section__header__icon" ng-class="section.icon"></i>
+    <icon class="search-section__header__icon" ng-class="section.icon"></icon>
     <span class="search-section__header__text">{{::section.title}}</span>
     <a ng-show="section.url" href="{{section.url}}" class="search-section__header__link">
       <icon name="'cog'"></icon>
diff --git a/public/app/core/components/sidemenu/SignIn.tsx b/public/app/core/components/sidemenu/SignIn.tsx
index d59ad53af03..7e59696e17a 100644
--- a/public/app/core/components/sidemenu/SignIn.tsx
+++ b/public/app/core/components/sidemenu/SignIn.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 import { StoreState } from 'app/types';
+import { Icon } from '@grafana/ui';
 
 export const SignIn: FC<any> = ({ url }) => {
   const loginUrl = `login?redirect=${encodeURIComponent(url)}`;
@@ -8,7 +9,7 @@ export const SignIn: FC<any> = ({ url }) => {
     <div className="sidemenu-item">
       <a href={loginUrl} className="sidemenu-link" target="_self">
         <span className="icon-circle sidemenu-icon">
-          <i className="fa fa-fw fa-sign-in" />
+          <Icon name="sign-in-alt" />
         </span>
       </a>
       <a href={loginUrl} target="_self">
diff --git a/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap
index 15de108cbcf..bf7f6b16e63 100644
--- a/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap
+++ b/public/app/core/components/sidemenu/__snapshots__/SignIn.test.tsx.snap
@@ -12,8 +12,8 @@ exports[`Render should render component 1`] = `
     <span
       className="icon-circle sidemenu-icon"
     >
-      <i
-        className="fa fa-fw fa-sign-in"
+      <Icon
+        name="sign-in-alt"
       />
     </span>
   </a>
diff --git a/public/app/core/copy/appNotification.ts b/public/app/core/copy/appNotification.ts
index e02f42e8537..a90186a2a11 100644
--- a/public/app/core/copy/appNotification.ts
+++ b/public/app/core/copy/appNotification.ts
@@ -5,7 +5,7 @@ const defaultSuccessNotification = {
   title: '',
   text: '',
   severity: AppNotificationSeverity.Success,
-  icon: 'fa fa-check',
+  icon: 'check',
   timeout: AppNotificationTimeout.Success,
 };
 
@@ -13,7 +13,7 @@ const defaultWarningNotification = {
   title: '',
   text: '',
   severity: AppNotificationSeverity.Warning,
-  icon: 'fa fa-exclamation',
+  icon: 'exclamation-triangle',
   timeout: AppNotificationTimeout.Warning,
 };
 
@@ -21,7 +21,7 @@ const defaultErrorNotification = {
   title: '',
   text: '',
   severity: AppNotificationSeverity.Error,
-  icon: 'fa fa-exclamation-triangle',
+  icon: 'exclamation-triangle',
   timeout: AppNotificationTimeout.Error,
 };
 
diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts
index 0b15f5a970b..b869a1bea3a 100644
--- a/public/app/core/nav_model_srv.ts
+++ b/public/app/core/nav_model_srv.ts
@@ -61,7 +61,7 @@ export function getWarningNav(text: string, subTitle?: string): NavModel {
   const node = {
     text,
     subTitle,
-    icon: 'fa fa-fw fa-warning',
+    icon: 'exclamation-triangle',
   };
   return {
     breadcrumbs: [node],
diff --git a/public/app/core/selectors/navModel.ts b/public/app/core/selectors/navModel.ts
index ff7c3d43c5c..6ce18154ba6 100644
--- a/public/app/core/selectors/navModel.ts
+++ b/public/app/core/selectors/navModel.ts
@@ -4,7 +4,7 @@ function getNotFoundModel(): NavModel {
   const node: NavModelItem = {
     id: 'not-found',
     text: 'Page not found',
-    icon: 'fa fa-fw fa-warning',
+    icon: 'exclamation-triangle',
     subTitle: '404 Error',
     url: 'not-found',
   };
diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts
index 9e83264c03f..c6a63fecc7a 100644
--- a/public/app/core/services/search_srv.ts
+++ b/public/app/core/services/search_srv.ts
@@ -26,7 +26,7 @@ export class SearchSrv {
       if (result.length > 0) {
         sections['recent'] = {
           title: 'Recent',
-          icon: 'clock-o',
+          icon: 'clock-nine',
           score: -1,
           removable: true,
           expanded: this.recentIsOpen,
@@ -82,7 +82,7 @@ export class SearchSrv {
       if (result.length > 0) {
         sections['starred'] = {
           title: 'Starred',
-          icon: 'star-o',
+          icon: 'star',
           score: -2,
           expanded: this.starredIsOpen,
           toggle: this.toggleStarred.bind(this),
diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/util_srv.ts
index 1b628c7f48f..49b4ad4db42 100644
--- a/public/app/core/services/util_srv.ts
+++ b/public/app/core/services/util_srv.ts
@@ -99,7 +99,7 @@ export class UtilSrv {
     scope.onConfirm = payload.onConfirm;
     scope.onAltAction = payload.onAltAction;
     scope.altActionText = payload.altActionText;
-    scope.icon = payload.icon || 'fa-check';
+    scope.icon = payload.icon || 'check';
     scope.yesText = payload.yesText || 'Yes';
     scope.noText = payload.noText || 'Cancel';
     scope.confirmTextValid = scope.confirmText ? false : true;
diff --git a/public/app/core/specs/manage_dashboards.test.ts b/public/app/core/specs/manage_dashboards.test.ts
index 05bcd4673c7..9efab0c8655 100644
--- a/public/app/core/specs/manage_dashboards.test.ts
+++ b/public/app/core/specs/manage_dashboards.test.ts
@@ -43,7 +43,7 @@ describe('ManageDashboards', () => {
               id: 399,
               title: 'Dashboard Test',
               url: 'dashboard/db/dashboard-test',
-              icon: 'fa fa-folder',
+              icon: 'folder',
               tags,
               isStarred: false,
             },
@@ -54,7 +54,7 @@ describe('ManageDashboards', () => {
         {
           id: 0,
           title: 'General',
-          icon: 'fa fa-folder-open',
+          icon: 'folder-open',
           uri: 'db/something-else',
           type: 'dash-db',
           items: [
@@ -62,7 +62,7 @@ describe('ManageDashboards', () => {
               id: 500,
               title: 'Dashboard Test',
               url: 'dashboard/db/dashboard-test',
-              icon: 'fa fa-folder',
+              icon: 'folder',
               tags,
               isStarred: false,
             },
@@ -98,7 +98,7 @@ describe('ManageDashboards', () => {
               id: 399,
               title: 'Dashboard Test',
               url: 'dashboard/db/dashboard-test',
-              icon: 'fa fa-folder',
+              icon: 'folder',
               tags,
               isStarred: false,
             },
@@ -130,7 +130,7 @@ describe('ManageDashboards', () => {
               id: 399,
               title: 'Dashboard Test',
               url: 'dashboard/db/dashboard-test',
-              icon: 'fa fa-folder',
+              icon: 'folder',
               tags,
               isStarred: false,
               folderId: 410,
@@ -142,7 +142,7 @@ describe('ManageDashboards', () => {
               id: 500,
               title: 'Dashboard Test',
               url: 'dashboard/db/dashboard-test',
-              icon: 'fa fa-folder',
+              icon: 'folder',
               tags,
               folderId: 499,
               isStarred: false,
diff --git a/public/app/features/admin/AdminEditUserCtrl.ts b/public/app/features/admin/AdminEditUserCtrl.ts
index dc640b75528..afd963d676d 100644
--- a/public/app/features/admin/AdminEditUserCtrl.ts
+++ b/public/app/features/admin/AdminEditUserCtrl.ts
@@ -188,7 +188,7 @@ export default class AdminEditUserCtrl {
       $scope.appEvent(CoreEvents.showConfirmModal, {
         title: 'Delete',
         text: 'Do you want to delete ' + user.login + '?',
-        icon: 'fa-trash',
+        icon: 'trash-alt',
         yesText: 'Delete',
         onConfirm: () => {
           promiseToDigest($scope)(
diff --git a/public/app/features/admin/AdminListOrgsCtrl.ts b/public/app/features/admin/AdminListOrgsCtrl.ts
index 635a1824453..f7d31162000 100644
--- a/public/app/features/admin/AdminListOrgsCtrl.ts
+++ b/public/app/features/admin/AdminListOrgsCtrl.ts
@@ -21,7 +21,7 @@ export default class AdminListOrgsCtrl {
         title: 'Delete',
         text: `Do you want to delete organization ${org.name}?`,
         text2: 'All dashboards for this organization will be removed!',
-        icon: 'fa-trash',
+        icon: 'trash-alt',
         yesText: 'Delete',
         onConfirm: async () => {
           await getBackendSrv().delete('/api/orgs/' + org.id);
diff --git a/public/app/features/admin/UserSyncInfo.tsx b/public/app/features/admin/UserSyncInfo.tsx
index e2fccc7a6a7..1b3cc141dd0 100644
--- a/public/app/features/admin/UserSyncInfo.tsx
+++ b/public/app/features/admin/UserSyncInfo.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { dateTime } from '@grafana/data';
 import { LdapUserSyncInfo } from 'app/types';
+import { Icon } from '@grafana/ui';
 
 interface Props {
   disableSync: boolean;
@@ -43,7 +44,7 @@ export class UserSyncInfo extends PureComponent<Props, State> {
       <>
         <button className={`btn btn-secondary pull-right`} onClick={this.onSyncClick} disabled={isDisabled}>
           <span className="btn-title">Sync user</span>
-          {isSyncing && <i className="fa fa-spinner fa-fw fa-spin run-icon" />}
+          {isSyncing && <Icon name="fa fa-spinner" className="fa-fw fa-spin run-icon" />}
         </button>
 
         <div className="clearfix" />
diff --git a/public/app/features/admin/ldap/LdapConnectionStatus.tsx b/public/app/features/admin/ldap/LdapConnectionStatus.tsx
index f74fac6f0ab..6161c4bea56 100644
--- a/public/app/features/admin/ldap/LdapConnectionStatus.tsx
+++ b/public/app/features/admin/ldap/LdapConnectionStatus.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Alert } from '@grafana/ui';
+import { Alert, Icon } from '@grafana/ui';
 import { AppNotificationSeverity, LdapConnectionInfo, LdapServerInfo } from 'app/types';
 
 interface Props {
@@ -27,9 +27,9 @@ export const LdapConnectionStatus: FC<Props> = ({ ldapConnectionInfo }) => {
                     <td>{serverInfo.port}</td>
                     <td>
                       {serverInfo.available ? (
-                        <i className="fa fa-fw fa-check pull-right" />
+                        <Icon name="check" className="pull-right" />
                       ) : (
-                        <i className="fa fa-fw fa-exclamation-triangle pull-right" />
+                        <Icon name="exclamation-triangle" className="pull-right" />
                       )}
                     </td>
                   </tr>
diff --git a/public/app/features/admin/ldap/LdapSyncInfo.tsx b/public/app/features/admin/ldap/LdapSyncInfo.tsx
index e03352f1cbc..92c122b3e6e 100644
--- a/public/app/features/admin/ldap/LdapSyncInfo.tsx
+++ b/public/app/features/admin/ldap/LdapSyncInfo.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { dateTime } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 import { SyncInfo } from 'app/types';
 
 interface Props {
@@ -35,7 +36,7 @@ export class LdapSyncInfo extends PureComponent<Props, State> {
           LDAP Synchronisation
           <button className={`btn btn-secondary pull-right`} onClick={this.handleSyncClick} hidden={true}>
             <span className="btn-title">Bulk-sync now</span>
-            {isSyncing && <i className="fa fa-spinner fa-fw fa-spin run-icon" />}
+            {isSyncing && <Icon name="fa fa-spinner" className="fa-fw fa-spin run-icon" />}
           </button>
         </h3>
         <div className="gf-form-group">
diff --git a/public/app/features/admin/ldap/LdapUserGroups.tsx b/public/app/features/admin/ldap/LdapUserGroups.tsx
index be74a1cb3f7..6a9739f8ad7 100644
--- a/public/app/features/admin/ldap/LdapUserGroups.tsx
+++ b/public/app/features/admin/ldap/LdapUserGroups.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip, Icon } from '@grafana/ui';
 import { LdapRole } from 'app/types';
 
 interface Props {
@@ -21,7 +21,7 @@ export const LdapUserGroups: FC<Props> = ({ groups, showAttributeMapping }) => {
                 Organization
                 <Tooltip placement="top" content="Only the first match for an Organization will be used" theme={'info'}>
                   <span className="gf-form-help-icon">
-                    <i className="fa fa-info-circle" />
+                    <Icon name="info-circle" />
                   </span>
                 </Tooltip>
               </th>
@@ -43,7 +43,7 @@ export const LdapUserGroups: FC<Props> = ({ groups, showAttributeMapping }) => {
                               No match
                               <Tooltip placement="top" content="No matching groups found" theme={'info'}>
                                 <span className="gf-form-help-icon">
-                                  <i className="fa fa-info-circle" />
+                                  <Icon name="info-circle" />
                                 </span>
                               </Tooltip>
                             </span>
diff --git a/public/app/features/admin/ldap/LdapUserPermissions.tsx b/public/app/features/admin/ldap/LdapUserPermissions.tsx
index 0c26c76a5fe..3ee94d86fdb 100644
--- a/public/app/features/admin/ldap/LdapUserPermissions.tsx
+++ b/public/app/features/admin/ldap/LdapUserPermissions.tsx
@@ -34,11 +34,11 @@ export const LdapUserPermissions: FC<Props> = ({ permissions }) => {
               <td>
                 {permissions.isDisabled ? (
                   <>
-                    <i className="fa fa-fw fa-times" /> Inactive
+                    <Icon name="times" /> Inactive
                   </>
                 ) : (
                   <>
-                    <i className="fa fa-fw fa-check" /> Active
+                    <Icon name="check" /> Active
                   </>
                 )}
               </td>
diff --git a/public/app/features/admin/ldap/LdapUserTeams.tsx b/public/app/features/admin/ldap/LdapUserTeams.tsx
index e8a87d2bfaa..d02504dd2cb 100644
--- a/public/app/features/admin/ldap/LdapUserTeams.tsx
+++ b/public/app/features/admin/ldap/LdapUserTeams.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Tooltip } from '@grafana/ui';
+import { Tooltip, Icon } from '@grafana/ui';
 import { LdapTeam } from 'app/types';
 
 interface Props {
@@ -36,7 +36,7 @@ export const LdapUserTeams: FC<Props> = ({ teams, showAttributeMapping }) => {
                               No match
                               <Tooltip placement="top" content="No matching teams found" theme={'info'}>
                                 <span className="gf-form-help-icon">
-                                  <i className="fa fa-info-circle" />
+                                  <Icon name="info-circle" />
                                 </span>
                               </Tooltip>
                             </div>
diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html
index 6b053b1f4e7..104398ca9be 100644
--- a/public/app/features/admin/partials/edit_org.html
+++ b/public/app/features/admin/partials/edit_org.html
@@ -42,7 +42,7 @@
       </td>
       <td style="width: 1%">
         <a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
-          <icon name="'times'"></icon>
+          <icon name="'times'" style="margin-bottom: 0;"></icon>
         </a>
       </td>
     </tr>
diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html
index 598267f3c7c..d83f56f7cf6 100644
--- a/public/app/features/admin/partials/edit_user.html
+++ b/public/app/features/admin/partials/edit_user.html
@@ -108,7 +108,7 @@
         </td>
         <td style="width: 1%">
           <a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
-            <icon name="'times'"></icon>
+            <icon name="'times'" style="margin-bottom: 0;"></icon>
           </a>
         </td>
       </tr>
diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html
index 0fdd925b7c0..434b2b12054 100644
--- a/public/app/features/admin/partials/orgs.html
+++ b/public/app/features/admin/partials/orgs.html
@@ -30,7 +30,7 @@
         </td>
         <td class="text-right">
           <a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
-            <icon name="'times'" size="sm"></icon>
+            <icon name="'times'" size="sm" style="margin-bottom: 0;"></icon>
           </a>
         </td>
       </tr>
diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index 030e2959cf8..7df499dd2c0 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -108,27 +108,27 @@ export class AlertTabCtrl {
   getNotificationIcon(type: string): string {
     switch (type) {
       case 'email':
-        return 'fa fa-envelope';
+        return 'envelope';
       case 'slack':
-        return 'fa fa-slack';
+        return 'slack';
       case 'victorops':
         return 'fa fa-pagelines';
       case 'webhook':
-        return 'fa fa-cubes';
+        return 'cube';
       case 'pagerduty':
         return 'fa fa-bullhorn';
       case 'opsgenie':
-        return 'fa fa-bell';
+        return 'bell';
       case 'hipchat':
         return 'fa fa-mail-forward';
       case 'pushover':
-        return 'fa fa-mobile';
+        return 'mobile-android';
       case 'kafka':
-        return 'fa fa-random';
+        return 'arrow-random';
       case 'teams':
         return 'fa fa-windows';
     }
-    return 'fa fa-bell';
+    return 'bell';
   }
 
   getNotifications() {
@@ -412,7 +412,7 @@ export class AlertTabCtrl {
       title: 'Delete Alert',
       text: 'Are you sure you want to delete this alert rule?',
       text2: 'You need to save dashboard for the delete to take effect',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       yesText: 'Delete',
       onConfirm: () => {
         delete this.panel.alert;
@@ -461,7 +461,7 @@ export class AlertTabCtrl {
     appEvents.emit(CoreEvents.showConfirmModal, {
       title: 'Delete Alert History',
       text: 'Are you sure you want to remove all history & annotations for this alert?',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       yesText: 'Yes',
       onConfirm: () => {
         promiseToDigest(this.$scope)(
diff --git a/public/app/features/alerting/StateHistory.tsx b/public/app/features/alerting/StateHistory.tsx
index 56511010966..2aefa27a47d 100644
--- a/public/app/features/alerting/StateHistory.tsx
+++ b/public/app/features/alerting/StateHistory.tsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { getBackendSrv } from '@grafana/runtime';
+import { Icon } from '@grafana/ui';
 
 import alertDef from './state/alertDef';
 import { DashboardModel } from '../dashboard/state/DashboardModel';
@@ -51,7 +52,7 @@ class StateHistory extends PureComponent<Props, State> {
     appEvents.emit(CoreEvents.showConfirmModal, {
       title: 'Delete Alert History',
       text: 'Are you sure you want to remove all history & annotations for this alert?',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       yesText: 'Yes',
       onConfirm: () => {
         getBackendSrv()
@@ -78,7 +79,7 @@ class StateHistory extends PureComponent<Props, State> {
           <div className="p-b-1">
             <span className="muted">Last 50 state changes</span>
             <button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
-              <i className="fa fa-trash" /> {` Clear history`}
+              <Icon name="trash-alt" style={{ marginRight: '4px' }} size="xs" /> {` Clear history`}
             </button>
           </div>
         )}
@@ -88,7 +89,7 @@ class StateHistory extends PureComponent<Props, State> {
               return (
                 <li className="alert-rule-item" key={`${item.time}-${index}`}>
                   <div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
-                    <i className={item.stateModel.iconClass} />
+                    <Icon name={item.stateModel.iconClass} size="xl" />
                   </div>
                   <div className="alert-rule-item__body">
                     <div className="alert-rule-item__header">
diff --git a/public/app/features/alerting/TestRuleResult.tsx b/public/app/features/alerting/TestRuleResult.tsx
index 784331c6cda..7a95a8a995c 100644
--- a/public/app/features/alerting/TestRuleResult.tsx
+++ b/public/app/features/alerting/TestRuleResult.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { LoadingPlaceholder, JSONFormatter } from '@grafana/ui';
+import { LoadingPlaceholder, JSONFormatter, Icon } from '@grafana/ui';
 
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
@@ -83,12 +83,12 @@ export class TestRuleResult extends PureComponent<Props, State> {
 
     const collapse = (
       <>
-        <i className="fa fa-minus-square-o" /> Collapse All
+        <Icon name="minus-circle" /> Collapse All
       </>
     );
     const expand = (
       <>
-        <i className="fa fa-plus-square-o" /> Expand All
+        <Icon name="plus-circle" /> Expand All
       </>
     );
     return allNodesExpanded ? collapse : expand;
@@ -114,7 +114,7 @@ export class TestRuleResult extends PureComponent<Props, State> {
             text={this.getTextForClipboard}
             onSuccess={this.onClipboardSuccess}
           >
-            <i className="fa fa-clipboard" /> Copy to Clipboard
+            <Icon name="copy" /> Copy to Clipboard
           </CopyToClipboard>
         </div>
 
diff --git a/public/app/features/alerting/partials/alert_howto.html b/public/app/features/alerting/partials/alert_howto.html
index 65c0514ddbd..a78ff3773ce 100644
--- a/public/app/features/alerting/partials/alert_howto.html
+++ b/public/app/features/alerting/partials/alert_howto.html
@@ -1,7 +1,7 @@
 <div class="modal-body">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			<i class="fa fa-info-circle"></i>
+			<icon name="'info-circle'"></icon>
 			<span class="p-l-1">Adding an Alert</span>
 		</h2>
 
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 7576a4f570a..8110e9ab2a0 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -1,5 +1,7 @@
 <div ng-if="ctrl.panel.alert">
-  <div class="alert alert-error m-b-2" ng-show="ctrl.error"><i class="fa fa-warning"></i> {{ctrl.error}}</div>
+  <div class="alert alert-error m-b-2" ng-show="ctrl.error">
+    <icon name="'exclamation-triangle'"></icon> {{ctrl.error}}
+  </div>
   <div class="panel-options-group">
     <div class="panel-options-group__body">
       <div class="gf-form-group">
@@ -35,7 +37,9 @@
           </div>
         </div>
         <div class="gf-form" ng-if="ctrl.frequencyWarning">
-          <label class="gf-form-label text-warning"> <i class="fa fa-warning"></i> {{ctrl.frequencyWarning}} </label>
+          <label class="gf-form-label text-warning">
+            <icon name="'exclamation-triangle'"></icon> {{ctrl.frequencyWarning}}
+          </label>
         </div>
       </div>
 
@@ -98,7 +102,7 @@
           <div class="gf-form">
             <label class="gf-form-label">
               <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-                <i class="fa fa-trash"></i>
+                <icon name="'trash-alt'"></icon>
               </a>
             </label>
           </div>
@@ -107,7 +111,7 @@
         <div class="gf-form">
           <label class="gf-form-label dropdown">
             <a class="pointer dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-plus"></i>
+              <icon name="'plus-circle'"></icon>
             </a>
             <ul class="dropdown-menu" role="menu">
               <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
@@ -166,7 +170,7 @@
         </div>
         <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
           <span class="gf-form-label">
-            <i class="{{nc.iconClass}}"></i>
+            <icon name="'{{nc.iconClass}}'"></icon>
             &nbsp;{{nc.name}}&nbsp;<span ng-if="nc.isDefault">(default)</span>
             <icon
               name="'times'"
@@ -206,7 +210,7 @@
             />
             <label class="gf-form-label">
               <a class="pointer" tabindex="1" ng-click="ctrl.removeAlertRuleTag(name)">
-                <i class="fa fa-trash"></i>
+                <icon name="'trash-alt'"></icon>
               </a>
             </label>
           </div>
@@ -230,7 +234,7 @@
             <div class="gf-form">
               <label class="gf-form-label">
                 <a class="pointer" tabindex="1" ng-click="ctrl.addAlertRuleTag()">
-                  <i class="fa fa-plus"></i>&nbsp;Add Tag
+                  <icon name="'plus-circle'"></icon>&nbsp;Add Tag
                 </a>
               </label>
             </div>
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html
index 711fc5f1bc8..d1224cc2e4e 100644
--- a/public/app/features/alerting/partials/notifications_list.html
+++ b/public/app/features/alerting/partials/notifications_list.html
@@ -35,7 +35,7 @@
               default
             </span>
             <a ng-click="ctrl.deleteNotification(notification.id)" class="btn btn-danger btn-small">
-              <icon name="'times'"></icon>
+              <icon name="'times'" style="margin-top: 2px"></icon>
             </a>
           </td>
         </tr>
diff --git a/public/app/features/alerting/state/alertDef.ts b/public/app/features/alerting/state/alertDef.ts
index e0f097fef45..060c4df10b7 100644
--- a/public/app/features/alerting/state/alertDef.ts
+++ b/public/app/features/alerting/state/alertDef.ts
@@ -82,7 +82,7 @@ function getStateDisplayModel(state: string) {
     case 'alerting': {
       return {
         text: 'ALERTING',
-        iconClass: 'heartbeat',
+        iconClass: 'heart-break',
         stateClass: 'alert-state-critical',
       };
     }
diff --git a/public/app/features/alerting/state/reducers.test.ts b/public/app/features/alerting/state/reducers.test.ts
index 3d638a2c80a..63bf3d7c22d 100644
--- a/public/app/features/alerting/state/reducers.test.ts
+++ b/public/app/features/alerting/state/reducers.test.ts
@@ -131,7 +131,7 @@ describe('Alert rules', () => {
               state: 'alerting',
               stateAge: newStateDateAge,
               stateClass: 'alert-state-critical',
-              stateIcon: 'heartbeat',
+              stateIcon: 'heart-break',
               stateText: 'ALERTING',
               url: '/d/ggHbN42mk/alerting-with-testdata',
             },
diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts
index da2b59c0dab..e4c09c830e7 100644
--- a/public/app/features/annotations/editor_ctrl.ts
+++ b/public/app/features/annotations/editor_ctrl.ts
@@ -27,7 +27,7 @@ export class AnnotationsEditorCtrl {
 
   emptyListCta = {
     title: 'There are no custom annotation queries added yet',
-    buttonIcon: 'gicon gicon-annotation',
+    buttonIcon: 'comment-alt',
     buttonTitle: 'Add Annotation Query',
     infoBox: {
       __html: `<p>Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines
diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html
index 5d402b706f1..443e73b9920 100644
--- a/public/app/features/annotations/partials/editor.html
+++ b/public/app/features/annotations/partials/editor.html
@@ -2,8 +2,8 @@
   <div class="page-action-bar">
     <h3 class="dashboard-settings__header">
       <a ng-click="ctrl.backToList()">Annotations</a>
-      <span ng-show="ctrl.mode === 'new'"><i class="fa fa-fw fa-chevron-right"></i> New</span>
-      <span ng-show="ctrl.mode === 'edit'"><i class="fa fa-fw fa-chevron-right"></i> Edit</span>
+      <span ng-show="ctrl.mode === 'new'"><icon name="'angle-right'"></icon> New</span>
+      <span ng-show="ctrl.mode === 'edit'"><icon name="'angle-right'"></icon> Edit</span>
     </h3>
 
     <div class="page-action-bar__spacer"></div>
@@ -31,20 +31,20 @@
       <tbody>
         <tr ng-repeat="annotation in ctrl.annotations track by annotation.name">
           <td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
-            <i class="fa fa-comment" style="color:{{ annotation.iconColor }}"></i> &nbsp; {{ annotation.name }}
+            <icon name="'comment-alt'" style="color:{{ annotation.iconColor }}"></icon> &nbsp; {{ annotation.name }}
           </td>
           <td style="width:90%" ng-show="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
-            <i class="gicon gicon-annotation"></i> &nbsp;
+            <icon name="'comment-alt'"></icon> &nbsp;
             <em class="muted">{{ annotation.name }} (Built-in)</em>
           </td>
           <td class="pointer" ng-click="ctrl.edit(annotation)">
             {{ annotation.datasource || 'Default' }}
           </td>
           <td style="width: 1%">
-            <i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
+            <icon ng-click="ctrl.move($index,-1)" ng-hide="$first" name="'arrow-up'"></icon>
           </td>
           <td style="width: 1%">
-            <i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
+            <icon ng-click="ctrl.move($index,1)" ng-hide="$last" name="'arrow-down'"></icon>
           </td>
           <td style="width: 1%">
             <a
@@ -52,7 +52,7 @@
               class="btn btn-danger btn-small"
               ng-hide="annotation.builtIn"
             >
-              <icon name="'times'"></icon>
+              <icon name="'times'" style="margin-bottom: 0;"></icon>
             </a>
           </td>
         </tr>
diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx
index 47c4e2a3b0a..3503555dc6a 100644
--- a/public/app/features/api-keys/ApiKeysAddedModal.tsx
+++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx
@@ -11,7 +11,7 @@ export const ApiKeysAddedModal = (props: Props) => {
     <div className="modal-body">
       <div className="modal-header">
         <h2 className="modal-header-title">
-          <Icon name="key-skeleton-alt" />
+          <Icon name="key-skeleton-alt" size="lg" />
           <span className="p-l-1">API Key Created</span>
         </h2>
 
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
index cec75a18cbc..fb53f89cdfd 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Render should render component 1`] = `
     >
       <Icon
         name="key-skeleton-alt"
+        size="lg"
       />
       <span
         className="p-l-1"
diff --git a/public/app/features/dashboard/components/DashLinks/DashLinksContainerCtrl.ts b/public/app/features/dashboard/components/DashLinks/DashLinksContainerCtrl.ts
index f325eedf427..61fb378b621 100644
--- a/public/app/features/dashboard/components/DashLinks/DashLinksContainerCtrl.ts
+++ b/public/app/features/dashboard/components/DashLinks/DashLinksContainerCtrl.ts
@@ -113,7 +113,7 @@ export class DashLinksContainerCtrl {
               keepTime: linkDef.keepTime,
               includeVars: linkDef.includeVars,
               target: linkDef.targetBlank ? '_blank' : '_self',
-              icon: 'fa fa-bars',
+              icon: 'bars',
               asDropdown: true,
             },
           ]);
@@ -160,7 +160,7 @@ export class DashLinksContainerCtrl {
                   title: dash.title,
                   url: dash.url,
                   target: link.target === '_self' ? '' : link.target,
-                  icon: 'fa fa-th-large',
+                  icon: 'table',
                   keepTime: link.keepTime,
                   includeVars: link.includeVars,
                 });
diff --git a/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts b/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts
index 6893677396a..fd2d60969f4 100644
--- a/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts
+++ b/public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts
@@ -22,7 +22,7 @@ export class DashLinksEditorCtrl {
 
   emptyListCta = {
     title: 'There are no dashboard links added yet',
-    buttonIcon: 'gicon gicon-link',
+    buttonIcon: 'link',
     buttonTitle: 'Add Dashboard Link',
     infoBox: {
       __html: `<p>
diff --git a/public/app/features/dashboard/components/DashLinks/editor.html b/public/app/features/dashboard/components/DashLinks/editor.html
index d898716b79c..0aa73c8192d 100644
--- a/public/app/features/dashboard/components/DashLinks/editor.html
+++ b/public/app/features/dashboard/components/DashLinks/editor.html
@@ -1,8 +1,8 @@
 <div class="page-action-bar">
   <h3 class="dashboard-settings__header">
     <a ng-click="ctrl.backToList()">Dashboard Links</a>
-    <span ng-show="ctrl.mode === 'new'"><i class="fa fa-fw fa-chevron-right"></i> New</span>
-    <span ng-show="ctrl.mode === 'edit'"><i class="fa fa-fw fa-chevron-right"></i> Edit</span>
+    <span ng-show="ctrl.mode === 'new'"><icon name="'angle-right'"></icon> New</span>
+    <span ng-show="ctrl.mode === 'edit'"><icon name="'angle-right'"></icon> Edit</span>
   </h3>
 
   <div class="page-action-bar__spacer"></div>
@@ -41,7 +41,7 @@
       <tbody>
         <tr ng-repeat="link in ctrl.dashboard.links">
           <td class="pointer" ng-click="ctrl.editLink(link)">
-            <i class="fa fa-fw fa-external-link"></i>
+            <icon name="'external-link-alt'"></icon>
             {{ link.type }}
           </td>
           <td>
@@ -62,14 +62,14 @@
             </span>
           </td>
           <td style="width: 1%">
-            <i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
+            <icon ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" name="'arrow-up'"></icon>
           </td>
           <td style="width: 1%">
-            <i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
+            <icon ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" name="'arrow-down'"></icon>
           </td>
           <td style="width: 1%">
             <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
-              <icon name="'times'"></icon>
+              <icon name="'times'" style="margin-bottom: 0;"></icon>
             </a>
           </td>
         </tr>
diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index b70b9c8e497..4ed75a2b825 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -102,11 +102,12 @@ class DashNav extends PureComponent<Props> {
     const { dashboard, isFullscreen } = this.props;
     /* Hard-coded value so we don't have to wrap whole component in withTheme because of 1 variable */
     const iconClassName = css`
-      margin-right: 8px;
+      margin-right: 4px;
       margin-bottom: -1px;
     `;
     const mainIconClassName = css`
-      margin-right: 8px;
+      margin-right: 4px;
+      margin-bottom: 3px;
     `;
 
     const folderTitle = dashboard.meta.folderTitle;
@@ -116,7 +117,7 @@ class DashNav extends PureComponent<Props> {
       <>
         <div>
           <div className="navbar-page-btn">
-            {!isFullscreen && <Icon name="apps" size="xl" className={mainIconClassName} />}
+            {!isFullscreen && <Icon name="apps" size="lg" className={mainIconClassName} />}
             {haveFolder && (
               <>
                 <a className="navbar-page-btn__folder" onClick={this.onFolderNameClick}>
diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
index db45300cf60..9c715d7b74e 100644
--- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
+++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { Icon } from '@grafana/ui';
 import { PanelModel } from '../../state/PanelModel';
 import { DashboardModel } from '../../state/DashboardModel';
 import templateSrv from 'app/features/templating/template_srv';
@@ -74,11 +75,6 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
       'dashboard-row': true,
       'dashboard-row--collapsed': this.state.collapsed,
     });
-    const chevronClass = classNames({
-      fa: true,
-      'fa-chevron-down': !this.state.collapsed,
-      'fa-chevron-right': this.state.collapsed,
-    });
 
     const title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
     const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
@@ -88,7 +84,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     return (
       <div className={classes}>
         <a className="dashboard-row__title pointer" onClick={this.onToggle}>
-          <i className={chevronClass} />
+          <Icon name={this.state.collapsed ? 'angle-right' : 'angle-down'} />
           {title}
           <span className="dashboard-row__panel_count">
             ({count} {panels})
@@ -97,10 +93,10 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
         {canEdit && (
           <div className="dashboard-row__actions">
             <a className="pointer" onClick={this.onOpenSettings}>
-              <i className="gicon gicon-cog" />
+              <Icon name="cog" />
             </a>
             <a className="pointer" onClick={this.onDelete}>
-              <i className="fa fa-trash" />
+              <Icon name="trash-alt" />
             </a>
           </div>
         )}
diff --git a/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts b/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
index 8fe0aa6d05c..6f4fe077272 100644
--- a/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
+++ b/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
@@ -71,22 +71,22 @@ export class SettingsCtrl {
       this.sections.push({
         title: 'General',
         id: 'settings',
-        icon: 'gicon gicon-preferences',
+        icon: 'sliders-v-alt',
       });
       this.sections.push({
         title: 'Annotations',
         id: 'annotations',
-        icon: 'gicon gicon-annotation',
+        icon: 'comment-alt',
       });
       this.sections.push({
         title: 'Variables',
         id: 'templating',
-        icon: 'gicon gicon-variable',
+        icon: 'calculator-alt',
       });
       this.sections.push({
         title: 'Links',
         id: 'links',
-        icon: 'gicon gicon-link',
+        icon: 'link',
       });
     }
 
@@ -94,7 +94,7 @@ export class SettingsCtrl {
       this.sections.push({
         title: 'Versions',
         id: 'versions',
-        icon: 'fa fa-fw fa-history',
+        icon: 'history',
       });
     }
 
@@ -102,14 +102,14 @@ export class SettingsCtrl {
       this.sections.push({
         title: 'Permissions',
         id: 'permissions',
-        icon: 'fa fa-fw fa-lock',
+        icon: 'lock',
       });
     }
 
     if (this.dashboard.meta.canMakeEditable) {
       this.sections.push({
         title: 'General',
-        icon: 'gicon gicon-preferences',
+        icon: 'sliders-v-alt',
         id: 'make_editable',
       });
     }
@@ -117,7 +117,7 @@ export class SettingsCtrl {
     this.sections.push({
       title: 'JSON Model',
       id: 'dashboard_json',
-      icon: 'gicon gicon-json',
+      icon: 'arrow',
     });
 
     const params = this.$location.search();
@@ -145,7 +145,7 @@ export class SettingsCtrl {
       this.sections.unshift({
         title: 'Not found',
         id: '404',
-        icon: 'fa fa-fw fa-warning',
+        icon: 'exclamation-triangle',
       });
       this.viewId = '404';
     }
@@ -201,7 +201,7 @@ export class SettingsCtrl {
           File path: ${this.dashboard.meta.provisionedExternalId}
         `,
         text2htmlBind: true,
-        icon: 'fa-trash',
+        icon: 'trash-alt',
         noText: 'OK',
       });
       return;
@@ -220,7 +220,7 @@ export class SettingsCtrl {
       title: 'Delete',
       text: 'Do you want to delete this dashboard?',
       text2: text2,
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       confirmText: confirmText,
       yesText: 'Delete',
       onConfirm: () => {
diff --git a/public/app/features/dashboard/components/DashboardSettings/template.html b/public/app/features/dashboard/components/DashboardSettings/template.html
index b5fcbaebd55..b8b662896c2 100644
--- a/public/app/features/dashboard/components/DashboardSettings/template.html
+++ b/public/app/features/dashboard/components/DashboardSettings/template.html
@@ -4,7 +4,7 @@
      ng-class="{active: ctrl.viewId === section.id}"
      ng-repeat="section in ctrl.sections"
      aria-label="{{ctrl.selectors.sectionItems(section.title)}}">
-    <i class="{{::section.icon}}"></i>
+    <icon name="'{{::section.icon}}'" style="margin-right: 4px;"></icon>
     {{::section.title}}
   </a>
 
diff --git a/public/app/features/dashboard/components/RowOptions/template.html b/public/app/features/dashboard/components/RowOptions/template.html
index 8a4455e3245..97ecdac07a2 100644
--- a/public/app/features/dashboard/components/RowOptions/template.html
+++ b/public/app/features/dashboard/components/RowOptions/template.html
@@ -1,7 +1,7 @@
 <div class="modal-body">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			<i class="fa fa-copy"></i>
+			<icon name="'copy'"  size="'lg'"></icon>
 			<span class="p-l-1">Row Options</span>
 		</h2>
 
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 514c44b4d78..28fdc4e11c8 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -130,7 +130,7 @@ export class ShareLink extends PureComponent<Props, State> {
             {panel && (
               <div className="gf-form">
                 <a href={imageUrl} target="_blank" aria-label={selectors.linkToRenderedImage}>
-                  <i className="fa fa-camera"></i> Direct link rendered image
+                  <Icon name="camera" /> Direct link rendered image
                 </a>
               </div>
             )}
diff --git a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
index b33373f0e12..87d5bb862a4 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx
@@ -266,7 +266,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         <div className="gf-form" style={{ marginTop: '40px' }}>
           <div className="gf-form-row">
             <a href={snapshotUrl} className="large share-modal-link" target="_blank">
-              <i className="fa fa-external-link-square"></i> {snapshotUrl}
+              <Icon name="external-link-alt" /> {snapshotUrl}
             </a>
             <br />
             <ClipboardButton variant="secondary" getText={this.getSnapshotUrl} onClipboardCopy={this.onSnapshotUrlCopy}>
@@ -304,7 +304,7 @@ export class ShareSnapshot extends PureComponent<Props, State> {
         <div className="share-modal-header">
           {isLoading ? (
             <div className="share-modal-big-icon">
-              <i className="fa fa-spinner fa-spin"></i>
+              <Icon name="fa fa-spinner" className="fa-spin" />
             </div>
           ) : (
             <Icon name="camera" className="share-modal-big-icon" size="xxl" />
diff --git a/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts b/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts
index 1e83567729f..95ff8544395 100644
--- a/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts
+++ b/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts
@@ -4,7 +4,7 @@ const template = `
 <div class="modal-body">
   <div class="modal-header">
     <h2 class="modal-header-title">
-      <i class="fa fa-exclamation"></i>
+      <icon name="'exclamation-triangle'" size="'lg'"></icon>
       <span class="p-l-1">Unsaved changes</span>
     </h2>
 
diff --git a/public/app/features/dashboard/components/VersionHistory/template.html b/public/app/features/dashboard/components/VersionHistory/template.html
index 0a9e588f0ca..75d128269f5 100644
--- a/public/app/features/dashboard/components/VersionHistory/template.html
+++ b/public/app/features/dashboard/components/VersionHistory/template.html
@@ -1,8 +1,8 @@
 <h3 class="dashboard-settings__header">
   <a ng-click="ctrl.switchMode('list')">Versions</a>
   <span ng-show="ctrl.mode === 'compare'">
-    <i class="fa fa-fw fa-chevron-right"></i> Comparing {{ctrl.baseInfo.version}}
-    <i class="fa fa-arrows-h"></i>
+    <icon name="'angle-right'"></icon> Comparing {{ctrl.baseInfo.version}}
+    <icon name="'arrows-h'"></icon>
     {{ctrl.newInfo.version}}
     <cite class="muted" ng-if="ctrl.isNewLatest">(Latest)</cite>
   </span>
@@ -10,7 +10,7 @@
 
 <div ng-if="ctrl.mode === 'list'">
   <div ng-if="ctrl.loading">
-    <i class="fa fa-spinner fa-spin"></i>
+    <icon name="'fa fa-spinner'" class="fa-spin"></icon>
     <em>Fetching history list&hellip;</em>
   </div>
 
@@ -29,8 +29,17 @@
         </thead>
         <tbody>
           <tr ng-repeat="revision in ctrl.revisions">
-            <td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
-              <gf-form-checkbox switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
+            <td
+              class="filter-table__switch-cell"
+              bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''"
+              data-placement="right"
+            >
+              <gf-form-checkbox
+                switch-class="gf-form-switch--table-cell"
+                checked="revision.checked"
+                on-change="ctrl.revisionSelectionChanged()"
+                ng-disabled="!revision.checked && ctrl.canCompare"
+              >
               </gf-form-checkbox>
             </td>
             <td class="text-center">{{revision.version}}</td>
@@ -38,11 +47,15 @@
             <td>{{revision.createdBy}}</td>
             <td>{{revision.message}}</td>
             <td class="text-right">
-              <a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
-                <i class="fa fa-history"></i>&nbsp;&nbsp;Restore
+              <a
+                class="btn btn-inverse btn-small"
+                ng-show="revision.version !== ctrl.dashboard.version"
+                ng-click="ctrl.restore(revision.version)"
+              >
+                <icon name="'history'" size="'xs'" style="margin-bottom: 2px"></icon>&nbsp;&nbsp;Restore
               </a>
               <a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
-                <i class="fa fa-check"></i>&nbsp;&nbsp;Latest
+                <icon name="'check'" size="'xs'" style="margin-bottom: 2px"></icon>&nbsp;&nbsp;Latest
               </a>
             </td>
           </tr>
@@ -50,26 +63,31 @@
       </table>
 
       <div ng-if="ctrl.appending">
-        <i class="fa fa-spinner fa-spin"></i>
+        <icon name="'fa fa-spinner'" class="fa-spin"></icon>
         <em>Fetching more entries&hellip;</em>
       </div>
 
       <div class="gf-form-group">
         <div class="gf-form-button-row">
-          <button  type="button"
-                   class="btn gf-form-button btn-inverse"
-                   ng-if="ctrl.revisions.length >= ctrl.limit"
-                   ng-click="ctrl.addToLog()"
-                   ng-disabled="ctrl.isLastPage()">
+          <button
+            type="button"
+            class="btn gf-form-button btn-inverse"
+            ng-if="ctrl.revisions.length >= ctrl.limit"
+            ng-click="ctrl.addToLog()"
+            ng-disabled="ctrl.isLastPage()"
+          >
             Show more versions
           </button>
-          <button type="button"
-                  class="btn btn-primary"
-                  ng-if="ctrl.revisions.length > 1"
-                  ng-disabled="!ctrl.canCompare"
-                  ng-click="ctrl.getDiff(ctrl.diff)"
-                  bs-tooltip="ctrl.canCompare ? '' : 'Select 2 versions to start comparing'" data-placement="bottom">
-            <i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
+          <button
+            type="button"
+            class="btn btn-primary"
+            ng-if="ctrl.revisions.length > 1"
+            ng-disabled="!ctrl.canCompare"
+            ng-click="ctrl.getDiff(ctrl.diff)"
+            bs-tooltip="ctrl.canCompare ? '' : 'Select 2 versions to start comparing'"
+            data-placement="bottom"
+          >
+            <icon name="'code-branch'"></icon>&nbsp;&nbsp;Compare versions
           </button>
         </div>
       </div>
@@ -79,29 +97,31 @@
 
 <div ng-if="ctrl.mode === 'compare'">
   <div ng-if="ctrl.loading">
-    <i class="fa fa-spinner fa-spin"></i>
+    <icon name="'fa fa-spinner'" class="fa-spin"></icon>
     <em>Fetching changes&hellip;</em>
   </div>
 
   <div ng-if="!ctrl.loading">
-    <button  type="button"
-             class="btn btn-danger pull-right"
-             ng-click="ctrl.restore(ctrl.baseInfo.version)"
-             ng-if="ctrl.isNewLatest">
-      <i class="fa fa-history" ></i>&nbsp;&nbsp;Restore to version {{ctrl.baseInfo.version}}
+    <button
+      type="button"
+      class="btn btn-danger pull-right"
+      ng-click="ctrl.restore(ctrl.baseInfo.version)"
+      ng-if="ctrl.isNewLatest"
+    >
+      <icon name="'history'"></icon>&nbsp;&nbsp;Restore to version {{ctrl.baseInfo.version}}
     </button>
     <section>
       <p class="small muted">
-      <strong>Version {{ctrl.newInfo.version}}</strong> updated by
-      <span>{{ctrl.newInfo.createdBy}} </span>
-      <span>{{ctrl.newInfo.ageString}}</span>
-      <span> - {{ctrl.newInfo.message}}</span>
+        <strong>Version {{ctrl.newInfo.version}}</strong> updated by
+        <span>{{ctrl.newInfo.createdBy}} </span>
+        <span>{{ctrl.newInfo.ageString}}</span>
+        <span> - {{ctrl.newInfo.message}}</span>
       </p>
       <p class="small muted">
-      <strong>Version {{ctrl.baseInfo.version}}</strong> updated by
-      <span>{{ctrl.baseInfo.createdBy}} </span>
-      <span>{{ctrl.baseInfo.ageString}}</span>
-      <span> - {{ctrl.baseInfo.message}}</span>
+        <strong>Version {{ctrl.baseInfo.version}}</strong> updated by
+        <span>{{ctrl.baseInfo.createdBy}} </span>
+        <span>{{ctrl.baseInfo.ageString}}</span>
+        <span> - {{ctrl.baseInfo.message}}</span>
       </p>
     </section>
 
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index d6e2ea1560d..1f31aa23b32 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -15,7 +15,7 @@ import { DashNav } from '../components/DashNav';
 import { AngularSubMenu } from '../components/SubMenu';
 import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelEditor } from '../components/PanelEditor/PanelEditor';
-import { Alert, CustomScrollbar } from '@grafana/ui';
+import { Alert, CustomScrollbar, Icon } from '@grafana/ui';
 // Redux
 import { initDashboard } from '../state/initDashboard';
 import { cleanUpDashboard } from '../state/reducers';
@@ -216,7 +216,7 @@ export class DashboardPage extends PureComponent<Props, State> {
     return (
       <div className="dashboard-loading">
         <div className="dashboard-loading__text">
-          <i className="fa fa-spinner fa-spin" /> {this.props.initPhase}
+          <Icon name="fa fa-spinner" className="fa-spin" /> {this.props.initPhase}
         </div>
       </div>
     );
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index e4d6386e3c0..eadcc366dc5 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -320,8 +320,9 @@ exports[`DashboardPage Dashboard is fetching slowly Should render slow init stat
   <div
     className="dashboard-loading__text"
   >
-    <i
-      className="fa fa-spinner fa-spin"
+    <Icon
+      className="fa-spin"
+      name="fa fa-spinner"
     />
      
     Fetching
diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index 0baa755bf6c..69fc712a3a8 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -251,6 +251,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
           isEditing={isEditing}
           data={data}
           updateLocation={updateLocation}
+          alertState={alertState}
         />
         <div className={panelContentClassNames}>
           <div ref={element => (this.element = element)} className="panel-height-helper" />
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 04d5b664d1b..3332dcef725 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -25,6 +25,7 @@ export interface Props {
   angularComponent?: AngularComponent | null;
   links?: DataLink[];
   error?: string;
+  alertState?: string;
   isViewing: boolean;
   isEditing: boolean;
   data: PanelData;
@@ -89,7 +90,7 @@ export class PanelHeader extends Component<Props, State> {
   private renderLoadingState(): JSX.Element {
     return (
       <div className="panel-loading">
-        <i className="fa fa-spinner fa-spin" />
+        <Icon className="fa-spin" name="fa fa-spinner" />
       </div>
     );
   }
@@ -122,7 +123,7 @@ export class PanelHeader extends Component<Props, State> {
   };
 
   render() {
-    const { panel, scopedVars, error, isViewing, isEditing, data } = this.props;
+    const { panel, scopedVars, error, isViewing, isEditing, data, alertState } = this.props;
     const { menuItems } = this.state;
     const title = templateSrv.replaceWithText(panel.title, scopedVars);
 
@@ -162,7 +163,14 @@ export class PanelHeader extends Component<Props, State> {
           >
             <div className="panel-title">
               {Object.values(notices).map(this.renderNotice)}
-              <span className="icon-gf panel-alert-icon" />
+              {alertState && (
+                <Icon
+                  name={alertState === 'alerting' ? 'heart-break' : 'heart'}
+                  className="icon-gf panel-alert-icon"
+                  style={{ marginRight: '4px' }}
+                  size="sm"
+                />
+              )}
               <span className="panel-title-text">
                 {title}
                 <Icon name="angle-down" className="panel-menu-toggle" />
diff --git a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
index c68332442ab..1767d0939b9 100644
--- a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
+++ b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { CustomScrollbar, PanelOptionsGroup } from '@grafana/ui';
+import { CustomScrollbar, PanelOptionsGroup, Icon, IconName } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 interface Props {
@@ -90,7 +90,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return (
       <div className="nav-buttons" key={view.title + view.icon}>
         <button className="btn navbar-button" onClick={onClick} disabled={view.disabled}>
-          {view.icon && <i className={view.icon} />} {view.title}
+          {view.icon && <Icon name={view.icon as IconName} />} {view.title}
         </button>
       </div>
     );
diff --git a/public/app/features/dashboard/panel_editor/QueriesTab.tsx b/public/app/features/dashboard/panel_editor/QueriesTab.tsx
index 24ac56b5de8..9bb65b432b4 100644
--- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx
+++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx
@@ -250,7 +250,7 @@ export class QueriesTab extends PureComponent<Props, State> {
 
     const dsHelp: EditorToolbarView = {
       heading: 'Help',
-      icon: 'fa fa-question',
+      icon: 'question-circle',
       render: this.renderHelp,
     };
 
diff --git a/public/app/features/dashboard/panel_editor/QueryInspector.tsx b/public/app/features/dashboard/panel_editor/QueryInspector.tsx
index 1dcbe4bb744..fa12fd7bbe3 100644
--- a/public/app/features/dashboard/panel_editor/QueryInspector.tsx
+++ b/public/app/features/dashboard/panel_editor/QueryInspector.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
-import { JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
+import { JSONFormatter, LoadingPlaceholder, Icon } from '@grafana/ui';
 import { CoreEvents } from 'app/types';
 import { AppEvents, PanelEvents } from '@grafana/data';
 
@@ -182,12 +182,12 @@ export class QueryInspector extends PureComponent<Props, State> {
 
     const collapse = (
       <>
-        <i className="fa fa-minus-square-o" /> Collapse All
+        <Icon name="minus-circle" /> Collapse All
       </>
     );
     const expand = (
       <>
-        <i className="fa fa-plus-square-o" /> Expand All
+        <Icon name="plus-circle" /> Expand All
       </>
     );
     return allNodesExpanded ? collapse : expand;
@@ -212,7 +212,7 @@ export class QueryInspector extends PureComponent<Props, State> {
             text={this.getTextForClipboard}
             onSuccess={this.onClipboardSuccess}
           >
-            <i className="fa fa-clipboard" /> Copy to Clipboard
+            <Icon name="copy" /> Copy to Clipboard
           </CopyToClipboard>
         </div>
 
diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 0dbbe8c9230..365e1415063 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -15,6 +15,7 @@ import { PanelModel, DashboardModel } from '../state';
 import { VizPickerSearch } from './VizPickerSearch';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { Unsubscribable } from 'rxjs';
+import { Icon } from '@grafana/ui';
 import {
   PanelPlugin,
   PanelPluginMeta,
@@ -163,7 +164,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
           <div className="toolbar__main" onClick={this.onOpenVizPicker}>
             <img className="toolbar__main-image" src={meta.info.logos.small} />
             <div className="toolbar__main-name">{meta.name}</div>
-            <i className="fa fa-caret-down" />
+            <Icon name="angle-down" style={{ marginLeft: '4px', marginBottom: 0 }} />
           </div>
           <PluginStateinfo state={meta.state} />
         </>
@@ -193,7 +194,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     const pluginHelp: EditorToolbarView = {
       heading: 'Help',
-      icon: 'fa fa-question',
+      icon: 'question-circle',
       render: this.renderHelp,
     };
 
diff --git a/public/app/features/dashboard/panel_editor/VizPickerSearch.tsx b/public/app/features/dashboard/panel_editor/VizPickerSearch.tsx
index 6cc2c0d2921..4faeae7fceb 100644
--- a/public/app/features/dashboard/panel_editor/VizPickerSearch.tsx
+++ b/public/app/features/dashboard/panel_editor/VizPickerSearch.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { PanelPluginMeta } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 
 interface Props {
   plugin: PanelPluginMeta;
@@ -17,7 +18,7 @@ export class VizPickerSearch extends PureComponent<Props> {
       <>
         <FilterInput placeholder="" onChange={onChange} value={searchQuery} />
         <button className="btn btn-link toolbar__close" onClick={onClose}>
-          <i className="fa fa-chevron-up" />
+          <Icon name="angle-up" />
         </button>
       </>
     );
diff --git a/public/app/features/datasources/DashboardsTable.tsx b/public/app/features/datasources/DashboardsTable.tsx
index ae5e66de950..09ab4359b3c 100644
--- a/public/app/features/datasources/DashboardsTable.tsx
+++ b/public/app/features/datasources/DashboardsTable.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { PluginDashboard } from '../../types';
+import { Icon } from '@grafana/ui';
 
 export interface Props {
   dashboards: PluginDashboard[];
@@ -19,7 +20,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
           return (
             <tr key={`${dashboard.dashboardId}-${index}`}>
               <td className="width-1">
-                <i className="gicon gicon-dashboard" />
+                <Icon name="apps" />
               </td>
               <td>
                 {dashboard.imported ? (
@@ -40,7 +41,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
                 )}
                 {dashboard.imported && (
                   <button className="btn btn-danger btn-small" onClick={() => onRemove(dashboard)}>
-                    <i className="fa fa-trash" />
+                    <Icon name="trash-alt" />
                   </button>
                 )}
               </td>
diff --git a/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap b/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
index cd327ba9fb2..b2327bfecd3 100644
--- a/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
+++ b/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
@@ -19,8 +19,8 @@ exports[`Render should render table 1`] = `
       <td
         className="width-1"
       >
-        <i
-          className="gicon gicon-dashboard"
+        <Icon
+          name="apps"
         />
       </td>
       <td>
@@ -49,8 +49,8 @@ exports[`Render should render table 1`] = `
       <td
         className="width-1"
       >
-        <i
-          className="gicon gicon-dashboard"
+        <Icon
+          name="apps"
         />
       </td>
       <td>
@@ -77,8 +77,8 @@ exports[`Render should render table 1`] = `
           className="btn btn-danger btn-small"
           onClick={[Function]}
         >
-          <i
-            className="fa fa-trash"
+          <Icon
+            name="trash-alt"
           />
         </button>
       </td>
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index 16ee086661c..5bf9cb8bd84 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -24,6 +24,7 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 // Types
 import { CoreEvents, StoreState } from 'app/types/';
 import { UrlQueryMap } from '@grafana/runtime';
+import { Icon } from '@grafana/ui';
 import { DataSourcePluginMeta, DataSourceSettings, NavModel } from '@grafana/data';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
@@ -78,7 +79,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
       title: 'Delete',
       text: 'Are you sure you want to delete this data source?',
       yesText: 'Delete',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       onConfirm: () => {
         this.confirmDelete();
       },
@@ -129,7 +130,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
     const node = {
       text: msg,
       subTitle: 'Data Source Error',
-      icon: 'fa fa-fw fa-warning',
+      icon: 'exclamation-triangle',
     };
     const nav = {
       node: node,
@@ -206,11 +207,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
           {testingStatus && testingStatus.message && (
             <div className={`alert-${testingStatus.status} alert`} aria-label={e2e.pages.DataSource.selectors.alert}>
               <div className="alert-icon">
-                {testingStatus.status === 'error' ? (
-                  <i className="fa fa-exclamation-triangle" />
-                ) : (
-                  <i className="fa fa-check" />
-                )}
+                {testingStatus.status === 'error' ? <Icon name="exclamation-triangle" /> : <Icon name="check" />}
               </div>
               <div className="alert-body">
                 <div className="alert-title" aria-label={e2e.pages.DataSource.selectors.alertMessage}>
diff --git a/public/app/features/explore/AdHocFilterField.tsx b/public/app/features/explore/AdHocFilterField.tsx
index 02578c21909..08be7671b28 100644
--- a/public/app/features/explore/AdHocFilterField.tsx
+++ b/public/app/features/explore/AdHocFilterField.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import _ from 'lodash';
 import { DataSourceApi, DataQuery, DataSourceJsonData } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 import { AdHocFilter } from './AdHocFilter';
 export const DEFAULT_REMOVE_FILTER_VALUE = '-- remove filter --';
 
 const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => (
   <button className="gf-form-label gf-form-label--btn query-part" onClick={onAddFilter}>
-    <i className="fa fa-plus" />
+    <Icon name="plus-circle" />
   </button>
 );
 
diff --git a/public/app/features/explore/ErrorContainer.tsx b/public/app/features/explore/ErrorContainer.tsx
index 57d5dcf24c1..00bbfa7fba4 100644
--- a/public/app/features/explore/ErrorContainer.tsx
+++ b/public/app/features/explore/ErrorContainer.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { DataQueryError } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 export interface ErrorContainerProps {
@@ -17,7 +18,7 @@ export const ErrorContainer: FunctionComponent<ErrorContainerProps> = props => {
       <div className="alert-container">
         <div className="alert-error alert">
           <div className="alert-icon">
-            <i className="fa fa-exclamation-triangle" />
+            <Icon name="exclamation-triangle" />
           </div>
           <div className="alert-body">
             <div className="alert-title">{message}</div>
diff --git a/public/app/features/explore/ExploreGraphPanel.tsx b/public/app/features/explore/ExploreGraphPanel.tsx
index a5d706059ae..209564612a6 100644
--- a/public/app/features/explore/ExploreGraphPanel.tsx
+++ b/public/app/features/explore/ExploreGraphPanel.tsx
@@ -12,6 +12,7 @@ import {
   GraphSeriesToggler,
   GraphSeriesTogglerAPI,
   Chart,
+  Icon,
 } from '@grafana/ui';
 
 const MAX_NUMBER_OF_TIME_SERIES = 20;
@@ -156,7 +157,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
       <>
         {series && series.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && (
           <div className={cx([style.timeSeriesDisclaimer])}>
-            <i className={cx(['fa fa-fw fa-warning', style.disclaimerIcon])} />
+            <Icon className={style.disclaimerIcon} name="exclamation-triangle" />
             {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
             <span
               className={cx([style.showAllTimeSeries])}
diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx
index e5b5bba137b..9ee405ad776 100644
--- a/public/app/features/explore/LiveLogs.tsx
+++ b/public/app/features/explore/LiveLogs.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
 
-import { Themeable, withTheme, getLogRowStyles } from '@grafana/ui';
+import { Themeable, withTheme, getLogRowStyles, Icon } from '@grafana/ui';
 import { GrafanaTheme, LogRowModel, TimeZone } from '@grafana/data';
 
 import ElapsedTime from './ElapsedTime';
@@ -179,12 +179,12 @@ class LiveLogs extends PureComponent<Props, State> {
         </table>
         <div className={cx([styles.logsRowsIndicator])}>
           <button onClick={isPaused ? onResume : onPause} className={cx('btn btn-secondary', styles.button)}>
-            <i className={cx('fa', isPaused ? 'fa-play' : 'fa-pause')} />
+            <Icon name={isPaused ? 'play' : 'pause'} />
             &nbsp;
             {isPaused ? 'Resume' : 'Pause'}
           </button>
           <button onClick={this.props.stopLive} className={cx('btn btn-inverse', styles.button)}>
-            <i className={'fa fa-stop'} />
+            <Icon name="square-shape" />
             &nbsp; Exit live mode
           </button>
           {isPaused || (
diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 47cd155de7e..e6ae1ad03fd 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import tinycolor from 'tinycolor2';
 import { css } from 'emotion';
 import { CSSTransition } from 'react-transition-group';
-import { useTheme, Tooltip, stylesFactory, selectThemeVariant } from '@grafana/ui';
+import { useTheme, Tooltip, stylesFactory, selectThemeVariant, Icon } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
 //Components
@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
             className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
             onClick={stop}
           >
-            <i className={classNames('fa fa-stop icon-brand-gradient')} />
+            <Icon className="icon-brand-gradient" name="square-shape" />
           </button>
         </div>
       </CSSTransition>
diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
index 8db137c61d6..e7409f8d852 100644
--- a/public/app/features/explore/NoDataSourceCallToAction.tsx
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { css } from 'emotion';
-import { ThemeContext, LinkButton, CallToActionCard } from '@grafana/ui';
+import { ThemeContext, LinkButton, CallToActionCard, Icon } from '@grafana/ui';
 
 export const NoDataSourceCallToAction = () => {
   const theme = useContext(ThemeContext);
@@ -9,7 +9,7 @@ export const NoDataSourceCallToAction = () => {
     'Explore requires at least one data source. Once you have added a data source, you can query it here.';
   const footer = (
     <>
-      <i className="fa fa-rocket" />
+      <Icon name="rocket" />
       <> ProTip: You can also define data sources through configuration files. </>
       <a
         href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
diff --git a/public/app/features/explore/QueryRowActions.test.tsx b/public/app/features/explore/QueryRowActions.test.tsx
index 89558494a2d..59321c40a90 100644
--- a/public/app/features/explore/QueryRowActions.test.tsx
+++ b/public/app/features/explore/QueryRowActions.test.tsx
@@ -28,11 +28,11 @@ describe('QueryRowActions', () => {
     const wrapper = setup({ canToggleEditorModes: false });
     expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0);
   });
-  it('should change icon to fa-eye-slash when query row result is hidden', () => {
+  it('should change icon to eye-slash when query row result is hidden', () => {
     const wrapper = setup({ isDisabled: true });
     expect(wrapper.find({ title: 'Enable query' })).toHaveLength(1);
   });
-  it('should change icon to fa-eye when query row result is not hidden', () => {
+  it('should change icon to eye when query row result is not hidden', () => {
     const wrapper = setup({ isDisabled: false });
     expect(wrapper.find({ title: 'Disable query' })).toHaveLength(1);
   });
diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx
index 9419411c859..0ebf41f3997 100644
--- a/public/app/features/explore/SecondaryActions.tsx
+++ b/public/app/features/explore/SecondaryActions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css, cx } from 'emotion';
-import { stylesFactory } from '@grafana/ui';
+import { stylesFactory, Icon } from '@grafana/ui';
 
 type Props = {
   addQueryRowButtonDisabled?: boolean;
@@ -28,7 +28,7 @@ export function SecondaryActions(props: Props) {
           onClick={props.onClickAddQueryRowButton}
           disabled={props.addQueryRowButtonDisabled}
         >
-          <i className={'fa fa-fw fa-plus icon-margin-right'} />
+          <Icon className="icon-margin-right" name="plus-circle" size="sm" />
           <span className="btn-title">{'\xA0' + 'Add query'}</span>
         </button>
       )}
@@ -39,7 +39,7 @@ export function SecondaryActions(props: Props) {
         })}
         onClick={props.onClickRichHistoryButton}
       >
-        <i className={'fa fa-fw fa-history icon-margin-right '} />
+        <Icon className="icon-margin-right" name="history" size="sm" />
         <span className="btn-title">{'\xA0' + 'Query history'}</span>
       </button>
     </div>
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index 602ba9b4dc9..82153498741 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { css } from 'emotion';
 
-import { Tooltip, useTheme, stylesFactory } from '@grafana/ui';
+import { Tooltip, useTheme, stylesFactory, Icon } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
@@ -47,7 +47,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={() => onClick()}
       >
-        <i className={classNames('fa fa-link', styles.topPadding, isSynced && 'icon-brand-gradient')} />
+        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} />
       </button>
     </Tooltip>
   );
diff --git a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap b/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
index 4fe09accde1..2d34f709e05 100644
--- a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
@@ -14,8 +14,8 @@ exports[`ErrorContainer should render component 1`] = `
       <div
         className="alert-icon"
       >
-        <i
-          className="fa fa-exclamation-triangle"
+        <Icon
+          name="exclamation-triangle"
         />
       </div>
       <div
diff --git a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
index 5f193a535a1..773c12299b3 100644
--- a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -20,9 +20,33 @@ exports[`TimeSyncButton should render component 1`] = `
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
-        <i
-          className="fa fa-link css-1c3xqzq-topPadding icon-brand-gradient"
-        />
+        <Icon
+          className="css-1c3xqzq-topPadding icon-brand-gradient"
+          name="link"
+        >
+          <div
+            className="css-1cvxpvr"
+          >
+            <UilLink
+              className="icon-brand-gradient css-1q2xpj8-topPadding"
+              color="currentColor"
+              size={16}
+            >
+              <svg
+                className="icon-brand-gradient css-1q2xpj8-topPadding"
+                fill="currentColor"
+                height={16}
+                viewBox="0 0 24 24"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10,17.55,8.23,19.27a2.47,2.47,0,0,1-3.5-3.5l4.54-4.55a2.46,2.46,0,0,1,3.39-.09l.12.1a1,1,0,0,0,1.4-1.43A2.75,2.75,0,0,0,14,9.59a4.46,4.46,0,0,0-6.09.22L3.31,14.36a4.48,4.48,0,0,0,6.33,6.33L11.37,19A1,1,0,0,0,10,17.55ZM20.69,3.31a4.49,4.49,0,0,0-6.33,0L12.63,5A1,1,0,0,0,14,6.45l1.73-1.72a2.47,2.47,0,0,1,3.5,3.5l-4.54,4.55a2.46,2.46,0,0,1-3.39.09l-.12-.1a1,1,0,0,0-1.4,1.43,2.75,2.75,0,0,0,.23.21,4.47,4.47,0,0,0,6.09-.22l4.55-4.55A4.49,4.49,0,0,0,20.69,3.31Z"
+                />
+              </svg>
+            </UilLink>
+          </div>
+        </Icon>
       </button>
     </PopoverController>
   </Component>
diff --git a/public/app/features/folders/FolderSettingsPage.tsx b/public/app/features/folders/FolderSettingsPage.tsx
index 64ad8b73ba7..bbcb360f41d 100644
--- a/public/app/features/folders/FolderSettingsPage.tsx
+++ b/public/app/features/folders/FolderSettingsPage.tsx
@@ -57,7 +57,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
     appEvents.emit(CoreEvents.showConfirmModal, {
       title: 'Delete',
       text: `Do you want to delete this folder and all its dashboards?`,
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       yesText: 'Delete',
       onConfirm: () => {
         this.props.deleteFolder(this.props.folder.uid);
diff --git a/public/app/features/manage-dashboards/SnapshotListCtrl.ts b/public/app/features/manage-dashboards/SnapshotListCtrl.ts
index 707d2d0898a..f13a7b3e86a 100644
--- a/public/app/features/manage-dashboards/SnapshotListCtrl.ts
+++ b/public/app/features/manage-dashboards/SnapshotListCtrl.ts
@@ -51,7 +51,7 @@ export class SnapshotListCtrl {
       title: 'Delete',
       text: 'Are you sure you want to delete snapshot ' + snapshot.name + '?',
       yesText: 'Delete',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       onConfirm: () => {
         this.removeSnapshotConfirmed(snapshot);
       },
diff --git a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html
index 48fcbbc9115..5776da9ccae 100644
--- a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html
+++ b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html
@@ -1,7 +1,7 @@
 <div class="modal-body">
   <div class="modal-header">
     <h2 class="modal-header-title">
-      <i class="gicon gicon-folder-new"></i>
+      <icon name="'folder-plus'" size="'lg'"></icon>
       <span class="p-l-1">Choose Dashboard Folder</span>
     </h2>
 
diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html
index 108669033c2..d696ef27b0d 100644
--- a/public/app/features/manage-dashboards/partials/snapshot_list.html
+++ b/public/app/features/manage-dashboards/partials/snapshot_list.html
@@ -21,7 +21,7 @@
       </td>
       <td class="text-center">
         <a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
-          <icon name="'eye'" style="margin-right: 4px; margin-bottom: 2px;"></icon>
+          <icon name="'eye'" style="margin-right: 4px"></icon>
           View
         </a>
       </td>
diff --git a/public/app/features/panel/panellinks/module.html b/public/app/features/panel/panellinks/module.html
index 0dcb0ef3ed6..2b2349051df 100644
--- a/public/app/features/panel/panellinks/module.html
+++ b/public/app/features/panel/panellinks/module.html
@@ -1,47 +1,70 @@
 <div class="editor-row">
-	<div class="gf-form-group" ng-repeat="link in panel.links">
-		<div class="section">
-			<div class="gf-form max-width-25">
-				<span class="gf-form-label width-7">Type</span>
-				<div class="gf-form-select-wrapper gf-form--grow">
-					<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-				</div>
-			</div>
+  <div class="gf-form-group" ng-repeat="link in panel.links">
+    <div class="section">
+      <div class="gf-form max-width-25">
+        <span class="gf-form-label width-7">Type</span>
+        <div class="gf-form-select-wrapper gf-form--grow">
+          <select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+        </div>
+      </div>
 
-			<div class="gf-form max-width-25">
-				<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
-				<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input" ng-blur="dashboardChanged(link)">
+      <div class="gf-form max-width-25">
+        <span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
+        <input
+          ng-show="link.type === 'dashboard'"
+          type="text"
+          ng-model="link.dashboard"
+          bs-typeahead="searchDashboards"
+          class="gf-form-input"
+          ng-blur="dashboardChanged(link)"
+        />
 
-				<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
-				<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
-			</div>
+        <span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
+        <input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14" />
+      </div>
 
-			<div class="gf-form max-width-25">
-				<div class="gf-form-label width-7">Title</div>
-				<input type="text" ng-model="link.title" class="gf-form-input">
-			</div>
+      <div class="gf-form max-width-25">
+        <div class="gf-form-label width-7">Title</div>
+        <input type="text" ng-model="link.title" class="gf-form-input" />
+      </div>
+    </div>
 
-		</div>
+    <div class="section">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Url params</span>
+        <input type="text" ng-model="link.params" class="gf-form-input width-10" />
+      </div>
 
-		<div class="section">
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Url params</span>
-				<input type="text" ng-model="link.params" class="gf-form-input width-10">
-			</div>
+      <gf-form-switch
+        class="gf-form"
+        label-class="width-10"
+        label="Include time range"
+        checked="link.keepTime"
+      ></gf-form-switch>
+      <gf-form-switch
+        class="gf-form"
+        label-class="width-10"
+        label="Include variables"
+        checked="link.includeVars"
+      ></gf-form-switch>
+      <gf-form-switch
+        class="gf-form"
+        label-class="width-10"
+        label="Open in new tab "
+        checked="link.targetBlank"
+      ></gf-form-switch>
+    </div>
 
-			<gf-form-switch class="gf-form" label-class="width-10" label="Include time range" checked="link.keepTime"></gf-form-switch>
-			<gf-form-switch class="gf-form" label-class="width-10" label="Include variables" checked="link.includeVars"></gf-form-switch>
-			<gf-form-switch class="gf-form" label-class="width-10" label="Open in new tab " checked="link.targetBlank"></gf-form-switch>
-		</div>
-
-		<div class="section">
-			<div class="gf-form">
-				<button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)"><i class="fa fa-trash"></i> Remove Link</button>
-			</div>
-		</div>
-	</div>
+    <div class="section">
+      <div class="gf-form">
+        <button class="btn btn-inverse gf-form-btn" ng-click="deleteLink(link)">
+          <icon name="trash-alt"></icon> Remove Link
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="editor-row">
-	<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
+  <button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus-circle'"></icon> Add link</button>
 </div>
diff --git a/public/app/features/panel/partials/panelTime.html b/public/app/features/panel/partials/panelTime.html
index 18b9cbbda8e..794df021351 100644
--- a/public/app/features/panel/partials/panelTime.html
+++ b/public/app/features/panel/partials/panelTime.html
@@ -1,7 +1,7 @@
 <div class="gf-form-group">
 	<div class="gf-form">
 		<span class="gf-form-label">
-			<i class="fa fa-clock-o"></i>
+			<icon name="'clock-nine'"></icon>
 		</span>
 
 		<span class="gf-form-label width-12">Override relative time</span>
@@ -14,7 +14,7 @@
 
 	<div class="gf-form">
 		<span class="gf-form-label">
-			<i class="fa fa-clock-o"></i>
+			<icon name="'clock-nine'"></icon>
 		</span>
 		<span class="gf-form-label width-12">Add time shift</span>
 		<span class="gf-form-label width-6">Amount</span>
@@ -26,7 +26,7 @@
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label">
-				<i class="fa fa-clock-o"></i>
+				<icon name="'clock-nine'"></icon>
 			</span>
 		</div>
 		<gf-form-switch class="gf-form max-width-30"
diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html
index 0de792b78eb..291fb1822f2 100644
--- a/public/app/features/playlist/partials/playlists.html
+++ b/public/app/features/playlist/partials/playlists.html
@@ -22,24 +22,24 @@
         <td class="dropdown">
           <button class="btn btn-inverse btn-small" data-toggle="dropdown">
             Start playlist
-            <i class="fa fa-caret-down"></i>
+            <icon name="'angle-down'"></icon>
           </button>
           <ul class="dropdown-menu" role="menu">
             <li>
               <a href="{{playlist.startUrl}}">
-                <i class="fa fa-play"></i> In Normal mode</span>
+                <icon name="'play'"></icon> In Normal mode</span>
               </a>
               <a href="{{playlist.startUrl}}?kiosk=tv">
-                <i class="fa fa-play"></i> In TV mode</span>
+                <icon name="'play'"></icon> In TV mode</span>
               </a>
               <a href="{{playlist.startUrl}}?kiosk=tv&autofitpanels">
-                <i class="fa fa-play"></i> In TV mode <span class="muted">(with auto fit panels)</span>
+                <icon name="'play'"></icon> In TV mode <span class="muted">(with auto fit panels)</span>
               </a>
               <a href="{{playlist.startUrl}}?kiosk">
-                <i class="fa fa-play"></i> In Kiosk mode</span>
+                <icon name="'play'"></icon> In Kiosk mode</span>
               </a>
               <a ng-href="{{playlist.startUrl}}?kiosk&autofitpanels">
-                <i class="fa fa-play"></i> In Kiosk mode <span class="muted">(with auto fit panels)</span>
+                <icon name="'play'"></icon> In Kiosk mode <span class="muted">(with auto fit panels)</span>
               </a>
             </li>
           </ul>
diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts
index f3ce7b41c5a..cf83a85b8e2 100644
--- a/public/app/features/playlist/playlists_ctrl.ts
+++ b/public/app/features/playlist/playlists_ctrl.ts
@@ -50,7 +50,7 @@ export class PlaylistsCtrl {
       title: 'Delete',
       text: 'Are you sure you want to delete playlist ' + playlist.name + '?',
       yesText: 'Delete',
-      icon: 'fa-trash',
+      icon: 'trash-alt',
       onConfirm: () => {
         this.removePlaylistConfirmed(playlist);
       },
diff --git a/public/app/features/plugins/partials/update_instructions.html b/public/app/features/plugins/partials/update_instructions.html
index 5a94e687c44..d5e28210099 100644
--- a/public/app/features/plugins/partials/update_instructions.html
+++ b/public/app/features/plugins/partials/update_instructions.html
@@ -1,7 +1,7 @@
 <div class="modal-body">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			<i class="fa fa-cloud-download"></i>
+			<icon name="'cloud-download'" size="'lg'"></icon>
 			<span class="p-l-1">Update Plugin</span>
 		</h2>
 
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index 67e149644bc..f44686bfd1c 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -143,11 +143,11 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
         <div className="search-dropdown__col_2">
           <div className="search-filter-box">
             <div className="search-filter-box__header">
-              <Icon name="filter" />
+              <Icon name="filter" className={styles.filter} size="sm" />
               Filter by:
               {query.tags.length > 0 && (
                 <a className="pointer pull-right small" onClick={onClearSearchFilters}>
-                  <Icon name="times" /> Clear
+                  <Icon name="times" size="sm" /> Clear
                 </a>
               )}
             </div>
@@ -158,22 +158,22 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
           {canEdit && (
             <div className="search-filter-box" onClick={onCloseSearch}>
               <a href="dashboard/new" className="search-filter-box-link">
-                <i className="gicon gicon-dashboard-new"></i> New dashboard
+                <Icon name="apps" size="xl" className={styles.icon} /> New dashboard
               </a>
               {isEditor && (
                 <a href="dashboards/folder/new" className="search-filter-box-link">
-                  <i className="gicon gicon-folder-new"></i> New folder
+                  <Icon name="folder-plus" size="xl" className={styles.icon} /> New folder
                 </a>
               )}
               <a href="dashboard/import" className="search-filter-box-link">
-                <i className="gicon gicon-dashboard-import"></i> Import dashboard
+                <Icon name="import" size="xl" className={styles.icon} /> Import dashboard
               </a>
               <a
                 className="search-filter-box-link"
                 target="_blank"
                 href="https://grafana.com/dashboards?utm_source=grafana_search"
               >
-                <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find dashboards on Grafana.com
+                <Icon name="search" size="xl" className={styles.icon} /> Find dashboards on Grafana.com
               </a>
             </div>
           )}
@@ -202,5 +202,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         top: 60px;
       }
     `,
+    icon: css`
+      margin-right: ${theme.spacing.sm};
+      color: ${theme.palette.blue95};
+    `,
+    filter: css`
+      margin-right: ${theme.spacing.xs};
+    `,
   };
 });
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx
index fdbba5b3536..fcfe0979250 100644
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/public/app/features/teams/TeamGroupSync.tsx
@@ -66,7 +66,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
         <td>{group.groupId}</td>
         <td style={{ width: '1%' }}>
           <a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
-            <Icon name="times" />
+            <Icon name="times" style={{ marginBottom: 0 }} />
           </a>
         </td>
       </tr>
@@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
             <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
-              <i className="fa fa-plus" /> Add group
+              <Icon name="plus-circle" /> Add group
             </button>
           )}
         </div>
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
index df52c9ed59e..3305b077f7f 100644
--- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
+++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
@@ -108,8 +108,8 @@ exports[`Render should render groups table 1`] = `
       className="btn btn-primary pull-right"
       onClick={[Function]}
     >
-      <i
-        className="fa fa-plus"
+      <Icon
+        name="plus-circle"
       />
        Add group
     </button>
@@ -200,6 +200,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>
@@ -223,6 +228,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>
@@ -246,6 +256,11 @@ exports[`Render should render groups table 1`] = `
             >
               <Icon
                 name="times"
+                style={
+                  Object {
+                    "marginBottom": 0,
+                  }
+                }
               />
             </a>
           </td>
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index d2a2bad6841..615f3130641 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -3,10 +3,10 @@
     <h3 class="dashboard-settings__header">
       <a ng-click="setMode('list')" aria-label="{{::selectors.headerLink}}">Variables</a>
       <span ng-show="mode === 'new'"
-        ><i class="fa fa-fw fa-chevron-right" aria-label="{{::selectors.modeLabelNew}}"></i> New</span
+        ><icon name="'angle-right'" aria-label="{{::selectors.modeLabelNew}}"></icon> New</span
       >
       <span ng-show="mode === 'edit'"
-        ><i class="fa fa-fw fa-chevron-right" aria-label="{{::selectors.modeLabelEdit}}"></i> Edit</span
+        ><icon name="'angle-right'" aria-label="{{::selectors.modeLabelEdit}}"></icon> Edit</span
       >
     </h3>
 
@@ -46,7 +46,7 @@
         </thead>
         <tbody>
           <tr ng-repeat="variable in variables">
-            <td style="width: 1%">
+            <td style="width: 1%;">
               <span
                 ng-click="edit(variable)"
                 class="pointer template-variable"
@@ -63,23 +63,23 @@
             >
               {{ variable.definition ? variable.definition : variable.query }}
             </td>
-            <td style="width: 1%">
-              <i
+            <td style="width: 1%;">
+              <icon
                 ng-click="_.move(variables,$index,$index-1)"
                 ng-hide="$first"
-                class="pointer fa fa-arrow-up"
+                name="'arrow-up'"
                 aria-label="{{::selectors.tableRowArrowUpButtons(variable.name)}}"
-              ></i>
+              ></icon>
             </td>
-            <td style="width: 1%">
-              <i
+            <td style="width: 1%;">
+              <icon
                 ng-click="_.move(variables,$index,$index+1)"
                 ng-hide="$last"
-                class="pointer fa fa-arrow-down"
+                name="'arrow-down'"
                 aria-label="{{::selectors.tableRowArrowDownButtons(variable.name)}}"
-              ></i>
+              ></icon>
             </td>
-            <td style="width: 1%">
+            <td style="width: 1%;">
               <a
                 ng-click="duplicate(variable)"
                 class="btn btn-inverse btn-small"
@@ -88,13 +88,13 @@
                 Duplicate
               </a>
             </td>
-            <td style="width: 1%">
+            <td style="width: 1%;">
               <a
                 ng-click="removeVariable(variable)"
                 class="btn btn-danger btn-small"
                 aria-label="{{::selectors.tableRowRemoveButtons(variable.name)}}"
               >
-                <icon name="'times'"></icon>
+                <icon name="'times'" style="margin-bottom: 0;"></icon>
               </a>
             </td>
           </tr>
diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx
index c2d1d9ca498..55144ea1bc5 100644
--- a/public/app/features/users/InviteeRow.tsx
+++ b/public/app/features/users/InviteeRow.tsx
@@ -41,7 +41,7 @@ class InviteeRow extends PureComponent<Props> {
         </td>
         <td>
           <button className="btn btn-danger btn-small" onClick={() => revokeInvite(invitee.code)}>
-            <Icon name="times" />
+            <Icon name="times" style={{ marginBottom: 0 }} />
           </button>
         </td>
       </tr>
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index 60087857d34..d1cfe920632 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/public/app/features/users/UsersListPage.tsx
@@ -71,7 +71,7 @@ export class UsersListPage extends PureComponent<Props, State> {
       title: 'Delete',
       text: 'Are you sure you want to delete user ' + user.login + '?',
       yesText: 'Delete',
-      icon: 'fa-warning',
+      icon: 'exclamation-triangle',
       onConfirm: () => {
         this.props.removeUser(user.userId);
       },
diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx
index 514aaaeaf13..d3959737080 100644
--- a/public/app/features/users/UsersTable.tsx
+++ b/public/app/features/users/UsersTable.tsx
@@ -56,7 +56,7 @@ const UsersTable: FC<Props> = props => {
               </td>
               <td>
                 <div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-small">
-                  <Icon name="times" />
+                  <Icon name="times" style={{ marginBottom: 0 }} />
                 </div>
               </td>
             </tr>
diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
index 5fbfb0104a9..1a2bf64878e 100644
--- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
@@ -129,6 +129,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
@@ -195,6 +200,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
@@ -261,6 +271,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
@@ -327,6 +342,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
@@ -393,6 +413,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
@@ -459,6 +484,11 @@ exports[`Render should render users table 1`] = `
         >
           <Icon
             name="times"
+            style={
+              Object {
+                "marginBottom": 0,
+              }
+            }
           />
         </div>
       </td>
diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
index f84c6b8e953..da12e4f6627 100644
--- a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
+++ b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactElement, useState } from 'react';
-import { SegmentAsync } from '@grafana/ui';
+import { SegmentAsync, Icon } from '@grafana/ui';
 import { OperatorSegment } from './OperatorSegment';
 import { AdHocVariableFilter } from 'app/features/templating/types';
 import { SelectableValue } from '@grafana/data';
@@ -71,7 +71,7 @@ function filterAddButton(key: string | null): ReactElement | undefined {
 
   return (
     <a className="gf-form-label query-part">
-      <i className="fa fa-plus" />
+      <Icon name="plus-circle" />
     </a>
   );
 }
diff --git a/public/app/features/variables/editor/VariableEditorContainer.tsx b/public/app/features/variables/editor/VariableEditorContainer.tsx
index 5bd687ce56d..aac856cf91e 100644
--- a/public/app/features/variables/editor/VariableEditorContainer.tsx
+++ b/public/app/features/variables/editor/VariableEditorContainer.tsx
@@ -2,6 +2,7 @@ import React, { MouseEvent, PureComponent } from 'react';
 import { NEW_VARIABLE_ID, toVariableIdentifier, toVariablePayload, VariableIdentifier } from '../state/types';
 import { StoreState } from '../../../types';
 import { e2e } from '@grafana/e2e';
+import { Icon } from '@grafana/ui';
 import { VariableEditorList } from './VariableEditorList';
 import { VariableEditorEditor } from './VariableEditorEditor';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -74,8 +75,8 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
             </a>
             {this.props.idInEditor === NEW_VARIABLE_ID && (
               <span>
-                <i
-                  className="fa fa-fw fa-chevron-right"
+                <Icon
+                  name="angle-right"
                   aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.modeLabelNew}
                 />
                 New
@@ -83,8 +84,8 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
             )}
             {this.props.idInEditor && this.props.idInEditor !== NEW_VARIABLE_ID && (
               <span>
-                <i
-                  className="fa fa-fw fa-chevron-right"
+                <Icon
+                  name="angle-right"
                   aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.modeLabelEdit}
                 />
                 Edit
diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx
index 3ae1e835e48..19e8b708ae3 100644
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -110,9 +110,9 @@ export class VariableEditorList extends PureComponent<Props> {
 
                         <td style={{ width: '1%' }}>
                           {index > 0 && (
-                            <i
+                            <Icon
                               onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)}
-                              className="pointer fa fa-arrow-up"
+                              name="arrow-up"
                               aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowArrowUpButtons(
                                 variable.name
                               )}
@@ -121,9 +121,9 @@ export class VariableEditorList extends PureComponent<Props> {
                         </td>
                         <td style={{ width: '1%' }}>
                           {index < this.props.variables.length - 1 && (
-                            <i
+                            <Icon
                               onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)}
-                              className="pointer fa fa-arrow-down"
+                              name="arrow-down"
                               aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowArrowDownButtons(
                                 variable.name
                               )}
@@ -149,7 +149,7 @@ export class VariableEditorList extends PureComponent<Props> {
                               variable.name
                             )}
                           >
-                            <Icon name="times" />
+                            <Icon name="times" style={{ marginBottom: 0 }} />
                           </a>
                         </td>
                       </tr>
diff --git a/public/app/partials/confirm_modal.html b/public/app/partials/confirm_modal.html
index 940eae3bbe8..8dd55248274 100644
--- a/public/app/partials/confirm_modal.html
+++ b/public/app/partials/confirm_modal.html
@@ -1,7 +1,7 @@
 <div class="modal-body" ng-cloak>
   <div class="modal-header">
     <h2 class="modal-header-title">
-      <i class="fa {{icon}}"></i>
+      <icon name="'{{icon}}'" size="'lg'"></icon>
       <span class="p-l-1">
         {{title}}
       </span>
diff --git a/public/app/partials/error.html b/public/app/partials/error.html
index 2c3cefc9748..59739d8bfce 100644
--- a/public/app/partials/error.html
+++ b/public/app/partials/error.html
@@ -13,7 +13,7 @@
           <p>0%</p>
         </div>
         <div class="error-column image-box">
-          <img src="public/img/graph404.svg" width="100%">
+          <img src="public/img/graph404.svg" width="100%" />
           <div class="error-row error-space-between">
             <p class="graph-text">Then</p>
             <p class="graph-text">Now</p>
@@ -26,7 +26,7 @@
         <p class="current-text">current</p>
       </div>
       <div class="error-row" style="flex: 1">
-        <i class="fa fa-minus error-minus"></i>
+        <icon name="minus-circle'" className="error-minus"></icon>
         <div class="error-column error-space-between error-full-width">
           <div class="error-row error-space-between">
             <p>Chances you are on the page you are looking for.</p>
@@ -34,10 +34,11 @@
           </div>
           <div>
             <h3>Sorry for the inconvenience</h3>
-            <p>Please go back to your
-            <a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
-            <p>If the error persists, seek help on the
-            <a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.</p>
+            <p>Please go back to your <a href="{{appSubUrl}}/" class="error-link">home dashboard</a> and try again.</p>
+            <p>
+              If the error persists, seek help on the
+              <a href="https://community.grafana.com" target="_blank" class="error-link">community site</a>.
+            </p>
           </div>
         </div>
       </div>
diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html
index 79895ae1b23..fbc9586e306 100644
--- a/public/app/partials/valueSelectDropdown.html
+++ b/public/app/partials/valueSelectDropdown.html
@@ -10,7 +10,7 @@
         &nbsp;&nbsp;<icon name="'tag-alt'"></icon>&nbsp; {{tag.text}}
       </span>
     </span>
-    <icon name="'angle-down'"></icon>
+    <icon name="'angle-down'" style="margin-left: 4px; margin-bottom: -2px;"></icon>
   </a>
 
   <input
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
index 43b03071d95..51e822b4431 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx
@@ -27,7 +27,7 @@ describe('Dimensions', () => {
       );
 
       expect(wrapper.html()).toEqual(
-        `<div class="gf-form"><a class="gf-form-label query-part"><i class="fa fa-plus"></i></a></div>`
+        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
       );
     });
   });
@@ -43,7 +43,7 @@ describe('Dimensions', () => {
         />
       );
       expect(wrapper.html()).toEqual(
-        `<div class="gf-form"><a class="gf-form-label query-part">somekey</a></div><label class="gf-form-label query-segment-operator">=</label><div class="gf-form"><a class="gf-form-label query-part">somevalue</a></div><div class="gf-form"><a class="gf-form-label query-part"><i class="fa fa-plus"></i></a></div>`
+        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
       );
     });
   });
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
index e164aef330c..e6f02bb854b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, Fragment, useState, useEffect } from 'react';
 import isEqual from 'lodash/isEqual';
 import { SelectableValue } from '@grafana/data';
-import { SegmentAsync } from '@grafana/ui';
+import { SegmentAsync, Icon } from '@grafana/ui';
 import { SelectableStrings } from '../types';
 
 export interface Props {
@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
           allowCustomValue
           Component={
             <a className="gf-form-label query-part">
-              <i className="fa fa-plus" />
+              <Icon name="plus-circle" />
             </a>
           }
           loadOptions={() => loadKeys().then(excludeUsedKeys)}
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx
index f3b64de2c30..0e6c797e7b3 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { LegacyForms, ValidationEvents, EventsWithValidation } from '@grafana/ui';
+import { LegacyForms, ValidationEvents, EventsWithValidation, Icon } from '@grafana/ui';
 const { Input, Switch } = LegacyForms;
 import isEmpty from 'lodash/isEmpty';
 import { CloudWatchQuery } from '../types';
@@ -139,8 +139,7 @@ export class QueryEditor extends PureComponent<Props, State> {
                   })
                 }
               >
-                <i className={`fa fa-caret-${showMeta ? 'down' : 'right'}`} /> {showMeta ? 'Hide' : 'Show'} Query
-                Preview
+                <Icon name={showMeta ? 'angle-down' : 'angle-right'} /> {showMeta ? 'Hide' : 'Show'} Query Preview
               </a>
             </label>
           </div>
diff --git a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
index 464e375c926..8f49dcb75a4 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { SelectableStrings } from '../types';
 import { SelectableValue } from '@grafana/data';
-import { Segment } from '@grafana/ui';
+import { Segment, Icon } from '@grafana/ui';
 
 export interface Props {
   values: string[];
@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
     <Segment
       Component={
         <a className="gf-form-label query-part">
-          <i className="fa fa-plus" />
+          <Icon name="plus-circle" />
         </a>
       }
       allowCustomValue
diff --git a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
index e4bae094d06..9791a45a95d 100644
--- a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
+++ b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap
@@ -29,9 +29,22 @@ Array [
     <a
       className="gf-form-label query-part"
     >
-      <i
-        className="fa fa-plus"
-      />
+      <div
+        className="css-1cvxpvr"
+      >
+        <svg
+          className="css-sr6nr"
+          fill="currentColor"
+          height={16}
+          viewBox="0 0 24 24"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
+          />
+        </svg>
+      </div>
     </a>
   </div>,
 ]
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
index c82f79ed183..1b1b0424ce8 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Types
-import { LegacyForms } from '@grafana/ui';
+import { LegacyForms, Icon } from '@grafana/ui';
 import { DataQuery, DataQueryError, PanelData, DataFrame, SelectableValue } from '@grafana/data';
 import { DashboardQuery } from './types';
 import config from 'app/core/config';
@@ -118,7 +118,7 @@ export class DashboardQueryEditor extends PureComponent<Props, State> {
                 <a href={editURL}>
                   {target.query}
                   &nbsp;
-                  <i className="fa fa-external-link" />
+                  <Icon name="external-link-alt" />
                 </a>
               </div>
             </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
index b17f03bced3..a9fbcee4a2b 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html
@@ -1,169 +1,239 @@
 <div class="gf-form-inline">
-	<div class="gf-form">
-		<label class="gf-form-label query-keyword width-7">
-			<span ng-show="isFirst">Group by</span>
-			<span ng-hide="isFirst">Then by</span>
-		</label>
+  <div class="gf-form">
+    <label class="gf-form-label query-keyword width-7">
+      <span ng-show="isFirst">Group by</span>
+      <span ng-hide="isFirst">Then by</span>
+    </label>
 
-		<gf-form-dropdown model="agg.type"
-											lookup-text="true"
-											get-options="getBucketAggTypes()"
-											on-change="onTypeChanged()"
-											allow-custom="false"
-											label-mode="true"
-											css-class="width-10">
-		</gf-form-dropdown>
-		<gf-form-dropdown ng-if="agg.field"
-											model="agg.field"
-											get-options="getFieldsInternal()"
-											on-change="onChange()"
-											allow-custom="false"
-											label-mode="true"
-											css-class="width-12">
-		</gf-form-dropdown>
-	</div>
+    <gf-form-dropdown
+      model="agg.type"
+      lookup-text="true"
+      get-options="getBucketAggTypes()"
+      on-change="onTypeChanged()"
+      allow-custom="false"
+      label-mode="true"
+      css-class="width-10"
+    >
+    </gf-form-dropdown>
+    <gf-form-dropdown
+      ng-if="agg.field"
+      model="agg.field"
+      get-options="getFieldsInternal()"
+      on-change="onChange()"
+      allow-custom="false"
+      label-mode="true"
+      css-class="width-12"
+    >
+    </gf-form-dropdown>
+  </div>
 
-	<div class="gf-form gf-form--grow">
-		<label class="gf-form-label gf-form-label--grow">
-			<a ng-click="toggleOptions()">
-				<i class="fa fa-caret-down" ng-show="showOptions"></i>
-				<i class="fa fa-caret-right" ng-hide="showOptions"></i>
-				{{settingsLinkText}}
-			</a>
-		</label>
-	</div>
+  <div class="gf-form gf-form--grow">
+    <label class="gf-form-label gf-form-label--grow">
+      <a ng-click="toggleOptions()">
+        <icon name="'angle-down'" ng-show="showOptions"></icon>
+        <icon name="'angle-right'" ng-hide="showOptions"></icon>
+        {{settingsLinkText}}
+      </a>
+    </label>
+  </div>
 
-	<div class="gf-form">
-		<label class="gf-form-label" ng-if="isFirst">
-			<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
-		</label>
-		<label class="gf-form-label" ng-if="bucketAggCount > 1">
-			<a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
-		</label>
-	</div>
+  <div class="gf-form">
+    <label class="gf-form-label" ng-if="isFirst">
+      <a class="pointer" ng-click="addBucketAgg()"><icon name="'plus'"></icon></a>
+    </label>
+    <label class="gf-form-label" ng-if="bucketAggCount > 1">
+      <a class="pointer" ng-click="removeBucketAgg()"><icon name="'minus'"></icon></a>
+    </label>
+  </div>
 </div>
 
 <div class="gf-form-group" ng-if="showOptions">
-	<div ng-if="agg.type === 'date_histogram'">
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Interval</label>
-			<gf-form-dropdown model="agg.settings.interval"
-												get-options="getIntervalOptions()"
-												on-change="onChangeInternal()"
-												allow-custom="true"
-												label-mode="true"
-												css-class="width-12">
-			</gf-form-dropdown>
-		</div>
+  <div ng-if="agg.type === 'date_histogram'">
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Interval</label>
+      <gf-form-dropdown
+        model="agg.settings.interval"
+        get-options="getIntervalOptions()"
+        on-change="onChangeInternal()"
+        allow-custom="true"
+        label-mode="true"
+        css-class="width-12"
+      >
+      </gf-form-dropdown>
+    </div>
 
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Min Doc Count</label>
-			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
-		</div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Min Doc Count</label>
+      <input
+        type="number"
+        class="gf-form-input max-width-12"
+        ng-model="agg.settings.min_doc_count"
+        ng-blur="onChangeInternal()"
+      />
+    </div>
 
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">
-				Trim edges
-				<info-popover mode="right-normal">
-					Trim the edges on the timeseries datapoints
-				</info-popover>
-			</label>
-			<input class="gf-form-input max-width-12" type="number" ng-model="agg.settings.trimEdges" ng-change="onChangeInternal()">
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">
-				Offset
-				<info-popover mode="right-normal">
-					Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as 1h for an hour, or 1d for a day
-				</info-popover>
-			</label>
-			<input class="gf-form-input max-width-12" type="text" ng-model="agg.settings.offset" ng-change="onChangeInternal()">
-		</div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">
+        Trim edges
+        <info-popover mode="right-normal">
+          Trim the edges on the timeseries datapoints
+        </info-popover>
+      </label>
+      <input
+        class="gf-form-input max-width-12"
+        type="number"
+        ng-model="agg.settings.trimEdges"
+        ng-change="onChangeInternal()"
+      />
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">
+        Offset
+        <info-popover mode="right-normal">
+          Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as
+          1h for an hour, or 1d for a day
+        </info-popover>
+      </label>
+      <input
+        class="gf-form-input max-width-12"
+        type="text"
+        ng-model="agg.settings.offset"
+        ng-change="onChangeInternal()"
+      />
+    </div>
+  </div>
 
-	</div>
+  <div ng-if="agg.type === 'histogram'">
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Interval</label>
+      <input
+        type="number"
+        class="gf-form-input max-width-12"
+        ng-model="agg.settings.interval"
+        ng-blur="onChangeInternal()"
+      />
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Min Doc Count</label>
+      <input
+        type="number"
+        class="gf-form-input max-width-12"
+        ng-model="agg.settings.min_doc_count"
+        ng-blur="onChangeInternal()"
+      />
+    </div>
+  </div>
 
-	<div ng-if="agg.type === 'histogram'">
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Interval</label>
-			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.interval" ng-blur="onChangeInternal()">
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Min Doc Count</label>
-			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
-		</div>
-	</div>
+  <div ng-if="agg.type === 'terms'">
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Order</label>
+      <gf-form-dropdown
+        model="agg.settings.order"
+        lookup-text="true"
+        get-options="getOrderOptions()"
+        on-change="onChangeInternal()"
+        label-mode="true"
+        css-class="width-12"
+      >
+      </gf-form-dropdown>
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Size</label>
+      <gf-form-dropdown
+        model="agg.settings.size"
+        lookup-text="true"
+        get-options="getSizeOptions()"
+        on-change="onChangeInternal()"
+        label-mode="true"
+        allow-custom="true"
+        css-class="width-12"
+      >
+      </gf-form-dropdown>
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Min Doc Count</label>
+      <input
+        type="number"
+        class="gf-form-input max-width-12"
+        ng-model="agg.settings.min_doc_count"
+        ng-blur="onChangeInternal()"
+      />
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Order By</label>
+      <gf-form-dropdown
+        model="agg.settings.orderBy"
+        lookup-text="true"
+        get-options="getOrderByOptions()"
+        on-change="onChangeInternal()"
+        label-mode="true"
+        css-class="width-12"
+      >
+      </gf-form-dropdown>
+    </div>
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">
+        Missing
+        <info-popover mode="right-normal">
+          The missing parameter defines how documents that are missing a value should be treated. By default they will
+          be ignored but it is also possible to treat them as if they had a value
+        </info-popover>
+      </label>
+      <input
+        type="text"
+        class="gf-form-input max-width-12"
+        empty-to-null
+        ng-model="agg.settings.missing"
+        ng-blur="onChangeInternal()"
+        spellcheck="false"
+      />
+    </div>
+  </div>
 
-	<div ng-if="agg.type === 'terms'">
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Order</label>
-			<gf-form-dropdown model="agg.settings.order"
-											  lookup-text="true"
-												get-options="getOrderOptions()"
-												on-change="onChangeInternal()"
-												label-mode="true"
-												css-class="width-12">
-			</gf-form-dropdown>
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Size</label>
-			<gf-form-dropdown model="agg.settings.size"
-											  lookup-text="true"
-												get-options="getSizeOptions()"
-												on-change="onChangeInternal()"
-												label-mode="true"
-                        allow-custom="true"
-												css-class="width-12">
-			</gf-form-dropdown>
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Min Doc Count</label>
-			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.min_doc_count" ng-blur="onChangeInternal()">
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Order By</label>
-			<gf-form-dropdown model="agg.settings.orderBy"
-											  lookup-text="true"
-												get-options="getOrderByOptions()"
-												on-change="onChangeInternal()"
-												label-mode="true"
-												css-class="width-12">
-			</gf-form-dropdown>
-		</div>
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">
-				Missing
-				<info-popover mode="right-normal">
-					The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value
-				</info-popover>
-			</label>
-			<input type="text" class="gf-form-input max-width-12" empty-to-null ng-model="agg.settings.missing" ng-blur="onChangeInternal()" spellcheck='false'>
-		</div>
-	</div>
-
-	<div ng-if="agg.type === 'filters'">
-		<div class="gf-form-inline offset-width-7" ng-repeat="filter in agg.settings.filters">
-			<div class="gf-form">
-				<label class="gf-form-label width-10">Query {{$index + 1}}</label>
-				<input type="text" class="gf-form-input max-width-12" ng-model="filter.query" spellcheck='false' placeholder="Lucene query" ng-blur="onChangeInternal()">
-				<label class="gf-form-label width-10">Label {{$index + 1}}</label>
-				<input type="text" class="gf-form-input max-width-12" ng-model="filter.label" spellcheck='false' placeholder="Label" ng-blur="onChangeInternal()">
-			</div>
-			<div class="gf-form">
-				<label class="gf-form-label" ng-if="$first">
-					<a class="pointer" ng-click="addFiltersQuery()"><i class="fa fa-plus"></i></a>
-				</label>
-				<label class="gf-form-label" ng-if="!$first">
-					<a class="pointer" ng-click="removeFiltersQuery(filter)"><i class="fa fa-minus"></i></a>
-				</label>
-			</div>
-		</div>
-	</div>
-
-	<div ng-if="agg.type === 'geohash_grid'">
-		<div class="gf-form offset-width-7">
-			<label class="gf-form-label width-10">Precision</label>
-			<input type="number" class="gf-form-input max-width-12" ng-model="agg.settings.precision" spellcheck='false' placeholder="3" ng-blur="onChangeInternal()">
-		</div>
-	</div>
+  <div ng-if="agg.type === 'filters'">
+    <div class="gf-form-inline offset-width-7" ng-repeat="filter in agg.settings.filters">
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Query {{$index + 1}}</label>
+        <input
+          type="text"
+          class="gf-form-input max-width-12"
+          ng-model="filter.query"
+          spellcheck="false"
+          placeholder="Lucene query"
+          ng-blur="onChangeInternal()"
+        />
+        <label class="gf-form-label width-10">Label {{$index + 1}}</label>
+        <input
+          type="text"
+          class="gf-form-input max-width-12"
+          ng-model="filter.label"
+          spellcheck="false"
+          placeholder="Label"
+          ng-blur="onChangeInternal()"
+        />
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label" ng-if="$first">
+          <a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus-circle'"></icon></a>
+        </label>
+        <label class="gf-form-label" ng-if="!$first">
+          <a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus-circle'"></icon></a>
+        </label>
+      </div>
+    </div>
+  </div>
 
+  <div ng-if="agg.type === 'geohash_grid'">
+    <div class="gf-form offset-width-7">
+      <label class="gf-form-label width-10">Precision</label>
+      <input
+        type="number"
+        class="gf-form-input max-width-12"
+        ng-model="agg.settings.precision"
+        spellcheck="false"
+        placeholder="3"
+        ng-blur="onChangeInternal()"
+      />
+    </div>
+  </div>
 </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
index 362b0ddb486..ef803f7afb7 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html
@@ -3,9 +3,9 @@
 		<label class="gf-form-label query-keyword width-7">
 			Metric
 			&nbsp;
-			<a ng-click="toggleShowMetric()" bs-tooltip="'Click to toggle show / hide metric'">
-				<i class="fa fa-eye" ng-hide="agg.hide"></i>
-				<i class="fa fa-eye-slash" ng-show="agg.hide"></i>
+			<a ng-click="toggleShowMetric()" bs-tooltip="'Click to toggle show / hide metric'" style="margin-top: 2px;">
+				<icon name="'eye'" size="'sm'" ng-hide="agg.hide"></icon>
+				<icon name="'eye-slash'" size="'sm'" ng-show="agg.hide"></icon>
 			</a>
 		</label>
 	</div>
@@ -19,8 +19,8 @@
   <div class="gf-form gf-form--grow" ng-if="aggDef.isPipelineAgg && aggDef.supportsMultipleBucketPaths">
 		<label class="gf-form-label gf-form-label--grow">
 			<a ng-click="toggleVariables()">
-				<i class="fa fa-caret-down" ng-show="showVariables"></i>
-				<i class="fa fa-caret-right" ng-hide="showVariables"></i>
+				<icon name="'angle-down'" ng-show="showVariables"></icon>
+				<icon name="'angle-right'" ng-hide="showVariables"></icon>
         {{variablesLinkText}}
 			</a>
 		</label>
@@ -29,8 +29,8 @@
 	<div class="gf-form gf-form--grow">
 		<label class="gf-form-label gf-form-label--grow">
 			<a ng-click="toggleOptions()" ng-if="settingsLinkText">
-				<i class="fa fa-caret-down" ng-show="showOptions"></i>
-				<i class="fa fa-caret-right" ng-hide="showOptions"></i>
+				<icon name="'angle-down'" ng-show="showOptions"></icon>
+				<icon name="'angle-right'" ng-hide="showOptions"></icon>
 					{{settingsLinkText}}
 			</a>
 		</label>
@@ -38,10 +38,10 @@
 
 	<div class="gf-form">
 		<label class="gf-form-label" ng-if="isFirst">
-			<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
+			<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus-circle'"></icon></a>
 		</label>
 		<label class="gf-form-label" ng-if="!isSingle">
-			<a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
+			<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus-circle'"></icon></a>
 		</label>
 	</div>
 </div>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
index 66bf5c8467b..fdee5f00a97 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html
@@ -1,20 +1,46 @@
 <div ng-repeat="var in variables">
   <div class="gf-form offset-width-7" ng-if="$index === 0">
     <label class="gf-form-label width-10">Variables</label>
-    <input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
-    <metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+    <input
+      type="text"
+      class="gf-form-input max-width-12"
+      ng-model="var.name"
+      placeholder="Variable name"
+      ng-blur="onChangeInternal()"
+      spellcheck="false"
+    />
+    <metric-segment-model
+      property="var.pipelineAgg"
+      options="options"
+      on-change="onChangeInternal()"
+      custom="false"
+      css-class="width-12"
+    ></metric-segment-model>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
     </label>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="add()"><i class="fa fa-plus"></i></a>
+      <a class="pointer" ng-click="add()"><icon name="'plus-circle'"></icon></a>
     </label>
   </div>
   <div class="gf-form offset-width-17" ng-if="$index !== 0">
-    <input type="text" class="gf-form-input max-width-12" ng-model="var.name" placeholder="Variable name" ng-blur="onChangeInternal()" spellcheck='false'>
-    <metric-segment-model property="var.pipelineAgg" options="options" on-change="onChangeInternal()" custom="false" css-class="width-12"></metric-segment-model>
+    <input
+      type="text"
+      class="gf-form-input max-width-12"
+      ng-model="var.name"
+      placeholder="Variable name"
+      ng-blur="onChangeInternal()"
+      spellcheck="false"
+    />
+    <metric-segment-model
+      property="var.pipelineAgg"
+      options="options"
+      on-change="onChangeInternal()"
+      custom="false"
+      css-class="width-12"
+    ></metric-segment-model>
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><i class="fa fa-minus"></i></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
     </label>
   </div>
 </div>
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
index 7a855a10b44..63e227c063a 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
@@ -2,13 +2,22 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Service</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <select class="gf-form-input service-dropdown" ng-model="ctrl.annotation.queryType" ng-options="f as f for f in ['Application Insights', 'Azure Monitor', 'Azure Log Analytics']"></select>
+      <select
+        class="gf-form-input service-dropdown"
+        ng-model="ctrl.annotation.queryType"
+        ng-options="f as f for f in ['Application Insights', 'Azure Monitor', 'Azure Log Analytics']"
+      ></select>
     </div>
   </div>
   <div class="gf-form" ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'">
     <label class="gf-form-label query-keyword width-9">Subscription</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <select class="gf-form-input service-dropdown" ng-model="ctrl.annotation.subscription" ng-options="f.value as f.text for f in ctrl.subscriptions" ng-change="ctrl.onSubscriptionChange()"></select>
+      <select
+        class="gf-form-input service-dropdown"
+        ng-model="ctrl.annotation.subscription"
+        ng-options="f.value as f.text for f in ctrl.subscriptions"
+        ng-change="ctrl.onSubscriptionChange()"
+      ></select>
     </div>
   </div>
   <div ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'">
@@ -16,7 +25,11 @@
       <div class="gf-form">
         <label class="gf-form-label query-keyword width-9">Workspace</label>
         <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-          <select class="gf-form-input min-width-12" ng-model="ctrl.annotation.workspace" ng-options="f.value as f.text for f in ctrl.workspaces"></select>
+          <select
+            class="gf-form-input min-width-12"
+            ng-model="ctrl.annotation.workspace"
+            ng-options="f.value as f.text for f in ctrl.workspaces"
+          ></select>
         </div>
       </div>
       <div class="gf-form">
@@ -30,12 +43,12 @@
       </div>
     </div>
     <kusto-editor
-        class="gf-form gf-form--grow"
-        query="ctrl.annotation.rawQuery"
-        variables="ctrl.templateVariables"
-        change="ctrl.onLogAnalyticsQueryChange"
-        getSchema="ctrl.getAzureLogAnalyticsSchema"
-      />
+      class="gf-form gf-form--grow"
+      query="ctrl.annotation.rawQuery"
+      variables="ctrl.templateVariables"
+      change="ctrl.onLogAnalyticsQueryChange"
+      getSchema="ctrl.getAzureLogAnalyticsSchema"
+    />
   </div>
 
   <div class="gf-form-inline" ng-show="ctrl.annotation.queryType !== 'Azure Log Analytics'">
@@ -48,14 +61,17 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
     </div>
   </div>
 
   <div class="gf-form" ng-show="ctrl.showHelp">
-    <pre class="gf-form-pre alert alert-info" ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'"><h6>Annotation Query Format</h6>
+    <pre
+      class="gf-form-pre alert alert-info"
+      ng-show="ctrl.annotation.queryType === 'Azure Log Analytics'"
+    ><h6>Annotation Query Format</h6>
 An annotation is an event that is overlaid on top of graphs. The query can have up to three columns per row, the datetime column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
 
 - column with the datetime type.
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
index 0ed8408d6a4..2103f330507 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
@@ -244,15 +244,15 @@
       <div class="gf-form">
         <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
           Show Help
-          <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-          <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+          <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+          <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
         </label>
       </div>
       <div class="gf-form" ng-show="ctrl.lastQuery">
         <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
           Raw Query
-          <i class="fa fa-caret-down" ng-show="ctrl.showLastQuery"></i>
-          <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuery"></i>
+          <icon name="'angle-down'" ng-show="ctrl.showLastQuery"></icon>
+          <icon name="'angle-right'" ng-hide="ctrl.showLastQuery"></icon>
         </label>
       </div>
       <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx b/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
index 618e0fac2de..932ff01422c 100644
--- a/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
+++ b/public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
@@ -54,7 +54,7 @@ export const FunctionEditorControls = (
         justifyContent: 'space-between',
       }}
     >
-      <span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
+      <Icon name="arrow-left" onClick={() => onMoveLeft(func)} />
       <FunctionHelpButton
         name={func.def.name}
         description={func.def.description}
diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.ts b/public/app/plugins/datasource/graphite/add_graphite_func.ts
index 5b967f8f88e..51dd5c26a2b 100644
--- a/public/app/plugins/datasource/graphite/add_graphite_func.ts
+++ b/public/app/plugins/datasource/graphite/add_graphite_func.ts
@@ -13,7 +13,7 @@ export function graphiteAddFunc($compile: any) {
   const buttonTemplate =
     '<a class="gf-form-label query-part dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
-    '<i class="fa fa-plus"></i></a>';
+    '<icon name="fa fa-plus"></i></a>';
 
   return {
     link: function($scope: any, elem: JQuery) {
diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html
index 51c25100c1e..ea74dddf507 100644
--- a/public/app/plugins/datasource/graphite/partials/query.editor.html
+++ b/public/app/plugins/datasource/graphite/partials/query.editor.html
@@ -51,7 +51,7 @@
       </div>
 
       <div ng-if="ctrl.paused" class="gf-form">
-        <a ng-click="ctrl.unpause()" class="gf-form-label query-part"><i class="fa fa-play"></i></a>
+        <a ng-click="ctrl.unpause()" class="gf-form-label query-part"><icon name="'play'"></icon></a>
       </div>
 
       <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html
index 0d09141cfd3..c13cace91b0 100644
--- a/public/app/plugins/datasource/influxdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html
@@ -135,7 +135,7 @@
       <div class="gf-form">
         <label class="gf-form-label query-keyword width-7">ORDER BY</label>
         <label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()"
-          >time <span class="query-keyword">DESC</span> <icon name="'times'"></icon
+          >time <span class="query-keyword">DESC</span> <icon name="'times'" style="margin-bottom: 0;"></icon
         ></label>
       </div>
       <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/mssql/partials/annotations.editor.html b/public/app/plugins/datasource/mssql/partials/annotations.editor.html
index 881741368f4..e8155042fb3 100644
--- a/public/app/plugins/datasource/mssql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/annotations.editor.html
@@ -1,23 +1,32 @@
-
 <div class="gf-form-group">
   <div class="gf-form-inline">
-		<div class="gf-form gf-form--grow">
-			<textarea rows="10" class="gf-form-input" ng-model="ctrl.annotation.rawQuery" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
-		</div>
-	</div>
+    <div class="gf-form gf-form--grow">
+      <textarea
+        rows="10"
+        class="gf-form-input"
+        ng-model="ctrl.annotation.rawQuery"
+        spellcheck="false"
+        placeholder="query expression"
+        data-min-length="0"
+        data-items="100"
+        ng-model-onblur
+        ng-change="ctrl.panelCtrl.refresh()"
+      ></textarea>
+    </div>
+  </div>
 
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
-		</div>
+    </div>
   </div>
 
-  <div class="gf-form"  ng-show="ctrl.showHelp">
-		<pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
+  <div class="gf-form" ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
 An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the <b>time</b> column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
 
 - column with alias: <b>time</b> for the annotation event time. Use epoch time or any native date data type.
@@ -41,5 +50,5 @@ Or build your own conditionals using these macros which just return the values:
 - $__unixEpochNanoFrom() -&gt;  1494410783152415214
 - $__unixEpochNanoTo() -&gt;  1494497183142514872
 		</pre>
-	</div>
+  </div>
 </div>
diff --git a/public/app/plugins/datasource/mssql/partials/query.editor.html b/public/app/plugins/datasource/mssql/partials/query.editor.html
index f48af291216..21bde163ab5 100644
--- a/public/app/plugins/datasource/mssql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/query.editor.html
@@ -16,15 +16,15 @@
 		<div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
 		</div>
 		<div class="gf-form" ng-show="ctrl.lastQueryMeta">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
         Generated SQL
-        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
       </label>
 		</div>
 		<div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/mysql/partials/annotations.editor.html b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
index 5dcd03e6517..acfe6038d01 100644
--- a/public/app/plugins/datasource/mysql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
@@ -1,23 +1,32 @@
-
 <div class="gf-form-group">
   <div class="gf-form-inline">
-		<div class="gf-form gf-form--grow">
-			<textarea rows="10" class="gf-form-input" ng-model="ctrl.annotation.rawQuery" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
-		</div>
-	</div>
+    <div class="gf-form gf-form--grow">
+      <textarea
+        rows="10"
+        class="gf-form-input"
+        ng-model="ctrl.annotation.rawQuery"
+        spellcheck="false"
+        placeholder="query expression"
+        data-min-length="0"
+        data-items="100"
+        ng-model-onblur
+        ng-change="ctrl.panelCtrl.refresh()"
+      ></textarea>
+    </div>
+  </div>
 
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
-		</div>
+    </div>
   </div>
 
-  <div class="gf-form"  ng-show="ctrl.showHelp">
-		<pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
+  <div class="gf-form" ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
 An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the <i>time</i> or <i>time_sec</i> column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
 
 - column with alias: <b>time</b> or <i>time_sec</i> for the annotation event time. Use epoch time or any native date data type.
@@ -41,5 +50,5 @@ Or build your own conditionals using these macros which just return the values:
 - $__unixEpochNanoFrom() -&gt;  1494410783152415214
 - $__unixEpochNanoTo() -&gt;  1494497183142514872
 		</pre>
-	</div>
+  </div>
 </div>
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
index 25f33b6a534..1c59cb4dad3 100644
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -116,15 +116,15 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
     </div>
     <div class="gf-form" ng-show="ctrl.lastQueryMeta">
       <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
         Generated SQL
-        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
       </label>
     </div>
     <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts
index b3f089ca452..a3e87126d41 100644
--- a/public/app/plugins/datasource/mysql/query_ctrl.ts
+++ b/public/app/plugins/datasource/mysql/query_ctrl.ts
@@ -166,7 +166,7 @@ export class MysqlQueryCtrl extends QueryCtrl {
       appEvents.emit(CoreEvents.showConfirmModal, {
         title: 'Warning',
         text2: 'Switching to query builder may overwrite your raw SQL.',
-        icon: 'fa-exclamation',
+        icon: 'exclamation-triangle',
         yesText: 'Switch',
         onConfirm: () => {
           this.target.rawQuery = !this.target.rawQuery;
diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
index 5418e420b20..18725bac372 100644
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -4,7 +4,7 @@
 			<label class="gf-form-label query-keyword width-8">
 				Metric
 				<label class="gf-form-label" bs-tooltip="ctrl.errors.metric" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.metric">
-					<i class="fa fa-warning"></i>
+					<icon name="'exclamation-triangle'"></icon>
 				</label>
 			</label>
 			<input type="text" class="gf-form-input" ng-model="ctrl.target.metric"
@@ -16,7 +16,7 @@
 			<label class="gf-form-label query-keyword">
 				Aggregator
 				<a bs-tooltip="ctrl.errors.aggregator" style="color: rgb(229, 189, 28)" ng-show="ctrl.errors.aggregator">
-					<i class="fa fa-warning"></i>
+					<icon name="'exclamation-triangle'"></icon>
 				</a>
 			</label>
 			<div class="gf-form-select-wrapper max-width-15">
@@ -104,7 +104,7 @@
 			<div ng-repeat="fil in ctrl.target.filters track by $index" class="gf-form-label">
 				{{fil.tagk}}&nbsp;=&nbsp;{{fil.type}}&#40;{{fil.filter}}&#41;&nbsp;&#44&nbsp;groupBy&nbsp;=&nbsp;{{fil.groupBy}}
 				<a ng-click="ctrl.editFilter(fil, $index)">
-					<i class="fa fa-pencil"></i>
+					<icon name="'pen'"></icon>
 				</a>
 				<a ng-click="ctrl.removeFilter($index)">
 					<icon name="'times'"></icon>
@@ -112,7 +112,7 @@
 			</div>
 			<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
 				<a ng-click="ctrl.addFilter()">
-					<i class="fa fa-plus"></i>
+					<icon name="'plus-circle'"></icon>
 				</a>
 			</label>
  		</div>
@@ -148,7 +148,7 @@
 			<div class="gf-form" ng-show="ctrl.addFilterMode">
 				<label class="gf-form-label" ng-show="ctrl.errors.filters">
 					<a bs-tooltip="ctrl.errors.filters" style="color: rgb(229, 189, 28)" >
-						<i class="fa fa-warning"></i>
+						<icon name="'exclamation-triangle'"></icon>
 					</a>
 				</label>
 				<label class="gf-form-label">
@@ -180,7 +180,7 @@
 			<label class="gf-form-label">
 				{{key}}&nbsp;=&nbsp;{{value}}
 				<a ng-click="ctrl.editTag(key, value)">
-					<i class="fa fa-pencil"></i>
+					<icon name="'pen'"></icon>
 				</a>
 				<a ng-click="ctrl.removeTag(key)">
 					<icon name="'times'"></icon>
@@ -190,7 +190,7 @@
 
 		<div class="gf-form" ng-hide="ctrl.addTagMode">
 			<label class="gf-form-label query-keyword">
-				<a ng-click="ctrl.addTag()"><i class="fa fa-plus"></i></a>
+				<a ng-click="ctrl.addTag()"><icon name="'plus-circle'"></icon></a>
 			</label>
 		</div>
 
@@ -208,7 +208,7 @@
 
 			<label class="gf-form-label" ng-show="ctrl.errors.tags">
 				<a bs-tooltip="ctrl.errors.tags" style="color: rgb(229, 189, 28)" >
-					<i class="fa fa-warning"></i>
+					<icon name="'exclamation-triangle'"></icon>
 				</a>
 			</label>
 			<label class="gf-form-label" >
diff --git a/public/app/plugins/datasource/postgres/partials/annotations.editor.html b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
index df4f9d53288..3d1c6d3064a 100644
--- a/public/app/plugins/datasource/postgres/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
@@ -1,23 +1,32 @@
-
 <div class="gf-form-group">
   <div class="gf-form-inline">
-		<div class="gf-form gf-form--grow">
-			<textarea rows="10" class="gf-form-input" ng-model="ctrl.annotation.rawQuery" spellcheck="false" placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"></textarea>
-		</div>
-	</div>
+    <div class="gf-form gf-form--grow">
+      <textarea
+        rows="10"
+        class="gf-form-input"
+        ng-model="ctrl.annotation.rawQuery"
+        spellcheck="false"
+        placeholder="query expression"
+        data-min-length="0"
+        data-items="100"
+        ng-model-onblur
+        ng-change="ctrl.panelCtrl.refresh()"
+      ></textarea>
+    </div>
+  </div>
 
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
-		</div>
+    </div>
   </div>
 
-  <div class="gf-form"  ng-show="ctrl.showHelp">
-		<pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
+  <div class="gf-form" ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info"><h6>Annotation Query Format</h6>
 An annotation is an event that is overlaid on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
 
 - column with alias: <b>time</b> for the annotation event time. Use epoch time or any native date data type.
@@ -41,5 +50,5 @@ Or build your own conditionals using these macros which just return the values:
 - $__unixEpochNanoFrom() -&gt;  1494410783152415214
 - $__unixEpochNanoTo() -&gt;  1494497183142514872
 		</pre>
-	</div>
+  </div>
 </div>
diff --git a/public/app/plugins/datasource/postgres/partials/config.html b/public/app/plugins/datasource/postgres/partials/config.html
index c10ccc842e3..f9bd4d28b3c 100644
--- a/public/app/plugins/datasource/postgres/partials/config.html
+++ b/public/app/plugins/datasource/postgres/partials/config.html
@@ -111,8 +111,8 @@
 		<gf-form-switch class="gf-form" label="TimescaleDB" label-class="width-9" checked="ctrl.current.jsonData.timescaledb" switch-class="max-width-6"></gf-form-switch>
     <label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleTimescaleDBHelp()">
       Help&nbsp;
-      <i class="fa fa-caret-down" ng-show="ctrl.showTimescaleDBHelp"></i>
-      <i class="fa fa-caret-right" ng-hide="ctrl.showTimescaleDBHelp">&nbsp;</i>
+      <icon name="'angle-down'" ng-show="ctrl.showTimescaleDBHelp"></icon>
+      <icon name="'angle-right'" ng-hide="ctrl.showTimescaleDBHelp">&nbsp;</icon>
     </label>
 	</div>
 
diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html
index 5411427cfe6..0ff831bfe99 100644
--- a/public/app/plugins/datasource/postgres/partials/query.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/query.editor.html
@@ -116,15 +116,15 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
+        <icon name="'angle-caret-down'" ng-show="ctrl.showHelp"></icon>
+        <icon name="'angle-caret-right'" ng-hide="ctrl.showHelp"></icon>
       </label>
     </div>
     <div class="gf-form" ng-show="ctrl.lastQueryMeta">
       <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
         Generated SQL
-        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
-        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
+        <icon name="'angle-caret-down'" ng-show="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-caret-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
       </label>
     </div>
     <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts
index 8696ee9c6a2..47bd8af72e3 100644
--- a/public/app/plugins/datasource/postgres/query_ctrl.ts
+++ b/public/app/plugins/datasource/postgres/query_ctrl.ts
@@ -197,7 +197,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
       appEvents.emit(CoreEvents.showConfirmModal, {
         title: 'Warning',
         text2: 'Switching to query builder may overwrite your raw SQL.',
-        icon: 'fa-exclamation',
+        icon: 'exclamation-triangle',
         yesText: 'Switch',
         onConfirm: () => {
           this.target.rawQuery = !this.target.rawQuery;
diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.tsx
index 3cf24c8e5f7..ee957f0f030 100644
--- a/public/app/plugins/datasource/prometheus/components/PromLink.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromLink.tsx
@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
 import { DataQueryRequest, PanelData } from '@grafana/data';
+import { Icon } from '@grafana/ui';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 interface Props {
@@ -61,7 +62,7 @@ export default class PromLink extends Component<Props, State> {
     const { href } = this.state;
     return (
       <a href={href} target="_blank" rel="noopener">
-        <i className="fa fa-share-square-o" /> Prometheus
+        <Icon name="share-alt" /> Prometheus
       </a>
     );
   }
diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
index 78024b70e80..10d69c0fba0 100644
--- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 
 import { SelectableValue } from '@grafana/data';
-import { Segment } from '@grafana/ui';
+import { Segment, Icon } from '@grafana/ui';
 import { getAggregationOptionsByMetric } from '../functions';
 import { ValueTypes, MetricKind } from '../constants';
 
@@ -85,7 +85,7 @@ export class Aggregations extends React.Component<Props, State> {
             <label className="gf-form-label gf-form-label--grow">
               <a onClick={this.onToggleDisplayAdvanced}>
                 <>
-                  <i className={`fa fa-caret-${displayAdvancedOptions ? 'down' : 'right'}`} /> Advanced Options
+                  <Icon name={displayAdvancedOptions ? 'angle-down' : 'angle-right'} /> Advanced Options
                 </>
               </a>
             </label>
diff --git a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
index 23406fe489f..d4076b3c84d 100644
--- a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Segment } from '@grafana/ui';
+import { Segment, Icon } from '@grafana/ui';
 import { labelsToGroupedOptions } from '../functions';
 import { systemLabels } from '../constants';
 
@@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent<Props> = ({ groupBys = [], values = [],
         <Segment
           Component={
             <a className="gf-form-label query-part">
-              <i className="fa fa-plus" />
+              <Icon name="plus-circle" />
             </a>
           }
           allowCustomValue
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index af59b102878..484d6acb4af 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { MetricDescriptor } from '../types';
+import { Icon } from '@grafana/ui';
 
 export interface Props {
   rawQuery: string;
@@ -39,14 +40,14 @@ export class Help extends React.Component<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form" onClick={this.onHelpClicked}>
             <label className="gf-form-label query-keyword pointer">
-              Show Help <i className={`fa fa-caret-${displayHelp ? 'down' : 'right'}`} />
+              Show Help <Icon name={displayHelp ? 'angle-down' : 'angle-right'} />
             </label>
           </div>
 
           {rawQuery && (
             <div className="gf-form" onClick={this.onRawQueryClicked}>
               <label className="gf-form-label query-keyword">
-                Raw Query <i className={`fa fa-caret-${displaRawQuery ? 'down' : 'right'}`} ng-show="ctrl.showHelp" />
+                Raw Query <Icon name={displaRawQuery ? 'angle-down' : 'angle-right'} ng-show="ctrl.showHelp" />
               </label>
             </div>
           )}
diff --git a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
index 2f77318980e..104e075298a 100644
--- a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, Fragment } from 'react';
 import _ from 'lodash';
 import { SelectableValue } from '@grafana/data';
-import { Segment } from '@grafana/ui';
+import { Segment, Icon } from '@grafana/ui';
 import { labelsToGroupedOptions, filtersToStringArray, stringArrayToFilters, toOption } from '../functions';
 import { Filter } from '../types';
 
@@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
           allowCustomValue
           Component={
             <a className="gf-form-label query-part">
-              <i className="fa fa-plus" />
+              <Icon name="plus-circle" />
             </a>
           }
           options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
index b38a8beed66..ef8d4ae38d1 100644
--- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
+++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/Aggregations.test.tsx.snap
@@ -29,9 +29,22 @@ Array [
         <a
           onClick={[Function]}
         >
-          <i
-            className="fa fa-caret-right"
-          />
+          <div
+            className="css-1cvxpvr"
+          >
+            <svg
+              className="css-sr6nr"
+              fill="currentColor"
+              height={16}
+              viewBox="0 0 24 24"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z"
+              />
+            </svg>
+          </div>
            Advanced Options
         </a>
       </label>
diff --git a/public/app/plugins/datasource/stackdriver/partials/config.html b/public/app/plugins/datasource/stackdriver/partials/config.html
index bd461f8f208..807f76cfc9f 100644
--- a/public/app/plugins/datasource/stackdriver/partials/config.html
+++ b/public/app/plugins/datasource/stackdriver/partials/config.html
@@ -86,7 +86,7 @@
         ></textarea>
       </div>
       <div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
-        <i class="fa fa-warning"></i>
+        <icon name="'exclamation-triangle'"></icon>
         {{valError}}
       </div>
     </div>
@@ -130,7 +130,7 @@
   class="gf-form-label"
   ng-hide="ctrl.current.secureJsonFields.privateKey || ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"
 >
-  <i class="fa fa-save"></i> Do not forget to save your changes after uploading a file.
+  <icon name="'save'"></icon> Do not forget to save your changes after uploading a file.
 </p>
 
 <div class="gf-form" ng-if="ctrl.gceError">
@@ -138,5 +138,5 @@
 </div>
 
 <p class="gf-form-label" ng-show="ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType">
-  <i class="fa fa-save"></i> Verify GCE default service account by clicking Save & Test
+  <icon name="'save'"></icon> Verify GCE default service account by clicking Save & Test
 </p>
diff --git a/public/app/plugins/datasource/testdata/module.tsx b/public/app/plugins/datasource/testdata/module.tsx
index 64d181ac5c3..2e059a20249 100644
--- a/public/app/plugins/datasource/testdata/module.tsx
+++ b/public/app/plugins/datasource/testdata/module.tsx
@@ -16,7 +16,7 @@ export const plugin = new DataSourcePlugin(TestDataDataSource)
   .setAnnotationQueryCtrl(TestDataAnnotationsQueryCtrl)
   .addConfigPage({
     title: 'Setup',
-    icon: 'fa fa-list-alt',
+    icon: 'list-ul',
     body: TestInfoTab,
     id: 'setup',
   });
diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html
index 59ae054837c..0d2232153bf 100644
--- a/public/app/plugins/panel/alertlist/module.html
+++ b/public/app/plugins/panel/alertlist/module.html
@@ -30,7 +30,7 @@
     <ol class="alert-rule-list">
       <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
         <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
-          <i class="{{al.stateModel.iconClass}}"></i>
+          <icon name="'{{al.stateModel.iconClass}}'" size="'xl'"></icon>
         </div>
         <div class="alert-rule-item__body">
           <div class="alert-rule-item__header">
diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx
index b5f483ebc6c..31b5658e108 100644
--- a/public/app/plugins/panel/graph/Legend/Legend.tsx
+++ b/public/app/plugins/panel/graph/Legend/Legend.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { TimeSeries } from 'app/core/core';
-import { CustomScrollbar } from '@grafana/ui';
+import { CustomScrollbar, Icon } from '@grafana/ui';
 import { LegendItem, LEGEND_STATS } from './LegendSeriesItem';
 
 type Sort = 'min' | 'max' | 'avg' | 'current' | 'total';
@@ -303,7 +303,7 @@ class LegendTableHeaderItem extends PureComponent<LegendTableHeaderProps & Legen
     return (
       <th className="pointer" onClick={this.onClick}>
         {statName}
-        {sort === statName && <span className={sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'} />}
+        {sort === statName && <Icon name={sortDesc ? 'angle-down' : 'angle-up'} />}
       </th>
     );
   }
diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
index 0f69c2bd8e2..29e7aa9a3c2 100644
--- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
-import { SeriesColorPicker } from '@grafana/ui';
+import { SeriesColorPicker, Icon } from '@grafana/ui';
 
 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
@@ -156,7 +156,7 @@ interface LegendSeriesIconState {
 }
 
 function SeriesIcon({ color }: { color: string }) {
-  return <i className="fa fa-minus pointer" style={{ color }} />;
+  return <Icon name="minus" style={{ color }} />;
 }
 
 class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index f6c6cd98a7e..ed76653941a 100644
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -200,7 +200,7 @@ class GraphElement {
           items: [
             {
               label: 'Add annotation',
-              icon: 'gicon gicon-annotation',
+              icon: 'comment-alt',
               onClick: () => this.eventManager.updateTime({ from: flotPosition.x, to: null }),
             },
           ],
@@ -218,7 +218,7 @@ class GraphElement {
               label: link.title,
               url: link.href,
               target: link.target,
-              icon: `fa ${link.target === '_self' ? 'fa-link' : 'fa-external-link'}`,
+              icon: `${link.target === '_self' ? 'link' : 'external-link-alt'}`,
               onClick: link.onClick,
             };
           }),
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
index 941b67406c4..df843e893f2 100644
--- a/public/app/plugins/panel/graph/tab_display.html
+++ b/public/app/plugins/panel/graph/tab_display.html
@@ -169,9 +169,9 @@
     </div>
     <div class="gf-form" ng-repeat="option in currentOverrides">
       <label class="gf-form-label">
-        <i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
+        <icon name="'times'" size="'sm'" ng-click="removeOverride(option)" style="margin-right: 4px;"></icon>
         <span ng-show="option.propertyName === 'color'">
-          Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
+          Color: <icon name="'circle'" type="'mono'" ng-style="{color:option.value}"></icon>
         </span>
         <span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
       </label>
@@ -193,13 +193,13 @@
 
     <div class="gf-form">
       <label class="gf-form-label">
-        <i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
+        <icon name="'trash-alt'" ng-click="ctrl.removeSeriesOverride(override)"></icon>
       </label>
     </div>
   </div>
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
-      <i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
+      <icon name="'plus-circle'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
     </button>
   </div>
 </div>
diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html
index 70c6c82e0f0..2dd24506e6e 100644
--- a/public/app/plugins/panel/graph/thresholds_form.html
+++ b/public/app/plugins/panel/graph/thresholds_form.html
@@ -1,7 +1,6 @@
 <div class="gf-form-group">
   <p class="muted" ng-show="ctrl.disabled">
-    Visual thresholds options <strong>disabled.</strong>
-    Visit the Alert tab to update your thresholds.<br>
+    Visual thresholds options <strong>disabled.</strong> Visit the Alert tab to update your thresholds.<br />
     To re-enable thresholds, the alert rule must be deleted from this panel.
   </p>
   <div ng-class="{'thresholds-form-disabled': ctrl.disabled}">
@@ -12,24 +11,45 @@
 
       <div class="gf-form">
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input" ng-model="threshold.op"
-                  ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select>
+          <select
+            class="gf-form-input"
+            ng-model="threshold.op"
+            ng-options="f for f in ['gt', 'lt']"
+            ng-change="ctrl.render()"
+            ng-disabled="ctrl.disabled"
+          ></select>
         </div>
-        <input type="number" ng-model="threshold.value" class="gf-form-input width-8"
-               ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled">
+        <input
+          type="number"
+          ng-model="threshold.value"
+          class="gf-form-input width-8"
+          ng-change="ctrl.render()"
+          placeholder="value"
+          ng-disabled="ctrl.disabled"
+        />
       </div>
 
       <div class="gf-form">
         <label class="gf-form-label">Color</label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input" ng-model="threshold.colorMode"
-                  ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.onThresholdTypeChange($index)" ng-disabled="ctrl.disabled">
+          <select
+            class="gf-form-input"
+            ng-model="threshold.colorMode"
+            ng-options="f for f in ['custom', 'critical', 'warning', 'ok']"
+            ng-change="ctrl.onThresholdTypeChange($index)"
+            ng-disabled="ctrl.disabled"
+          >
           </select>
         </div>
       </div>
 
-      <gf-form-switch class="gf-form" label="Fill" checked="threshold.fill"
-                      on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
+      <gf-form-switch
+        class="gf-form"
+        label="Fill"
+        checked="threshold.fill"
+        on-change="ctrl.render()"
+        ng-disabled="ctrl.disabled"
+      ></gf-form-switch>
 
       <div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
         <label class="gf-form-label">Fill color</label>
@@ -38,8 +58,13 @@
         </span>
       </div>
 
-      <gf-form-switch class="gf-form" label="Line" checked="threshold.line"
-                      on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
+      <gf-form-switch
+        class="gf-form"
+        label="Line"
+        checked="threshold.line"
+        on-change="ctrl.render()"
+        ng-disabled="ctrl.disabled"
+      ></gf-form-switch>
 
       <div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
         <label class="gf-form-label">Line color</label>
@@ -51,9 +76,14 @@
       <div class="gf-form">
         <label class="gf-form-label">Y-Axis</label>
         <div class="gf-form-select-wrapper">
-          <select class="gf-form-input" ng-model="threshold.yaxis"
-                  ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
-                  ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
+          <select
+            class="gf-form-input"
+            ng-model="threshold.yaxis"
+            ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
+            ng-options="f for f in ['left', 'right']"
+            ng-change="ctrl.render()"
+            ng-disabled="ctrl.disabled"
+          >
           </select>
         </div>
       </div>
@@ -61,7 +91,7 @@
       <div class="gf-form">
         <label class="gf-form-label">
           <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
-            <i class="fa fa-trash"></i>
+            <icon name="'trash-alt'"></icon>
           </a>
         </label>
       </div>
@@ -69,7 +99,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
-        <i class="fa fa-plus"></i>&nbsp;Add Threshold
+        <icon name="'plus-circle'"></icon>&nbsp;Add Threshold
       </button>
     </div>
   </div>
diff --git a/public/app/plugins/panel/graph/time_regions_form.html b/public/app/plugins/panel/graph/time_regions_form.html
index 3330085e3a8..634d5c1dece 100644
--- a/public/app/plugins/panel/graph/time_regions_form.html
+++ b/public/app/plugins/panel/graph/time_regions_form.html
@@ -7,23 +7,49 @@
     <div class="gf-form">
       <label class="gf-form-label">From</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input width-6" ng-model="timeRegion.fromDayOfWeek" ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
-          ng-change="ctrl.render()"></select>
+        <select
+          class="gf-form-input width-6"
+          ng-model="timeRegion.fromDayOfWeek"
+          ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
+          ng-change="ctrl.render()"
+        ></select>
       </div>
-      <input type="text" ng-maxlength="5" ng-model="timeRegion.from" class="gf-form-input width-5" ng-change="ctrl.render()" placeholder="hh:mm">
+      <input
+        type="text"
+        ng-maxlength="5"
+        ng-model="timeRegion.from"
+        class="gf-form-input width-5"
+        ng-change="ctrl.render()"
+        placeholder="hh:mm"
+      />
       <label class="gf-form-label">To</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input width-6" ng-model="timeRegion.toDayOfWeek" ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
-          ng-change="ctrl.render()"></select>
+        <select
+          class="gf-form-input width-6"
+          ng-model="timeRegion.toDayOfWeek"
+          ng-options="f.d as f.value for f in [{d: undefined, value: 'Any'}, {d:1, value: 'Mon'}, {d:2, value: 'Tue'}, {d:3, value: 'Wed'}, {d:4, value: 'Thu'}, {d:5, value: 'Fri'}, {d:6, value: 'Sat'}, {d:7, value: 'Sun'}]"
+          ng-change="ctrl.render()"
+        ></select>
       </div>
-      <input type="text" ng-maxlength="5" ng-model="timeRegion.to" class="gf-form-input width-5" ng-change="ctrl.render()" placeholder="hh:mm"
-      >
+      <input
+        type="text"
+        ng-maxlength="5"
+        ng-model="timeRegion.to"
+        class="gf-form-input width-5"
+        ng-change="ctrl.render()"
+        placeholder="hh:mm"
+      />
     </div>
 
     <div class="gf-form">
       <label class="gf-form-label">Color</label>
       <div class="gf-form-select-wrapper">
-        <select class="gf-form-input" ng-model="timeRegion.colorMode" ng-options="f.key as f.value for f in ctrl.colorModes" ng-change="ctrl.render()">
+        <select
+          class="gf-form-input"
+          ng-model="timeRegion.colorMode"
+          ng-options="f.key as f.value for f in ctrl.colorModes"
+          ng-change="ctrl.render()"
+        >
         </select>
       </div>
     </div>
@@ -49,7 +75,7 @@
     <div class="gf-form">
       <label class="gf-form-label">
         <a class="pointer" ng-click="ctrl.removeTimeRegion($index)">
-          <i class="fa fa-trash"></i>
+          <icon name="'trash-alt"></icon>
         </a>
       </label>
     </div>
@@ -57,7 +83,7 @@
 
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
-      <i class="fa fa-plus"></i>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
+      <icon name="'plus-circle'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
     </button>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/app/plugins/panel/pluginlist/editor.html b/public/app/plugins/panel/pluginlist/editor.html
index c0577578598..4caf2ba4766 100644
--- a/public/app/plugins/panel/pluginlist/editor.html
+++ b/public/app/plugins/panel/pluginlist/editor.html
@@ -8,12 +8,12 @@
 		</div>
 		<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
 			<span class="gf-form-label">
-				<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
+				<icon class="grafana-tip ng-scope" name="'question-circle'" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></icon>
 			</span>
 		</div>
 	</div>
 
-	<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
+	<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'"></div>
 		<div class="gf-form">
 			<span class="gf-form-label width-10">Search options</span>
 			<span class="gf-form-label">Query</span>
diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html
index c61b1dcf6d1..4e83faf3349 100644
--- a/public/app/plugins/panel/singlestat/editor.html
+++ b/public/app/plugins/panel/singlestat/editor.html
@@ -163,7 +163,7 @@
         <label class="gf-form-label width-10">Min</label>
         <input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
         <label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
-          &nbsp; <i class="fa fa-warning"></i>
+          &nbsp; <icon name="'exclamation-triangle'"></icon>
           Min value is bigger than max.
         </label>
       </div>
diff --git a/public/app/plugins/panel/singlestat/mappings.html b/public/app/plugins/panel/singlestat/mappings.html
index 027c77e6903..5e5889eb9ec 100644
--- a/public/app/plugins/panel/singlestat/mappings.html
+++ b/public/app/plugins/panel/singlestat/mappings.html
@@ -43,7 +43,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
-        <i class="fa fa-plus"></i>
+        <icon name="'plus-circle'"></icon>
         Add a value mapping
       </button>
     </div>
@@ -66,7 +66,7 @@
 
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
-        <i class="fa fa-plus"></i>
+        <icon name="'plus-circle'"></icon>
         Add a range mapping
       </button>
     </div>
diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html
index 4bee4cc38b8..6be030d6dee 100644
--- a/public/app/plugins/panel/table/column_options.html
+++ b/public/app/plugins/panel/table/column_options.html
@@ -164,7 +164,7 @@
           </div>
           <div class="gf-form">
             <label class="gf-form-label">
-              <a class="pointer" ng-click="editor.addValueMap(style)"><i class="fa fa-plus"></i></a>
+              <a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus-circle'"></icon></a>
             </label>
           </div>
         </div>
@@ -293,7 +293,7 @@
   <div class="clearfix"></div>
   <div class="gf-form-group">
     <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
-      <i class="fa fa-trash"></i> Remove Rule
+      <icon name="'trash-alt'"></icon> Remove Rule
     </button>
   </div>
 
@@ -302,6 +302,6 @@
 
 <div class="gf-form-button-row">
   <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
-    <i class="fa fa-plus"></i>&nbsp;Add column style
+    <icon name="'plus-circle'"></icon>&nbsp;Add column style
   </button>
 </div>
diff --git a/public/app/plugins/panel/table/module.html b/public/app/plugins/panel/table/module.html
index e328cb09a75..48e41283f01 100644
--- a/public/app/plugins/panel/table/module.html
+++ b/public/app/plugins/panel/table/module.html
@@ -1,30 +1,25 @@
-
 <div class="table-panel-container">
-	<div class="table-panel-header-bg" ng-show="ctrl.table.rows.length"></div>
-	<div class="table-panel-scroll" ng-show="ctrl.table.rows.length">
-		<table class="table-panel-table">
-			<thead>
-				<tr>
-					<th ng-repeat="col in ctrl.table.columns" ng-if="!col.hidden">
-						<div class="table-panel-table-header-inner pointer" ng-click="ctrl.toggleColumnSort(col, $index)">
-							{{col.title}}
-							<span class="table-panel-table-header-controls" ng-if="col.sort">
-								<i class="fa fa-caret-down" ng-show="col.desc"></i>
-								<i class="fa fa-caret-up" ng-hide="col.desc"></i>
-							</span>
-						</div>
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-	</div>
+  <div class="table-panel-header-bg" ng-show="ctrl.table.rows.length"></div>
+  <div class="table-panel-scroll" ng-show="ctrl.table.rows.length">
+    <table class="table-panel-table">
+      <thead>
+        <tr>
+          <th ng-repeat="col in ctrl.table.columns" ng-if="!col.hidden">
+            <div class="table-panel-table-header-inner pointer" ng-click="ctrl.toggleColumnSort(col, $index)">
+              {{col.title}}
+              <span class="table-panel-table-header-controls" ng-if="col.sort">
+                <icon name="'angle-down'" ng-show="col.desc"></icon>
+                <icon name="'angle-up'" ng-hide="col.desc"></icon>
+              </span>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+    </table>
+  </div>
 </div>
 <div class="datapoints-warning" ng-show="ctrl.table.rows.length===0">
-	<span class="small" >
-		No data to show <tip>Nothing returned by data query</tip>
-	</span>
-</div>
-<div class="table-panel-footer">
+  <span class="small"> No data to show <tip>Nothing returned by data query</tip> </span>
 </div>
+<div class="table-panel-footer"></div>
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index fb00a645d40..89280a78d35 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -82,9 +82,6 @@
 .btn-small {
   @include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
   height: $height-sm;
-  svg {
-    margin-bottom: 0;
-  }
 }
 
 // Deprecated, only used by old plugins
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index cf5815e3b16..3de420aa5be 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -40,7 +40,7 @@ $input-border: 1px solid $input-border-color;
 
   .gf-form-input-icon {
     position: absolute;
-    top: 10px;
+    top: 8px;
     font-size: $font-size-lg;
     left: 10px;
     color: $input-color-placeholder;
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index df1b629fc0c..856403a3165 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -48,11 +48,6 @@
   float: left;
   padding-top: $space-sm;
   margin: 0 $space-md;
-
-  .gicon {
-    position: relative;
-    top: -2px;
-  }
 }
 
 .modal-header-close {
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index 8d453aa02e6..aa0aac8c35f 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -63,9 +63,6 @@
     font-size: 20px;
     margin-right: 5px;
   }
-  svg {
-    color: $orange;
-  }
 }
 
 .search-results-scroller {
diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss
index 23505d4d4e1..51e4eab174c 100644
--- a/public/sass/pages/_alerting.scss
+++ b/public/sass/pages/_alerting.scss
@@ -36,55 +36,31 @@
   .panel-alert-icon {
     display: inline-block;
   }
-
-  .panel-alert-icon:before {
-    content: '\e611';
-    position: relative;
-    top: 1px;
-    left: -3px;
-  }
 }
 
 .panel-alert-state {
   &--alerting {
-    box-shadow: 0 0 10px rgba($critical, 0.5);
-
-    .panel-alert-icon:before {
+    svg.panel-alert-icon {
       color: $critical;
-      content: '\e610';
+      animation: alerting-panel 1s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate;
     }
   }
-
-  &--alerting::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 0 10px rgba($critical, 1);
-    opacity: 0;
-    animation: alerting-panel 1.6s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate;
-  }
-
   &--ok {
-    .panel-alert-icon:before {
+    svg.panel-alert-icon {
       color: $online;
-      content: '\e611';
     }
   }
 
   &--pending {
-    .panel-alert-icon:before {
+    svg.panel-alert-icon {
       color: $warn;
-      content: '\e611';
     }
   }
 }
 
 @keyframes alerting-panel {
   100% {
-    opacity: 1;
+    transform: scale(1.2);
   }
 }
 
diff --git a/public/sass/pages/_history.scss b/public/sass/pages/_history.scss
index 99ea9a027e9..9503f15f6bf 100644
--- a/public/sass/pages/_history.scss
+++ b/public/sass/pages/_history.scss
@@ -87,6 +87,9 @@
 // Basic
 .diff-circle {
   margin-right: 0.5em;
+  * {
+    margin-bottom: 1px;
+  }
 }
 .diff-circle-changed {
   color: #f59433;
@@ -206,5 +209,5 @@
 }
 
 .diff-list-circle {
-  font-size: 10px;
+  margin-bottom: 3px;
 }
diff --git a/public/vendor/angular-other/datepicker.js b/public/vendor/angular-other/datepicker.js
index 41e07ba81a3..0f5f4bad610 100644
--- a/public/vendor/angular-other/datepicker.js
+++ b/public/vendor/angular-other/datepicker.js
@@ -1009,7 +1009,7 @@
 		},
 		headTemplate: '<thead>'+
 							'<tr>'+
-								'<th class="prev"><i class="icon-arrow-left"/></th>'+
+								'<th class="prev"><icon name="angle-left"/></th>'+
 								'<th colspan="5" class="switch"></th>'+
 								'<th class="next"><i class="icon-arrow-right"/></th>'+
 							'</tr>'+
diff --git a/public/views/error-template.html b/public/views/error-template.html
index af430fc6c3d..485e3e56231 100644
--- a/public/views/error-template.html
+++ b/public/views/error-template.html
@@ -36,7 +36,7 @@
       </div>
       <div class="page-container page-body ng-scope" style="padding: 2rem">
         <div class="alert">
-          <div class="alert-icon"><i class="fa fa-exclamation-triangle"></i></div>
+          <div class="alert-icon"><icon name="'exclamation-triangle'"></icon></div>
           <div class="alert-body">
             <div class="alert-title">[[.Title]]</div>
           </div>