diff --git a/fern/products/docs/pages/changelog/2025-12-20.mdx b/fern/products/docs/pages/changelog/2025-12-20.mdx
new file mode 100644
index 000000000..39ca96d66
--- /dev/null
+++ b/fern/products/docs/pages/changelog/2025-12-20.mdx
@@ -0,0 +1,16 @@
+## Custom SVG icons in card and icon components
+
+The Card and Icon components support relative paths to SVG files. Use a relative path like `./images/icon.svg` to display custom SVG icons from your project.
+
+```jsx Markdown
+<Card 
+    title="Fern species" 
+    icon="./images/fern-leaf.svg"
+>
+    Card with a custom SVG icon.
+</Card>
+
+<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon
+```
+
+Learn more about the [Card](/learn/docs/writing-content/components/cards) and [Icon](/learn/docs/writing-content/components/icons) components.
diff --git a/fern/products/docs/pages/component-library/default-components/cards.mdx b/fern/products/docs/pages/component-library/default-components/cards.mdx
index 6304dad17..785a6f0e0 100644
--- a/fern/products/docs/pages/component-library/default-components/cards.mdx
+++ b/fern/products/docs/pages/component-library/default-components/cards.mdx
@@ -105,6 +105,8 @@ You can use individual cards or arrange multiple cards in a responsive grid layo
 
 ### Custom icon
 
+You can use a custom icon by passing an image tag or a relative path to an SVG file.
+
 <div className="highlight-frame">
   <Card 
       title="Plant care" 
@@ -125,6 +127,18 @@ You can use individual cards or arrange multiple cards in a responsive grid layo
 </Card>
 ```
 
+To use a relative path to an SVG file stored in your project:
+
+```jsx Markdown
+<Card 
+    title="Fern species" 
+    icon="./images/fern-leaf.svg"
+    href="/learn/docs/writing-content/components/cards"
+>
+    Use a relative path to reference an SVG file in your project.
+</Card>
+```
+
 ### Custom icon position
 
 <div className="highlight-frame">
@@ -226,7 +240,7 @@ Cards support displaying images alongside content. The image automatically resiz
   The title text to display in the card
 </ParamField>
 <ParamField path="icon" type="string | img">
-  Either a [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python') or a custom image
+  A [Font Awesome](https://fontawesome.com/icons) icon class (e.g. 'brands python'), a relative path to an SVG file (e.g. './images/icon.svg'), or a custom image element
 </ParamField>
 <ParamField path="href" type="string">
   Optional URL that makes the entire card clickable
diff --git a/fern/products/docs/pages/component-library/default-components/icons.mdx b/fern/products/docs/pages/component-library/default-components/icons.mdx
index 6e19fe77e..cfdf95320 100644
--- a/fern/products/docs/pages/component-library/default-components/icons.mdx
+++ b/fern/products/docs/pages/component-library/default-components/icons.mdx
@@ -69,10 +69,18 @@ The `<Icon>` component displays [Font Awesome](https://fontawesome.com/) icons i
 <Icon icon="fa-brands fa-github" /> Brands
 ```
 
+### Custom SVG icon
+
+Use a relative path to display a custom SVG file from your project.
+
+```jsx Markdown
+<Icon icon="./images/fern-leaf.svg" /> Custom SVG icon
+```
+
 ## Properties
 
 <ParamField path="icon" type="string" required={true}>
-  Name of the Font Awesome icon (e.g., "heart" or "fa-solid fa-heart")
+  A Font Awesome icon name (e.g., "heart" or "fa-solid fa-heart") or a relative path to an SVG file (e.g., "./images/icon.svg")
 </ParamField>
 
 <ParamField path="color" type="string">