diff --git a/src/core/compilers/jsx.ts b/src/core/compilers/jsx.ts
index 11ff8310..0ace4e7b 100644
--- a/src/core/compilers/jsx.ts
+++ b/src/core/compilers/jsx.ts
@@ -17,6 +17,7 @@ export const JSXCompiler = (async (
     svg,
     {
       plugins: ['@svgr/plugin-jsx'],
+      ref: options.jsx === 'react',
     },
     { componentName: camelize(`${collection}-${icon}`) },
   )
diff --git a/types/react.d.ts b/types/react.d.ts
index 35663663..7abe592d 100644
--- a/types/react.d.ts
+++ b/types/react.d.ts
@@ -1,14 +1,12 @@
 declare module 'virtual:icons/*' {
-  import type { SVGProps } from 'react'
-  import type React from 'react'
+  import type { ForwardRefExoticComponent, SVGProps } from 'react'
 
-  const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement
+  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement>>
   export default component
 }
 declare module '~icons/*' {
-  import type { SVGProps } from 'react'
-  import type React from 'react'
+  import type { ForwardRefExoticComponent, SVGProps } from 'react'
 
-  const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement
+  const component: ForwardRefExoticComponent<SVGProps<SVGSVGElement>>
   export default component
 }