diff --git a/packages/grafana-data/src/transformations/index.ts b/packages/grafana-data/src/transformations/index.ts
index 17c0ff92d8a..82659a2885c 100644
--- a/packages/grafana-data/src/transformations/index.ts
+++ b/packages/grafana-data/src/transformations/index.ts
@@ -6,3 +6,5 @@ export * from './fieldReducer';
 export { FilterFieldsByNameTransformerOptions } from './transformers/filterByName';
 export { FilterFramesByRefIdTransformerOptions } from './transformers/filterByRefId';
 export { ReduceTransformerOptions } from './transformers/reduce';
+export { OrganizeFieldsTransformerOptions } from './transformers/organize';
+export { createOrderFieldsComparer } from './transformers/order';
diff --git a/packages/grafana-data/src/transformations/transformers/order.ts b/packages/grafana-data/src/transformations/transformers/order.ts
index baef0b25dec..c0e4c007090 100644
--- a/packages/grafana-data/src/transformations/transformers/order.ts
+++ b/packages/grafana-data/src/transformations/transformers/order.ts
@@ -35,7 +35,7 @@ export const orderFieldsTransformer: DataTransformerInfo<OrderFieldsTransformerO
   },
 };
 
-export const createFieldsComparer = (indexByName: Record<string, number>) => (a: string, b: string) => {
+export const createOrderFieldsComparer = (indexByName: Record<string, number>) => (a: string, b: string) => {
   return indexOfField(a, indexByName) - indexOfField(b, indexByName);
 };
 
@@ -46,7 +46,7 @@ const createFieldsOrderer = (indexByName: Record<string, number>) => (fields: Fi
   if (!indexByName || Object.keys(indexByName).length === 0) {
     return fields;
   }
-  const comparer = createFieldsComparer(indexByName);
+  const comparer = createOrderFieldsComparer(indexByName);
   return fields.sort((a, b) => comparer(a.name, b.name));
 };
 
diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js
index e482bb449d0..79b968a0735 100644
--- a/packages/grafana-ui/.storybook/webpack.config.js
+++ b/packages/grafana-ui/.storybook/webpack.config.js
@@ -38,7 +38,7 @@ module.exports = ({ config, mode }) => {
     use: [
       {
         loader: 'style-loader',
-        options: { injectType: 'lazyStyleTag' }
+        options: { injectType: 'lazyStyleTag' },
       },
       {
         loader: 'css-loader',
@@ -86,9 +86,10 @@ module.exports = ({ config, mode }) => {
       }),
       new OptimizeCSSAssetsPlugin({}),
     ],
-  },
+  };
 
   config.resolve.extensions.push('.ts', '.tsx', '.mdx');
+
   config.stats = {
     warningsFilter: /export .* was not found in/,
   };
diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index aabeb8619c5..6fb68fbbb3e 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from 'react';
-import { Icon, IconName } from '@grafana/ui';
 import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../../types/icon';
 
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 91f4bc70ccf..a58a6409955 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -2,7 +2,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'r
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
 import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { GrafanaTheme } from '@grafana/data';
 import { ButtonContent } from './ButtonContent';
diff --git a/packages/grafana-ui/src/components/Button/ButtonContent.tsx b/packages/grafana-ui/src/components/Button/ButtonContent.tsx
index c01de9853f3..6ff4170abc6 100644
--- a/packages/grafana-ui/src/components/Button/ButtonContent.tsx
+++ b/packages/grafana-ui/src/components/Button/ButtonContent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from 'emotion';
 import { stylesFactory, useTheme } from '../../themes';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { Icon } from '../Icon/Icon';
 import { ComponentSize } from '../../types/size';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index 94637f6d8d9..0992d805ed1 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useContext } from 'react';
 import { css } from 'emotion';
 import { Modal } from '../Modal/Modal';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { Button } from '../Button';
 import { stylesFactory, ThemeContext } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index c55b8afef06..58b4083208a 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme, toPascalCase } from '@grafana/data';
-import { stylesFactory } from '../../themes';
+import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';
-import { IconName, IconType, IconSize } from '../../types';
+import { IconName, IconType, IconSize } from '../../types/icon';
 import { ComponentSize } from '../../types/size';
 //@ts-ignore
 import * as DefaultIcon from '@iconscout/react-unicons';
@@ -14,11 +14,6 @@ interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: IconSize;
   type?: IconType;
 }
-export interface SvgProps extends React.HTMLAttributes<SVGElement> {
-  size: number;
-  secondaryColor?: string;
-  className?: string;
-}
 
 const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
diff --git a/packages/grafana-ui/src/components/Icon/assets/Apps.tsx b/packages/grafana-ui/src/components/Icon/assets/Apps.tsx
index 577c7d8d773..40e2ecafb31 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Apps.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Apps.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Apps: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx
index 906034a1621..15e38157e5f 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Bell: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Cog.tsx b/packages/grafana-ui/src/components/Icon/assets/Cog.tsx
index 57004e95074..5cb1295e691 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Cog.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Cog.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Cog: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx b/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx
index 2cc995fecf4..b8a96144649 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Favorite: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Folder.tsx b/packages/grafana-ui/src/components/Icon/assets/Folder.tsx
index 994d194da28..974ac4c971c 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Folder.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Folder.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Folder: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx b/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx
index 24b368605b0..b6f11953ce0 100644
--- a/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const FolderPlus: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx b/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx
index fa5c627c9dc..cc5bd01964b 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Grafana: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Import.tsx b/packages/grafana-ui/src/components/Icon/assets/Import.tsx
index 3fc827a911e..4659a307c0a 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Import.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Import.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Import: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx b/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx
index b6f3b4076b7..d56ea7971da 100644
--- a/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const PanelAdd: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx b/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx
index 0ccb16b9435..f70cc3d7f71 100644
--- a/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const PlusSquare: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/Shield.tsx b/packages/grafana-ui/src/components/Icon/assets/Shield.tsx
index c0b32708774..c540df22a1d 100644
--- a/packages/grafana-ui/src/components/Icon/assets/Shield.tsx
+++ b/packages/grafana-ui/src/components/Icon/assets/Shield.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 export const Shield: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
diff --git a/packages/grafana-ui/src/components/Icon/assets/types.ts b/packages/grafana-ui/src/components/Icon/assets/types.ts
new file mode 100644
index 00000000000..cb2e973a731
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/assets/types.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface SvgProps extends React.HTMLAttributes<SVGElement> {
+  size: number;
+  secondaryColor?: string;
+  className?: string;
+}
diff --git a/packages/grafana-ui/src/components/Logs/LogRow.tsx b/packages/grafana-ui/src/components/Logs/LogRow.tsx
index 6cc8a4e27ee..2f7e0e9998a 100644
--- a/packages/grafana-ui/src/components/Logs/LogRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRow.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Field, LinkModel, LogRowModel, TimeZone, DataQueryResponse, GrafanaTheme } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon';
 import { cx, css } from 'emotion';
 
 import {
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index 22758f10c56..61e33530c41 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
@@ -1,6 +1,6 @@
 // Libraries
 import React, { FunctionComponent } from 'react';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon';
 
 interface Props {
   title?: string | JSX.Element;
diff --git a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
index 480e76c8b8b..e63269cd598 100644
--- a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
@@ -1,12 +1,17 @@
 import React, { useMemo, useCallback } from 'react';
 import { css, cx } from 'emotion';
-import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import {
+  DataTransformerID,
+  transformersRegistry,
+  DataFrame,
+  GrafanaTheme,
+  createOrderFieldsComparer,
+  OrganizeFieldsTransformerOptions,
+} from '@grafana/data';
 import { TransformerUIRegistyItem, TransformerUIProps } from './types';
-import { DataTransformerID, transformersRegistry, DataFrame, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
-import { Button } from '../Button';
-import { createFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
+import { Button } from '../Button/Button';
 import { VerticalGroup } from '../Layout/Layout';
 import { Input } from '../Input/Input';
 
@@ -189,7 +194,7 @@ const orderFieldNamesByIndex = (fieldNames: string[], indexByName: Record<string
   if (!indexByName || Object.keys(indexByName).length === 0) {
     return fieldNames;
   }
-  const comparer = createFieldsComparer(indexByName);
+  const comparer = createOrderFieldsComparer(indexByName);
   return fieldNames.sort(comparer);
 };
 
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index fac68ac4275..8f39697199a 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -1,3 +1,4 @@
+export { Icon } from './Icon/Icon';
 export { ConfirmButton } from './ConfirmButton/ConfirmButton';
 export { DeleteButton } from './ConfirmButton/DeleteButton';
 export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
@@ -113,7 +114,6 @@ export { FadeTransition } from './transitions/FadeTransition';
 export { SlideOutTransition } from './transitions/SlideOutTransition';
 export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/';
 export { default as Chart } from './Chart';
-export { Icon } from './Icon/Icon';
 export { Drawer } from './Drawer/Drawer';
 export { Slider } from './Slider/Slider';