diff --git a/packages/grafana-data/src/transformations/standardTransformersRegistry.ts b/packages/grafana-data/src/transformations/standardTransformersRegistry.ts
index 54166fe33d1..01a528a4a9a 100644
--- a/packages/grafana-data/src/transformations/standardTransformersRegistry.ts
+++ b/packages/grafana-data/src/transformations/standardTransformersRegistry.ts
@@ -39,6 +39,16 @@ export interface TransformerRegistryItem<TOptions = any> extends RegistryItem {
    * Set of tags associated with the transformer for improved transformation search
    */
   tags?: Set<string>;
+
+  /**
+   * Image representing the transformer, for dark themes
+   */
+  imageDark: string;
+
+  /**
+   * Image representing the transformer, for light themes
+   */
+  imageLight: string;
 }
 
 export enum TransformerCategory {
diff --git a/packages/grafana-data/src/utils/tests/mockTransformationsRegistry.ts b/packages/grafana-data/src/utils/tests/mockTransformationsRegistry.ts
index ef1b6f78fce..e5ef149b5a3 100644
--- a/packages/grafana-data/src/utils/tests/mockTransformationsRegistry.ts
+++ b/packages/grafana-data/src/utils/tests/mockTransformationsRegistry.ts
@@ -11,6 +11,8 @@ export const mockTransformationsRegistry = (transformers: DataTransformerInfo[])
         transformation: t,
         description: t.description,
         editor: () => null,
+        imageDark: `build/img/${t.id}-dark.abc123.svg`,
+        imageLight: `build/img/${t.id}-light.abc123.svg`,
       };
     });
   });
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
index 368cfb23e1c..dbc34734758 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
@@ -11,8 +11,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { Badge, Card, Drawer, FilterPill, IconButton, Input, Switch, useStyles2 } from '@grafana/ui';
-import config from 'app/core/config';
+import { Badge, Card, Drawer, FilterPill, IconButton, Input, Switch, useStyles2, useTheme2 } from '@grafana/ui';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 import { getCategoriesLabels } from 'app/features/transformers/utils';
 
@@ -172,6 +171,7 @@ interface TransformationsGridProps {
 }
 
 function TransformationsGrid({ showIllustrations, transformations, onClick, data }: TransformationsGridProps) {
+  const theme = useTheme2();
   const styles = useStyles2(getTransformationGridStyles);
 
   return (
@@ -200,6 +200,8 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
           cardClasses = cx(styles.newCard, styles.cardDisabled);
         }
 
+        const imageUrl = theme.isDark ? transform.imageDark : transform.imageLight;
+
         return (
           <Card
             className={cardClasses}
@@ -226,7 +228,7 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
               <span>{standardTransformersRegistry.getIfExists(transform.id)?.description}</span>
               {showIllustrations && (
                 <span>
-                  <img className={styles.image} src={getImagePath(transform.id, !isApplicable)} alt={transform.name} />
+                  <img className={styles.image} src={imageUrl} alt={transform.name} />
                 </span>
               )}
               {!isApplicable && applicabilityDescription !== null && (
@@ -308,8 +310,3 @@ function getTransformationGridStyles(theme: GrafanaTheme2) {
     }),
   };
 }
-
-const getImagePath = (id: string, disabled: boolean) => {
-  const folder = config.theme2.isDark ? 'dark' : 'light';
-  return `public/build/img/transformations/${folder}/${id}.svg`;
-};
diff --git a/public/app/features/explore/Logs/Logs.test.tsx b/public/app/features/explore/Logs/Logs.test.tsx
index 5135821c28f..958a8c589f8 100644
--- a/public/app/features/explore/Logs/Logs.test.tsx
+++ b/public/app/features/explore/Logs/Logs.test.tsx
@@ -10,13 +10,12 @@ import {
   LoadingState,
   LogLevel,
   LogRowModel,
-  standardTransformersRegistry,
   toUtc,
   createDataFrame,
   ExploreLogsPanelState,
   DataQuery,
 } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
 import { LokiQueryDirection } from 'app/plugins/datasource/loki/dataquery.gen';
@@ -80,18 +79,7 @@ describe('Logs', () => {
   });
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   afterAll(() => {
diff --git a/public/app/features/explore/Logs/LogsMetaRow.test.tsx b/public/app/features/explore/Logs/LogsMetaRow.test.tsx
index 618be846511..598b7cebb7a 100644
--- a/public/app/features/explore/Logs/LogsMetaRow.test.tsx
+++ b/public/app/features/explore/Logs/LogsMetaRow.test.tsx
@@ -3,17 +3,8 @@ import userEvent from '@testing-library/user-event';
 import saveAs from 'file-saver';
 import { ComponentProps } from 'react';
 
-import {
-  FieldType,
-  LogLevel,
-  LogsDedupStrategy,
-  LogsMetaItem,
-  LogsMetaKind,
-  standardTransformersRegistry,
-  store,
-  toDataFrame,
-} from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { FieldType, LogLevel, LogsDedupStrategy, LogsMetaItem, LogsMetaKind, store, toDataFrame } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 
 import { logRowsToReadableJson } from '../../logs/utils';
@@ -177,18 +168,7 @@ describe('LogsMetaRow', () => {
 
   it('renders a button to download CSV', async () => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
 
     const rows = [
       {
diff --git a/public/app/features/explore/Logs/LogsTable.test.tsx b/public/app/features/explore/Logs/LogsTable.test.tsx
index 373bd38504a..2c9cdedb95a 100644
--- a/public/app/features/explore/Logs/LogsTable.test.tsx
+++ b/public/app/features/explore/Logs/LogsTable.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { ComponentProps } from 'react';
 
-import { DataFrame, FieldType, LogsSortOrder, standardTransformersRegistry, toUtc } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { DataFrame, FieldType, LogsSortOrder, toUtc } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
 
@@ -91,18 +91,7 @@ const setup = (partialProps?: Partial<ComponentProps<typeof LogsTable>>, logs?:
 describe('LogsTable', () => {
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   let originalVisualisationTypeValue = config.featureToggles.logsExploreTableVisualisation;
diff --git a/public/app/features/explore/Logs/LogsTableWrap.test.tsx b/public/app/features/explore/Logs/LogsTableWrap.test.tsx
index 0698f141043..b14690a32a9 100644
--- a/public/app/features/explore/Logs/LogsTableWrap.test.tsx
+++ b/public/app/features/explore/Logs/LogsTableWrap.test.tsx
@@ -1,8 +1,8 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ComponentProps } from 'react';
 
-import { createTheme, ExploreLogsPanelState, LogsSortOrder, standardTransformersRegistry, toUtc } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { createTheme, ExploreLogsPanelState, LogsSortOrder, toUtc } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 
 import { extractFieldsTransformer } from '../../transformers/extractFields/extractFields';
@@ -39,18 +39,7 @@ const setup = (partialProps?: Partial<ComponentProps<typeof LogsTableWrap>>) =>
 describe('LogsTableWrap', () => {
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   it('should render 4 table rows', async () => {
diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
index fb255cbb530..366da659cf2 100644
--- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx
@@ -24,6 +24,8 @@ import { Trans, t } from '@grafana/i18n';
 import { Button, RadioButtonGroup, InlineField, Box } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterByValue.svg';
+import lightImage from '../images/light/filterByValue.svg';
 
 import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor';
 
@@ -160,6 +162,8 @@ export const getFilterByValueTransformRegistryItem: () => TransformerRegistryIte
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterByValue).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
 
 const useFieldsInfo = (data: DataFrame[]): DataFrameFieldsInfo => {
diff --git a/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx b/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
index 01d3cdd8064..e12a376629e 100644
--- a/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
+++ b/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
@@ -10,6 +10,8 @@ import {
 } from '@grafana/data';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/heatmap.svg';
+import lightImage from '../images/light/heatmap.svg';
 import { getDefaultOptions, getTransformerOptionPane } from '../spatial/optionsHelper';
 
 import { addHeatmapCalculationOptions } from './editor/helper';
@@ -53,5 +55,7 @@ export const getHeatmapTransformRegistryItem: () => TransformerRegistryItem<Heat
     state: PluginState.alpha,
     categories: new Set([TransformerCategory.CreateNewVisualization]),
     help: getTransformationContent(heatmapTransformer.id).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };
diff --git a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
index 88833cf456b..2a5c3b0999a 100644
--- a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
+++ b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
@@ -14,6 +14,8 @@ import { fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor';
+import darkImage from '../images/dark/configFromData.svg';
+import lightImage from '../images/light/configFromData.svg';
 
 import { getConfigFromDataTransformer, ConfigFromQueryTransformOptions } from './configFromQuery';
 
@@ -110,6 +112,8 @@ export const getConfigFromQueryTransformRegistryItem: () => TransformerRegistryI
       state: PluginState.beta,
       categories: new Set([TransformerCategory.CalculateNewFields]),
       help: getTransformationContent(configFromDataTransformer.id).helperDocs,
+      imageDark: darkImage,
+      imageLight: lightImage,
     };
   };
 
diff --git a/public/app/features/transformers/editors/CalculateFieldTransformerEditor/CalculateFieldTransformerEditor.tsx b/public/app/features/transformers/editors/CalculateFieldTransformerEditor/CalculateFieldTransformerEditor.tsx
index 28d020d4e44..64d1fffba80 100644
--- a/public/app/features/transformers/editors/CalculateFieldTransformerEditor/CalculateFieldTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/CalculateFieldTransformerEditor/CalculateFieldTransformerEditor.tsx
@@ -27,6 +27,8 @@ import { getTemplateSrv, config as cfg } from '@grafana/runtime';
 import { InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../../docs/getTransformationContent';
+import darkImage from '../../images/dark/calculateField.svg';
+import lightImage from '../../images/light/calculateField.svg';
 
 import { BinaryOperationOptionsEditor } from './BinaryOperationOptionsEditor';
 import { CumulativeOptionsEditor } from './CumulativeOptionsEditor';
@@ -279,4 +281,6 @@ export const getCalculateFieldTransformRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.CalculateNewFields]),
     help: getTransformationContent(DataTransformerID.calculateField).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx b/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
index 1318cf4de8c..e31ea83a565 100644
--- a/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Input, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/concatenate.svg';
+import lightImage from '../images/light/concatenate.svg';
 
 interface ConcatenateTransformerEditorProps extends TransformerUIProps<ConcatenateTransformerOptions> {}
 
@@ -112,4 +114,6 @@ export const getConcatenateTransformRegistryItem: () => TransformerRegistryItem<
     categories: new Set([TransformerCategory.Combine]),
     help: getTransformationContent(DataTransformerID.concatenate).helperDocs,
     tags: new Set([t('transformers.editors.concatenate-transformer-editor.tags.combine', 'Combine')]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
index 0a1542f033a..d437144b415 100644
--- a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
@@ -19,6 +19,8 @@ import { allFieldTypeIconOptions, FieldNamePicker } from '@grafana/ui/internal';
 import { findField } from 'app/features/dimensions/utils';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/convertFieldType.svg';
+import lightImage from '../images/light/convertFieldType.svg';
 import { getTimezoneOptions } from '../utils';
 
 import { EnumMappingEditor } from './EnumMappingEditor';
@@ -280,4 +282,6 @@ export const getConvertFieldTypeTransformRegistryItem: () => TransformerRegistry
     categories: new Set([TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.convertFieldType).helperDocs,
     tags: new Set([t('transformers.convert-field-type-transformer-editor.tags.format-field', 'Format field')]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/FilterByNameTransformerEditor.tsx b/public/app/features/transformers/editors/FilterByNameTransformerEditor.tsx
index 9f7f37f2e59..25cff1951b8 100644
--- a/public/app/features/transformers/editors/FilterByNameTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FilterByNameTransformerEditor.tsx
@@ -17,6 +17,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { Input, FilterPill, InlineFieldRow, InlineField, InlineSwitch, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterFieldsByName.svg';
+import lightImage from '../images/light/filterFieldsByName.svg';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
 
@@ -265,4 +267,6 @@ export const getFilterFieldsByNameTransformRegistryItem: () => TransformerRegist
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterFieldsByName).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx b/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
index ad679578389..d4ec966661c 100644
--- a/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
@@ -11,6 +11,8 @@ import { t } from '@grafana/i18n';
 import { FrameMultiSelectionEditor } from 'app/plugins/panel/geomap/editor/FrameSelectionEditor';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterByRefId.svg';
+import lightImage from '../images/light/filterByRefId.svg';
 
 export const FilterByRefIdTransformerEditor = (props: TransformerUIProps<FilterFramesByRefIdTransformerOptions>) => {
   return (
@@ -42,4 +44,6 @@ export const getFilterFramesByRefIdTransformRegistryItem: () => TransformerRegis
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterByRefId).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/FormatStringTransformerEditor.tsx b/public/app/features/transformers/editors/FormatStringTransformerEditor.tsx
index e29cc29833e..9bee2e9bd29 100644
--- a/public/app/features/transformers/editors/FormatStringTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FormatStringTransformerEditor.tsx
@@ -18,6 +18,9 @@ import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 import { FieldNamePicker } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
+import darkImage from '../images/dark/formatString.svg';
+import lightImage from '../images/light/formatString.svg';
+
 function FormatStringTransfomerEditor({
   input,
   options,
@@ -131,4 +134,6 @@ export const getFormatStringTransformerRegistryItem: () => TransformerRegistryIt
       'Manipulate string fields formatting.'
     ),
     categories: new Set([TransformerCategory.Reformat]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/FormatTimeTransformerEditor.tsx b/public/app/features/transformers/editors/FormatTimeTransformerEditor.tsx
index ca749cfa5c0..01baaae10cd 100644
--- a/public/app/features/transformers/editors/FormatTimeTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FormatTimeTransformerEditor.tsx
@@ -14,6 +14,8 @@ import { Trans, t } from '@grafana/i18n';
 import { Select, InlineFieldRow, InlineField, Input, TextLink } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/formatTime.svg';
+import lightImage from '../images/light/formatTime.svg';
 import { getTimezoneOptions } from '../utils';
 
 export function FormatTimeTransfomerEditor({
@@ -129,4 +131,6 @@ export const getFormatTimeTransformerRegistryItem: () => TransformerRegistryItem
       'Set the output format of a time field'
     ),
     help: getTransformationContent(DataTransformerID.formatTime).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
index fcde5f473de..e26aced6fcd 100644
--- a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
@@ -16,6 +16,8 @@ import { t } from '@grafana/i18n';
 import { useTheme2, Select, StatsPicker, InlineField, Stack, Alert } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/groupBy.svg';
+import lightImage from '../images/light/groupBy.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 interface FieldProps {
@@ -174,4 +176,6 @@ export const getGroupByTransformRegistryItem: () => TransformerRegistryItem<Grou
     TransformerCategory.Reformat,
   ]),
   help: getTransformationContent(DataTransformerID.groupBy).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/GroupToNestedTableTransformerEditor.tsx b/public/app/features/transformers/editors/GroupToNestedTableTransformerEditor.tsx
index 288fd8441e9..bdeebc3f8e7 100644
--- a/public/app/features/transformers/editors/GroupToNestedTableTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/GroupToNestedTableTransformerEditor.tsx
@@ -22,6 +22,8 @@ import {
 import { t } from '@grafana/i18n';
 import { useTheme2, Select, StatsPicker, InlineField, Field, Switch, Alert, Stack } from '@grafana/ui';
 
+import darkImage from '../images/dark/groupToNestedTable.svg';
+import lightImage from '../images/light/groupToNestedTable.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 interface FieldProps {
@@ -212,4 +214,6 @@ export const getGroupToNestedTableTransformRegistryItem: () => TransformerRegist
       TransformerCategory.Reformat,
     ]),
     state: PluginState.beta,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx b/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
index 9ab69c466b2..6eb793e082a 100644
--- a/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx
@@ -15,6 +15,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/groupingToMatrix.svg';
+import lightImage from '../images/light/groupingToMatrix.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 export const GroupingToMatrixTransformerEditor = ({
@@ -160,4 +162,6 @@ export const getGroupingToMatrixTransformRegistryItem: () => TransformerRegistry
     ),
     categories: new Set([TransformerCategory.Combine, TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.groupingToMatrix).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/HistogramTransformerEditor.tsx b/public/app/features/transformers/editors/HistogramTransformerEditor.tsx
index 02e79b66e8a..c2629e2f145 100644
--- a/public/app/features/transformers/editors/HistogramTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/HistogramTransformerEditor.tsx
@@ -12,6 +12,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/histogram.svg';
+import lightImage from '../images/light/histogram.svg';
 import { SuggestionsInput } from '../suggestionsInput/SuggestionsInput';
 import { getVariableSuggestions, numberOrVariableValidator } from '../utils';
 
@@ -147,4 +149,6 @@ export const getHistogramTransformRegistryItem: () => TransformerRegistryItem<Hi
   ),
   categories: new Set([TransformerCategory.CreateNewVisualization]),
   help: getTransformationContent(DataTransformerID.histogram).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
index 8e491297739..ba83c09f2a2 100644
--- a/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx
@@ -15,6 +15,8 @@ import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/joinByField.svg';
+import lightImage from '../images/light/joinByField.svg';
 
 export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
   const names = useFieldDisplayNames(input);
@@ -117,4 +119,6 @@ export const getJoinByFieldTransformerRegistryItem: () => TransformerRegistryIte
   ),
   categories: new Set([TransformerCategory.Combine]),
   help: getTransformationContent(DataTransformerID.joinByField).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index 939dacd5763..42944c4fb15 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/labelsToFields.svg';
+import lightImage from '../images/light/labelsToFields.svg';
 
 export const LabelsAsFieldsTransformerEditor = ({
   input,
@@ -150,4 +152,6 @@ export const getLabelsToFieldsTransformerRegistryItem: () => TransformerRegistry
   ),
   categories: new Set([TransformerCategory.Reformat]),
   help: getTransformationContent(DataTransformerID.labelsToFields).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/LimitTransformerEditor.tsx b/public/app/features/transformers/editors/LimitTransformerEditor.tsx
index 326f02f3c82..6c2cfc7dbb9 100644
--- a/public/app/features/transformers/editors/LimitTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LimitTransformerEditor.tsx
@@ -12,6 +12,8 @@ import { t } from '@grafana/i18n';
 import { InlineFieldRow } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/limit.svg';
+import lightImage from '../images/light/limit.svg';
 import { SuggestionsInput } from '../suggestionsInput/SuggestionsInput';
 import { getVariableSuggestions, numberOrVariableValidator } from '../utils';
 
@@ -56,4 +58,6 @@ export const getLimitTransformRegistryItem: () => TransformerRegistryItem<LimitT
   ),
   categories: new Set([TransformerCategory.Filter]),
   help: getTransformationContent(DataTransformerID.limit).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/MergeTransformerEditor.tsx b/public/app/features/transformers/editors/MergeTransformerEditor.tsx
index 25ba613307a..de7a53e9d88 100644
--- a/public/app/features/transformers/editors/MergeTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/MergeTransformerEditor.tsx
@@ -10,6 +10,8 @@ import { Trans, t } from '@grafana/i18n';
 import { FieldValidationMessage } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/merge.svg';
+import lightImage from '../images/light/merge.svg';
 
 export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
   if (input.length <= 1) {
@@ -36,4 +38,6 @@ export const getMergeTransformerRegistryItem: () => TransformerRegistryItem<Merg
   ),
   categories: new Set([TransformerCategory.Combine]),
   help: getTransformationContent(DataTransformerID.merge).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
index 7eec24ee6c6..cebdf95c955 100644
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@@ -36,6 +36,8 @@ import {
 
 import { createFieldsOrdererAuto } from '../../../../../packages/grafana-data/src/transformations/transformers/order';
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/organize.svg';
+import lightImage from '../images/light/organize.svg';
 import { getAllFieldNamesFromDataFrames, getDistinctLabels, useAllFieldNamesFromDataFrames } from '../utils';
 
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
@@ -507,4 +509,6 @@ export const getOrganizeFieldsTransformRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.ReorderAndRename]),
     help: getTransformationContent(DataTransformerID.organize).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/ReduceTransformerEditor.tsx b/public/app/features/transformers/editors/ReduceTransformerEditor.tsx
index 3df242e370c..71ae8a6a08c 100644
--- a/public/app/features/transformers/editors/ReduceTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ReduceTransformerEditor.tsx
@@ -15,6 +15,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Select, StatsPicker, InlineSwitch } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/reduce.svg';
+import lightImage from '../images/light/reduce.svg';
 
 // TODO:  Minimal implementation, needs some <3
 export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
@@ -128,4 +130,6 @@ export const getReduceTransformRegistryItem: () => TransformerRegistryItem<Reduc
   ),
   categories: new Set([TransformerCategory.CalculateNewFields]),
   help: getTransformationContent(DataTransformerID.reduce).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/RenameByRegexTransformer.tsx b/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
index 554557e9804..7955b83418c 100644
--- a/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
+++ b/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Input } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/renameByRegex.svg';
+import lightImage from '../images/light/renameByRegex.svg';
 
 interface RenameByRegexTransformerEditorProps extends TransformerUIProps<RenameByRegexTransformerOptions> {}
 
@@ -132,4 +134,6 @@ export const getRenameByRegexTransformRegistryItem: () => TransformerRegistryIte
     ),
     categories: new Set([TransformerCategory.ReorderAndRename]),
     help: getTransformationContent(DataTransformerID.renameByRegex).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx b/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
index 15ead54a4a3..154761870dc 100644
--- a/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx
@@ -9,6 +9,8 @@ import { SeriesToRowsTransformerOptions } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/seriesToRows.svg';
+import lightImage from '../images/light/seriesToRows.svg';
 
 export const SeriesToRowsTransformerEditor = ({
   input,
@@ -30,4 +32,6 @@ export const getSeriesToRowsTransformerRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.Combine, TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.seriesToRows).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
diff --git a/public/app/features/transformers/editors/SortByTransformerEditor.tsx b/public/app/features/transformers/editors/SortByTransformerEditor.tsx
index 3f76977c92f..c2382e6e27c 100644
--- a/public/app/features/transformers/editors/SortByTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/SortByTransformerEditor.tsx
@@ -13,6 +13,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, InlineSwitch, InlineFieldRow, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/sortBy.svg';
+import lightImage from '../images/light/sortBy.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
@@ -72,4 +74,6 @@ export const getSortByTransformRegistryItem: () => TransformerRegistryItem<SortB
   description: t('transformers.sort-by-transformer-editor.description.sort-fields', 'Sort fields in a frame.'),
   categories: new Set([TransformerCategory.ReorderAndRename]),
   help: getTransformationContent(DataTransformerID.sortBy).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/editors/TransposeTransformerEditor.tsx b/public/app/features/transformers/editors/TransposeTransformerEditor.tsx
index d8902f20beb..baeee2461e5 100644
--- a/public/app/features/transformers/editors/TransposeTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/TransposeTransformerEditor.tsx
@@ -9,6 +9,9 @@ import { TransposeTransformerOptions } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
 
+import darkImage from '../images/dark/transpose.svg';
+import lightImage from '../images/light/transpose.svg';
+
 export const TransposeTransformerEditor = ({ options, onChange }: TransformerUIProps<TransposeTransformerOptions>) => {
   return (
     <>
@@ -58,4 +61,6 @@ export const getTransposeTransformerRegistryItem: () => TransformerRegistryItem<
     t('transformers.transpose-transformer-editor.tags.translate', 'Translate'),
     t('transformers.transpose-transformer-editor.tags.transform', 'Transform'),
   ]),
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx b/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
index a8b85f39c5c..f4d1773b8f2 100644
--- a/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx
@@ -14,6 +14,8 @@ import { InlineField, InlineFieldRow, Select, InlineSwitch, Input, Combobox, Com
 import { FieldNamePicker } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/extractFields.svg';
+import lightImage from '../images/light/extractFields.svg';
 
 import { JSONPathEditor } from './components/JSONPathEditor';
 import { extractFieldsTransformer } from './extractFields';
@@ -191,4 +193,6 @@ export const getExtractFieldsTransformRegistryItem: () => TransformerRegistryIte
   ),
   categories: new Set([TransformerCategory.Reformat]),
   help: getTransformationContent(DataTransformerID.extractFields).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/img/transformations/dark/calculateField.svg b/public/app/features/transformers/images/dark/calculateField.svg
similarity index 100%
rename from public/img/transformations/dark/calculateField.svg
rename to public/app/features/transformers/images/dark/calculateField.svg
diff --git a/public/img/transformations/dark/concatenate.svg b/public/app/features/transformers/images/dark/concatenate.svg
similarity index 100%
rename from public/img/transformations/dark/concatenate.svg
rename to public/app/features/transformers/images/dark/concatenate.svg
diff --git a/public/img/transformations/dark/configFromData.svg b/public/app/features/transformers/images/dark/configFromData.svg
similarity index 100%
rename from public/img/transformations/dark/configFromData.svg
rename to public/app/features/transformers/images/dark/configFromData.svg
diff --git a/public/img/transformations/dark/convertFieldType.svg b/public/app/features/transformers/images/dark/convertFieldType.svg
similarity index 100%
rename from public/img/transformations/dark/convertFieldType.svg
rename to public/app/features/transformers/images/dark/convertFieldType.svg
diff --git a/public/img/transformations/dark/extractFields.svg b/public/app/features/transformers/images/dark/extractFields.svg
similarity index 100%
rename from public/img/transformations/dark/extractFields.svg
rename to public/app/features/transformers/images/dark/extractFields.svg
diff --git a/public/img/transformations/dark/fieldLookup.svg b/public/app/features/transformers/images/dark/fieldLookup.svg
similarity index 100%
rename from public/img/transformations/dark/fieldLookup.svg
rename to public/app/features/transformers/images/dark/fieldLookup.svg
diff --git a/public/img/transformations/dark/filterByRefId.svg b/public/app/features/transformers/images/dark/filterByRefId.svg
similarity index 100%
rename from public/img/transformations/dark/filterByRefId.svg
rename to public/app/features/transformers/images/dark/filterByRefId.svg
diff --git a/public/img/transformations/dark/filterByValue.svg b/public/app/features/transformers/images/dark/filterByValue.svg
similarity index 100%
rename from public/img/transformations/dark/filterByValue.svg
rename to public/app/features/transformers/images/dark/filterByValue.svg
diff --git a/public/img/transformations/dark/filterFieldsByName.svg b/public/app/features/transformers/images/dark/filterFieldsByName.svg
similarity index 100%
rename from public/img/transformations/dark/filterFieldsByName.svg
rename to public/app/features/transformers/images/dark/filterFieldsByName.svg
diff --git a/public/img/transformations/dark/formatString.svg b/public/app/features/transformers/images/dark/formatString.svg
similarity index 100%
rename from public/img/transformations/dark/formatString.svg
rename to public/app/features/transformers/images/dark/formatString.svg
diff --git a/public/img/transformations/dark/formatTime.svg b/public/app/features/transformers/images/dark/formatTime.svg
similarity index 100%
rename from public/img/transformations/dark/formatTime.svg
rename to public/app/features/transformers/images/dark/formatTime.svg
diff --git a/public/img/transformations/dark/groupBy.svg b/public/app/features/transformers/images/dark/groupBy.svg
similarity index 100%
rename from public/img/transformations/dark/groupBy.svg
rename to public/app/features/transformers/images/dark/groupBy.svg
diff --git a/public/img/transformations/dark/groupByCalculation.svg b/public/app/features/transformers/images/dark/groupByCalculation.svg
similarity index 100%
rename from public/img/transformations/dark/groupByCalculation.svg
rename to public/app/features/transformers/images/dark/groupByCalculation.svg
diff --git a/public/img/transformations/dark/groupToNestedTable.svg b/public/app/features/transformers/images/dark/groupToNestedTable.svg
similarity index 100%
rename from public/img/transformations/dark/groupToNestedTable.svg
rename to public/app/features/transformers/images/dark/groupToNestedTable.svg
diff --git a/public/img/transformations/dark/groupingToMatrix.svg b/public/app/features/transformers/images/dark/groupingToMatrix.svg
similarity index 100%
rename from public/img/transformations/dark/groupingToMatrix.svg
rename to public/app/features/transformers/images/dark/groupingToMatrix.svg
diff --git a/public/img/transformations/dark/heatmap.svg b/public/app/features/transformers/images/dark/heatmap.svg
similarity index 100%
rename from public/img/transformations/dark/heatmap.svg
rename to public/app/features/transformers/images/dark/heatmap.svg
diff --git a/public/img/transformations/dark/histogram.svg b/public/app/features/transformers/images/dark/histogram.svg
similarity index 100%
rename from public/img/transformations/dark/histogram.svg
rename to public/app/features/transformers/images/dark/histogram.svg
diff --git a/public/img/transformations/dark/joinByField.svg b/public/app/features/transformers/images/dark/joinByField.svg
similarity index 100%
rename from public/img/transformations/dark/joinByField.svg
rename to public/app/features/transformers/images/dark/joinByField.svg
diff --git a/public/img/transformations/dark/joinByLabels.svg b/public/app/features/transformers/images/dark/joinByLabels.svg
similarity index 100%
rename from public/img/transformations/dark/joinByLabels.svg
rename to public/app/features/transformers/images/dark/joinByLabels.svg
diff --git a/public/img/transformations/dark/labelsToFields.svg b/public/app/features/transformers/images/dark/labelsToFields.svg
similarity index 100%
rename from public/img/transformations/dark/labelsToFields.svg
rename to public/app/features/transformers/images/dark/labelsToFields.svg
diff --git a/public/img/transformations/dark/limit.svg b/public/app/features/transformers/images/dark/limit.svg
similarity index 100%
rename from public/img/transformations/dark/limit.svg
rename to public/app/features/transformers/images/dark/limit.svg
diff --git a/public/img/transformations/dark/merge.svg b/public/app/features/transformers/images/dark/merge.svg
similarity index 100%
rename from public/img/transformations/dark/merge.svg
rename to public/app/features/transformers/images/dark/merge.svg
diff --git a/public/img/transformations/dark/organize.svg b/public/app/features/transformers/images/dark/organize.svg
similarity index 100%
rename from public/img/transformations/dark/organize.svg
rename to public/app/features/transformers/images/dark/organize.svg
diff --git a/public/img/transformations/dark/partitionByValues.svg b/public/app/features/transformers/images/dark/partitionByValues.svg
similarity index 100%
rename from public/img/transformations/dark/partitionByValues.svg
rename to public/app/features/transformers/images/dark/partitionByValues.svg
diff --git a/public/img/transformations/dark/prepareTimeSeries.svg b/public/app/features/transformers/images/dark/prepareTimeSeries.svg
similarity index 100%
rename from public/img/transformations/dark/prepareTimeSeries.svg
rename to public/app/features/transformers/images/dark/prepareTimeSeries.svg
diff --git a/public/img/transformations/dark/reduce.svg b/public/app/features/transformers/images/dark/reduce.svg
similarity index 100%
rename from public/img/transformations/dark/reduce.svg
rename to public/app/features/transformers/images/dark/reduce.svg
diff --git a/public/img/transformations/dark/regression.svg b/public/app/features/transformers/images/dark/regression.svg
similarity index 100%
rename from public/img/transformations/dark/regression.svg
rename to public/app/features/transformers/images/dark/regression.svg
diff --git a/public/img/transformations/dark/renameByRegex.svg b/public/app/features/transformers/images/dark/renameByRegex.svg
similarity index 100%
rename from public/img/transformations/dark/renameByRegex.svg
rename to public/app/features/transformers/images/dark/renameByRegex.svg
diff --git a/public/img/transformations/dark/rowsToFields.svg b/public/app/features/transformers/images/dark/rowsToFields.svg
similarity index 100%
rename from public/img/transformations/dark/rowsToFields.svg
rename to public/app/features/transformers/images/dark/rowsToFields.svg
diff --git a/public/img/transformations/dark/seriesToRows.svg b/public/app/features/transformers/images/dark/seriesToRows.svg
similarity index 100%
rename from public/img/transformations/dark/seriesToRows.svg
rename to public/app/features/transformers/images/dark/seriesToRows.svg
diff --git a/public/img/transformations/dark/sortBy.svg b/public/app/features/transformers/images/dark/sortBy.svg
similarity index 100%
rename from public/img/transformations/dark/sortBy.svg
rename to public/app/features/transformers/images/dark/sortBy.svg
diff --git a/public/img/transformations/dark/spatial.svg b/public/app/features/transformers/images/dark/spatial.svg
similarity index 100%
rename from public/img/transformations/dark/spatial.svg
rename to public/app/features/transformers/images/dark/spatial.svg
diff --git a/public/img/transformations/dark/timeSeriesTable.svg b/public/app/features/transformers/images/dark/timeSeriesTable.svg
similarity index 100%
rename from public/img/transformations/dark/timeSeriesTable.svg
rename to public/app/features/transformers/images/dark/timeSeriesTable.svg
diff --git a/public/img/transformations/dark/transpose.svg b/public/app/features/transformers/images/dark/transpose.svg
similarity index 100%
rename from public/img/transformations/dark/transpose.svg
rename to public/app/features/transformers/images/dark/transpose.svg
diff --git a/public/img/transformations/disabled/formatTime.svg b/public/app/features/transformers/images/disabled/formatTime.svg
similarity index 100%
rename from public/img/transformations/disabled/formatTime.svg
rename to public/app/features/transformers/images/disabled/formatTime.svg
diff --git a/public/img/transformations/disabled/groupBy.svg b/public/app/features/transformers/images/disabled/groupBy.svg
similarity index 100%
rename from public/img/transformations/disabled/groupBy.svg
rename to public/app/features/transformers/images/disabled/groupBy.svg
diff --git a/public/img/transformations/disabled/groupToNestedTable.svg b/public/app/features/transformers/images/disabled/groupToNestedTable.svg
similarity index 100%
rename from public/img/transformations/disabled/groupToNestedTable.svg
rename to public/app/features/transformers/images/disabled/groupToNestedTable.svg
diff --git a/public/img/transformations/disabled/groupingToMatrix.svg b/public/app/features/transformers/images/disabled/groupingToMatrix.svg
similarity index 100%
rename from public/img/transformations/disabled/groupingToMatrix.svg
rename to public/app/features/transformers/images/disabled/groupingToMatrix.svg
diff --git a/public/img/transformations/disabled/heatmap.svg b/public/app/features/transformers/images/disabled/heatmap.svg
similarity index 100%
rename from public/img/transformations/disabled/heatmap.svg
rename to public/app/features/transformers/images/disabled/heatmap.svg
diff --git a/public/img/transformations/disabled/merge.svg b/public/app/features/transformers/images/disabled/merge.svg
similarity index 100%
rename from public/img/transformations/disabled/merge.svg
rename to public/app/features/transformers/images/disabled/merge.svg
diff --git a/public/img/transformations/disabled/organize.svg b/public/app/features/transformers/images/disabled/organize.svg
similarity index 100%
rename from public/img/transformations/disabled/organize.svg
rename to public/app/features/transformers/images/disabled/organize.svg
diff --git a/public/img/transformations/disabled/timeSeriesTable.svg b/public/app/features/transformers/images/disabled/timeSeriesTable.svg
similarity index 100%
rename from public/img/transformations/disabled/timeSeriesTable.svg
rename to public/app/features/transformers/images/disabled/timeSeriesTable.svg
diff --git a/public/img/transformations/light/calculateField.svg b/public/app/features/transformers/images/light/calculateField.svg
similarity index 100%
rename from public/img/transformations/light/calculateField.svg
rename to public/app/features/transformers/images/light/calculateField.svg
diff --git a/public/img/transformations/light/concatenate.svg b/public/app/features/transformers/images/light/concatenate.svg
similarity index 100%
rename from public/img/transformations/light/concatenate.svg
rename to public/app/features/transformers/images/light/concatenate.svg
diff --git a/public/img/transformations/light/configFromData.svg b/public/app/features/transformers/images/light/configFromData.svg
similarity index 100%
rename from public/img/transformations/light/configFromData.svg
rename to public/app/features/transformers/images/light/configFromData.svg
diff --git a/public/img/transformations/light/convertFieldType.svg b/public/app/features/transformers/images/light/convertFieldType.svg
similarity index 100%
rename from public/img/transformations/light/convertFieldType.svg
rename to public/app/features/transformers/images/light/convertFieldType.svg
diff --git a/public/img/transformations/light/extractFields.svg b/public/app/features/transformers/images/light/extractFields.svg
similarity index 100%
rename from public/img/transformations/light/extractFields.svg
rename to public/app/features/transformers/images/light/extractFields.svg
diff --git a/public/img/transformations/light/fieldLookup.svg b/public/app/features/transformers/images/light/fieldLookup.svg
similarity index 100%
rename from public/img/transformations/light/fieldLookup.svg
rename to public/app/features/transformers/images/light/fieldLookup.svg
diff --git a/public/img/transformations/light/filterByRefId.svg b/public/app/features/transformers/images/light/filterByRefId.svg
similarity index 100%
rename from public/img/transformations/light/filterByRefId.svg
rename to public/app/features/transformers/images/light/filterByRefId.svg
diff --git a/public/img/transformations/light/filterByValue.svg b/public/app/features/transformers/images/light/filterByValue.svg
similarity index 100%
rename from public/img/transformations/light/filterByValue.svg
rename to public/app/features/transformers/images/light/filterByValue.svg
diff --git a/public/img/transformations/light/filterFieldsByName.svg b/public/app/features/transformers/images/light/filterFieldsByName.svg
similarity index 100%
rename from public/img/transformations/light/filterFieldsByName.svg
rename to public/app/features/transformers/images/light/filterFieldsByName.svg
diff --git a/public/img/transformations/light/formatString.svg b/public/app/features/transformers/images/light/formatString.svg
similarity index 100%
rename from public/img/transformations/light/formatString.svg
rename to public/app/features/transformers/images/light/formatString.svg
diff --git a/public/img/transformations/light/formatTime.svg b/public/app/features/transformers/images/light/formatTime.svg
similarity index 100%
rename from public/img/transformations/light/formatTime.svg
rename to public/app/features/transformers/images/light/formatTime.svg
diff --git a/public/img/transformations/light/groupBy.svg b/public/app/features/transformers/images/light/groupBy.svg
similarity index 100%
rename from public/img/transformations/light/groupBy.svg
rename to public/app/features/transformers/images/light/groupBy.svg
diff --git a/public/img/transformations/light/groupByCalculation.svg b/public/app/features/transformers/images/light/groupByCalculation.svg
similarity index 100%
rename from public/img/transformations/light/groupByCalculation.svg
rename to public/app/features/transformers/images/light/groupByCalculation.svg
diff --git a/public/img/transformations/light/groupToNestedTable.svg b/public/app/features/transformers/images/light/groupToNestedTable.svg
similarity index 100%
rename from public/img/transformations/light/groupToNestedTable.svg
rename to public/app/features/transformers/images/light/groupToNestedTable.svg
diff --git a/public/img/transformations/light/groupingToMatrix.svg b/public/app/features/transformers/images/light/groupingToMatrix.svg
similarity index 100%
rename from public/img/transformations/light/groupingToMatrix.svg
rename to public/app/features/transformers/images/light/groupingToMatrix.svg
diff --git a/public/img/transformations/light/heatmap.svg b/public/app/features/transformers/images/light/heatmap.svg
similarity index 100%
rename from public/img/transformations/light/heatmap.svg
rename to public/app/features/transformers/images/light/heatmap.svg
diff --git a/public/img/transformations/light/histogram.svg b/public/app/features/transformers/images/light/histogram.svg
similarity index 100%
rename from public/img/transformations/light/histogram.svg
rename to public/app/features/transformers/images/light/histogram.svg
diff --git a/public/img/transformations/light/joinByField.svg b/public/app/features/transformers/images/light/joinByField.svg
similarity index 100%
rename from public/img/transformations/light/joinByField.svg
rename to public/app/features/transformers/images/light/joinByField.svg
diff --git a/public/img/transformations/light/joinByLabels.svg b/public/app/features/transformers/images/light/joinByLabels.svg
similarity index 100%
rename from public/img/transformations/light/joinByLabels.svg
rename to public/app/features/transformers/images/light/joinByLabels.svg
diff --git a/public/img/transformations/light/labelsToFields.svg b/public/app/features/transformers/images/light/labelsToFields.svg
similarity index 100%
rename from public/img/transformations/light/labelsToFields.svg
rename to public/app/features/transformers/images/light/labelsToFields.svg
diff --git a/public/img/transformations/light/limit.svg b/public/app/features/transformers/images/light/limit.svg
similarity index 100%
rename from public/img/transformations/light/limit.svg
rename to public/app/features/transformers/images/light/limit.svg
diff --git a/public/img/transformations/light/merge.svg b/public/app/features/transformers/images/light/merge.svg
similarity index 100%
rename from public/img/transformations/light/merge.svg
rename to public/app/features/transformers/images/light/merge.svg
diff --git a/public/img/transformations/light/organize.svg b/public/app/features/transformers/images/light/organize.svg
similarity index 100%
rename from public/img/transformations/light/organize.svg
rename to public/app/features/transformers/images/light/organize.svg
diff --git a/public/img/transformations/light/partitionByValues.svg b/public/app/features/transformers/images/light/partitionByValues.svg
similarity index 100%
rename from public/img/transformations/light/partitionByValues.svg
rename to public/app/features/transformers/images/light/partitionByValues.svg
diff --git a/public/img/transformations/light/prepareTimeSeries.svg b/public/app/features/transformers/images/light/prepareTimeSeries.svg
similarity index 100%
rename from public/img/transformations/light/prepareTimeSeries.svg
rename to public/app/features/transformers/images/light/prepareTimeSeries.svg
diff --git a/public/img/transformations/light/reduce.svg b/public/app/features/transformers/images/light/reduce.svg
similarity index 100%
rename from public/img/transformations/light/reduce.svg
rename to public/app/features/transformers/images/light/reduce.svg
diff --git a/public/img/transformations/light/regression.svg b/public/app/features/transformers/images/light/regression.svg
similarity index 100%
rename from public/img/transformations/light/regression.svg
rename to public/app/features/transformers/images/light/regression.svg
diff --git a/public/img/transformations/light/renameByRegex.svg b/public/app/features/transformers/images/light/renameByRegex.svg
similarity index 100%
rename from public/img/transformations/light/renameByRegex.svg
rename to public/app/features/transformers/images/light/renameByRegex.svg
diff --git a/public/img/transformations/light/rowsToFields.svg b/public/app/features/transformers/images/light/rowsToFields.svg
similarity index 100%
rename from public/img/transformations/light/rowsToFields.svg
rename to public/app/features/transformers/images/light/rowsToFields.svg
diff --git a/public/img/transformations/light/seriesToRows.svg b/public/app/features/transformers/images/light/seriesToRows.svg
similarity index 100%
rename from public/img/transformations/light/seriesToRows.svg
rename to public/app/features/transformers/images/light/seriesToRows.svg
diff --git a/public/img/transformations/light/sortBy.svg b/public/app/features/transformers/images/light/sortBy.svg
similarity index 100%
rename from public/img/transformations/light/sortBy.svg
rename to public/app/features/transformers/images/light/sortBy.svg
diff --git a/public/img/transformations/light/spatial.svg b/public/app/features/transformers/images/light/spatial.svg
similarity index 100%
rename from public/img/transformations/light/spatial.svg
rename to public/app/features/transformers/images/light/spatial.svg
diff --git a/public/img/transformations/light/timeSeriesTable.svg b/public/app/features/transformers/images/light/timeSeriesTable.svg
similarity index 100%
rename from public/img/transformations/light/timeSeriesTable.svg
rename to public/app/features/transformers/images/light/timeSeriesTable.svg
diff --git a/public/img/transformations/light/transpose.svg b/public/app/features/transformers/images/light/transpose.svg
similarity index 100%
rename from public/img/transformations/light/transpose.svg
rename to public/app/features/transformers/images/light/transpose.svg
diff --git a/public/app/features/transformers/joinByLabels/JoinByLabelsTransformerEditor.tsx b/public/app/features/transformers/joinByLabels/JoinByLabelsTransformerEditor.tsx
index a32f09bf478..d7ea6b75503 100644
--- a/public/app/features/transformers/joinByLabels/JoinByLabelsTransformerEditor.tsx
+++ b/public/app/features/transformers/joinByLabels/JoinByLabelsTransformerEditor.tsx
@@ -12,6 +12,8 @@ import { Trans, t } from '@grafana/i18n';
 import { Alert, HorizontalGroup, InlineField, InlineFieldRow, Select, ValuePicker } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/joinByLabels.svg';
+import lightImage from '../images/light/joinByLabels.svg';
 import { getDistinctLabels } from '../utils';
 
 import { getJoinByLabelsTransformer, JoinByLabelsTransformOptions } from './joinByLabels';
@@ -189,5 +191,7 @@ export const getJoinByLabelsTransformRegistryItem: () => TransformerRegistryItem
     state: PluginState.beta,
     categories: new Set([TransformerCategory.Combine]),
     help: getTransformationContent(joinByLabelsTransformer.id).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };
diff --git a/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx b/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
index b21e8a42566..d4829275781 100644
--- a/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
+++ b/public/app/features/transformers/lookupGazetteer/FieldLookupTransformerEditor.tsx
@@ -16,6 +16,8 @@ import { FieldNamePicker } from '@grafana/ui/internal';
 import { GazetteerPathEditor, GazetteerPathEditorConfigSettings } from 'app/features/geo/editor/GazetteerPathEditor';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/fieldLookup.svg';
+import lightImage from '../images/light/fieldLookup.svg';
 
 import { FieldLookupOptions, fieldLookupTransformer } from './fieldLookup';
 
@@ -102,4 +104,6 @@ export const getFieldLookupTransformRegistryItem: () => TransformerRegistryItem<
   state: PluginState.alpha,
   categories: new Set([TransformerCategory.PerformSpatialOperations]),
   help: getTransformationContent(DataTransformerID.fieldLookup).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });
diff --git a/public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx b/public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx
index b974a7d4025..e217384f051 100644
--- a/public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx
+++ b/public/app/features/transformers/partitionByValues/PartitionByValuesEditor.tsx
@@ -21,6 +21,8 @@ import {
 import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/partitionByValues.svg';
+import lightImage from '../images/light/partitionByValues.svg';
 
 import { getPartitionByValuesTransformer, PartitionByValuesTransformerOptions } from './partitionByValues';
 
@@ -190,5 +192,7 @@ export const getPartitionByValuesTransformRegistryItem: () => TransformerRegistr
       state: PluginState.alpha,
       categories: new Set([TransformerCategory.Reformat]),
       help: getTransformationContent(DataTransformerID.partitionByValues).helperDocs,
+      imageDark: darkImage,
+      imageLight: lightImage,
     };
   };
diff --git a/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx b/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
index d720744a070..c9e6b09f299 100644
--- a/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
+++ b/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx
@@ -13,6 +13,8 @@ import { Trans, t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/prepareTimeSeries.svg';
+import lightImage from '../images/light/prepareTimeSeries.svg';
 
 import { PrepareTimeSeriesOptions, timeSeriesFormat, getPrepareTimeSeriesTransformer } from './prepareTimeSeries';
 
@@ -179,5 +181,7 @@ export const getPrepareTimeseriesTransformerRegistryItem: () => TransformerRegis
       description: prepareTimeSeriesTransformer.description,
       categories: new Set([TransformerCategory.Reformat]),
       help: getTransformationContent(prepareTimeSeriesTransformer.id).helperDocs,
+      imageDark: darkImage,
+      imageLight: lightImage,
     };
   };
diff --git a/public/app/features/transformers/regression/regressionEditor.tsx b/public/app/features/transformers/regression/regressionEditor.tsx
index 246ce6e6fc9..abf9b862b19 100644
--- a/public/app/features/transformers/regression/regressionEditor.tsx
+++ b/public/app/features/transformers/regression/regressionEditor.tsx
@@ -15,6 +15,8 @@ import { FieldNamePicker } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/regression.svg';
+import lightImage from '../images/light/regression.svg';
 
 import { DEFAULTS, DEGREES, ModelType, getRegressionTransformer, RegressionTransformerOptions } from './regression';
 
@@ -167,5 +169,7 @@ export const getRegressionTransformerRegistryItem: () => TransformerRegistryItem
     description: regressionTransformer.description,
     categories: new Set([TransformerCategory.CalculateNewFields]),
     help: getTransformationContent(DataTransformerID.regression).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };
diff --git a/public/app/features/transformers/rowsToFields/RowsToFieldsTransformerEditor.tsx b/public/app/features/transformers/rowsToFields/RowsToFieldsTransformerEditor.tsx
index 0eb8532f840..ed111c06b03 100644
--- a/public/app/features/transformers/rowsToFields/RowsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/rowsToFields/RowsToFieldsTransformerEditor.tsx
@@ -2,6 +2,8 @@ import { PluginState, TransformerRegistryItem, TransformerUIProps, TransformerCa
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor';
+import darkImage from '../images/dark/rowsToFields.svg';
+import lightImage from '../images/light/rowsToFields.svg';
 
 import { getRowsToFieldsTransformer, RowToFieldsTransformOptions } from './rowsToFields';
 
@@ -35,5 +37,7 @@ export const getRowsToFieldsTransformRegistryItem: () => TransformerRegistryItem
     state: PluginState.beta,
     categories: new Set([TransformerCategory.Reformat]),
     help: getTransformationContent(rowsToFieldsTransformer.id).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };
diff --git a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
index dbc94ad0f0e..8d63ed60746 100644
--- a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
+++ b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
@@ -17,6 +17,8 @@ import { useTheme2 } from '@grafana/ui';
 import { addLocationFields } from 'app/features/geo/editor/locationEditor';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/spatial.svg';
+import lightImage from '../images/light/spatial.svg';
 
 import { SpatialCalculation, SpatialOperation, SpatialAction, SpatialTransformOptions } from './models.gen';
 import { getDefaultOptions, getTransformerOptionPane } from './optionsHelper';
@@ -184,5 +186,7 @@ export const getSpatialTransformRegistryItem: () => TransformerRegistryItem<Spat
     state: PluginState.alpha,
     categories: new Set([TransformerCategory.PerformSpatialOperations]),
     help: getTransformationContent(DataTransformerID.spatial).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };
diff --git a/public/app/features/transformers/timeSeriesTable/TimeSeriesTableTransformEditor.tsx b/public/app/features/transformers/timeSeriesTable/TimeSeriesTableTransformEditor.tsx
index d90702f5f35..2cf438efdb7 100644
--- a/public/app/features/transformers/timeSeriesTable/TimeSeriesTableTransformEditor.tsx
+++ b/public/app/features/transformers/timeSeriesTable/TimeSeriesTableTransformEditor.tsx
@@ -15,6 +15,8 @@ import { t } from '@grafana/i18n';
 import { InlineFieldRow, InlineField, StatsPicker, Select, InlineLabel } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/timeSeriesTable.svg';
+import lightImage from '../images/light/timeSeriesTable.svg';
 
 import {
   getTimeSeriesTableTransformer,
@@ -134,5 +136,7 @@ export const getTimeSeriesTableTransformRegistryItem: () => TransformerRegistryI
       description: timeSeriesTableTransformer.description,
       state: PluginState.beta,
       help: getTransformationContent(timeSeriesTableTransformer.id).helperDocs,
+      imageDark: darkImage,
+      imageLight: lightImage,
     };
   };