diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx
index 281a886ffe13f..b1a6ae0b28b4f 100644
--- a/src/content/docs/en/guides/images.mdx
+++ b/src/content/docs/en/guides/images.mdx
@@ -433,6 +433,33 @@ import Logo from '../assets/logo.svg';
 <Logo width={64} height={64} fill="currentColor" />
 ```
 
+#### `SvgComponent` Type
+
+<Since v="5.14.0" />
+
+You can also enforce type safety for your `.svg` assets using the `SvgComponent` type:
+
+```astro title="src/components/Logo.astro"
+---
+import type { SvgComponent } from "astro/types";
+import HomeIcon from './Home.svg'
+
+interface Link {
+	url: string
+	text: string
+	icon: SvgComponent
+}
+
+const links: Link[] = [
+	{
+		url: '/',
+		text: 'Home',
+		icon: HomeIcon
+	}
+]
+---
+```
+
 ### Creating custom image components
 
 You can create a custom, reusable image component by wrapping the `<Image />`  or `<Picture/>` component in another Astro component. This allows you to set default attributes and styles only once.