frontend-plugin-api: migration to IconElement + API reports

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app-example-plugin/report.api.md

@@ -7,7 +7,7 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { JSX as JSX_3 } from 'react/jsx-runtime';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -48,7 +48,7 @@ const examplePlugin: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -83,7 +83,7 @@ const examplePlugin: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };

packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2026 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createElement, type ReactNode } from 'react';
+import { DefaultIconsApi } from './DefaultIconsApi';
+
+describe('DefaultIconsApi', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return undefined for unknown keys', () => {
+    const api = new DefaultIconsApi({});
+    expect(api.getIcon('missing')).toBeUndefined();
+  });
+
+  it('should list all registered icon keys', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const api = new DefaultIconsApi({
+      a: createElement('span'),
+      b: () => createElement('span'),
+      c: null,
+    });
+    expect(api.listIconKeys()).toEqual(['a', 'b', 'c']);
+  });
+
+  it('should support IconElement values and wrap them in a component', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const element = createElement('span', null, 'test-icon');
+    const api = new DefaultIconsApi({ myIcon: element });
+
+    const Icon = api.getIcon('myIcon');
+    expect(Icon).toBeDefined();
+    expect(typeof Icon).toBe('function');
+    expect((Icon! as (props: object) => ReactNode)({})).toBe(element);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('should support null IconElement values', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const api = new DefaultIconsApi({ empty: null });
+
+    const Icon = api.getIcon('empty');
+    expect(Icon).toBeDefined();
+    expect(typeof Icon).toBe('function');
+    expect((Icon! as (props: object) => ReactNode)({})).toBeNull();
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('should support IconComponent values and return them directly', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const MyIcon = () => createElement('span', null, 'component-icon');
+    const api = new DefaultIconsApi({ myIcon: MyIcon });
+
+    expect(api.getIcon('myIcon')).toBe(MyIcon);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('myIcon'));
+  });
+
+  it('should log a single warning listing all IconComponent keys', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const A = () => createElement('span');
+    const B = () => createElement('span');
+
+    const api = new DefaultIconsApi({
+      a: A,
+      elem: createElement('span'),
+      b: B,
+      empty: null,
+    });
+    expect(api.getIcon('a')).toBe(A);
+    expect(api.getIcon('b')).toBe(B);
+    expect(api.getIcon('elem')).toEqual(expect.any(Function));
+    expect(api.getIcon('empty')).toEqual(expect.any(Function));
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringMatching(/a, b$/));
+  });
+
+  it('should handle a mix of IconComponent and IconElement values', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const element = createElement('span', null, 'elem');
+    const Component = () => createElement('span', null, 'comp');
+
+    const api = new DefaultIconsApi({
+      elem: element,
+      comp: Component,
+      empty: null,
+    });
+
+    // Element - wrapped in a component, returned via getIcon
+    const ElemIcon = api.getIcon('elem');
+    expect(ElemIcon).toBeDefined();
+    expect((ElemIcon! as (props: object) => ReactNode)({})).toBe(element);
+
+    // Component - returned directly
+    expect(api.getIcon('comp')).toBe(Component);
+
+    // Null element - wrapped in a component
+    const EmptyIcon = api.getIcon('empty');
+    expect(EmptyIcon).toBeDefined();
+    expect((EmptyIcon! as (props: object) => ReactNode)({})).toBeNull();
+
+    // Single warning mentioning only the component key
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('comp'));
+    expect(warnSpy).toHaveBeenCalledWith(expect.not.stringContaining('elem'));
+  });
+});

packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { IconComponent, IconsApi } from '@backstage/frontend-plugin-api';
+import {
+  IconComponent,
+  IconElement,
+  IconsApi,
+} from '@backstage/frontend-plugin-api';
 
 /**
  * Implementation for the {@link IconsApi}
@@ -24,8 +28,27 @@ import { IconComponent, IconsApi } from '@backstage/frontend-plugin-api';
 export class DefaultIconsApi implements IconsApi {
   #icons: Map<string, IconComponent>;
 
-  constructor(icons: { [key in string]: IconComponent }) {
-    this.#icons = new Map(Object.entries(icons));
+  constructor(icons: { [key in string]: IconComponent | IconElement }) {
+    const deprecatedKeys: string[] = [];
+
+    this.#icons = new Map(
+      Object.entries(icons).map(([key, icon]) => {
+        if (typeof icon === 'function') {
+          deprecatedKeys.push(key);
+          return [key, icon];
+        }
+        return [key, () => icon];
+      }),
+    );
+
+    if (deprecatedKeys.length > 0) {
+      const keys = deprecatedKeys.join(', ');
+      // eslint-disable-next-line no-console
+      console.warn(
+        `The following icons were registered as IconComponent, which is deprecated. ` +
+          `Use IconElement instead by passing <MyIcon /> rather than MyIcon: ${keys}`,
+      );
+    }
   }
 
   getIcon(key: string): IconComponent | undefined {

packages/frontend-internal/src/wiring/InternalFrontendPlugin.ts

@@ -17,7 +17,7 @@
 import {
   Extension,
   FeatureFlagConfig,
-  IconComponent,
+  IconElement,
   OverridableFrontendPlugin,
 } from '@backstage/frontend-plugin-api';
 import { JsonObject } from '@backstage/types';
@@ -28,7 +28,7 @@ export const OpaqueFrontendPlugin = OpaqueType.create<{
   versions: {
     readonly version: 'v1';
     readonly title?: string;
-    readonly icon?: IconComponent;
+    readonly icon?: IconElement;
     readonly extensions: Extension<unknown>[];
     readonly featureFlags: FeatureFlagConfig[];
     readonly infoOptions?: {

packages/frontend-plugin-api/report.api.md

@@ -16,8 +16,8 @@ import { ExtensionDataRef as ExtensionDataRef_2 } from '@backstage/frontend-plug
 import { ExtensionInput as ExtensionInput_2 } from '@backstage/frontend-plugin-api';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { JSX as JSX_3 } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { JSX as JSX_3 } from 'react/jsx-runtime';
 import { Observable } from '@backstage/types';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
@@ -52,7 +52,7 @@ export const analyticsApiRef: ApiRef<AnalyticsApi>;
 export const AnalyticsContext: (options: {
   attributes: Partial<AnalyticsContextValue>;
   children: ReactNode;
-}) => JSX_2.Element;
+}) => JSX_3.Element;
 
 // @public
 export interface AnalyticsContextValue {
@@ -263,7 +263,7 @@ export const AppRootElementBlueprint: ExtensionBlueprint_2<{
   params: {
     element: JSX.Element;
   };
-  output: ExtensionDataRef_2<JSX_3, 'core.reactElement', {}>;
+  output: ExtensionDataRef_2<JSX_2, 'core.reactElement', {}>;
   inputs: {};
   config: {};
   configInput: {};
@@ -389,9 +389,9 @@ export interface ConfigurableExtensionDataRef<
 // @public (undocumented)
 export const coreExtensionData: {
   title: ConfigurableExtensionDataRef_2<string, 'core.title', {}>;
-  icon: ConfigurableExtensionDataRef_2<IconComponent, 'core.icon', {}>;
+  icon: ConfigurableExtensionDataRef_2<IconElement, 'core.icon', {}>;
   reactElement: ConfigurableExtensionDataRef_2<
-    JSX_3.Element,
+    JSX_2.Element,
     'core.reactElement',
     {}
   >;
@@ -1103,7 +1103,7 @@ export type ExtensionBlueprintParams<T extends object = object> = {
 };
 
 // @public (undocumented)
-export function ExtensionBoundary(props: ExtensionBoundaryProps): JSX_2.Element;
+export function ExtensionBoundary(props: ExtensionBoundaryProps): JSX_3.Element;
 
 // @public (undocumented)
 export namespace ExtensionBoundary {
@@ -1369,7 +1369,7 @@ export interface FrontendPlugin<
   readonly $$type: '@backstage/FrontendPlugin';
   // (undocumented)
   readonly externalRoutes: TExternalRoutes;
-  readonly icon?: IconComponent;
+  readonly icon?: IconElement;
   // @deprecated
   readonly id: string;
   info(): Promise<FrontendPluginInfo>;
@@ -1430,18 +1430,21 @@ export const HeaderActionBlueprint: ExtensionBlueprint_2<{
   params: {
     loader: () => Promise<JSX.Element>;
   };
-  output: ExtensionDataRef_2<JSX_3, 'core.reactElement', {}>;
+  output: ExtensionDataRef_2<JSX_2, 'core.reactElement', {}>;
   inputs: {};
   config: {};
   configInput: {};
   dataRefs: never;
 }>;
 
-// @public
+// @public @deprecated
 export type IconComponent = ComponentType<{
   fontSize?: 'medium' | 'large' | 'small' | 'inherit';
 }>;
 
+// @public
+export type IconElement = JSX_2.Element | null;
+
 // @public
 export interface IconsApi {
   // (undocumented)
@@ -1716,9 +1719,9 @@ export interface OverridableFrontendPlugin<
   ): OverridableExtensionDefinition<TExtensionMap[TId]['T']>;
   // (undocumented)
   withOverrides(options: {
-    extensions: Array<ExtensionDefinition>;
+    extensions?: Array<ExtensionDefinition>;
     title?: string;
-    icon?: IconComponent;
+    icon?: IconElement;
     info?: FrontendPluginInfoOptions;
   }): OverridableFrontendPlugin<TRoutes, TExternalRoutes, TExtensionMap>;
 }
@@ -1730,7 +1733,7 @@ export const PageBlueprint: ExtensionBlueprint_2<{
     defaultPath?: [Error: `Use the 'path' param instead`];
     path: string;
     title?: string;
-    icon?: IconComponent;
+    icon?: IconElement;
     loader?: () => Promise<JSX.Element>;
     routeRef?: RouteRef;
   };
@@ -1743,7 +1746,7 @@ export const PageBlueprint: ExtensionBlueprint_2<{
           optional: true;
         }
       >
-    | ExtensionDataRef_2<JSX_3, 'core.reactElement', {}>
+    | ExtensionDataRef_2<JSX_2, 'core.reactElement', {}>
     | ExtensionDataRef_2<
         string,
         'core.title',
@@ -1752,7 +1755,7 @@ export const PageBlueprint: ExtensionBlueprint_2<{
         }
       >
     | ExtensionDataRef_2<
-        IconComponent,
+        IconElement,
         'core.icon',
         {
           optional: true;
@@ -1760,7 +1763,7 @@ export const PageBlueprint: ExtensionBlueprint_2<{
       >;
   inputs: {
     pages: ExtensionInput_2<
-      | ConfigurableExtensionDataRef_2<JSX_3, 'core.reactElement', {}>
+      | ConfigurableExtensionDataRef_2<JSX_2, 'core.reactElement', {}>
       | ConfigurableExtensionDataRef_2<string, 'core.routing.path', {}>
       | ConfigurableExtensionDataRef_2<
           RouteRef<AnyRouteRefParams_2>,
@@ -1805,7 +1808,7 @@ export interface PageLayoutProps {
   // (undocumented)
   children?: ReactNode;
   // (undocumented)
-  icon?: IconComponent;
+  icon?: IconElement;
   // (undocumented)
   tabs?: PageTab[];
   // (undocumented)
@@ -1848,7 +1851,7 @@ export interface PluginOptions<
   externalRoutes?: TExternalRoutes;
   // (undocumented)
   featureFlags?: FeatureFlagConfig[];
-  icon?: IconComponent;
+  icon?: IconElement;
   // (undocumented)
   info?: FrontendPluginInfoOptions;
   // (undocumented)
@@ -2009,7 +2012,7 @@ export const SubPageBlueprint: ExtensionBlueprint_2<{
           optional: true;
         }
       >
-    | ExtensionDataRef_2<JSX_3, 'core.reactElement', {}>
+    | ExtensionDataRef_2<JSX_2, 'core.reactElement', {}>
     | ExtensionDataRef_2<string, 'core.title', {}>;
   inputs: {};
   config: {
@@ -2105,9 +2108,9 @@ export type TranslationFunction<
           NestedMessageKeys<TKey, IMessages>,
           PluralKeys<TMessages>,
           IMessages,
-          string | JSX_3.Element
+          string | JSX_2.Element
         >
-      ): JSX_3.Element;
+      ): JSX_2.Element;
     }
   : never;
 
@@ -2283,7 +2286,7 @@ export function withApis<T extends {}>(
 ): <TProps extends T>(
   WrappedComponent: ComponentType<TProps>,
 ) => {
-  (props: PropsWithChildren<Omit<TProps, keyof T>>): JSX_2.Element;
+  (props: PropsWithChildren<Omit<TProps, keyof T>>): JSX_3.Element;
   displayName: string;
 };
 ```

packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Routes, Route, Navigate } from 'react-router-dom';
-import { IconComponent } from '../icons/types';
+import { IconElement } from '../icons/types';
 import { RouteRef } from '../routing';
 import {
   coreExtensionData,
@@ -61,7 +61,7 @@ export const PageBlueprint = createExtensionBlueprint({
       defaultPath?: [Error: `Use the 'path' param instead`];
       path: string;
       title?: string;
-      icon?: IconComponent;
+      icon?: IconElement;
       loader?: () => Promise<JSX.Element>;
       routeRef?: RouteRef;
     },

packages/frontend-plugin-api/src/components/PageLayout.tsx

@@ -15,7 +15,7 @@
  */
 
 import { ReactNode } from 'react';
-import { IconComponent } from '../icons/types';
+import { IconElement } from '../icons/types';
 import { createSwappableComponent } from './createSwappableComponent';
 
 /**
@@ -35,7 +35,7 @@ export interface PageTab {
  */
 export interface PageLayoutProps {
   title?: string;
-  icon?: IconComponent;
+  icon?: IconElement;
   tabs?: PageTab[];
   children?: ReactNode;
 }
@@ -44,7 +44,7 @@ export interface PageLayoutProps {
  * Default implementation of PageLayout using plain HTML elements
  */
 function DefaultPageLayout(props: PageLayoutProps): JSX.Element {
-  const { title, icon: Icon, tabs, children } = props;
+  const { title, icon, tabs, children } = props;
 
   return (
     <div
@@ -75,7 +75,7 @@ function DefaultPageLayout(props: PageLayoutProps): JSX.Element {
                 fontWeight: 500,
               }}
             >
-              {Icon && <Icon fontSize="small" />}
+              {icon}
               {title}
             </div>
           )}

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -15,14 +15,14 @@
  */
 
 import { JSX } from 'react';
-import { IconComponent } from '../icons/types';
+import { IconElement } from '../icons/types';
 import { RouteRef } from '../routing/RouteRef';
 import { createExtensionDataRef } from './createExtensionDataRef';
 
 /** @public */
 export const coreExtensionData = {
   title: createExtensionDataRef<string>().with({ id: 'core.title' }),
-  icon: createExtensionDataRef<IconComponent>().with({ id: 'core.icon' }),
+  icon: createExtensionDataRef<IconElement>().with({ id: 'core.icon' }),
   reactElement: createExtensionDataRef<JSX.Element>().with({
     id: 'core.reactElement',
   }),

packages/frontend-plugin-api/src/wiring/createFrontendPlugin.ts

@@ -29,7 +29,7 @@ import {
 import { FeatureFlagConfig } from './types';
 import { MakeSortedExtensionsMap } from './MakeSortedExtensionsMap';
 import { JsonObject } from '@backstage/types';
-import { IconComponent } from '../icons/types';
+import { IconElement } from '../icons/types';
 import { RouteRef, SubRouteRef, ExternalRouteRef } from '../routing';
 import { ID_PATTERN } from './constants';
 
@@ -123,7 +123,7 @@ export interface OverridableFrontendPlugin<
     /**
      * Overrides the display icon of the plugin.
      */
-    icon?: IconComponent;
+    icon?: IconElement;
 
     /**
      * Overrides the original info loaders of the plugin one by one.
@@ -160,7 +160,7 @@ export interface FrontendPlugin<
   /**
    * The display icon of the plugin, used in page headers and navigation.
    */
-  readonly icon?: IconComponent;
+  readonly icon?: IconElement;
   readonly routes: TRoutes;
   readonly externalRoutes: TExternalRoutes;
 
@@ -186,7 +186,7 @@ export interface PluginOptions<
   /**
    * The display icon of the plugin, used in page headers and navigation.
    */
-  icon?: IconComponent;
+  icon?: IconElement;
   routes?: TRoutes;
   externalRoutes?: TExternalRoutes;
   extensions?: TExtensions;

plugins/api-docs/report-alpha.api.md

@@ -16,6 +16,7 @@ import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FilterPredicate } from '@backstage/filter-predicates';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -521,7 +522,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -558,7 +559,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/app-react/report.api.md

@@ -10,6 +10,7 @@ import { ExtensionBlueprint } from '@backstage/frontend-plugin-api';
 import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { IdentityApi } from '@backstage/frontend-plugin-api';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/frontend-plugin-api';
@@ -45,11 +46,11 @@ export const AppRootWrapperBlueprint: ExtensionBlueprint<{
 export const IconBundleBlueprint: ExtensionBlueprint<{
   kind: 'icon-bundle';
   params: {
-    icons: { [key in string]: IconComponent };
+    icons: { [key in string]: IconComponent | IconElement };
   };
   output: ExtensionDataRef<
     {
-      [x: string]: IconComponent;
+      [x: string]: IconComponent | IconElement;
     },
     'core.icons',
     {}
@@ -60,7 +61,7 @@ export const IconBundleBlueprint: ExtensionBlueprint<{
   dataRefs: {
     icons: ConfigurableExtensionDataRef<
       {
-        [x: string]: IconComponent;
+        [x: string]: IconComponent | IconElement;
       },
       'core.icons',
       {}

plugins/app-react/src/blueprints/IconBundleBlueprint.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconComponent, IconElement } from '@backstage/frontend-plugin-api';
 import {
   createExtensionBlueprint,
   createExtensionDataRef,
 } from '@backstage/frontend-plugin-api';
 
 const iconsDataRef = createExtensionDataRef<{
-  [key in string]: IconComponent;
+  [key in string]: IconComponent | IconElement;
 }>().with({ id: 'core.icons' });
 
 /**
@@ -33,9 +33,9 @@ export const IconBundleBlueprint = createExtensionBlueprint({
   kind: 'icon-bundle',
   attachTo: { id: 'api:app/icons', input: 'icons' },
   output: [iconsDataRef],
-  factory: (params: { icons: { [key in string]: IconComponent } }) => [
-    iconsDataRef(params.icons),
-  ],
+  factory: (params: {
+    icons: { [key in string]: IconComponent | IconElement };
+  }) => [iconsDataRef(params.icons)],
   dataRefs: {
     icons: iconsDataRef,
   },

plugins/app-visualizer/report.api.md

@@ -8,6 +8,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -68,7 +69,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -103,7 +104,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };
@@ -137,7 +138,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -172,7 +173,7 @@ const visualizerPlugin: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };

plugins/app-visualizer/src/plugin.tsx

@@ -125,7 +125,7 @@ export const appVisualizerNavItem = NavItemBlueprint.make({
 export const visualizerPlugin = createFrontendPlugin({
   pluginId: 'app-visualizer',
   title: 'App Visualizer',
-  icon: () => <RiEyeLine />,
+  icon: <RiEyeLine />,
   info: { packageJson: () => import('../package.json') },
   extensions: [
     appVisualizerPage,

plugins/app/report.api.md

@@ -14,6 +14,7 @@ import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { NavContentComponent } from '@backstage/plugin-app-react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -476,7 +477,7 @@ const appPlugin: OverridableFrontendPlugin<
         icons: ExtensionInput<
           ConfigurableExtensionDataRef<
             {
-              [x: string]: IconComponent;
+              [x: string]: IconComponent | IconElement;
             },
             'core.icons',
             {}

plugins/app/src/extensions/components.tsx

@@ -73,13 +73,13 @@ export const PageLayout = SwappableComponentBlueprint.make({
     define({
       component: SwappablePageLayout,
       loader: () => (props: PageLayoutProps) => {
-        const { title, icon: Icon, tabs, children } = props;
+        const { title, icon, tabs, children } = props;
         return (
           <Flex
             direction="column"
             style={{ flexGrow: 1, minHeight: 0, gap: 0 }}
           >
-            <Header title={title} icon={Icon && <Icon />} tabs={tabs} />
+            <Header title={title} icon={icon} tabs={tabs} />
             <Flex direction="column" style={{ flexGrow: 1, minHeight: 0 }}>
               {children}
             </Flex>

plugins/auth/report.api.md

@@ -7,7 +7,7 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -49,7 +49,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -84,7 +84,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };

plugins/catalog-graph/report-alpha.api.md

@@ -14,7 +14,7 @@ import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FilterPredicate } from '@backstage/filter-predicates';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -197,7 +197,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -234,7 +234,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/catalog-import/report-alpha.api.md

@@ -10,7 +10,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -142,7 +142,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -177,7 +177,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/catalog-unprocessed-entities/report-alpha.api.md

@@ -12,6 +12,7 @@ import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -90,7 +91,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -125,7 +126,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/catalog/report-alpha.api.md

@@ -18,6 +18,7 @@ import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FilterPredicate } from '@backstage/filter-predicates';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { IconLinkVerticalProps } from '@backstage/core-components';
 import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
@@ -1030,7 +1031,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -1075,7 +1076,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };
@@ -1127,7 +1128,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -1249,7 +1250,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/devtools/report-alpha.api.md

@@ -11,6 +11,7 @@ import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -87,7 +88,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -141,7 +142,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/home/report-alpha.api.md

@@ -14,6 +14,7 @@ import { HomePageLayoutProps } from '@backstage/plugin-home-react/alpha';
 import { HomePageWidgetBlueprintParams } from '@backstage/plugin-home-react/alpha';
 import { HomePageWidgetData } from '@backstage/plugin-home-react/alpha';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -128,7 +129,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -189,7 +190,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };

plugins/kubernetes/report-alpha.api.md

@@ -13,7 +13,7 @@ import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { FilterPredicate } from '@backstage/filter-predicates';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -189,7 +189,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -224,7 +224,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/mui-to-bui/report.api.md

@@ -8,7 +8,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { JSX as JSX_3 } from 'react/jsx-runtime';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
@@ -63,7 +63,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -98,7 +98,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/notifications/report-alpha.api.md

@@ -10,7 +10,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
-import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -69,7 +69,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -104,7 +104,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/scaffolder/report-alpha.api.md

@@ -20,6 +20,7 @@ import { FormField } from '@backstage/plugin-scaffolder-react/alpha';
 import type { FormProps as FormProps_2 } from '@rjsf/core';
 import { FormProps as FormProps_3 } from '@backstage/plugin-scaffolder-react';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { IconLinkVerticalProps } from '@backstage/core-components';
 import { JSX as JSX_2 } from 'react';
 import { LayoutOptions } from '@backstage/plugin-scaffolder-react';
@@ -218,7 +219,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -267,7 +268,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/search/report-alpha.api.md

@@ -11,6 +11,7 @@ import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -93,7 +94,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -176,7 +177,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };
@@ -255,7 +256,7 @@ export const searchPage: OverridableExtensionDefinition<{
         }
       >
     | ExtensionDataRef<
-        IconComponent,
+        IconElement,
         'core.icon',
         {
           optional: true;
@@ -338,7 +339,7 @@ export const searchPage: OverridableExtensionDefinition<{
     defaultPath?: [Error: `Use the 'path' param instead`];
     path: string;
     title?: string;
-    icon?: IconComponent;
+    icon?: IconElement;
     loader?: () => Promise<JSX.Element>;
     routeRef?: RouteRef;
   };

plugins/techdocs/report-alpha.api.md

@@ -14,6 +14,7 @@ import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { FilterPredicate } from '@backstage/filter-predicates';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { IconLinkVerticalProps } from '@backstage/core-components';
 import { JSX as JSX_2 } from 'react';
 import { JSXElementConstructor } from 'react';
@@ -308,7 +309,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -343,7 +344,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };
@@ -379,7 +380,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -428,7 +429,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef_2;
       };

plugins/user-settings/report-alpha.api.md

@@ -8,6 +8,7 @@ import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/frontend-plugin-api';
+import { IconElement } from '@backstage/frontend-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -70,7 +71,7 @@ const _default: OverridableFrontendPlugin<
             }
           >
         | ExtensionDataRef<
-            IconComponent,
+            IconElement,
             'core.icon',
             {
               optional: true;
@@ -115,7 +116,7 @@ const _default: OverridableFrontendPlugin<
         defaultPath?: [Error: `Use the 'path' param instead`];
         path: string;
         title?: string;
-        icon?: IconComponent;
+        icon?: IconElement;
         loader?: () => Promise<JSX.Element>;
         routeRef?: RouteRef;
       };