diff --git a/plugins/graphiql/dev/index.tsx b/plugins/graphiql/dev/index.tsx
index 5a64208b1a..96d49fe53b 100644
--- a/plugins/graphiql/dev/index.tsx
+++ b/plugins/graphiql/dev/index.tsx
@@ -16,7 +16,11 @@
 
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { githubAuthApiRef, errorApiRef } from '@backstage/core-plugin-api';
+import {
+  githubAuthApiRef,
+  errorApiRef,
+  IconComponent,
+} from '@backstage/core-plugin-api';
 import GraphiQLIcon from '../src/assets/graphiql.icon.svg';
 import {
   graphiqlPlugin,
@@ -56,7 +60,7 @@ createDevApp()
   })
   .addPage({
     title: 'GraphiQL',
-    icon: GraphiQLIcon,
+    icon: GraphiQLIcon as IconComponent,
     element: <GraphiQLPage />,
   })
   .render();
diff --git a/plugins/graphiql/src/index.ts b/plugins/graphiql/src/index.ts
index bd13acbf3b..df0a6f140b 100644
--- a/plugins/graphiql/src/index.ts
+++ b/plugins/graphiql/src/index.ts
@@ -25,4 +25,4 @@ export {
 export { GraphiQLPage as Router } from './components';
 export * from './lib/api';
 export * from './route-refs';
-export const GraphiQLIcon: IconComponent = GraphiQLIconComponent;
+export const GraphiQLIcon: IconComponent = GraphiQLIconComponent as IconComponent;
diff --git a/plugins/ilert/src/index.ts b/plugins/ilert/src/index.ts
index 1dc4a1fb0d..2a113ffbe3 100644
--- a/plugins/ilert/src/index.ts
+++ b/plugins/ilert/src/index.ts
@@ -30,4 +30,4 @@ export {
 } from './components';
 export * from './api';
 export * from './route-refs';
-export const ILertIcon: IconComponent = ILertIconComponent;
+export const ILertIcon: IconComponent = ILertIconComponent as IconComponent;