diff --git a/docs/patterns/disclosure/disclosure-responsive-3.png b/docs/patterns/disclosure/disclosure-responsive-3.png
new file mode 100644
index 0000000000..c6bf73bb04
Binary files /dev/null and b/docs/patterns/disclosure/disclosure-responsive-3.png differ
diff --git a/docs/patterns/disclosure/index.md b/docs/patterns/disclosure/index.md
index 33cbd47d6b..aa90e4f3db 100644
--- a/docs/patterns/disclosure/index.md
+++ b/docs/patterns/disclosure/index.md
@@ -218,7 +218,7 @@ content is included.
 {% example palette="light",
            class="centered",
            alt="Example of a disclosure on mobile",
-           src="./disclosure-responsive-3.svg" %}
+           src="./disclosure-responsive-3.png" %}
 
 ## Interaction states
 
diff --git a/docs/patterns/sticky-card/index.md b/docs/patterns/sticky-card/index.md
index ee8191659f..ef3b054565 100644
--- a/docs/patterns/sticky-card/index.md
+++ b/docs/patterns/sticky-card/index.md
@@ -21,7 +21,7 @@ A sticky card acts as a small container for a limited amount of content.
 
 {% example palette="lightest",
            alt="Sticky card naming",
-           src="./sticky-card-style.svg" %}
+           src="./sticky-card-style.png" %}
 
 ### Theme
 
@@ -77,7 +77,7 @@ A sticky card has limited vertical height, so keep content short and only includ
 
 {% example palette="lightest",
         alt="Sticky card content sections",
-        src="./sticky-card-content.svg" %}
+        src="./sticky-card-content.png" %}
 
 ### Alignment
 
diff --git a/docs/patterns/sticky-card/sticky-card-content.png b/docs/patterns/sticky-card/sticky-card-content.png
new file mode 100644
index 0000000000..8400af8176
Binary files /dev/null and b/docs/patterns/sticky-card/sticky-card-content.png differ
diff --git a/docs/patterns/sticky-card/sticky-card-style.png b/docs/patterns/sticky-card/sticky-card-style.png
new file mode 100644
index 0000000000..ba8cfc12ec
Binary files /dev/null and b/docs/patterns/sticky-card/sticky-card-style.png differ