diff --git a/packages/frontend-plugin-api/src/icons/index.ts b/packages/frontend-plugin-api/src/icons/index.ts
index 9c9e45e54c..913f38d5bf 100644
--- a/packages/frontend-plugin-api/src/icons/index.ts
+++ b/packages/frontend-plugin-api/src/icons/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export type { IconComponent } from './types';
+export type { IconComponent, IconElement } from './types';
diff --git a/packages/frontend-plugin-api/src/icons/types.ts b/packages/frontend-plugin-api/src/icons/types.ts
index 2b00e1456f..f862b491f0 100644
--- a/packages/frontend-plugin-api/src/icons/types.ts
+++ b/packages/frontend-plugin-api/src/icons/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ComponentType } from 'react';
+import { ComponentType, JSX } from 'react';
 
 /**
  * IconComponent is the common icon type used throughout Backstage when
@@ -31,7 +31,15 @@ import { ComponentType } from 'react';
  * also describe your use-case and reasoning of the addition.
  *
  * @public
+ * @deprecated Use {@link IconElement} instead, passing `<MyIcon />` rather than `MyIcon`.
  */
 export type IconComponent = ComponentType<{
   fontSize?: 'medium' | 'large' | 'small' | 'inherit';
 }>;
+
+/**
+ * The type used for icon elements throughout Backstage.
+ *
+ * @public
+ */
+export type IconElement = JSX.Element | null;