diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index 8b8959888e2..f739fa72156 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
@@ -27,7 +27,7 @@ const getStyles = stylesFactory(() => {
       z-index: 100;
     `,
     icon: css`
-      margin-left: 4px;
+      margin: 1px 0 0 4px;
     `,
   };
 });
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index 01d363769ce..234787ab216 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -65,6 +65,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   headerButtons: css`
     label: collapse__header-buttons;
     margin-right: ${theme.spacing.sm};
+    margin-top: ${theme.spacing.xxs};
     font-size: ${theme.typography.size.lg};
     line-height: ${theme.typography.heading.h6};
     display: inherit;
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index f2698f10882..ee10b6b663b 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -140,7 +140,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
                     onClick={() => setIsAccessHelpVisible(isVisible => !isVisible)}
                   >
                     Help&nbsp;
-                    <Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} />
+                    <Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} style={{ marginBottom: 0 }} />
                   </label>
                 </div>
               </div>
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
index dd1620e2023..da9c41fb7bd 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
@@ -48,7 +48,7 @@ export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceCon
           theme="info"
         >
           <div className="gf-form-help-icon gf-form-help-icon--right-normal">
-            <Icon name="info-circle" size="sm" />
+            <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
           </div>
         </Tooltip>
       </div>
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 da4d801529f..21e0427b5b2 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
@@ -23,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 && <Icon className={'select-button-icon'} name={iconClass as IconName} />}
+        {iconClass && <Icon className={'select-button-icon'} name={iconClass as IconName} size="lg" />}
         <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/Icon/assets/SquareShape.tsx b/packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx
new file mode 100644
index 00000000000..9d0f48e0f40
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import { SvgProps } from './types';
+
+export const SquareShape: 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}
+    >
+      <rect width="85%" height="85%" x="2" y="2" rx="5" />
+    </svg>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Icon/assets/index.ts b/packages/grafana-ui/src/components/Icon/assets/index.ts
index 04af2a223e2..d1c96261b72 100644
--- a/packages/grafana-ui/src/components/Icon/assets/index.ts
+++ b/packages/grafana-ui/src/components/Icon/assets/index.ts
@@ -10,3 +10,4 @@ export * from './Folder';
 export * from './Import';
 export * from './PanelAdd';
 export * from './Circle';
+export * from './SquareShape';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
index 21e727ea96b..7c6e819bbfa 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
@@ -67,6 +67,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-left: ${theme.spacing.xs};
     `,
     clockIcon: css`
+      margin-left: ${theme.spacing.xs};
       margin-right: ${theme.spacing.xs};
     `,
     noRightBorderStyle: css`
@@ -155,7 +156,7 @@ export class UnthemedTimeRangePicker extends PureComponent<Props, State> {
         <div className={styles.buttons}>
           {hasAbsolute && (
             <button className="btn navbar-button navbar-button--tight" onClick={onMoveBackward}>
-              <Icon name="angle-left" />
+              <Icon name="angle-left" size="lg" />
             </button>
           )}
           <div>
diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
index da03e4e904d..7d193bea85a 100644
--- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
     >
       <Icon
         name="angle-left"
+        size="lg"
       />
     </button>
     <div>
@@ -39,7 +40,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
           onClick={[Function]}
         >
           <Icon
-            className="css-znfyx6"
+            className="css-yawc0"
             name="clock-nine"
             size="lg"
           />
@@ -328,6 +329,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
     >
       <Icon
         name="angle-left"
+        size="lg"
       />
     </button>
     <div>
@@ -354,7 +356,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
           onClick={[Function]}
         >
           <Icon
-            className="css-znfyx6"
+            className="css-yawc0"
             name="clock-nine"
             size="lg"
           />
diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts
index 5044164f49e..2d9ce0297b8 100644
--- a/packages/grafana-ui/src/types/icon.ts
+++ b/packages/grafana-ui/src/types/icon.ts
@@ -3,8 +3,6 @@ export type IconType = 'mono' | 'default';
 export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
 
 export type IconName =
-  | 'fa fa-fw fa-unlock'
-  | 'fa fa-envelope'
   | 'fa fa-spinner'
   | 'grafana'
   | 'question-circle'
@@ -23,7 +21,6 @@ export type IconName =
   | 'slack'
   | 'download-alt'
   | 'mobile-android'
-  | 'slack'
   | 'plus-square'
   | 'folder-plus'
   | 'folder-open'
@@ -42,7 +39,6 @@ export type IconName =
   | 'forward'
   | 'check'
   | 'check-circle'
-  | 'add-panel'
   | 'copy'
   | 'lock'
   | 'unlock'
@@ -68,7 +64,6 @@ export type IconName =
   | 'bars'
   | 'save'
   | 'apps'
-  | 'folder-plus'
   | 'link'
   | 'upload'
   | 'columns'
@@ -99,10 +94,8 @@ export type IconName =
   | 'star'
   | 'list-ul'
   | 'edit'
-  | 'shield'
   | 'eye'
   | 'eye-slash'
-  | 'filter'
   | 'monitor'
   | 'plus-circle'
   | 'arrow-left'
@@ -111,7 +104,6 @@ export type IconName =
   | 'minus'
   | 'signal'
   | 'search-plus'
-  | 'search-minus'
   | 'minus-circle'
   | 'table'
   | 'plus'
@@ -121,6 +113,8 @@ export type IconName =
   | 'favorite';
 
 export const getAvailableIcons = (): IconName[] => [
+  'fa fa-spinner',
+  'grafana',
   'question-circle',
   'angle-up',
   'history',
@@ -137,7 +131,6 @@ export const getAvailableIcons = (): IconName[] => [
   'slack',
   'download-alt',
   'mobile-android',
-  'slack',
   'plus-square',
   'folder-plus',
   'folder-open',
@@ -156,7 +149,6 @@ export const getAvailableIcons = (): IconName[] => [
   'forward',
   'check',
   'check-circle',
-  'add-panel',
   'copy',
   'lock',
   'unlock',
@@ -182,7 +174,6 @@ export const getAvailableIcons = (): IconName[] => [
   'bars',
   'save',
   'apps',
-  'folder-plus',
   'link',
   'upload',
   'columns',
@@ -213,10 +204,8 @@ export const getAvailableIcons = (): IconName[] => [
   'star',
   'list-ul',
   'edit',
-  'shield',
   'eye',
   'eye-slash',
-  'filter',
   'monitor',
   'plus-circle',
   'arrow-left',
@@ -225,7 +214,6 @@ export const getAvailableIcons = (): IconName[] => [
   'minus',
   'signal',
   'search-plus',
-  'search-minus',
   'minus-circle',
   'table',
   'plus',
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
index 81edf6201ab..5e2d0cfde0f 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
@@ -4,12 +4,12 @@ import { shallow } from 'enzyme';
 
 describe('QueryOperationAction', () => {
   it('renders', () => {
-    expect(() => shallow(<QueryOperationAction icon="add-panel" onClick={() => {}} />)).not.toThrow();
+    expect(() => shallow(<QueryOperationAction icon="panel-add" onClick={() => {}} />)).not.toThrow();
   });
   describe('when disabled', () => {
     it('does not call onClick handler', () => {
       const clickSpy = jest.fn();
-      const wrapper = shallow(<QueryOperationAction icon="add-panel" onClick={clickSpy} title="Test action" />);
+      const wrapper = shallow(<QueryOperationAction icon="panel-add" onClick={clickSpy} title="Test action" />);
       const actionEl = wrapper.find({ 'aria-label': 'Test action query operation action' });
 
       expect(actionEl).toHaveLength(1);
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 3332dcef725..786be0abe90 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -182,7 +182,7 @@ export class PanelHeader extends Component<Props, State> {
               )}
               {data.request && data.request.timeInfo && (
                 <span className="panel-time-info">
-                  <Icon name="clock-nine" /> {data.request.timeInfo}
+                  <Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
                 </span>
               )}
             </div>
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index 46afb489bde..cf56e16c535 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -15,7 +15,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
     children: [
       {
         active: false,
-        icon: 'fa fa-fw fa-sliders',
+        icon: 'sliders-v-alt',
         id: `datasource-settings-${dataSource.id}`,
         text: 'Settings',
         url: `datasources/edit/${dataSource.id}/`,
@@ -38,7 +38,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
   if (pluginMeta.includes && hasDashboards(pluginMeta.includes)) {
     navModel.children.push({
       active: false,
-      icon: 'fa fa-fw fa-th-large',
+      icon: 'apps',
       id: `datasource-dashboards-${dataSource.id}`,
       text: 'Dashboards',
       url: `datasources/edit/${dataSource.id}/dashboards`,
@@ -48,7 +48,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
   if (config.licenseInfo.hasLicense) {
     navModel.children.push({
       active: false,
-      icon: 'fa fa-fw fa-lock',
+      icon: 'lock',
       id: `datasource-permissions-${dataSource.id}`,
       text: 'Permissions',
       url: `datasources/edit/${dataSource.id}/permissions`,
diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx
index 745d81e9a82..15cd720994c 100644
--- a/public/app/features/explore/LiveLogs.tsx
+++ b/public/app/features/explore/LiveLogs.tsx
@@ -184,7 +184,7 @@ class LiveLogs extends PureComponent<Props, State> {
             {isPaused ? 'Resume' : 'Pause'}
           </button>
           <button onClick={this.props.stopLive} className={cx('btn btn-inverse', styles.button)}>
-            <Icon name="square-shape" />
+            <Icon name="square-shape" size="lg" type="mono" />
             &nbsp; Exit live mode
           </button>
           {isPaused || (
diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index e6ae1ad03fd..5794c2f1fae 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -137,7 +137,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
       <CSSTransition
         mountOnEnter={true}
         unmountOnExit={true}
-        timeout={500}
+        timeout={100}
         in={isLive}
         classNames={{
           enter: styles.stopButtonEnter,
@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
             className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
             onClick={stop}
           >
-            <Icon className="icon-brand-gradient" name="square-shape" />
+            <Icon className="icon-brand-gradient" name="square-shape" size="lg" type="mono" />
           </button>
         </div>
       </CSSTransition>
diff --git a/public/app/features/explore/QueryRowActions.tsx b/public/app/features/explore/QueryRowActions.tsx
index dc203049278..26f57970407 100644
--- a/public/app/features/explore/QueryRowActions.tsx
+++ b/public/app/features/explore/QueryRowActions.tsx
@@ -51,7 +51,7 @@ export function QueryRowActions(props: Props) {
           onClick={onClickToggleDisabled}
           title={isDisabled ? 'Enable query' : 'Disable query'}
         >
-          <Icon name={isDisabled ? 'eye' : 'eye-slash'} />
+          <Icon name={isDisabled ? 'eye-slash' : 'eye'} />
         </button>
       </div>
       <div className="gf-form">
diff --git a/public/app/features/explore/ResponsiveButton.tsx b/public/app/features/explore/ResponsiveButton.tsx
index 091cc983d6e..54b69ef1286 100644
--- a/public/app/features/explore/ResponsiveButton.tsx
+++ b/public/app/features/explore/ResponsiveButton.tsx
@@ -46,9 +46,9 @@ export const ResponsiveButton = forwardRef<HTMLDivElement, Props>((props, ref) =
         onClick={onClick}
         disabled={disabled || false}
       >
-        {icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} /> : null}
+        {icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
         <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
-        {icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} /> : null}
+        {icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
       </button>
     </div>
   );
diff --git a/public/app/features/explore/TimeSyncButton.tsx b/public/app/features/explore/TimeSyncButton.tsx
index 82153498741..86061fad1ff 100644
--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -47,7 +47,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={() => onClick()}
       >
-        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} />
+        <Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} size="lg" />
       </button>
     </Tooltip>
   );
diff --git a/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap
index 4f044cccaee..88bb5a1c059 100644
--- a/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`QueryRowActions should render component 1`] = `
       title="Disable query"
     >
       <Icon
-        name="eye-slash"
+        name="eye"
       />
     </button>
   </div>
diff --git a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
index 773c12299b3..522606a1231 100644
--- a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`TimeSyncButton should render component 1`] = `
         <Icon
           className="css-1c3xqzq-topPadding icon-brand-gradient"
           name="link"
+          size="lg"
         >
           <div
             className="css-1cvxpvr"
@@ -30,14 +31,14 @@ exports[`TimeSyncButton should render component 1`] = `
             <UilLink
               className="icon-brand-gradient css-1q2xpj8-topPadding"
               color="currentColor"
-              size={16}
+              size={18}
             >
               <svg
                 className="icon-brand-gradient css-1q2xpj8-topPadding"
                 fill="currentColor"
-                height={16}
+                height={18}
                 viewBox="0 0 24 24"
-                width={16}
+                width={18}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html
index d696ef27b0d..acdb08d71f7 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"></icon>
+          <icon name="'eye'" style="margin-right: 4px;"></icon>
           View
         </a>
       </td>
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index f46e2d44ffa..dd339f0d253 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -73,7 +73,7 @@
           </td>
           <td class="add-dashboard">
             <button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
-              <icon name="'plus'"></i>
+              <icon name="'plus'"></icon>
               Add to playlist
             </button>
           </td>
@@ -91,7 +91,7 @@
           </td>
           <td class="add-dashboard">
             <button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
-              <icon name="'plus'"></i>
+              <icon name="'plus'"></icon>
               Add to playlist
             </button>
           </td>
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html
index 08e3ffdb68b..5fcb038fd22 100644
--- a/public/app/features/profile/partials/profile.html
+++ b/public/app/features/profile/partials/profile.html
@@ -24,7 +24,7 @@
           <td>{{ session.browser }} on {{ session.os }} {{ session.osVersion }}</td>
           <td>
             <button class="btn btn-danger btn-small" ng-click="ctrl.revokeUserSession(session.id)">
-              <icon name="'power'" style="margin-top: -2px;"></icon>
+              <icon name="'power'"></icon>
             </button>
           </td>
         </tr>
diff --git a/public/app/features/teams/__mocks__/navModelMock.ts b/public/app/features/teams/__mocks__/navModelMock.ts
index 7aa8515ee13..a20ced69ae3 100644
--- a/public/app/features/teams/__mocks__/navModelMock.ts
+++ b/public/app/features/teams/__mocks__/navModelMock.ts
@@ -2,7 +2,7 @@ export const getMockNavModel = (pageName: string) => {
   return {
     node: {
       active: false,
-      icon: 'gicon gicon-team',
+      icon: 'users-alt',
       id: `team-${pageName}-2`,
       text: `${pageName}`,
       url: 'org/teams/edit/2/members',
@@ -16,14 +16,14 @@ export const getMockNavModel = (pageName: string) => {
         children: [
           {
             active: false,
-            icon: 'gicon gicon-team',
+            icon: 'users-alt',
             id: 'team-members-2',
             text: 'Members',
             url: 'org/teams/edit/2/members',
           },
           {
             active: false,
-            icon: 'fa fa-fw fa-sliders',
+            icon: 'sliders-v-alt',
             id: 'team-settings-2',
             text: 'Settings',
             url: 'org/teams/edit/2/settings',
@@ -41,14 +41,14 @@ export const getMockNavModel = (pageName: string) => {
       children: [
         {
           active: true,
-          icon: 'gicon gicon-team',
+          icon: 'users-alt',
           id: 'team-members-2',
           text: 'Members',
           url: 'org/teams/edit/2/members',
         },
         {
           active: false,
-          icon: 'fa fa-fw fa-sliders',
+          icon: 'sliders-v-alt',
           id: 'team-settings-2',
           text: 'Settings',
           url: 'org/teams/edit/2/settings',
diff --git a/public/app/features/teams/state/navModel.ts b/public/app/features/teams/state/navModel.ts
index b8420f99f8b..25c1e3b53bf 100644
--- a/public/app/features/teams/state/navModel.ts
+++ b/public/app/features/teams/state/navModel.ts
@@ -13,14 +13,14 @@ export function buildNavModel(team: Team): NavModelItem {
     children: [
       {
         active: false,
-        icon: 'gicon gicon-team',
+        icon: 'users-alt',
         id: `team-members-${team.id}`,
         text: 'Members',
         url: `org/teams/edit/${team.id}/members`,
       },
       {
         active: false,
-        icon: 'fa fa-fw fa-sliders',
+        icon: 'sliders-v-alt',
         id: `team-settings-${team.id}`,
         text: 'Settings',
         url: `org/teams/edit/${team.id}/settings`,
@@ -31,7 +31,7 @@ export function buildNavModel(team: Team): NavModelItem {
   if (config.licenseInfo.hasLicense) {
     navModel.children.push({
       active: false,
-      icon: 'fa fa-fw fa-refresh',
+      icon: 'sync',
       id: `team-groupsync-${team.id}`,
       text: 'External group sync',
       url: `org/teams/edit/${team.id}/groupsync`,
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 63e227c063a..532152bb32d 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
@@ -61,8 +61,8 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
       </label>
     </div>
   </div>
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 2103f330507..35b154c51b6 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,8 +244,8 @@
       <div class="gf-form">
         <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
           Show Help
-          <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-          <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+          <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+          <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
         </label>
       </div>
       <div class="gf-form" ng-show="ctrl.lastQuery">
diff --git a/public/app/plugins/datasource/mssql/partials/annotations.editor.html b/public/app/plugins/datasource/mssql/partials/annotations.editor.html
index e8155042fb3..442dc211cf1 100644
--- a/public/app/plugins/datasource/mssql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mssql/partials/annotations.editor.html
@@ -19,8 +19,8 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
       </label>
     </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 21bde163ab5..217c66100aa 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
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></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
-        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></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 acfe6038d01..a9530b03f8e 100644
--- a/public/app/plugins/datasource/mysql/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/annotations.editor.html
@@ -19,8 +19,8 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
       </label>
     </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 1c59cb4dad3..81505a14fd7 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
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></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
-        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
       </label>
     </div>
     <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
index 3d2a35c391f..635acd3ed13 100644
--- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html
+++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html
@@ -213,7 +213,7 @@
 			</label>
 			<label class="gf-form-label" >
 				<a ng-click="ctrl.addTag()" ng-hide="ctrl.errors.tags">add tag</a>
-				<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'"></icon></a>
+				<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'" size="'sm'"></icon></a>
 			</label>
 		</div>
 
diff --git a/public/app/plugins/datasource/postgres/partials/annotations.editor.html b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
index 3d1c6d3064a..03e6d2505f5 100644
--- a/public/app/plugins/datasource/postgres/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
@@ -19,8 +19,8 @@
     <div class="gf-form">
       <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
-        <icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
       </label>
     </div>
   </div>
diff --git a/public/app/plugins/datasource/postgres/partials/query.editor.html b/public/app/plugins/datasource/postgres/partials/query.editor.html
index 0ff831bfe99..fefa53989f7 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
-        <icon name="'angle-caret-down'" ng-show="ctrl.showHelp"></icon>
-        <icon name="'angle-caret-right'" ng-hide="ctrl.showHelp"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></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
-        <icon name="'angle-caret-down'" ng-show="ctrl.showLastQuerySQL"></icon>
-        <icon name="'angle-caret-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
+        <icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
+        <icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
       </label>
     </div>
     <div class="gf-form gf-form--grow">
diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx
index 484d6acb4af..081a986b4d3 100644
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx
@@ -47,7 +47,12 @@ export class Help extends React.Component<Props, State> {
           {rawQuery && (
             <div className="gf-form" onClick={this.onRawQueryClicked}>
               <label className="gf-form-label query-keyword">
-                Raw Query <Icon name={displaRawQuery ? 'angle-down' : 'angle-right'} ng-show="ctrl.showHelp" />
+                Raw query
+                <Icon
+                  name={displaRawQuery ? 'angle-down' : 'angle-right'}
+                  ng-show="ctrl.showHelp"
+                  style={{ marginTop: '3px' }}
+                />
               </label>
             </div>
           )}
diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
index 0933f798730..9097b70b462 100644
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 import { PanelProps } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Icon, IconName } from '@grafana/ui';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { contextSrv } from 'app/core/core';
@@ -11,7 +11,7 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 interface Step {
   title: string;
   cta?: string;
-  icon: string;
+  icon: IconName;
   href: string;
   target?: string;
   note?: string;
@@ -37,7 +37,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
     this.steps = [
       {
         title: 'Install Grafana',
-        icon: 'icon-gf icon-gf-check',
+        icon: 'check',
         href: 'http://docs.grafana.org/',
         target: '_blank',
         note: 'Review the installation docs',
@@ -46,7 +46,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
       {
         title: 'Create a data source',
         cta: 'Add data source',
-        icon: 'gicon gicon-datasources',
+        icon: 'database',
         href: 'datasources/new?gettingstarted',
         check: () => {
           return new Promise(resolve => {
@@ -63,7 +63,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
       {
         title: 'Build a dashboard',
         cta: 'New dashboard',
-        icon: 'gicon gicon-dashboard',
+        icon: 'apps',
         href: 'dashboard/new?gettingstarted',
         check: () => {
           return backendSrv.search({ limit: 1 }).then(result => {
@@ -74,7 +74,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
       {
         title: 'Invite your team',
         cta: 'Add Users',
-        icon: 'gicon gicon-team',
+        icon: 'users-alt',
         href: 'org/users?gettingstarted',
         check: () => {
           return backendSrv.get('/api/org/users/lookup').then((res: any) => {
@@ -86,7 +86,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
       {
         title: 'Install apps & plugins',
         cta: 'Explore plugin repository',
-        icon: 'gicon gicon-plugins',
+        icon: 'plug',
         href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
         check: () => {
           return backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then((plugins: any[]) => {
@@ -153,7 +153,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
               <div key={index} className={step.done ? 'progress-step completed' : 'progress-step active'}>
                 <a className="progress-link" href={step.href} target={step.target} title={step.note}>
                   <span className="progress-marker">
-                    <i className={step.icon} />
+                    <Icon name={step.icon} size="xxl" />
                   </span>
                   <span className="progress-text">{step.title}</span>
                 </a>
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index d18ebd531c1..692163a1b52 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -147,10 +147,6 @@ $input-border: 1px solid $input-border-color;
       background: $list-item-hover-bg;
       color: $link-color;
     }
-
-    .fa-caret-down {
-      padding-left: 4px;
-    }
   }
 
   &:disabled {
@@ -390,7 +386,7 @@ $input-border: 1px solid $input-border-color;
   &--right-absolute {
     position: absolute;
     right: $spacer;
-    top: 10px;
+    top: 6px;
   }
 
   &--right-normal {
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 8337b7aa5d5..a29ac99513a 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -7,11 +7,7 @@
 }
 
 .icon-brand-gradient {
-  text-shadow: none;
-  background: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  -moz-text-fill-color: transparent;
+  color: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
 }
 
 .icon-margin-left {
diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss
index fb93d5a33f3..09ad5658248 100644
--- a/public/sass/pages/_plugins.scss
+++ b/public/sass/pages/_plugins.scss
@@ -27,5 +27,7 @@
 
   img {
     width: 16px;
+    margin-right: 4px;
+    margin-bottom: 1px;
   }
 }