diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts
index 155a2f613426..659107bbfe20 100644
--- a/packages/docusaurus/src/webpack/utils.ts
+++ b/packages/docusaurus/src/webpack/utils.ts
@@ -220,7 +220,7 @@ export function getFileLoaderUtils() {
     images: (): RuleSetRule => {
       return {
         use: [loaders.url({folder: 'images'})],
-        test: /\.(ico|svg|jpg|jpeg|png|gif|webp)(\?.*)?$/,
+        test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/,
       };
     },
 
diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index 4945c46166ef..ded44546b29a 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -1043,4 +1043,19 @@ or
 [![](./assets/docusaurus-asset-example-banner.png)](./assets/docusaurus-asset-example-pdf.pdf)
 ```
 
-[![](./assets/docusaurus-asset-example-banner.png)](./assets/docusaurus-asset-example-pdf.pdf)
\ No newline at end of file
+[![](./assets/docusaurus-asset-example-banner.png)](./assets/docusaurus-asset-example-pdf.pdf)
+
+### Inline SVGs
+
+Docusaurus support inlining SVGs out of the box.
+
+```js
+
+import DocusaurusSvg from "./docusaurus.svg"
+
+<DocusaurusSvg />
+
+```
+import DocusaurusSvg from "@site/static/img/docusaurus.svg"
+
+<DocusaurusSvg />