diff --git a/.eslintrc b/.eslintrc
index 5cf34853391..e9395efcef4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +1,12 @@
 {
   "extends": ["@grafana/eslint-config"],
   "root": true,
-  "plugins": ["no-only-tests"],
+  "plugins": ["no-only-tests", "@emotion"],
   "rules": {
     "no-only-tests/no-only-tests": "error",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "@emotion/jsx-import": "error",
+    "@emotion/pkg-renaming": "error"
   },
   "overrides": [
     {
diff --git a/package.json b/package.json
index c0976be5499..ecc77c15b6d 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@babel/plugin-proposal-optional-chaining": "7.13.12",
     "@babel/plugin-proposal-private-methods": "7.13.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/plugin-transform-react-constant-elements": "7.13.13",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-react": "7.13.13",
@@ -203,8 +204,9 @@
     "zone.js": "0.7.8"
   },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@emotion/core": "10.0.27",
+    "@emotion/css": "11.1.3",
+    "@emotion/eslint-plugin": "11.2.0",
+    "@emotion/react": "11.1.5",
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/slate-react": "0.22.9-grafana",
     "@popperjs/core": "2.5.4",
@@ -242,7 +244,6 @@
     "d3-scale-chromatic": "1.5.0",
     "dangerously-set-html-content": "1.0.6",
     "debounce-promise": "3.1.2",
-    "emotion": "10.0.27",
     "eventemitter3": "4.0.0",
     "fast-json-patch": "2.2.1",
     "fast-text-encoding": "^1.0.0",
diff --git a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
index 106eb6225af..2458c59f8b5 100644
--- a/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
+++ b/packages/grafana-toolkit/src/config/webpack.plugin.config.ts
@@ -175,6 +175,8 @@ const getBaseWebpackConfig: WebpackConfigurationGetter = async (options) => {
       'moment',
       'slate',
       'emotion',
+      '@emotion/react',
+      '@emotion/css',
       'prismjs',
       'slate-plain-serializer',
       '@grafana/slate-react',
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 61c09347c29..170be17963c 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -26,7 +26,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/core": "10.0.27",
+    "@emotion/react": "11.1.5",
+    "@emotion/css": "11.1.3",
     "@grafana/data": "7.5.0-pre.0",
     "@grafana/e2e-selectors": "7.5.0-pre.0",
     "@grafana/slate-react": "0.22.9-grafana",
@@ -52,7 +53,6 @@
     "react-router-dom": "^5.2.0",
     "classnames": "2.2.6",
     "d3": "5.15.0",
-    "emotion": "10.0.27",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "jquery": "3.5.1",
diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index df5566eea99..c40a4a23636 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
index 8f6e35fae93..b72b0c4159c 100644
--- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
+++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { ThemeContext } from '../../index';
 import { PluginState } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index 295232ba95f..1dcd5f6c0dd 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -6,7 +6,7 @@ import { IconName } from '../../types';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import tinycolor from 'tinycolor2';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { HorizontalGroup } from '../Layout/Layout';
 
 export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple';
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index ad43c2320ea..15e5755b820 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { useTheme } from '../../themes';
 import { IconName } from '../../types/icon';
diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
index 68aacefb0d7..b2921949ea1 100644
--- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx
index ab7087ed30a..601aec9ffa5 100644
--- a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx
+++ b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
index ad1df23bee8..0a260a1d855 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, ButtonHTMLAttributes } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { styleMixins, useStyles } from '../../themes';
 import { IconName } from '../../types/icon';
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
index 001179052e7..e3e57f63602 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index 0444737ecd4..e8bf32238b9 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types/icon';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 // @ts-ignore
 import RCCascader from 'rc-cascader';
diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
index 59df03d3d53..6dfc587b8c5 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Themeable } from '../../types/theme';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface CallToActionCardProps extends Themeable {
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 0dfe1fc6870..1a4d193744a 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -1,5 +1,5 @@
 import React, { memo, cloneElement, FC, HTMLAttributes, ReactNode, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme, styleMixins, stylesFactory } from '../../themes';
 import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
index 5cd45e15849..705f870c7b2 100644
--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -5,7 +5,7 @@ import RCCascader from 'rc-cascader';
 import { Select } from '../Select/Select';
 import { Input } from '../Input/Input';
 import { SelectableValue } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { onChangeCascader } from './optionMappings';
 import memoizeOne from 'memoize-one';
 
diff --git a/packages/grafana-ui/src/components/Chart/Tooltip.tsx b/packages/grafana-ui/src/components/Chart/Tooltip.tsx
index 177d0c54119..3bce9f4809b 100644
--- a/packages/grafana-ui/src/components/Chart/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Chart/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Portal } from '../Portal/Portal';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { FlotPosition } from '../Graph/types';
diff --git a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
index 6ba4d183b4e..37f7a5634cb 100644
--- a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
+++ b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useLayoutEffect, useRef, HTMLAttributes, useMemo } from 'react';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 import useWindowSize from 'react-use/lib/useWindowSize';
 import { Dimensions2D, GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
index c19b92621ce..564a19bf3d5 100644
--- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
+++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 import { Icon } from '..';
@@ -13,16 +13,12 @@ export interface Props {
 export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles(collapsableSectionStyles);
-  const headerClass = cx({
-    [styles.header]: true,
-    [styles.headerCollapsed]: !open,
-  });
-
+  const headerStyle = open ? styles.header : styles.headerCollapsed;
   const tooltip = `Click to ${open ? 'collapse' : 'expand'}`;
 
   return (
     <div>
-      <div onClick={() => toggleOpen(!open)} className={headerClass} title={tooltip}>
+      <div onClick={() => toggleOpen(!open)} className={headerStyle} title={tooltip}>
         {label}
         <Icon name={open ? 'angle-down' : 'angle-right'} size="xl" className={styles.icon} />
       </div>
@@ -32,22 +28,22 @@ export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
 };
 
 const collapsableSectionStyles = (theme: GrafanaTheme) => {
-  return {
-    header: css`
-      display: flex;
-      justify-content: space-between;
-      font-size: ${theme.typography.size.lg};
-      line-height: ${theme.spacing.base * 5}px;
-      cursor: pointer;
-    `,
-    headerCollapsed: css`
-      border-bottom: 1px solid ${theme.colors.border2};
-    `,
-    icon: css`
-      color: ${theme.colors.textWeak};
-    `,
-    content: css`
-      padding: ${theme.spacing.md} 0;
-    `,
-  };
+  const header = css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: theme.typography.size.lg,
+    padding: `${theme.spacing.xs} 0`,
+    cursor: 'pointer',
+  });
+  const headerCollapsed = css(header, {
+    borderBottom: `1px solid ${theme.colors.border2}`,
+  });
+  const icon = css({
+    color: theme.colors.textWeak,
+  });
+  const content = css({
+    padding: `${theme.spacing.md} 0`,
+  });
+
+  return { header, headerCollapsed, icon, content };
 };
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index 25207d84348..1c7865ef3eb 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useContext, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme } from '@grafana/data';
 import { ThemeContext } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index be1fd8daa2b..0fc0e89fa45 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -6,7 +6,7 @@ import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from '
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { withTheme, stylesFactory } from '../../themes';
 import { ColorPickerTrigger } from './ColorPickerTrigger';
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 39a809cdde1..6cfc81fb810 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -4,7 +4,7 @@ import { PopoverContentProps } from '../Tooltip/Tooltip';
 import SpectrumPalette from './SpectrumPalette';
 import { Themeable } from '../../types/theme';
 import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, GrafanaThemeType, getColorForTheme } from '@grafana/data';
 import { stylesFactory, withTheme } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
index e8a75f44a58..364a31a541f 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from 'react';
 import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
 import { PopoverContentProps } from '../Tooltip/Tooltip';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { withTheme, useStyles } from '../../themes';
 
 export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {
diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
index eb864c143e7..4566f3ebe60 100644
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
+++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent, SyntheticEvent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory, withTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { Themeable } from '../../types';
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index c260579e547..aced1b6bffb 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Modal } from '../Modal/Modal';
 import { IconName } from '../../types/icon';
 import { Button } from '../Button';
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index fd0071128e0..d6d053a3d44 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 import isNil from 'lodash/isNil';
 import classNames from 'classnames';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import Scrollbars from 'react-custom-scrollbars';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 26a7f00ba69..706c6ad0a4b 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useContext } from 'react';
 import { VariableSuggestion, GrafanaTheme, DataLink } from '@grafana/data';
 import { Switch } from '../Switch/Switch';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ThemeContext, stylesFactory } from '../../themes/index';
 import { DataLinkInput } from './DataLinkInput';
 import { Field } from '../Forms/Field';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index 455a0aeadc3..8f41f8c7cba 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -11,7 +11,7 @@ import { Editor } from '@grafana/slate-react';
 import { Value } from 'slate';
 import Plain from 'slate-plain-serializer';
 import { Popper as ReactPopper } from 'react-popper';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { SlatePrism } from '../../slate-plugins';
 import { SCHEMA } from '../../utils/slate';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index c47b6a18185..2a9010006af 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -1,6 +1,6 @@
 import { ThemeContext } from '../../index';
 import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import _ from 'lodash';
 import React, { useRef, useContext, useMemo } from 'react';
 import useClickAway from 'react-use/lib/useClickAway';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
index 1effb787e7f..13467c4bb97 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FieldConfig, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { WithContextMenu } from '../ContextMenu/WithContextMenu';
 import { linkModelToContextMenuItems } from '../../utils/dataLinks';
 import { MenuGroup, MenuItemsGroup } from '../Menu/MenuGroup';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
index c44d3bee268..dd5b9483ab4 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
@@ -1,6 +1,6 @@
 import { DataFrame, DataLink, GrafanaTheme, VariableSuggestion } from '@grafana/data';
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../../Button/Button';
 import cloneDeep from 'lodash/cloneDeep';
 import { Modal } from '../../Modal/Modal';
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
index 2929e2c2f26..acf756d6340 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { DataFrame, DataLink, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../../themes';
 import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';
diff --git a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
index 1822820599e..0124ac5d74f 100644
--- a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
@@ -1,5 +1,5 @@
 import { Field, GrafanaTheme, LinkModel } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 import { useStyles } from '../../themes';
 import { Icon } from '../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
index 7f8f8de05f7..91529e01498 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import uniqueId from 'lodash/uniqueId';
 import { DataSourceSettings } from '@grafana/data';
 import { Button } from '../Button';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 373eb4f9de7..bea0bd8fb31 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { BasicAuthSettings } from './BasicAuthSettings';
 import { HttpProxySettings } from './HttpProxySettings';
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
index 001b0ad7465..7cb14fc7924 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { KeyValue } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { Icon } from '../Icon/Icon';
 import { CertificationKey } from './CertificationKey';
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index a13ca7f8a64..19feb619740 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties, FC, ReactNode, useState } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index 15499c62f51..9c04c84c1fe 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -3,7 +3,7 @@ import { PopoverContent } from '../Tooltip/Tooltip';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { ToolbarButtonVariant, ToolbarButton } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '../../themes/ThemeContext';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
index b1f191e8519..31fef82b582 100644
--- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '../../themes';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx
index e70246b1217..50708a572c0 100644
--- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx
+++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { ErrorBoundaryApi } from './ErrorBoundary';
 import { stylesFactory } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const getStyles = stylesFactory(() => {
   return css`
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index ee7b8f032a0..6c257ecf3da 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
@@ -1,6 +1,6 @@
 import React, { FC, FormEvent, useCallback, useState } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getFormStyles, Icon } from '../index';
 import { stylesFactory, useTheme } from '../../themes';
 import { ComponentSize } from '../../types/size';
diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index 2a97cb55edc..b212cd9a6e9 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { stylesFactory, ThemeContext } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconButton } from '../IconButton/IconButton';
 import { IconName } from '../../types';
 
diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index 41d33dd6ea8..83354dfcc76 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { PopoverContent } from '../Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index b446b46e19e..46a3b4ce11c 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -2,7 +2,7 @@ import React, { HTMLProps, useCallback } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { useTheme, stylesFactory } from '../../themes';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { focusCss } from '../../themes/mixins';
 
 export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx
index 6602f07f09f..c0a3814fc81 100644
--- a/packages/grafana-ui/src/components/Forms/Field.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import { Label } from './Label';
 import { stylesFactory, useTheme } from '../../themes';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { FieldValidationMessage } from './FieldValidationMessage';
 import { getChildId } from '../../utils/children';
diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
index b71b4166055..78e6180713c 100644
--- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLProps } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 import { Legend } from './Legend';
diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
index c7ccbf74138..565a6c1095a 100644
--- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
+++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { useTheme, stylesFactory } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index 6307f9cd57d..c5ac3a88adb 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLProps, useEffect } from 'react';
 import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
 import { FormAPI } from '../../types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
   validateOn?: Mode;
diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx
index 3156c69a8eb..fa30a05659e 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 import { InlineLabel } from './InlineLabel';
diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
index be01e437357..72894d2b5fe 100644
--- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLProps, ReactNode } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
index 714b4161737..9c146e6aef2 100644
--- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';
 import { Icon } from '../Icon/Icon';
 import { useTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx
index e733a47e38b..b4eabd3b518 100644
--- a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx
index 688cc9d8303..068517d6270 100644
--- a/packages/grafana-ui/src/components/Forms/Label.tsx
+++ b/packages/grafana-ui/src/components/Forms/Label.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Icon } from '../Icon/Icon';
 import tinycolor from 'tinycolor2';
 
diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx
index 774af2c4a4d..8e75237c7a1 100644
--- a/packages/grafana-ui/src/components/Forms/Legend.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legend.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTheme, stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 export interface LabelProps extends React.HTMLAttributes<HTMLLegendElement> {
   children: string | ReactNode;
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 6588b6260c6..983daeab1aa 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme, stylesFactory } from '../../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getPropertiesForButtonSize } from '../commonStyles';
 import { focusCss } from '../../../themes/mixins';
 
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 6815611b183..ae8af2ce87e 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import uniqueId from 'lodash/uniqueId';
 import { SelectableValue } from '@grafana/data';
 import { RadioButtonSize, RadioButton } from './RadioButton';
diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts
index c2c33814f75..fc4ead4a21b 100644
--- a/packages/grafana-ui/src/components/Forms/commonStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';
diff --git a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
index bce86baa805..26540fbe7e8 100644
--- a/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx
@@ -14,7 +14,7 @@ import { useTheme } from '../../themes';
 import { HorizontalGroup } from '../Layout/Layout';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 import { SeriesIcon } from '../VizLegend/SeriesIcon';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MenuGroup, MenuGroupProps } from '../Menu/MenuGroup';
 import { MenuItem } from '../Menu/MenuItem';
 
diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx
index 629bd24c557..faa9fa1bfb2 100644
--- a/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphTooltip/SeriesTable.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { stylesFactory } from '../../../themes/stylesFactory';
 import { GrafanaTheme, GraphSeriesValue } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { SeriesIcon } from '../../VizLegend/SeriesIcon';
 import { useTheme } from '../../../themes';
 
diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
index 0845f476950..a43ca71623f 100644
--- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
@@ -1,7 +1,7 @@
 // Libraries
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GraphSeriesValue } from '@grafana/data';
 
 import { Graph, GraphProps } from './Graph';
diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx
index c9672473d9d..345faeabea5 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { Input, Field, Icon } from '@grafana/ui';
 import { getAvailableIcons, IconName } from '../../types';
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index 7a354a98069..ab913a09d45 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, toPascalCase } from '@grafana/data';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
index 33dd52581f4..f8c5f757bc8 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { useTheme } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index 64816944a52..1a470d5232e 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, getSvgSize } from '../Icon/Icon';
 import { IconName, IconSize, IconType } from '../../types/icon';
 import { stylesFactory } from '../../themes/stylesFactory';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';
 import { Tooltip } from '../Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
index 97b2e9410fd..54dea1cc082 100644
--- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx
@@ -3,7 +3,7 @@ import { InfoBox, InfoBoxProps } from './InfoBox';
 import { FeatureState, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useStyles } from '../../themes';
 import { Badge, BadgeProps } from '../Badge/Badge';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface FeatureInfoBoxProps extends Omit<InfoBoxProps, 'title' | 'urlTitle'> {
   title: string;
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
index 7ae77bd743b..a165b6956de 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 3b01374215e..833eec878c2 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLProps, ReactNode } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
 import { stylesFactory, useTheme } from '../../themes';
 import { Spinner } from '../Spinner/Spinner';
diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx
index daebb434733..9fe091d428f 100644
--- a/packages/grafana-ui/src/components/Layout/Layout.tsx
+++ b/packages/grafana-ui/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/List/AbstractList.tsx b/packages/grafana-ui/src/components/List/AbstractList.tsx
index 7d312d933b3..f372dfdf30d 100644
--- a/packages/grafana-ui/src/components/List/AbstractList.tsx
+++ b/packages/grafana-ui/src/components/List/AbstractList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 
 export interface ListProps<T> {
diff --git a/packages/grafana-ui/src/components/List/List.story.internal.tsx b/packages/grafana-ui/src/components/List/List.story.internal.tsx
index 98577a29e61..e87dcf326f2 100644
--- a/packages/grafana-ui/src/components/List/List.story.internal.tsx
+++ b/packages/grafana-ui/src/components/List/List.story.internal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { number, select } from '@storybook/addon-knobs';
 import { List } from './List';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import { InlineList } from './InlineList';
 
diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
index 52e9146d79d..14b0fc8f086 100644
--- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
+++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, SFC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Spinner } from '../Spinner/Spinner';
 import { useStyles } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Logs/LogDetails.tsx b/packages/grafana-ui/src/components/Logs/LogDetails.tsx
index 90d4b294203..7204e85c193 100644
--- a/packages/grafana-ui/src/components/Logs/LogDetails.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogDetails.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import {
   calculateFieldStats,
   calculateLogsLabelStats,
diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
index 8c5fb6ea2fb..a28da1be239 100644
--- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';
diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
index 5c9d56ae1d7..1de7efc4abc 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';
diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
index fc90d52bb1e..ad73f1071ed 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabelStatsRow.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { ThemeContext } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.tsx
index 25d99003608..0c88e4c2239 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabels.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabels.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, Labels } from '@grafana/data';
 
 import { stylesFactory } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Logs/LogRow.tsx b/packages/grafana-ui/src/components/Logs/LogRow.tsx
index ff03b13add7..dd019cd53d6 100644
--- a/packages/grafana-ui/src/components/Logs/LogRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRow.tsx
@@ -13,7 +13,7 @@ import {
 } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 
 import {
   LogRowContextRows,
diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
index 727d2cc475a..a1331a97e72 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { GrafanaTheme, DataQueryError, LogRowModel, textUtil } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { Alert } from '../Alert/Alert';
 import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';
diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
index 217eb08d5a5..4c95f0404a4 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/data';
 
 // @ts-ignore
diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
index 22bd9f00f3f..f1a174b52fa 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessageDetectedFields.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { LogRowModel, Field, LinkModel } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';
diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
index 8364403cb36..04ff3a531b6 100644
--- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, LogLevel } from '@grafana/data';
 import { styleMixins, stylesFactory } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx
index 458f0272df7..10d59e3c63e 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
index 30c4e21990a..2f1c104f6ed 100644
--- a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes';
 import { MenuItemProps } from './MenuItem';
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
index c132344e073..8b432f7cc1d 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, LinkTarget } from '@grafana/data';
 import { styleMixins, useStyles } from '../../themes';
 import { Icon } from '../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
index 41f449e2f73..079d2fd1542 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { oneLineTrim } from 'common-tags';
 import { boolean, text } from '@storybook/addon-knobs';
 import { Icon, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 9fb0d171fe5..1b972a0d817 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -1,6 +1,6 @@
 import React, { FC, PropsWithChildren, useCallback, useEffect } from 'react';
 import { Portal } from '../Portal/Portal';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { useTheme } from '../../themes';
 import { IconName } from '../../types';
 import { getModalStyles } from './getModalStyles';
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index 8efc592cba7..cd6aa283c9c 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx b/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
index 27e52eed90c..9a84aaab98a 100644
--- a/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { EdgeDatum, NodeDatum } from './types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import tinycolor from 'tinycolor2';
diff --git a/packages/grafana-ui/src/components/NodeGraph/Node.tsx b/packages/grafana-ui/src/components/NodeGraph/Node.tsx
index eda86c9c079..e3bcacef31f 100644
--- a/packages/grafana-ui/src/components/NodeGraph/Node.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/Node.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, memo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 import cx from 'classnames';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx b/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
index 62af3ee0f8a..5fa832f33a0 100644
--- a/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
@@ -11,7 +11,7 @@ import { useZoom } from './useZoom';
 import { Bounds, Config, defaultConfig, useLayout } from './layout';
 import { EdgeArrowMarker } from './EdgeArrowMarker';
 import { stylesFactory, useTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useCategorizeFrames } from './useCategorizeFrames';
 import { EdgeLabel } from './EdgeLabel';
 import { useContextMenu } from './useContextMenu';
diff --git a/packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx b/packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx
index 37444e74624..a1bcb0e244e 100644
--- a/packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/ViewControls.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button } from '../Button';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { HorizontalGroup } from '..';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
diff --git a/packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx b/packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx
index 5bb5f6666ae..060850ff1b1 100644
--- a/packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/useContextMenu.tsx
@@ -5,7 +5,7 @@ import { ContextMenu } from '../ContextMenu/ContextMenu';
 import { useTheme } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { getEdgeFields, getNodeFields } from './utils';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MenuGroup } from '../Menu/MenuGroup';
 import { MenuItem } from '../Menu/MenuItem';
 
diff --git a/packages/grafana-ui/src/components/OptionsUI/color.tsx b/packages/grafana-ui/src/components/OptionsUI/color.tsx
index eecd18dc4c6..863a0fe6c8e 100644
--- a/packages/grafana-ui/src/components/OptionsUI/color.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/color.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { getColorForTheme, GrafanaTheme } from '@grafana/data';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { stylesFactory, useTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ColorPickerTrigger } from '../ColorPicker/ColorPickerTrigger';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
index ac1f3530bc8..0182aed95e2 100644
--- a/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/fieldColor.tsx
@@ -15,7 +15,7 @@ import {
 import { Select } from '../Select/Select';
 import { ColorValueEditor } from './color';
 import { useStyles, useTheme } from '../../themes/ThemeContext';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Field } from '../Forms/Field';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 
diff --git a/packages/grafana-ui/src/components/OptionsUI/strings.tsx b/packages/grafana-ui/src/components/OptionsUI/strings.tsx
index 3ec429f16f8..9e1098818a6 100644
--- a/packages/grafana-ui/src/components/OptionsUI/strings.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/strings.tsx
@@ -3,7 +3,7 @@ import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme } from
 import { Input } from '../Input/Input';
 import { Icon } from '../Icon/Icon';
 import { stylesFactory, getTheme } from '../../themes';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../Button';
 
 type Props = FieldConfigEditorProps<string[], StringFieldConfigSettings>;
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 0b9e62de61d..02251d9f3cb 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useStyles } from '../../themes/ThemeContext';
 import { IconName } from '../../types';
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 470f90d57af..bad990a9eb3 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 import { Button, ButtonVariant } from '../Button';
 import { Icon } from '../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index 9a63bf29b36..3541a84ff79 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
index 5a965fd5523..7609507cb46 100644
--- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx
+++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
@@ -8,7 +8,7 @@ import { RadialGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { useComponentInstanceId } from '../../utils/useComponetInstanceId';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { VizLegend, VizLegendItem } from '..';
 import { VizLayout } from '../VizLayout/VizLayout';
 import { LegendDisplayMode, VizLegendOptions } from '../VizLegend/types';
diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
index e4e5c2088ca..b3c06b2cfe1 100644
--- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
+++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx
@@ -2,7 +2,7 @@ import omit from 'lodash/omit';
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormField } from '../FormField/FormField';
 import { Button } from '../Button/Button';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { PopoverContent } from '../Tooltip/Tooltip';
 
 export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx
index 53cdfb834cf..a81f28bd4b8 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import _ from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { SegmentSelect, useExpandableLabel, SegmentProps } from './';
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index f7a840925ea..f23e01d6215 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import _ from 'lodash';
 import { SegmentSelect } from './SegmentSelect';
 import { SelectableValue } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
index 2ecb6682a5b..a3f8e3c23c5 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps, useRef, useState } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import useClickAway from 'react-use/lib/useClickAway';
 import { measureText } from '../../utils/measureText';
 import { useExpandableLabel, SegmentProps } from '.';
diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index e242612fa8c..560fde7be52 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps, useRef } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import useClickAway from 'react-use/lib/useClickAway';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '../Forms/Legacy/Select/Select';
diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts
index 22efd47abaf..ad71e9ed31a 100644
--- a/packages/grafana-ui/src/components/Segment/styles.ts
+++ b/packages/grafana-ui/src/components/Segment/styles.ts
@@ -1,5 +1,5 @@
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const getSegmentStyles = (theme: GrafanaTheme) => {
   return {
diff --git a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
index b0e26f26d8c..ecd5d51f6e7 100644
--- a/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '../../themes/ThemeContext';
 import { getInputStyles } from '../Input/Input';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 
 export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren<any>>((props, ref) => {
   const { children } = props;
diff --git a/packages/grafana-ui/src/components/Select/InputControl.tsx b/packages/grafana-ui/src/components/Select/InputControl.tsx
index 8d1f6c7937f..3f4e4dc08a3 100644
--- a/packages/grafana-ui/src/components/Select/InputControl.tsx
+++ b/packages/grafana-ui/src/components/Select/InputControl.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTheme } from '../../themes/ThemeContext';
 import { sharedInputStyle } from '../Forms/commonStyles';
 import { getInputStyles } from '../Input/Input';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index e46ebafb06b..b9a5dd193a3 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -10,7 +10,7 @@ import { default as AsyncCreatable } from '@torkelo/react-select/async-creatable
 
 import { Icon } from '../Icon/Icon';
 import { Spinner } from '../Spinner/Spinner';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import resetSelectStyles from './resetSelectStyles';
 import { SelectMenu, SelectMenuOptions } from './SelectMenu';
 import { IndicatorsContainer } from './IndicatorsContainer';
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index a0117b55824..5d35436587c 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '../../themes/ThemeContext';
 import { getSelectStyles } from './getSelectStyles';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
index 4afc7e42e1a..2dcf773a6eb 100644
--- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { GroupProps } from 'react-select';
 import { stylesFactory, withTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx
index bbbb899c1b7..6fd12fd0245 100644
--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 // Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
diff --git a/packages/grafana-ui/src/components/Select/ValueContainer.tsx b/packages/grafana-ui/src/components/Select/ValueContainer.tsx
index 7227539d166..a426aaab400 100644
--- a/packages/grafana-ui/src/components/Select/ValueContainer.tsx
+++ b/packages/grafana-ui/src/components/Select/ValueContainer.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { withTheme } from '../../themes/ThemeContext';
 import { getSelectStyles } from './getSelectStyles';
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 397128ea51f..5f66b736b73 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -1,5 +1,5 @@
 import { stylesFactory } from '../../themes/stylesFactory';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
 export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
index 75b26a98b92..209cfc719fd 100644
--- a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
+++ b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { Range as RangeComponent, createSliderWithTooltip } from 'rc-slider';
-import { cx } from 'emotion';
-import { Global } from '@emotion/core';
+import { cx } from '@emotion/css';
+import { Global } from '@emotion/react';
 import { useTheme } from '../../themes/ThemeContext';
 import { getStyles } from './styles';
 import { RangeSliderProps } from './types';
diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx
index 8cae961db4d..8e09173b909 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.tsx
+++ b/packages/grafana-ui/src/components/Slider/Slider.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, ChangeEvent, FunctionComponent } from 'react';
 import SliderComponent from 'rc-slider';
-import { cx } from 'emotion';
-import { Global } from '@emotion/core';
+import { cx } from '@emotion/css';
+import { Global } from '@emotion/react';
 import { useTheme } from '../../themes/ThemeContext';
 import { getStyles } from './styles';
 import { SliderProps } from './types';
diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts
index 9a07f5e5996..c2ebd23ad03 100644
--- a/packages/grafana-ui/src/components/Slider/styles.ts
+++ b/packages/grafana-ui/src/components/Slider/styles.ts
@@ -1,8 +1,8 @@
 import { stylesFactory } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
-import { css as cssCore } from '@emotion/core';
-import { css } from 'emotion';
+import { css as cssCore } from '@emotion/react';
+import { css } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 
 export const getFocusStyle = (theme: GrafanaTheme) => css`
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index 1bd416ea706..b233463fd29 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { stylesFactory } from '../../themes';
 import { Icon } from '../Icon/Icon';
 
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 555fcc8b493..9acd51fa3cb 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps, useRef } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import uniqueId from 'lodash/uniqueId';
 import { GrafanaTheme, deprecationWarning } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
index 7106e7b6c8f..e4008ff298b 100644
--- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
+++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { SelectableValue, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx
index 0bc613ee7ab..be30f07871a 100644
--- a/packages/grafana-ui/src/components/Table/Filter.tsx
+++ b/packages/grafana-ui/src/components/Table/Filter.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Field, GrafanaTheme } from '@grafana/data';
 
 import { TableStyles } from './styles';
diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx
index 24a2420387f..e93e1b5ffec 100644
--- a/packages/grafana-ui/src/components/Table/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterList.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { FixedSizeList as List } from 'react-window';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 
 import { stylesFactory, useTheme } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
index 4d134d62f26..cfacfffb23a 100644
--- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Field, GrafanaTheme, SelectableValue } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { TableStyles } from './styles';
 import { stylesFactory, useStyles } from '../../themes';
diff --git a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
index ece42ed97ad..6886774287e 100644
--- a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
+++ b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 653b8b6cba2..8d3ed73fce8 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -1,4 +1,4 @@
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { styleMixins, stylesFactory } from '../../themes';
 import { getScrollbarWidth } from '../../utils';
diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
index 8538af7f660..6943fe96e64 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
+++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import debounce from 'lodash/debounce';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, DataFrame, CSVConfig, readCSV } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { Themeable } from '../../types/theme';
diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx
index f0fd99f9a62..bd264e1bc7d 100644
--- a/packages/grafana-ui/src/components/Tabs/Counter.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useStyles } from '../../themes';
 import { GrafanaTheme, locale } from '@grafana/data';
 
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index cb27db0006f..a5fdfd99226 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index e45a673a5d1..efd316d559d 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -1,6 +1,6 @@
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
 import { stylesFactory, useTheme } from '../../themes';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index aafc1aa1204..5809e1ea5d3 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 export interface Props {
   /** Children should be a single <Tab /> or an array of <Tab /> */
diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx
index 106683fbe0e..fb7bfe8c536 100644
--- a/packages/grafana-ui/src/components/Tags/Tag.tsx
+++ b/packages/grafana-ui/src/components/Tags/Tag.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 import { getTagColor, getTagColorsFromName } from '../../utils';
diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx
index de13c627822..2fd0069e149 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.tsx
+++ b/packages/grafana-ui/src/components/Tags/TagList.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { OnTagClick, Tag } from './Tag';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
index 3d718c77331..766bd3b1733 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { getTagColorsFromName } from '../../utils';
 import { stylesFactory, useTheme } from '../../themes';
 import { Icon } from '../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 086f94549b6..e8abc693a75 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, KeyboardEvent, FC, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../Button';
 import { TagItem } from './TagItem';
 import { useStyles } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
index 016a0ab6453..91301134571 100644
--- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLProps } from 'react';
 import { GrafanaTheme } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory, useTheme } from '../../themes';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
 
diff --git a/packages/grafana-ui/src/components/ThemeColors/Colors.tsx b/packages/grafana-ui/src/components/ThemeColors/Colors.tsx
index f70ba40e0ab..b8359cd1013 100644
--- a/packages/grafana-ui/src/components/ThemeColors/Colors.tsx
+++ b/packages/grafana-ui/src/components/ThemeColors/Colors.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import darkTheme from '../../themes/dark';
 import lightTheme from '../../themes/light';
 import { useStyles } from '../../themes';
diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
index 6f8f332c7f9..47cc022c657 100644
--- a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
+++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 import { Icon } from '../Icon/Icon';
 import { HorizontalGroup } from '../Layout/Layout';
diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
index bc042c9ee1d..50fee15efb3 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent, ChangeEvent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import {
   Threshold,
   sortThresholds,
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
index 24db0426070..1fd396a3130 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import RcTimePicker from 'rc-time-picker';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
 import { useTheme, Icon } from '../../index';
 import { stylesFactory } from '../../themes';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
index e003210e16d..91ef82b0ca5 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
@@ -1,5 +1,5 @@
 import React, { FC, FormEvent, MouseEvent, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { dateMath, dateTime, getDefaultTimeRange, GrafanaTheme, TimeRange, TimeZone } from '@grafana/data';
 import { useStyles } from '../../themes/ThemeContext';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
index 5efc8a2efbe..a5afb778b67 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { PureComponent, memo, FormEvent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 // Components
 import { Tooltip } from '../Tooltip/Tooltip';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
index 65d7aa3c6d7..a69a98faa78 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@@ -1,5 +1,5 @@
 import React, { FormEvent, memo, useCallback } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import Calendar from 'react-calendar/dist/entry.nostyle';
 import { dateTime, DateTime, dateTimeParse, GrafanaTheme, TimeZone } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../../themes';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
index 3b3e3214c5a..278159120a0 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -1,5 +1,5 @@
 import { GrafanaTheme, isDateTime, TimeOption, TimeRange, TimeZone } from '@grafana/data';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { memo, useState } from 'react';
 import { useMedia } from 'react-use';
 import { stylesFactory, useTheme } from '../../../themes';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
index 36483aaf8c5..f599b02a450 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { TimeZone, GrafanaTheme, getTimeZoneInfo } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../../themes';
 import { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
index dd89babda94..bb5ee3395d9 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerTitle.tsx
@@ -1,5 +1,5 @@
 import React, { memo, PropsWithChildren } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme, stylesFactory } from '../../../themes';
 
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeList.tsx
index e2b2af4450e..e4b832335ef 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeList.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeList.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { TimeRange, TimeOption, TimeZone } from '@grafana/data';
 import { TimePickerTitle } from './TimePickerTitle';
 import { TimeRangeOption } from './TimeRangeOption';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
index b245174ca49..21092d2eb54 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, TimeOption } from '@grafana/data';
 import { useTheme, stylesFactory, styleMixins } from '../../../themes';
 import { Icon } from '../../Icon/Icon';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneDescription.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneDescription.tsx
index e02510fc92f..8d4a173ed52 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneDescription.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneDescription.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useMemo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, TimeZoneInfo } from '@grafana/data';
 import { useTheme, stylesFactory } from '../../../themes';
 
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneGroup.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneGroup.tsx
index 6e60939890e..68060b2d14a 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneGroup.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneGroup.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme, stylesFactory } from '../../../themes';
 
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx
index 3dd56e5b044..6450e0ce905 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOffset.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, TimeZone, dateTimeFormat } from '@grafana/data';
 import { useTheme, stylesFactory } from '../../../themes';
 import isString from 'lodash/isString';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
index dfc009019b0..fda6285efa8 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, SelectableValue, getTimeZoneInfo } from '@grafana/data';
 import { useTheme } from '../../../themes/ThemeContext';
 import { stylesFactory } from '../../../themes/stylesFactory';
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneTitle.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneTitle.tsx
index 5944326d007..7fb95bdc381 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneTitle.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneTitle.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme, stylesFactory } from '../../../themes';
 
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
index c63e3ce6964..e1e83e5d1c2 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { CompletionItem, ThemeContext } from '../..';
 import { GrafanaTheme, renderMarkdown } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
index e4b20b0ca33..2d6a16e62a1 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 
 // @ts-ignore
 import Highlighter from 'react-highlight-words';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { CompletionItem, CompletionItemKind } from '../../types/completion';
 import { ThemeContext } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
index 3d52d71b3f1..e9782e1a3b2 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { VizLegendBaseProps, VizLegendItem } from './types';
 import { InlineList } from '../List/InlineList';
 import { List } from '../List/List';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { VizLegendListItem } from './VizLegendListItem';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
index a9195c1f977..6cec71deff4 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { VizLegendSeriesIcon } from './VizLegendSeriesIcon';
 import { VizLegendItem, SeriesColorChangeHandler } from './types';
 import { VizLegendStatsList } from './VizLegendStatsList';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
index d8427ee2ef6..2ecb0c69eed 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { InlineList } from '../List/InlineList';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { DisplayValue, formattedValueToString } from '@grafana/data';
 import capitalize from 'lodash/capitalize';
 import { useStyles } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
index 95c55d241c1..5ad17bf5fe2 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { VizLegendTableProps } from './types';
 import { Icon } from '../Icon/Icon';
 import { useStyles } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
index 7b0185f1913..7286c1e043e 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { VizLegendSeriesIcon } from './VizLegendSeriesIcon';
 import { VizLegendItem, SeriesColorChangeHandler } from './types';
 import { useStyles } from '../../themes/ThemeContext';
diff --git a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx
index 9b3159a7781..2a3f3ac2941 100644
--- a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx
+++ b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CSSTransition } from 'react-transition-group';
 import { stylesFactory } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx
index 7428912f420..aeaf0216512 100644
--- a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx
+++ b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CSSTransition } from 'react-transition-group';
 import { stylesFactory } from '../../themes';
 
diff --git a/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx b/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx
index 1e03e366b2e..6a9cbbc56c3 100644
--- a/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx
+++ b/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 interface MarkerProps {
diff --git a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx
index 352d34cb0df..20e37c71019 100644
--- a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx
+++ b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx
@@ -1,6 +1,6 @@
 import { usePlotContext } from '../context';
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface XYCanvasProps {}
 
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/AnnotationsEditorPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/AnnotationsEditorPlugin.tsx
index a3dd070d29a..307d6d82fcd 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/AnnotationsEditorPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/AnnotationsEditorPlugin.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { SelectionPlugin } from './SelectionPlugin';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button } from '../../Button';
 import useClickAway from 'react-use/lib/useClickAway';
 
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/ClickPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/ClickPlugin.tsx
index 85aa77fc773..1d62062ae45 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/ClickPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/ClickPlugin.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { css as cssCore, Global } from '@emotion/core';
+import { css as cssCore, Global } from '@emotion/react';
 import { CartesianCoords2D } from '@grafana/data';
 
 import { PlotPluginProps } from '../types';
diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts
index 0ab360617a7..14c5d8a589c 100644
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -1,5 +1,5 @@
 // Needed for emotion types
-import '@emotion/core';
+import '@emotion/react';
 
 /**
  * A library containing the different design components of the Grafana ecosystem.
diff --git a/packages/grafana-ui/src/themes/ThemeContext.test.tsx b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
index 5fecc61601f..e49cf3bc8e1 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.test.tsx
+++ b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { config } from '@grafana/runtime';
 import { renderHook } from '@testing-library/react-hooks';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { mount } from 'enzyme';
 import { memoizedStyleCreators, mockThemeContext, useStyles } from './ThemeContext';
 
diff --git a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
index 12c2501728a..9a7adfdfc9a 100644
--- a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
+++ b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useTheme } from '../../themes';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
index 95e451debdc..432cd7ddb50 100644
--- a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
+++ b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useTheme } from '../../themes/ThemeContext';
 
 export interface Props {
diff --git a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
index 80b63866739..de85f0de507 100644
--- a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { boolean, number } from '@storybook/addon-knobs';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { RenderFunction } from '../../types';
 
 const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries: boolean }> = ({
diff --git a/packages/jaeger-ui-components/package.json b/packages/jaeger-ui-components/package.json
index 1bae230ee28..8fa945f662c 100644
--- a/packages/jaeger-ui-components/package.json
+++ b/packages/jaeger-ui-components/package.json
@@ -14,6 +14,8 @@
     "typescript": "4.1.2"
   },
   "dependencies": {
+    "@emotion/react": "11.1.5",
+    "@emotion/css": "11.1.3",
     "@grafana/data": "7.5.0-pre.0",
     "@grafana/ui": "7.5.0-pre.0",
     "@types/classnames": "^2.2.7",
@@ -29,7 +31,6 @@
     "combokeys": "^3.0.0",
     "copy-to-clipboard": "^3.1.0",
     "deep-freeze": "^0.0.1",
-    "emotion": "^10.0.27",
     "fuzzy": "^0.1.3",
     "hoist-non-react-statics": "^3.3.2",
     "json-markup": "^1.1.0",
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx
index f2bf6e17234..68541efc35f 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import renderIntoCanvas from './render-into-canvas';
 import { getRgbColorByKey } from '../../utils/color-generator';
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
index c6502943df9..be3391b30bc 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { createStyle } from '../../Theme';
 
 const getStyles = createStyle(() => {
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx
index 017ff5ea4d4..e8609567a95 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 import cx from 'classnames';
 
 import { createStyle } from '../../Theme';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const getStyles = createStyle(() => {
   return {
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.tsx
index 8fd779ab95f..862e393638e 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 import { formatDuration } from '../../utils/date';
 
 import { createStyle } from '../../Theme';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const getStyles = createStyle(() => {
   return {
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx
index 8bbb4f1f5f6..384e0805c8c 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx
@@ -14,7 +14,7 @@
 
 import cx from 'classnames';
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
index aa8c7e89f7b..6a7ed9059ec 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx
@@ -17,7 +17,7 @@ import _get from 'lodash/get';
 import _maxBy from 'lodash/maxBy';
 import _values from 'lodash/values';
 import MdKeyboardArrowRight from 'react-icons/lib/md/keyboard-arrow-right';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import SpanGraph from './SpanGraph';
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
index 7af95d6e707..0ff39cb3da7 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
@@ -15,7 +15,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import IoAndroidLocate from 'react-icons/lib/io/android-locate';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import * as markers from './TracePageSearchBar.markers';
 import UiFindInput from '../common/UiFindInput';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
index 5a84f7a7e15..6a5b4ec78bd 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import NewWindowIcon from '../common/NewWindowIcon';
 import { TraceSpanReference } from '../types/trace';
 import { UITooltip, UIDropdown, UIMenuItem, UIMenu, TooltipPlacement } from '../uiElementsContext';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
index a7a2de7d89b..43cffc11f50 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import cx from 'classnames';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import _groupBy from 'lodash/groupBy';
 import React from 'react';
 import { compose, onlyUpdateForKeys, withProps, withState } from 'recompose';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
index 254bb1a1d35..a4f39237002 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
@@ -17,7 +17,7 @@ import IoAlert from 'react-icons/lib/io/alert';
 import IoArrowRightA from 'react-icons/lib/io/arrow-right-a';
 import IoNetwork from 'react-icons/lib/io/network';
 import MdFileUpload from 'react-icons/lib/md/file-upload';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import ReferencesButton from './ReferencesButton';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
index b9b1e7f3fc2..c44c552c446 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx
@@ -15,7 +15,7 @@
 import * as React from 'react';
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import * as markers from './AccordianKeyValues.markers';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
index 7d16dbe1af8..fa00f13256e 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx
@@ -16,7 +16,7 @@ import * as React from 'react';
 import _sortBy from 'lodash/sortBy';
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import AccordianKeyValues from './AccordianKeyValues';
 import { formatDuration } from '../utils';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
index 38d87b9b8a8..28398b20651 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx
index 5a8c381a25c..8943e41ccd2 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
index f99f6945d7b..e5704e3e461 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
@@ -14,7 +14,7 @@
 
 import * as React from 'react';
 import jsonMarkup from 'json-markup';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import CopyIcon from '../../common/CopyIcon';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx
index 20aefca15c8..ef4119e594b 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { createStyle } from '../../Theme';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
index 50c97c6359f..311823d8004 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import AccordianKeyValues from './AccordianKeyValues';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
index edf8514a15a..f541f1ac4f8 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import SpanDetail from './SpanDetail';
 import DetailState from './SpanDetail/DetailState';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx
index c6e49aaa59c..5737ab508b1 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 import _get from 'lodash/get';
 import IoChevronRight from 'react-icons/lib/io/chevron-right';
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { TraceSpan } from '../types/trace';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx
index fe10c863080..c660a9aa440 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { formatDuration } from './utils';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
index 2ebf823ce7c..0ac5100432a 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { IconButton } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 import { createStyle } from '../../Theme';
 
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx
index 2d431542b76..a3f4f971d20 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { TNil } from '../../types';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
index 9d734b6f571..b98bef3a18e 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { TimelineCollapser } from './TimelineCollapser';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js
index d23a95fd330..43657567d40 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 import TimelineViewingLayer, { getStyles } from './TimelineViewingLayer';
 
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
index cfe877f4fb3..e182aba22e8 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { TUpdateViewRangeTimeFunction, ViewRangeTime, ViewRangeTimeUpdate } from '../types';
 import { TNil } from '../../types';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx
index 21a703bd859..f1ec8231e37 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 import { createStyle } from '../Theme';
 import { ubRelative } from '../uberUtilityStyles';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
index f88d022a323..9c03faa695b 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import ListView from './ListView';
 import SpanBarRow from './SpanBarRow';
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx
index 6844f96b7be..144a0247030 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import TimelineHeaderRow from './TimelineHeaderRow';
 import VirtualizedTraceView from './VirtualizedTraceView';
diff --git a/packages/jaeger-ui-components/src/common/BreakableText.tsx b/packages/jaeger-ui-components/src/common/BreakableText.tsx
index d5db160dcda..868d416a6e0 100644
--- a/packages/jaeger-ui-components/src/common/BreakableText.tsx
+++ b/packages/jaeger-ui-components/src/common/BreakableText.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { createStyle } from '../Theme';
 
diff --git a/packages/jaeger-ui-components/src/common/CopyIcon.tsx b/packages/jaeger-ui-components/src/common/CopyIcon.tsx
index ff31e733ead..74c086baca7 100644
--- a/packages/jaeger-ui-components/src/common/CopyIcon.tsx
+++ b/packages/jaeger-ui-components/src/common/CopyIcon.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 import copy from 'copy-to-clipboard';
 
diff --git a/packages/jaeger-ui-components/src/common/LabeledList.tsx b/packages/jaeger-ui-components/src/common/LabeledList.tsx
index 079900602c4..f19adf2d5bc 100644
--- a/packages/jaeger-ui-components/src/common/LabeledList.tsx
+++ b/packages/jaeger-ui-components/src/common/LabeledList.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import { createStyle, isLight, Theme, useTheme } from '../Theme';
diff --git a/packages/jaeger-ui-components/src/common/LoadingIndicator.tsx b/packages/jaeger-ui-components/src/common/LoadingIndicator.tsx
index 147fae32b90..14a66681fd7 100644
--- a/packages/jaeger-ui-components/src/common/LoadingIndicator.tsx
+++ b/packages/jaeger-ui-components/src/common/LoadingIndicator.tsx
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import cx from 'classnames';
-import { css, keyframes } from 'emotion';
+import { css, keyframes } from '@emotion/css';
 
 import { createStyle } from '../Theme';
 import { UIIcon } from '../uiElementsContext';
diff --git a/packages/jaeger-ui-components/src/common/NewWindowIcon.tsx b/packages/jaeger-ui-components/src/common/NewWindowIcon.tsx
index bd203d52282..7ebc6fd5c86 100644
--- a/packages/jaeger-ui-components/src/common/NewWindowIcon.tsx
+++ b/packages/jaeger-ui-components/src/common/NewWindowIcon.tsx
@@ -15,7 +15,7 @@
 import React from 'react';
 import cx from 'classnames';
 import IoAndroidOpen from 'react-icons/lib/io/android-open';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { createStyle } from '../Theme';
 
diff --git a/packages/jaeger-ui-components/src/common/TraceName.tsx b/packages/jaeger-ui-components/src/common/TraceName.tsx
index b22237e7099..bd14247d883 100644
--- a/packages/jaeger-ui-components/src/common/TraceName.tsx
+++ b/packages/jaeger-ui-components/src/common/TraceName.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 
 import BreakableText from './BreakableText';
diff --git a/packages/jaeger-ui-components/src/uberUtilityStyles.ts b/packages/jaeger-ui-components/src/uberUtilityStyles.ts
index b7894a12272..f2c7457f2d5 100644
--- a/packages/jaeger-ui-components/src/uberUtilityStyles.ts
+++ b/packages/jaeger-ui-components/src/uberUtilityStyles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const ubRelative = css`
   position: relative;
diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index deb119b2398..cf9c4de6a4a 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme } from '@grafana/ui';
 
 export interface BrandComponentProps {
diff --git a/public/app/core/components/Card/Card.tsx b/public/app/core/components/Card/Card.tsx
index 93945b0cf9a..13fcf6ededa 100644
--- a/public/app/core/components/Card/Card.tsx
+++ b/public/app/core/components/Card/Card.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 export interface CardProps {
   logoUrl?: string;
diff --git a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
index 396c6dfc8c1..0d767b578fe 100644
--- a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
+++ b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { Button, stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const getStyles = stylesFactory(() => {
   return css`
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index cb4fa175b12..e47f617d219 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, useContext } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CallToActionCard, Icon, IconName, LinkButton, ThemeContext } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
diff --git a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
index 88e067c6354..20f0059e99c 100644
--- a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
+++ b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import { Form, Field, Input, Button, Legend, Container, useStyles, HorizontalGroup, LinkButton } from '@grafana/ui';
 import { getBackendSrv } from '@grafana/runtime';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import config from 'app/core/config';
 
diff --git a/public/app/core/components/Login/LoginForm.tsx b/public/app/core/components/Login/LoginForm.tsx
index bdd7ef2fb4e..6704c44e7a1 100644
--- a/public/app/core/components/Login/LoginForm.tsx
+++ b/public/app/core/components/Login/LoginForm.tsx
@@ -3,7 +3,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { FormModel } from './LoginCtrl';
 import { Button, Form, Input, Field } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props {
   children: ReactElement;
diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx
index b0cc15baf6b..dbf8195243b 100644
--- a/public/app/core/components/Login/LoginLayout.tsx
+++ b/public/app/core/components/Login/LoginLayout.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx, css, keyframes } from 'emotion';
+import { cx, css, keyframes } from '@emotion/css';
 import { useStyles } from '@grafana/ui';
 import { Branding } from '../Branding/Branding';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx
index f5d90bb7645..264948302b1 100644
--- a/public/app/core/components/Login/LoginPage.tsx
+++ b/public/app/core/components/Login/LoginPage.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 // Components
 import { UserSignup } from './UserSignup';
diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index b2daeb810d3..5e56863726a 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import config from 'app/core/config';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/public/app/core/components/Login/UserSignup.tsx b/public/app/core/components/Login/UserSignup.tsx
index 7487ad1283d..16185315c58 100644
--- a/public/app/core/components/Login/UserSignup.tsx
+++ b/public/app/core/components/Login/UserSignup.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { LinkButton, VerticalGroup } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { getConfig } from 'app/core/config';
 
 export const UserSignup: FC<{}> = () => {
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 46ab58c25a9..7c224a0d82b 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -9,7 +9,7 @@ import { PageContents } from './PageContents';
 import { CustomScrollbar, useStyles } from '@grafana/ui';
 import { GrafanaTheme, NavModel } from '@grafana/data';
 import { Branding } from '../Branding/Branding';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index fa305235e3f..bf91c5bb862 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Tab, TabsBar, Icon, IconName, useStyles } from '@grafana/ui';
 import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaTheme } from '@grafana/data';
 import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index e402b8a0b23..a85a4f6c383 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import config from 'app/core/config';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
index 5a7c86a69df..350cce40669 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationAction.tsx
@@ -1,6 +1,6 @@
 import { IconButton, IconName, stylesFactory, useTheme } from '@grafana/ui';
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index 3d23289ecf8..36e0cece1d5 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { Icon, renderOrCallToRender, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useUpdateEffect } from 'react-use';
 import { Draggable } from 'react-beautiful-dnd';
 
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 908ac1cdc54..9b06fef9b9f 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import {
   Select,
diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
index 6cf1186988b..11e75175c78 100644
--- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
+++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx
@@ -1,6 +1,6 @@
 import React, { createRef, MutableRefObject, PureComponent, ReactNode } from 'react';
 import SplitPane from 'react-split-pane';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 68e28036ef6..69dbfa24037 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 // @ts-ignore
 import { components } from '@torkelo/react-select';
 import { AsyncSelect, stylesFactory, useTheme, resetSelectStyles, Icon } from '@grafana/ui';
diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index b8be8846173..29ddacde851 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/public/app/core/components/TagFilter/TagOption.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useTheme, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/public/app/core/components/TraceToLogsSettings.tsx b/public/app/core/components/TraceToLogsSettings.tsx
index fcdcc643ef8..ea8edd01384 100644
--- a/public/app/core/components/TraceToLogsSettings.tsx
+++ b/public/app/core/components/TraceToLogsSettings.tsx
@@ -6,7 +6,7 @@ import {
 } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { InlineFormLabel, TagsInput, useStyles } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 export interface TraceToLogsOptions {
diff --git a/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
index 08e4b746341..dcf3ec3d12c 100644
--- a/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
@@ -9,7 +9,7 @@ import {
   stringToJsRegex,
 } from '@grafana/data';
 import { Field, Input, FilterPill, HorizontalGroup } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { FilterFieldsByNameTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByName';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
diff --git a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
index 3229a7fab07..83d2f015c1b 100644
--- a/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import {
   DataTransformerID,
   standardTransformers,
diff --git a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
index 96c0cc3b464..5706844c195 100644
--- a/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/GroupByTransformerEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import {
   DataTransformerID,
   ReducerID,
diff --git a/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
index 91d9b7f5bf9..b606a49f393 100644
--- a/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import {
   DataFrame,
diff --git a/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx b/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx
index 38e6d1a62fc..23d16034d95 100644
--- a/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx
+++ b/public/app/core/components/TransformersUI/RenameByRegexTransformer.tsx
@@ -7,7 +7,7 @@ import {
   stringToJsRegex,
 } from '@grafana/data';
 import { Field, Input } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { RenameByRegexTransformerOptions } from '@grafana/data/src/transformations/transformers/renameByRegex';
 
 interface RenameByRegexTransformerEditorProps extends TransformerUIProps<RenameByRegexTransformerOptions> {}
diff --git a/public/app/core/components/sidemenu/BottomNavLinks.tsx b/public/app/core/components/sidemenu/BottomNavLinks.tsx
index 89a3a1a8150..0fed3fce660 100644
--- a/public/app/core/components/sidemenu/BottomNavLinks.tsx
+++ b/public/app/core/components/sidemenu/BottomNavLinks.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import appEvents from '../../app_events';
 import { User } from '../../services/context_srv';
 import { NavModelItem } from '@grafana/data';
diff --git a/public/app/core/components/sidemenu/DropDownChild.tsx b/public/app/core/components/sidemenu/DropDownChild.tsx
index d3de0a3aca9..d6ddecddd66 100644
--- a/public/app/core/components/sidemenu/DropDownChild.tsx
+++ b/public/app/core/components/sidemenu/DropDownChild.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Icon, IconName, Link, useTheme } from '@grafana/ui';
 
 export interface Props {
diff --git a/public/app/features/admin/AdminEditOrgPage.tsx b/public/app/features/admin/AdminEditOrgPage.tsx
index c25aa720fab..03e82883df5 100644
--- a/public/app/features/admin/AdminEditOrgPage.tsx
+++ b/public/app/features/admin/AdminEditOrgPage.tsx
@@ -8,7 +8,7 @@ import { useAsyncFn } from 'react-use';
 import { getBackendSrv } from '@grafana/runtime';
 import { UrlQueryValue } from '@grafana/data';
 import { Form, Field, Input, Button, Legend } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 interface OrgNameDTO {
diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx
index 87944a6390b..ed6b89a2192 100644
--- a/public/app/features/admin/LicenseChrome.tsx
+++ b/public/app/features/admin/LicenseChrome.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
 const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
diff --git a/public/app/features/admin/UpgradePage.tsx b/public/app/features/admin/UpgradePage.tsx
index a2d289a63f5..22c0ce32c16 100644
--- a/public/app/features/admin/UpgradePage.tsx
+++ b/public/app/features/admin/UpgradePage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { NavModel } from '@grafana/data';
 import Page from '../../core/components/Page/Page';
 import { LicenseChrome } from './LicenseChrome';
diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx
index aaf970ae1ed..811f062288e 100644
--- a/public/app/features/admin/UserListAdminPage.tsx
+++ b/public/app/features/admin/UserListAdminPage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { hot } from 'react-hot-loader';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { NavModel } from '@grafana/data';
diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx
index d5b100cc038..80553fe16c7 100644
--- a/public/app/features/admin/UserOrgs.tsx
+++ b/public/app/features/admin/UserOrgs.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import {
   Button,
   ConfirmButton,
diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx
index 1c6df69265a..4813c989677 100644
--- a/public/app/features/admin/UserPermissions.tsx
+++ b/public/app/features/admin/UserPermissions.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { ConfirmButton, RadioButtonGroup, Icon } from '@grafana/ui';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 
 interface Props {
   isGrafanaAdmin: boolean;
diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx
index a3d895cf839..25672f879fe 100644
--- a/public/app/features/admin/UserProfile.tsx
+++ b/public/app/features/admin/UserProfile.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent, FC } from 'react';
 import { UserDTO } from 'app/types';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { config } from 'app/core/config';
 import { GrafanaTheme } from '@grafana/data';
 import { ConfirmButton, ConfirmModal, LegacyInputStatus, Button, stylesFactory, Input } from '@grafana/ui';
diff --git a/public/app/features/admin/UserSessions.tsx b/public/app/features/admin/UserSessions.tsx
index 0eefbd9df02..cd417b22682 100644
--- a/public/app/features/admin/UserSessions.tsx
+++ b/public/app/features/admin/UserSessions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ConfirmButton, ConfirmModal, Button } from '@grafana/ui';
 import { UserSession } from 'app/types';
 
diff --git a/public/app/features/alerting/NextGenAlertingPage.tsx b/public/app/features/alerting/NextGenAlertingPage.tsx
index 547c9c6420b..6fed4b5d484 100644
--- a/public/app/features/alerting/NextGenAlertingPage.tsx
+++ b/public/app/features/alerting/NextGenAlertingPage.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent, PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect, ConnectedProps } from 'react-redux';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { PageToolbar, stylesFactory, ToolbarButton } from '@grafana/ui';
diff --git a/public/app/features/alerting/StateHistory.tsx b/public/app/features/alerting/StateHistory.tsx
index 823c28477af..c6fc1a2bed2 100644
--- a/public/app/features/alerting/StateHistory.tsx
+++ b/public/app/features/alerting/StateHistory.tsx
@@ -4,7 +4,7 @@ import { Icon, ConfirmButton, Button } from '@grafana/ui';
 
 import alertDef from './state/alertDef';
 import { DashboardModel } from '../dashboard/state/DashboardModel';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props {
   dashboard: DashboardModel;
diff --git a/public/app/features/alerting/components/AlertDefinitionOptions.tsx b/public/app/features/alerting/components/AlertDefinitionOptions.tsx
index 58a6dbe9f71..dbc09d64c23 100644
--- a/public/app/features/alerting/components/AlertDefinitionOptions.tsx
+++ b/public/app/features/alerting/components/AlertDefinitionOptions.tsx
@@ -1,5 +1,5 @@
 import React, { FC, FormEvent, useMemo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { Field, Input, Select, Tab, TabContent, TabsBar, TextArea, useStyles } from '@grafana/ui';
 import { AlertDefinition, QueryGroupOptions } from 'app/types';
diff --git a/public/app/features/alerting/components/AlertingQueryEditor.tsx b/public/app/features/alerting/components/AlertingQueryEditor.tsx
index 6592c06914e..59064210928 100644
--- a/public/app/features/alerting/components/AlertingQueryEditor.tsx
+++ b/public/app/features/alerting/components/AlertingQueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { RefreshPicker, stylesFactory } from '@grafana/ui';
 
diff --git a/public/app/features/alerting/components/AlertingQueryPreview.tsx b/public/app/features/alerting/components/AlertingQueryPreview.tsx
index 27b8f95b8c2..349a96701ff 100644
--- a/public/app/features/alerting/components/AlertingQueryPreview.tsx
+++ b/public/app/features/alerting/components/AlertingQueryPreview.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo, useState } from 'react';
 import { useObservable } from 'react-use';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { DataFrame, DataQuery, GrafanaTheme, PanelData } from '@grafana/data';
 import { config } from '@grafana/runtime';
diff --git a/public/app/features/alerting/components/EmptyState.tsx b/public/app/features/alerting/components/EmptyState.tsx
index fc043b4025a..9e517b04659 100644
--- a/public/app/features/alerting/components/EmptyState.tsx
+++ b/public/app/features/alerting/components/EmptyState.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/public/app/features/alerting/components/NotificationChannelForm.tsx b/public/app/features/alerting/components/NotificationChannelForm.tsx
index bb13130168a..da1ade32641 100644
--- a/public/app/features/alerting/components/NotificationChannelForm.tsx
+++ b/public/app/features/alerting/components/NotificationChannelForm.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { Button, FormAPI, HorizontalGroup, stylesFactory, useTheme, Spinner } from '@grafana/ui';
 import { NotificationChannelType, NotificationChannelDTO, NotificationChannelSecureFields } from '../../../types';
diff --git a/public/app/features/alerting/components/PreviewQueryTab.tsx b/public/app/features/alerting/components/PreviewQueryTab.tsx
index e19614bb472..93e918cfcf9 100644
--- a/public/app/features/alerting/components/PreviewQueryTab.tsx
+++ b/public/app/features/alerting/components/PreviewQueryTab.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { getFrameDisplayName, GrafanaTheme, PanelData, SelectableValue } from '@grafana/data';
 import { Button, Select, stylesFactory, Table, useTheme } from '@grafana/ui';
 import { EmptyState } from './EmptyState';
diff --git a/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
index 7a1cb2372bd..d384e0c9bc4 100644
--- a/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
+++ b/public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
@@ -5,7 +5,7 @@ import { Spinner, Icon, IconName, Button } from '@grafana/ui';
 
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { standardAnnotationSupport } from '../standardAnnotationSupport';
 import { executeAnnotationQuery } from '../annotations_srv';
 import { PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index c6cb5df8c09..9c5405e321f 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { connect, MapDispatchToProps } from 'react-redux';
-import { css, cx, keyframes } from 'emotion';
+import { css, cx, keyframes } from '@emotion/css';
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
 import { locationService } from '@grafana/runtime';
diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
index 7a7423b9a4b..5f8e3e6a2d8 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { FunctionComponent, MouseEvent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 // Components
 import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
index 0add99da2e1..2643b659948 100644
--- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import React, { Component } from 'react';
 import { dateMath, TimeRange, TimeZone } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 // Types
 import { DashboardModel } from '../../state';
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 57490270b18..b02b11365a4 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory } from '@grafana/ui';
 import config from 'app/core/config';
diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
index b99d8cad87b..f983d4f3bd4 100644
--- a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
+++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import sumBy from 'lodash/sumBy';
 import { Modal, ConfirmModal, HorizontalGroup, Button } from '@grafana/ui';
 import { DashboardModel, PanelModel } from '../../state';
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
index e0603c6f712..a46ed3ad6eb 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CollapsableSection, Button, TagsInput, Select, Field, Input, Checkbox } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { LinkSettingsMode } from '../DashboardSettings/LinksSettings';
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index f28a6def8b3..d27587a8bf5 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { DeleteButton, Icon, IconButton, Tag, useTheme } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { arrayMove } from 'app/core/utils/arrayMove';
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index 4a7a341a5c1..592d1f49418 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -7,7 +7,7 @@ import {
 } from '@grafana/data';
 import React from 'react';
 import { Counter, Field, HorizontalGroup, IconButton, Label, stylesFactory, useTheme } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { OptionsPaneCategory } from './OptionsPaneCategory';
 
 interface DynamicConfigValueEditorProps {
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
index c4a54e775d1..0659a3a1b99 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FieldConfigSource, GrafanaTheme, PanelPlugin } from '@grafana/data';
 import { DashboardModel, PanelModel } from '../../state';
 import { useStyles } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 import { VisualizationButton } from './VisualizationButton';
 import { OptionsPaneOptions } from './OptionsPaneOptions';
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 638ade8b1d3..48dadeeb175 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useCallback, useEffect, useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import _ from 'lodash';
 import { GrafanaTheme } from '@grafana/data';
 import { Counter, Icon, useStyles } from '@grafana/ui';
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index dc6fac2095e..5a66ce48afc 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -4,7 +4,7 @@ import { DashboardModel, PanelModel } from '../../state';
 import { CustomScrollbar, RadioButtonGroup, useStyles } from '@grafana/ui';
 import { getPanelFrameCategory } from './getPanelFrameOptions';
 import { getVizualizationOptions } from './getVizualizationOptions';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 import { OptionsPaneCategory } from './OptionsPaneCategory';
 import { getFieldOverrideCategories } from './getFieldOverrideElements';
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
index de147067dd7..7717707f9d6 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { FieldConfigOptionsRegistry, GrafanaTheme, ConfigOverrideRule } from '@grafana/data';
 import { HorizontalGroup, Icon, IconButton, useStyles } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface OverrideCategoryTitleProps {
   isExpanded: boolean;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index 2ac3ec15d8f..e17a712c588 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Prompt } from 'react-router-dom';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index e6470e68672..0a68b828e94 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles } from '@grafana/ui';
 import { AlertTab } from 'app/features/alerting/AlertTab';
 import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
index 20730384017..69d293cc2b1 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, PanelPlugin } from '@grafana/data';
 import { ToolbarButton, ButtonGroup, useStyles } from '@grafana/ui';
 import { StoreState } from 'app/types';
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
index 3de476c8130..c6d4c6f5196 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { Icon, Input, RadioButtonGroup, CustomScrollbar, useStyles, Button } from '@grafana/ui';
 import { changePanelPlugin } from '../../state/actions';
diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
index a7478598cd5..a6a19bdb2be 100644
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Modal, stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm';
 
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
index 1f0dfbcbcb9..ca9c0364b7c 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardAsModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Modal } from '@grafana/ui';
 import { SaveDashboardAsForm } from './forms/SaveDashboardAsForm';
 import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
index 36cd04a4d76..d8e20354400 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Button, ConfirmModal, HorizontalGroup, Modal, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { useDashboardSave } from './useDashboardSave';
 import { SaveDashboardModalProps } from './types';
diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
index b1f9fa659de..2bd1992b449 100644
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { SaveDashboardForm } from './forms/SaveDashboardForm';
 import { SaveDashboardErrorProxy } from './SaveDashboardErrorProxy';
 import { useDashboardSave } from './useDashboardSave';
diff --git a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
index e1efcba4a40..b4221e0ea23 100644
--- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, HorizontalGroup, Modal, VerticalGroup } from '@grafana/ui';
 import { SaveDashboardButton } from './SaveDashboardButton';
 import { DashboardModel } from '../../state';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface UnsavedChangesModalProps {
   dashboard: DashboardModel;
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index 78693a9d2d1..e12f754ea0f 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { saveAs } from 'file-saver';
 import { Button, HorizontalGroup, stylesFactory, TextArea, useTheme, VerticalGroup } from '@grafana/ui';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
index 059cb1d1c90..64b626a5a1b 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { mergeMap } from 'rxjs/operators';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Icon, JSONFormatter, useStyles } from '@grafana/ui';
 import {
   DataFrame,
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 6d0e7d71694..6875a8d0e8d 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -23,7 +23,7 @@ import {
   standardTransformersRegistry,
 } from '@grafana/data';
 import { Card, CardProps } from '../../../../core/components/Card/Card';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 import { Unsubscribable } from 'rxjs';
 import { PanelModel } from '../../state';
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx b/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
index e2bc653e906..339e3a23e4a 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { DiffTitle } from './DiffTitle';
 import { DiffValues } from './DiffValues';
 import { Diff, getDiffText } from './utils';
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
index 21a8ea80445..1637b4b76b0 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStyles, Icon } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Diff, getDiffText } from './utils';
 import { DiffValues } from './DiffValues';
 
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
index 69bc204421d..227c830209c 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { useStyles, Icon } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Diff } from './utils';
 
 type DiffProps = {
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
index 41b5620a947..6bd257c32e0 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import ReactDiffViewer, { ReactDiffViewerProps, DiffMethod } from 'react-diff-viewer';
 import { useTheme } from '@grafana/ui';
 import tinycolor from 'tinycolor2';
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
index 1c37639d903..e132b20a647 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles } from '@grafana/ui';
 import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
index f25744410de..f3d5efe422f 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import noop from 'lodash/noop';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, useStyles } from '@grafana/ui';
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
index 5831f5eedfb..f15cbb6ddd9 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryTable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Checkbox, Button, Tag, ModalsController } from '@grafana/ui';
 import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
 import { RevertDashboardModal } from './RevertDashboardModal';
diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
index c9dc4e73776..dab046483cb 100644
--- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrafanaTheme, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
 import { Badge, BadgeProps, IconButton, PluginSignatureBadge, styleMixins, useStyles } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 
 interface Props {
diff --git a/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx b/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx
index b0fc2cdd41d..d82a52000fa 100644
--- a/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx
@@ -4,7 +4,7 @@ import config from 'app/core/config';
 import { VizTypePickerPlugin } from './VizTypePickerPlugin';
 import { EmptySearchResult, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme, PanelPluginMeta, PluginState } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface Props {
   current: PanelPluginMeta;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 787399ceaea..0e7d515697a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import { DataLink, PanelData } from '@grafana/data';
 import { Icon } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
index a32ea8fed4d..fb1d42a596a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme, LoadingState } from '@grafana/data';
 import { Icon, Tooltip, useStyles } from '@grafana/ui';
 
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
index 86cbe5db04e..ab1a5395583 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { PanelMenuItem } from '@grafana/data';
 import { Icon, IconName, useTheme } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/features/datasources/DataSourcesList.tsx b/public/app/features/datasources/DataSourcesList.tsx
index 6899120df1a..ee37265c022 100644
--- a/public/app/features/datasources/DataSourcesList.tsx
+++ b/public/app/features/datasources/DataSourcesList.tsx
@@ -5,7 +5,7 @@ import React, { FC } from 'react';
 import { DataSourceSettings } from '@grafana/data';
 import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
 import { Card, Tag, useStyles } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface Props {
   dataSources: DataSourceSettings[];
diff --git a/public/app/features/datasources/settings/CloudInfoBox.tsx b/public/app/features/datasources/settings/CloudInfoBox.tsx
index f9e92dd5b5f..c669497e0f5 100644
--- a/public/app/features/datasources/settings/CloudInfoBox.tsx
+++ b/public/app/features/datasources/settings/CloudInfoBox.tsx
@@ -1,6 +1,6 @@
 import { DataSourceSettings, GrafanaTheme } from '@grafana/data';
 import { FeatureInfoBox, useStyles } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { FC } from 'react';
 import { config } from 'app/core/config';
 import { GrafanaEdition } from '@grafana/data/src/types/config';
diff --git a/public/app/features/explore/AdHocFilter.tsx b/public/app/features/explore/AdHocFilter.tsx
index 79435bb2a28..bb682f5a625 100644
--- a/public/app/features/explore/AdHocFilter.tsx
+++ b/public/app/features/explore/AdHocFilter.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { LegacyForms, ThemeContext } from '@grafana/ui';
 const { Select } = LegacyForms;
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 
 const getStyles = (theme: GrafanaTheme) => ({
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index da71073a882..ae3b7400d6d 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
diff --git a/public/app/features/explore/ExploreDrawer.tsx b/public/app/features/explore/ExploreDrawer.tsx
index ff7ace22d6d..872fb2e3875 100644
--- a/public/app/features/explore/ExploreDrawer.tsx
+++ b/public/app/features/explore/ExploreDrawer.tsx
@@ -1,7 +1,7 @@
 // Libraries
 import React from 'react';
 import { Resizable, ResizeCallback } from 're-resizable';
-import { css, cx, keyframes } from 'emotion';
+import { css, cx, keyframes } from '@emotion/css';
 
 // Services & Utils
 import { stylesFactory, useTheme } from '@grafana/ui';
diff --git a/public/app/features/explore/ExploreGraphNGPanel.tsx b/public/app/features/explore/ExploreGraphNGPanel.tsx
index b57c565dbe1..f443b6d00de 100644
--- a/public/app/features/explore/ExploreGraphNGPanel.tsx
+++ b/public/app/features/explore/ExploreGraphNGPanel.tsx
@@ -26,7 +26,7 @@ import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/times
 import { hideSeriesConfigFactory } from 'app/plugins/panel/timeseries/overrides/hideSeriesConfigFactory';
 import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin';
 import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { useCallback, useMemo, useState } from 'react';
 import { splitOpen } from './state/main';
 import { getFieldLinksForExplore } from './utils/links';
diff --git a/public/app/features/explore/ExploreGraphPanel.tsx b/public/app/features/explore/ExploreGraphPanel.tsx
index 4b1c2f991af..c4be4bd2cc1 100644
--- a/public/app/features/explore/ExploreGraphPanel.tsx
+++ b/public/app/features/explore/ExploreGraphPanel.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, TimeZone, AbsoluteTimeRange, GraphSeriesXY, dateTime } from '@grafana/data';
 
 import {
diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index bd9c4af18cf..afb3a8b573a 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import classNames from 'classnames';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
 import { Icon, IconButton, SetInterval, ToolbarButton, ToolbarButtonRow, Tooltip } from '@grafana/ui';
diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx
index cff88f85572..0c3510a8a53 100644
--- a/public/app/features/explore/LiveLogs.tsx
+++ b/public/app/features/explore/LiveLogs.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import tinycolor from 'tinycolor2';
 
 import { LogMessageAnsi, Themeable, withTheme, getLogRowStyles, Icon } from '@grafana/ui';
diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx
index 380327667f2..5fdc4ce8e51 100644
--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CSSTransition } from 'react-transition-group';
 import { useTheme, Tooltip, stylesFactory, ButtonGroup, ToolbarButton } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index ca43bf02231..e22d63eb1a7 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { capitalize } from 'lodash';
 import memoizeOne from 'memoize-one';
 
diff --git a/public/app/features/explore/MetaInfoText.tsx b/public/app/features/explore/MetaInfoText.tsx
index 9d3fff1964a..8f7cdb1566f 100644
--- a/public/app/features/explore/MetaInfoText.tsx
+++ b/public/app/features/explore/MetaInfoText.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, ThemeContext } from '@grafana/ui';
 
diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
index cd7aaccaca4..5127131fd4f 100644
--- a/public/app/features/explore/NoDataSourceCallToAction.tsx
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ThemeContext, LinkButton, CallToActionCard, Icon } from '@grafana/ui';
 
 export const NoDataSourceCallToAction = () => {
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index 9afb595ac5c..85a61188c00 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { GrafanaTheme, DataSourceApi } from '@grafana/data';
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index f4bd86230c2..9d32148d60f 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { uniqBy } from 'lodash';
 
 // Types
diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
index 6ab3a959b17..8d73366a96e 100644
--- a/public/app/features/explore/RichHistory/RichHistorySettings.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme, Select, Button, Switch, Field } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import appEvents from 'app/core/app_events';
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index e90ee4c9c34..b4736e4d003 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { uniqBy } from 'lodash';
 
 // Types
diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx
index fed4e1793e3..0984690349a 100644
--- a/public/app/features/explore/SecondaryActions.tsx
+++ b/public/app/features/explore/SecondaryActions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, Button, HorizontalGroup, useTheme } from '@grafana/ui';
 
diff --git a/public/app/features/explore/TraceView/uiElements.tsx b/public/app/features/explore/TraceView/uiElements.tsx
index 264300154e5..b68542e2c2d 100644
--- a/public/app/features/explore/TraceView/uiElements.tsx
+++ b/public/app/features/explore/TraceView/uiElements.tsx
@@ -10,7 +10,7 @@ import {
 } from '@grafana/ui';
 import { ButtonProps, Elements, PopoverProps, TooltipProps } from '@jaegertracing/jaeger-ui-components';
 import cx from 'classnames';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { useRef } from 'react';
 
 /**
diff --git a/public/app/features/explore/utils/LogsCrossFadeTransition.tsx b/public/app/features/explore/utils/LogsCrossFadeTransition.tsx
index 649070e9ae0..259a5930c7a 100644
--- a/public/app/features/explore/utils/LogsCrossFadeTransition.tsx
+++ b/public/app/features/explore/utils/LogsCrossFadeTransition.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import memoizeOne from 'memoize-one';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { CSSTransition } from 'react-transition-group';
 
 const transitionDuration = 500;
diff --git a/public/app/features/expressions/ExpressionQueryEditor.tsx b/public/app/features/expressions/ExpressionQueryEditor.tsx
index fead89d1d4b..535141d2f7d 100644
--- a/public/app/features/expressions/ExpressionQueryEditor.tsx
+++ b/public/app/features/expressions/ExpressionQueryEditor.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { PureComponent, ChangeEvent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
 import { SelectableValue, ReducerID, QueryEditorProps } from '@grafana/data';
diff --git a/public/app/features/inspector/DetailText.tsx b/public/app/features/inspector/DetailText.tsx
index 26b55fc5974..887c041e5b4 100644
--- a/public/app/features/inspector/DetailText.tsx
+++ b/public/app/features/inspector/DetailText.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const getStyles = (theme: GrafanaTheme) => css`
   margin: 0;
diff --git a/public/app/features/inspector/InspectDataTab.tsx b/public/app/features/inspector/InspectDataTab.tsx
index eecd0bc5e87..45dee7d38f1 100644
--- a/public/app/features/inspector/InspectDataTab.tsx
+++ b/public/app/features/inspector/InspectDataTab.tsx
@@ -18,7 +18,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { getPanelInspectorStyles } from './styles';
 import { config } from 'app/core/config';
 import { saveAs } from 'file-saver';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner';
 import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import { PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/inspector/InspectStatsTable.tsx b/public/app/features/inspector/InspectStatsTable.tsx
index 7fff4cf297c..bf58de5631f 100644
--- a/public/app/features/inspector/InspectStatsTable.tsx
+++ b/public/app/features/inspector/InspectStatsTable.tsx
@@ -9,7 +9,7 @@ import {
 } from '@grafana/data';
 import { config } from 'app/core/config';
 import { stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface InspectStatsTableProps {
   timeZone: TimeZone;
diff --git a/public/app/features/inspector/InspectSubtitle.tsx b/public/app/features/inspector/InspectSubtitle.tsx
index ffd1986c0c6..2df8c4736f9 100644
--- a/public/app/features/inspector/InspectSubtitle.tsx
+++ b/public/app/features/inspector/InspectSubtitle.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory, useTheme, Tab, TabsBar } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data';
 import { InspectTab } from '../inspector/types';
diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx
index b51495c5ae6..eba6f34818f 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -9,7 +9,7 @@ import { PanelModel } from 'app/features/dashboard/state';
 import { getPanelInspectorStyles } from './styles';
 import { supportsDataQuery } from 'app/features/dashboard/components/PanelEditor/utils';
 import { config } from '@grafana/runtime';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Subscription } from 'rxjs';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { RefreshEvent } from 'app/types/events';
diff --git a/public/app/features/inspector/styles.ts b/public/app/features/inspector/styles.ts
index 016bab5689b..01c7dfbad67 100644
--- a/public/app/features/inspector/styles.ts
+++ b/public/app/features/inspector/styles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { config } from 'app/core/config';
 import { stylesFactory } from '@grafana/ui';
 
diff --git a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
index 818fb132204..828c2685dee 100644
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Field, Input, Modal, useStyles } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { PanelModel } from '../../../dashboard/state';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { usePanelSave } from '../../utils/usePanelSave';
 
 interface Props {
diff --git a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
index cc363642cd7..39c0a0324f5 100644
--- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
@@ -2,7 +2,7 @@ import { DateTimeInput, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useStyles } from '@grafana/ui';
 import { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';
 import { PanelModel } from 'app/features/dashboard/state';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 interface Props {
diff --git a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
index d92be27feaf..9bcc3d1ec23 100644
--- a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useReducer } from 'react';
 import { useDebounce } from 'react-use';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Pagination, stylesFactory, useStyles } from '@grafana/ui';
 import { GrafanaTheme, LoadingState } from '@grafana/data';
 
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index 5fe1ea89c85..f84626ff783 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { Button, stylesFactory, useStyles } from '@grafana/ui';
 import { PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/library-panels/styles.ts b/public/app/features/library-panels/styles.ts
index ffcbffce1a5..3c26f7a1876 100644
--- a/public/app/features/library-panels/styles.ts
+++ b/public/app/features/library-panels/styles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
 export function getModalStyles(theme: GrafanaTheme) {
diff --git a/public/app/features/live/dashboard/DashboardChangedModal.tsx b/public/app/features/live/dashboard/DashboardChangedModal.tsx
index ad803ddc9dd..8281ae260d2 100644
--- a/public/app/features/live/dashboard/DashboardChangedModal.tsx
+++ b/public/app/features/live/dashboard/DashboardChangedModal.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Modal, stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { dashboardWatcher } from './dashboardWatcher';
 import { config } from '@grafana/runtime';
 import { DashboardEvent, DashboardEventAction } from './types';
diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx
index 16430610f97..54f89dd896a 100644
--- a/public/app/features/manage-dashboards/DashboardImportPage.tsx
+++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx
@@ -1,6 +1,6 @@
 import React, { FormEvent, PureComponent } from 'react';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { AppEvents, NavModel } from '@grafana/data';
 import { Button, stylesFactory, Input, TextArea, Field, Form, Legend, FileUpload } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
diff --git a/public/app/features/playlist/PlaylistTableRow.tsx b/public/app/features/playlist/PlaylistTableRow.tsx
index 01b5680ca85..79ec985c757 100644
--- a/public/app/features/playlist/PlaylistTableRow.tsx
+++ b/public/app/features/playlist/PlaylistTableRow.tsx
@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { Icon, IconButton, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/public/app/features/playlist/styles.ts b/public/app/features/playlist/styles.ts
index 2602c8f3865..43836c9e807 100644
--- a/public/app/features/playlist/styles.ts
+++ b/public/app/features/playlist/styles.ts
@@ -1,5 +1,5 @@
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export function getPlaylistStyles(theme: GrafanaTheme) {
   return {
diff --git a/public/app/features/plugins/PluginPage.tsx b/public/app/features/plugins/PluginPage.tsx
index c570e2f0489..35e1f61b471 100644
--- a/public/app/features/plugins/PluginPage.tsx
+++ b/public/app/features/plugins/PluginPage.tsx
@@ -29,7 +29,7 @@ import { PluginDashboards } from './PluginDashboards';
 import { appEvents } from 'app/core/core';
 import { config } from 'app/core/config';
 import { contextSrv } from '../../core/services/context_srv';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
 import { ShowModalEvent } from 'app/types/events';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
diff --git a/public/app/features/plugins/PluginStateInfo.tsx b/public/app/features/plugins/PluginStateInfo.tsx
index 915ac428338..35db0a2549b 100644
--- a/public/app/features/plugins/PluginStateInfo.tsx
+++ b/public/app/features/plugins/PluginStateInfo.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { AlphaNotice } from '@grafana/ui';
 import { PluginState } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props {
   state?: PluginState;
diff --git a/public/app/features/plugins/PluginsErrorsInfo.tsx b/public/app/features/plugins/PluginsErrorsInfo.tsx
index 53c50b2556e..cdb3ba3aa86 100644
--- a/public/app/features/plugins/PluginsErrorsInfo.tsx
+++ b/public/app/features/plugins/PluginsErrorsInfo.tsx
@@ -8,7 +8,7 @@ import useAsync from 'react-use/lib/useAsync';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { PluginError, PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface ConnectedProps {
   errors: PluginError[];
diff --git a/public/app/features/plugins/plugin_loader.ts b/public/app/features/plugins/plugin_loader.ts
index dbe0dc6c98c..c0444c87ff7 100644
--- a/public/app/features/plugins/plugin_loader.ts
+++ b/public/app/features/plugins/plugin_loader.ts
@@ -28,7 +28,7 @@ import { promiseToDigest } from 'app/core/utils/promiseToDigest';
 import impressionSrv from 'app/core/services/impression_srv';
 import builtInPlugins from './built_in_plugins';
 import * as d3 from 'd3';
-import * as emotion from 'emotion';
+import * as emotion from '@emotion/css';
 import * as grafanaData from '@grafana/data';
 import * as grafanaUIraw from '@grafana/ui';
 import * as grafanaRuntime from '@grafana/runtime';
@@ -101,6 +101,7 @@ exposeToPlugin('react-dom', reactDom);
 exposeToPlugin('react-redux', reactRedux);
 exposeToPlugin('redux', redux);
 exposeToPlugin('emotion', emotion);
+exposeToPlugin('@emotion/css', emotion);
 
 exposeToPlugin('app/features/dashboard/impression_store', {
   impressions: impressionSrv,
diff --git a/public/app/features/plugins/wrappers/AppConfigWrapper.tsx b/public/app/features/plugins/wrappers/AppConfigWrapper.tsx
index 8a025c9d86d..2f2cb5c394c 100644
--- a/public/app/features/plugins/wrappers/AppConfigWrapper.tsx
+++ b/public/app/features/plugins/wrappers/AppConfigWrapper.tsx
@@ -7,7 +7,7 @@ import { Button } from '@grafana/ui';
 import { PluginMeta, AppPlugin, deprecationWarning } from '@grafana/data';
 import { AngularComponent, getAngularLoader, getBackendSrv } from '@grafana/runtime';
 
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props {
   app: AppPlugin;
diff --git a/public/app/features/profile/ChangePasswordForm.tsx b/public/app/features/profile/ChangePasswordForm.tsx
index 2a4608af692..0f6befbcd6a 100644
--- a/public/app/features/profile/ChangePasswordForm.tsx
+++ b/public/app/features/profile/ChangePasswordForm.tsx
@@ -3,7 +3,7 @@ import config from 'app/core/config';
 import { UserDTO } from 'app/types';
 import { Button, LinkButton, Form, Field, Input, HorizontalGroup } from '@grafana/ui';
 import { ChangePasswordFields } from 'app/core/utils/UserProvider';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface Props {
   user: UserDTO;
diff --git a/public/app/features/query/components/HelpToggle.tsx b/public/app/features/query/components/HelpToggle.tsx
index 4c2078280b4..158cb5b8bd5 100644
--- a/public/app/features/query/components/HelpToggle.tsx
+++ b/public/app/features/query/components/HelpToggle.tsx
@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, InfoBox, stylesFactory, useTheme } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { useState } from 'react';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
diff --git a/public/app/features/query/components/QueryEditorRowTitle.tsx b/public/app/features/query/components/QueryEditorRowTitle.tsx
index 4776c380c01..af4b49331c5 100644
--- a/public/app/features/query/components/QueryEditorRowTitle.tsx
+++ b/public/app/features/query/components/QueryEditorRowTitle.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { DataQuery, GrafanaTheme } from '@grafana/data';
 import { FieldValidationMessage, Icon, Input, stylesFactory, useTheme } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index 1643e50378f..a33f48b9b42 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -24,7 +24,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { PanelQueryRunner } from '../state/PanelQueryRunner';
 import { QueryGroupOptionsEditor } from './QueryGroupOptions';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { QueryGroupOptions } from 'app/types';
 
 interface Props {
diff --git a/public/app/features/query/components/QueryGroupOptions.tsx b/public/app/features/query/components/QueryGroupOptions.tsx
index 46d5aff010b..1b397b89c72 100644
--- a/public/app/features/query/components/QueryGroupOptions.tsx
+++ b/public/app/features/query/components/QueryGroupOptions.tsx
@@ -10,7 +10,7 @@ import { Switch, Input, InlineField, InlineFormLabel, stylesFactory } from '@gra
 // Types
 import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import { config } from 'app/core/config';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { QueryGroupOptions } from 'app/types';
 
 interface Props {
diff --git a/public/app/features/search/components/ActionRow.tsx b/public/app/features/search/components/ActionRow.tsx
index 507dcd1f01e..7a2ac432859 100644
--- a/public/app/features/search/components/ActionRow.tsx
+++ b/public/app/features/search/components/ActionRow.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, FC, FormEvent, SetStateAction } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { HorizontalGroup, RadioButtonGroup, stylesFactory, useTheme, Checkbox } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { SortPicker } from 'app/core/components/Select/SortPicker';
diff --git a/public/app/features/search/components/ConfirmDeleteModal.tsx b/public/app/features/search/components/ConfirmDeleteModal.tsx
index dec98283059..e88d47b5c8e 100644
--- a/public/app/features/search/components/ConfirmDeleteModal.tsx
+++ b/public/app/features/search/components/ConfirmDeleteModal.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { ConfirmModal, stylesFactory, useTheme } from '@grafana/ui';
 import { getLocationSrv } from '@grafana/runtime';
diff --git a/public/app/features/search/components/DashboardSearch.tsx b/public/app/features/search/components/DashboardSearch.tsx
index 783dd698ae9..b30bf4703f7 100644
--- a/public/app/features/search/components/DashboardSearch.tsx
+++ b/public/app/features/search/components/DashboardSearch.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useTheme, CustomScrollbar, stylesFactory, IconButton } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { useSearchQuery } from '../hooks/useSearchQuery';
diff --git a/public/app/features/search/components/ManageDashboards.tsx b/public/app/features/search/components/ManageDashboards.tsx
index 861128bc72b..5fed03bd3e0 100644
--- a/public/app/features/search/components/ManageDashboards.tsx
+++ b/public/app/features/search/components/ManageDashboards.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { HorizontalGroup, stylesFactory, useTheme, Spinner } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { contextSrv } from 'app/core/services/context_srv';
diff --git a/public/app/features/search/components/MoveToFolderModal.tsx b/public/app/features/search/components/MoveToFolderModal.tsx
index 7007b490581..13d6b155d8e 100644
--- a/public/app/features/search/components/MoveToFolderModal.tsx
+++ b/public/app/features/search/components/MoveToFolderModal.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, HorizontalGroup, Modal, stylesFactory, useTheme } from '@grafana/ui';
 import { AppEvents, GrafanaTheme } from '@grafana/data';
 import { FolderInfo } from 'app/types';
diff --git a/public/app/features/search/components/SearchCheckbox.tsx b/public/app/features/search/components/SearchCheckbox.tsx
index 0043b515323..04327c2c842 100644
--- a/public/app/features/search/components/SearchCheckbox.tsx
+++ b/public/app/features/search/components/SearchCheckbox.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Checkbox, stylesFactory } from '@grafana/ui';
 
 interface Props {
diff --git a/public/app/features/search/components/SearchField.tsx b/public/app/features/search/components/SearchField.tsx
index 49bbb340510..567fd77f656 100644
--- a/public/app/features/search/components/SearchField.tsx
+++ b/public/app/features/search/components/SearchField.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { ThemeContext } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { DashboardQuery } from '../types';
diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx
index a9c75d14388..50eaddc673b 100644
--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { TagList, Card, useStyles, Icon, IconName } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/search/components/SearchResults.tsx b/public/app/features/search/components/SearchResults.tsx
index 2ef2d0548ea..5560ff88498 100644
--- a/public/app/features/search/components/SearchResults.tsx
+++ b/public/app/features/search/components/SearchResults.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/search/components/SearchResultsFilter.tsx b/public/app/features/search/components/SearchResultsFilter.tsx
index aba873b8daf..8758dc738cb 100644
--- a/public/app/features/search/components/SearchResultsFilter.tsx
+++ b/public/app/features/search/components/SearchResultsFilter.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, FC, SetStateAction } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, Checkbox, stylesFactory, useTheme, HorizontalGroup } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
 import { DashboardQuery } from '../types';
diff --git a/public/app/features/search/components/SectionHeader.tsx b/public/app/features/search/components/SectionHeader.tsx
index 5a115c68927..bb932ff112e 100644
--- a/public/app/features/search/components/SectionHeader.tsx
+++ b/public/app/features/search/components/SectionHeader.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useLocalStorage } from 'react-use';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, Spinner, stylesFactory, useTheme } from '@grafana/ui';
diff --git a/public/app/features/users/TokenRevokedModal.tsx b/public/app/features/users/TokenRevokedModal.tsx
index cea1bcb9773..ba0cf1aa637 100644
--- a/public/app/features/users/TokenRevokedModal.tsx
+++ b/public/app/features/users/TokenRevokedModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, InfoBox, Portal, stylesFactory, useTheme } from '@grafana/ui';
 import { getModalStyles } from '@grafana/ui/src/components/Modal/getModalStyles';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 
 interface Props {
diff --git a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
index 4f68ce807ab..725e84d5c19 100644
--- a/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
+++ b/public/app/features/variables/editor/LegacyVariableQueryEditor.tsx
@@ -5,7 +5,7 @@ import { VariableQueryProps } from 'app/types/plugins';
 import { VariableTextAreaField } from './VariableTextAreaField';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const LEGACY_VARIABLE_QUERY_EDITOR_NAME = 'Grafana-LegacyVariableQueryEditor';
 
diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx
index cad8ef02b64..3249c7f7c6c 100644
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Icon, IconButton, useStyles } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/variables/editor/VariableSectionHeader.tsx b/public/app/features/variables/editor/VariableSectionHeader.tsx
index e0e5252df8f..72ccf3109ff 100644
--- a/public/app/features/variables/editor/VariableSectionHeader.tsx
+++ b/public/app/features/variables/editor/VariableSectionHeader.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface VariableSectionHeaderProps {
   name: string;
diff --git a/public/app/features/variables/editor/VariableSelectField.tsx b/public/app/features/variables/editor/VariableSelectField.tsx
index 684c875cbaa..48f1beb7327 100644
--- a/public/app/features/variables/editor/VariableSelectField.tsx
+++ b/public/app/features/variables/editor/VariableSelectField.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { InlineFormLabel, Select, useStyles } from '@grafana/ui';
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface VariableSelectFieldProps<T> {
   name: string;
diff --git a/public/app/features/variables/editor/VariableTextAreaField.tsx b/public/app/features/variables/editor/VariableTextAreaField.tsx
index ebdc9ea89d3..300adab2def 100644
--- a/public/app/features/variables/editor/VariableTextAreaField.tsx
+++ b/public/app/features/variables/editor/VariableTextAreaField.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent, PropsWithChildren, ReactElement, useCallback } from 'react';
 import { InlineField, TextArea, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface VariableTextAreaFieldProps<T> {
   name: string;
diff --git a/public/app/features/variables/editor/VariableValuesPreview.tsx b/public/app/features/variables/editor/VariableValuesPreview.tsx
index aa4f3c70f0b..248e470f040 100644
--- a/public/app/features/variables/editor/VariableValuesPreview.tsx
+++ b/public/app/features/variables/editor/VariableValuesPreview.tsx
@@ -3,7 +3,7 @@ import { VariableOption, VariableWithOptions } from '../types';
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, InlineFieldRow, InlineLabel, useStyles, VerticalGroup } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export interface VariableValuesPreviewProps {
   variable: VariableWithOptions;
diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
index 2ce2591e047..7a2435c81df 100644
--- a/public/app/features/variables/inspect/VariablesUnknownTable.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Icon, Tooltip, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { UsagesToNetwork } from './utils';
diff --git a/public/app/features/variables/pickers/shared/VariableLink.tsx b/public/app/features/variables/pickers/shared/VariableLink.tsx
index 08121f7e90e..e70ec4d59f6 100644
--- a/public/app/features/variables/pickers/shared/VariableLink.tsx
+++ b/public/app/features/variables/pickers/shared/VariableLink.tsx
@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, useCallback } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { getTagColorsFromName, Icon, Tooltip, useStyles } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index 405f240cb2a..8258f140b11 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, FormEvent, PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { InlineField, InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
index e33eaebb51f..3fa1ab841ef 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
@@ -4,7 +4,7 @@ import { QueryEditorHelpProps } from '@grafana/data';
 import Prism from 'prismjs';
 import tokenizer from '../syntax';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { CloudWatchLogsQuery } from '../types';
 
 interface QueryExample {
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx
index 91c37df5467..3a1777b1787 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx
@@ -8,7 +8,7 @@ import { CloudWatchDatasource } from '../datasource';
 import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
 import { CloudWatchLogsQueryField } from './LogsQueryField';
 import CloudWatchLink from './CloudWatchLink';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData> & {
   allowCustomValue?: boolean;
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
index 2259c334517..b63880a43e1 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
@@ -26,7 +26,7 @@ import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../typ
 import { CloudWatchDatasource } from '../datasource';
 import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import { CloudWatchLanguageProvider } from '../language_provider';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { ExploreId } from 'app/types';
 import { dispatch } from 'app/store/store';
 import { notifyApp } from 'app/core/actions';
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
index 7e5ea4ddab4..7e999fc131c 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { LegacyForms, VerticalGroup } from '@grafana/ui';
 import { DataQuery, PanelData, SelectableValue } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { DashboardQuery, ResultInfo, SHARED_DASHBODARD_QUERY } from './types';
 import config from 'app/core/config';
diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx
index f82274b1795..5b3d957f170 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryRow.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Icon, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
index 316f87a2fc7..db7c398497d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { FunctionComponent } from 'react';
 import { IconButton } from './IconButton';
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx b/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
index b11a97d9bec..f5021a7b321 100644
--- a/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/IconButton.tsx
@@ -1,5 +1,5 @@
 import { Icon } from '@grafana/ui';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import React, { FunctionComponent, ComponentProps, ButtonHTMLAttributes } from 'react';
 
 const SROnly = css`
diff --git a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
index c1b7f86d8d8..00be7d0a648 100644
--- a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { SelectableValue } from '@grafana/data';
 import { Segment } from '@grafana/ui';
 import { describeMetric } from '../utils';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index 2d4eed59af8..3d866b6d600 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -1,5 +1,5 @@
 import { InlineField, Input, QueryField } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { FunctionComponent, useEffect } from 'react';
 import { AddRemove } from '../../../../AddRemove';
 import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
index 3defc6b1e9b..06f025bdca2 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx
@@ -1,6 +1,6 @@
 import { MetricFindValue, SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
-import { cx } from 'emotion';
+import { cx } from '@emotion/css';
 import React, { FunctionComponent } from 'react';
 import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
 import { useDispatch } from '../../../hooks/useStatelessReducer';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
index 5c12f51f1a2..3a5e6d2eb8c 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent, useEffect } from 'react';
 import { Input, InlineLabel } from '@grafana/ui';
 import { MetricAggregationAction } from '../../state/types';
 import { changeMetricAttribute } from '../../state/actions';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { AddRemove } from '../../../../AddRemove';
 import { useStatelessReducer, useDispatch } from '../../../../../hooks/useStatelessReducer';
 import { MetricPicker } from '../../../../MetricPicker';
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
index 470de7e0312..70403a00830 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => ({
   color:
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index b4dfe932fc2..a625c9a0f0f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import React, { FunctionComponent } from 'react';
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
index ffe68974c44..fb4cd84d83f 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { FunctionComponent, useState } from 'react';
 import { segmentStyles } from './styles';
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
index 70ee88de758..aa312a94132 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 export const segmentStyles = css`
   min-width: 150px;
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
index 4ae6ce274fb..cacb0361596 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { VariableSuggestion } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
index 05ab6090e6c..fceda3fdd29 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
 import { DataLinkConfig } from '../types';
diff --git a/public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx b/public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx
index 403c125f467..e39aaf04295 100644
--- a/public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx
+++ b/public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx
@@ -1,4 +1,4 @@
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { MetadataInspectorProps, rangeUtil } from '@grafana/data';
 import { GraphiteDatasource } from './datasource';
diff --git a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx
index 0036dc5405d..0a07b05328a 100644
--- a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import coreModule from 'app/core/core_module';
 import { InfluxQuery } from '../types';
 import { SelectableValue } from '@grafana/data';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import {
   InlineFormLabel,
   LinkButton,
diff --git a/public/app/plugins/datasource/loki/components/LokiLabel.tsx b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
index fc63b3bf96b..fd8d443fa4d 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabel.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
-import { cx, css } from 'emotion';
+import { cx, css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '@grafana/ui';
 // @ts-ignore
diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
index ea1eeb7ae7a..3f03e8136a3 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent } from 'react';
 import { Button, HorizontalGroup, Input, Label, LoadingPlaceholder, stylesFactory, withTheme } from '@grafana/ui';
 import LokiLanguageProvider from '../language_provider';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import store from 'app/core/store';
 import { FixedSizeList } from 'react-window';
 
diff --git a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
index 20f73c17269..2b59716fc4c 100644
--- a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { memo } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { LokiQuery } from '../types';
 
 // Types
diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
index b4ee9ff6f7d..580847b4f76 100644
--- a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import cx from 'classnames';
 import { LegacyForms } from '@grafana/ui';
 const { FormField } = LegacyForms;
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
index 49e674d6941..64c96074c3c 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
 import { VariableSuggestion } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
index d77803febec..d36a87f1a93 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Button, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
 import { DerivedFieldConfig } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx b/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx
index 0b3e5a34a73..1c66354ec51 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExemplarField.tsx
@@ -1,7 +1,7 @@
 import { GrafanaTheme } from '@grafana/data';
 import { FetchError } from '@grafana/runtime';
 import { IconButton, InlineLabel, Tooltip, useStyles } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
index e63a072c9b9..4ca04e831a8 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { memo } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 // Types
 import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
diff --git a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
index 670a3d054a1..804c02f1cd6 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
@@ -1,6 +1,6 @@
 import { Button, InlineField, InlineSwitch, Input } from '@grafana/ui';
 import { DataSourcePicker } from '@grafana/runtime';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { ExemplarTraceIdDestination } from '../types';
 
diff --git a/public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx
index 24c0466ad7d..947066606f3 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 import { ExemplarTraceIdDestination } from '../types';
 import ExemplarSetting from './ExemplarSetting';
diff --git a/public/app/plugins/panel/alertlist/AlertList.tsx b/public/app/plugins/panel/alertlist/AlertList.tsx
index 3eb5caebdbf..128ef3f0414 100644
--- a/public/app/plugins/panel/alertlist/AlertList.tsx
+++ b/public/app/plugins/panel/alertlist/AlertList.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import sortBy from 'lodash/sortBy';
 import { PanelProps, GrafanaTheme, dateMath, dateTime } from '@grafana/data';
 import { Card, CustomScrollbar, Icon, stylesFactory, useStyles } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 import { useAsync } from 'react-use';
 import alertDef from 'app/features/alerting/state/alertDef';
diff --git a/public/app/plugins/panel/annolist/AnnotationListItem.tsx b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
index cda6444da84..1155df4ea8a 100644
--- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx
+++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { AnnotationEvent, DateTimeInput, GrafanaTheme, PanelProps } from '@grafana/data';
 import { styleMixins, Tooltip, useStyles } from '@grafana/ui';
 import { AnnoOptions } from './types';
diff --git a/public/app/plugins/panel/annolist/AnnotationListItemTags.tsx b/public/app/plugins/panel/annolist/AnnotationListItemTags.tsx
index 9d1c1f1a966..80cc589bf01 100644
--- a/public/app/plugins/panel/annolist/AnnotationListItemTags.tsx
+++ b/public/app/plugins/panel/annolist/AnnotationListItemTags.tsx
@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent, useCallback } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useStyles } from '@grafana/ui';
 
 import { TagBadge } from '../../../core/components/TagFilter/TagBadge';
diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts
index f12f1332c48..95f5e2696d3 100644
--- a/public/app/plugins/panel/dashlist/styles.ts
+++ b/public/app/plugins/panel/dashlist/styles.ts
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { GrafanaTheme } from '@grafana/data';
 import { styleMixins, stylesFactory } from '@grafana/ui';
diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
index da3d0a9a8e1..f6d793f8e5c 100644
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import { PanelProps } from '@grafana/data';
 import { Button, Spinner, stylesFactory } from '@grafana/ui';
 import { config } from '@grafana/runtime';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { contextSrv } from 'app/core/core';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
index 524e5e23703..af38f9e388f 100644
--- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Card } from '../types';
 import { Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { cardContent, cardStyle, iconStyle } from './sharedStyles';
 
 interface Props {
diff --git a/public/app/plugins/panel/gettingstarted/components/Step.tsx b/public/app/plugins/panel/gettingstarted/components/Step.tsx
index d13300747a0..ea2dcbfd6fb 100644
--- a/public/app/plugins/panel/gettingstarted/components/Step.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/Step.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '@grafana/ui';
 import { TutorialCard } from './TutorialCard';
diff --git a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
index eca064638ac..9a0fa796c64 100644
--- a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, stylesFactory, useTheme } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import store from 'app/core/store';
 import { cardContent, cardStyle, iconStyle } from './sharedStyles';
 import { TutorialCardType } from '../types';
diff --git a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
index 0781f5d5938..00c00f61ecd 100644
--- a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
+++ b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
@@ -1,5 +1,5 @@
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { stylesFactory } from '@grafana/ui';
 
 export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
diff --git a/public/app/plugins/panel/live/LiveChannelEditor.tsx b/public/app/plugins/panel/live/LiveChannelEditor.tsx
index 87a29d46c82..b0dc83aba04 100644
--- a/public/app/plugins/panel/live/LiveChannelEditor.tsx
+++ b/public/app/plugins/panel/live/LiveChannelEditor.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Select, FeatureInfoBox, Label, stylesFactory } from '@grafana/ui';
 import {
   LiveChannelScope,
diff --git a/public/app/plugins/panel/live/LivePanel.tsx b/public/app/plugins/panel/live/LivePanel.tsx
index c9d8406d1fa..8e3f97a2d2b 100755
--- a/public/app/plugins/panel/live/LivePanel.tsx
+++ b/public/app/plugins/panel/live/LivePanel.tsx
@@ -18,7 +18,7 @@ import {
 import { TablePanel } from '../table/TablePanel';
 import { LivePanelOptions, MessageDisplayMode } from './types';
 import { config, getGrafanaLiveSrv, MeasurementCollector } from '@grafana/runtime';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 interface Props extends PanelProps<LivePanelOptions> {}
 
diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx
index a2e209d1f60..102969a47d2 100755
--- a/public/app/plugins/panel/news/NewsPanel.tsx
+++ b/public/app/plugins/panel/news/NewsPanel.tsx
@@ -12,7 +12,7 @@ import { loadRSSFeed } from './rss';
 import { PanelProps, DataFrameView, dateTimeFormat, GrafanaTheme, textUtil } from '@grafana/data';
 import { NewsOptions, NewsItem } from './types';
 import { DEFAULT_FEED_URL, PROXY_PREFIX } from './constants';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props extends PanelProps<NewsOptions> {}
 
diff --git a/public/app/plugins/panel/pluginlist/PluginList.tsx b/public/app/plugins/panel/pluginlist/PluginList.tsx
index 44726ac04f1..c3af90ac740 100644
--- a/public/app/plugins/panel/pluginlist/PluginList.tsx
+++ b/public/app/plugins/panel/pluginlist/PluginList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAsync } from 'react-use';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { GrafanaTheme, PanelProps, PluginMeta, PluginType } from '@grafana/data';
 import { CustomScrollbar, ModalsController, stylesFactory, Tooltip, useStyles } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
diff --git a/public/app/plugins/panel/pluginlist/components/UpdatePluginModal.tsx b/public/app/plugins/panel/pluginlist/components/UpdatePluginModal.tsx
index ab523789b6e..b48d99529eb 100644
--- a/public/app/plugins/panel/pluginlist/components/UpdatePluginModal.tsx
+++ b/public/app/plugins/panel/pluginlist/components/UpdatePluginModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, stylesFactory, useStyles } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface Props {
   pluginName: string;
diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx
index e20bad4716e..35fe0e88f91 100644
--- a/public/app/plugins/panel/table/TablePanel.tsx
+++ b/public/app/plugins/panel/table/TablePanel.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { Select, Table } from '@grafana/ui';
 import { DataFrame, FieldMatcherID, getFrameDisplayName, PanelProps, SelectableValue } from '@grafana/data';
 import { Options } from './types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { config } from 'app/core/config';
 import { FilterItem, TableSortByFieldState } from '@grafana/ui/src/components/Table/types';
 import { dispatch } from '../../../store/store';
diff --git a/public/app/plugins/panel/text/TextPanel.tsx b/public/app/plugins/panel/text/TextPanel.tsx
index de472f1c62c..7fc1cc13eeb 100644
--- a/public/app/plugins/panel/text/TextPanel.tsx
+++ b/public/app/plugins/panel/text/TextPanel.tsx
@@ -7,7 +7,7 @@ import config from 'app/core/config';
 // Types
 import { TextOptions } from './types';
 import { CustomScrollbar, stylesFactory } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
 
 interface Props extends PanelProps<TextOptions> {}
diff --git a/public/app/plugins/panel/text/TextPanelEditor.tsx b/public/app/plugins/panel/text/TextPanelEditor.tsx
index c3fd0375e57..5029732775e 100644
--- a/public/app/plugins/panel/text/TextPanelEditor.tsx
+++ b/public/app/plugins/panel/text/TextPanelEditor.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
   CodeEditor,
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
index 61a9f6cd3ba..ec527d1cc39 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { HorizontalGroup, Portal, Tag, TooltipContainer, useStyles } from '@grafana/ui';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 interface AnnotationMarkerProps {
   time: string;
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
index eedd1997a80..3da45d6943c 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
@@ -9,7 +9,7 @@ import {
   TimeZone,
 } from '@grafana/data';
 import { FieldLinkList, Portal, TooltipContainer, useStyles } from '@grafana/ui';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { useCallback, useRef, useState } from 'react';
 
 interface ExemplarMarkerProps {
diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx
index b182ee06def..1a9571f334c 100644
--- a/public/app/plugins/panel/welcome/Welcome.tsx
+++ b/public/app/plugins/panel/welcome/Welcome.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '@grafana/ui';
 import lightBackground from './img/background_light.svg';
diff --git a/public/app/plugins/panel/xychart/XYDimsEditor.tsx b/public/app/plugins/panel/xychart/XYDimsEditor.tsx
index f3c4b8c66ce..a43234fc641 100644
--- a/public/app/plugins/panel/xychart/XYDimsEditor.tsx
+++ b/public/app/plugins/panel/xychart/XYDimsEditor.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IconButton, Label, Select, stylesFactory, useTheme } from '@grafana/ui';
 import {
   SelectableValue,
diff --git a/yarn.lock b/yarn.lock
index ef97b2ea16b..950d970015c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -562,7 +562,7 @@
   dependencies:
     "@babel/types" "^7.12.5"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12", "@babel/helper-module-imports@^7.7.0":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
   integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
@@ -2959,6 +2959,24 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@emotion/babel-plugin@^11.0.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.2.0.tgz#f25c6df8ec045dad5ae6ca63df0791673b98c920"
+  integrity sha512-lsnQBnl3l4wu/FJoyHnYRpHJeIPNkOBMbtDUIXcO8luulwRKZXPvA10zd2eXVN6dABIWNX4E34en/jkejIg/yA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.7.0"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
+    "@babel/runtime" "^7.7.2"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.0"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
 "@emotion/cache@^10.0.17", "@emotion/cache@^10.0.9":
   version "10.0.19"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
@@ -2979,17 +2997,16 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@10.0.27":
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
-  integrity sha512-XbD5R36pVbohQMnKfajHv43g8EbN4NHdF6Zh9zg/C0nr0jqwOw3gYnC07Xj3yG43OYSRyrGsoQ5qPwc8ycvLZw==
+"@emotion/cache@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
+  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
   dependencies:
-    "@babel/runtime" "^7.5.5"
-    "@emotion/cache" "^10.0.27"
-    "@emotion/css" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
 
 "@emotion/core@^10.0.9":
   version "10.0.21"
@@ -3015,6 +3032,17 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
+"@emotion/css@11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.1.3.tgz#9ed44478b19e5d281ccbbd46d74d123d59be793f"
+  integrity sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==
+  dependencies:
+    "@emotion/babel-plugin" "^11.0.0"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/css@^10.0.14", "@emotion/css@^10.0.9":
   version "10.0.14"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139"
@@ -3033,6 +3061,11 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
+"@emotion/eslint-plugin@11.2.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.2.0.tgz#10cb154510728be9276b1cecee15917f26919c44"
+  integrity sha512-vpyeUtQKudpYjQ2hUG6vroVqSQiBn1Q37HBEck5wma9M+DmzaU8Uh8k5GffXfGcVzervPB3GCX5ip6n7toLmIQ==
+
 "@emotion/hash@0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
@@ -3043,7 +3076,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
   integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
 
-"@emotion/hash@0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
@@ -3065,6 +3098,24 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@11.1.5":
+  version "11.1.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
+  integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.10", "@emotion/serialize@^0.11.11", "@emotion/serialize@^0.11.8":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.11.tgz#c92a5e5b358070a7242d10508143306524e842a4"
@@ -3098,6 +3149,17 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
+  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.3":
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
@@ -3108,6 +3170,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
 "@emotion/styled-base@^10.0.27":
   version "10.0.31"
   resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
@@ -3141,7 +3208,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
   integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -3156,12 +3223,17 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
 "@emotion/weak-memoize@0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -8523,7 +8595,7 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
-babel-plugin-macros@^2.8.0:
+babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -10910,6 +10982,11 @@ csstype@^2.6.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
   integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
 
+csstype@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -12079,7 +12156,7 @@ emotion-theming@^10.0.19:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
-emotion@10.0.27, emotion@^10.0.14, emotion@^10.0.27:
+emotion@^10.0.14:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
   integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
@@ -12561,6 +12638,11 @@ escape-string-regexp@2.0.0, escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.11.1, escodegen@^1.12.0:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
@@ -14708,7 +14790,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@3.3.2, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@3.3.2, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -24536,6 +24618,11 @@ stylis@3.5.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
   integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
 
+stylis@^4.0.3:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.9.tgz#ae3d5283aa439225cf79dd2d0cf46f8bfd4ad393"
+  integrity sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong==
+
 supports-color@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"