diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md
index 3214f7a436..3d7ba255ee 100644
--- a/site/content/docs/5.3/components/card.md
+++ b/site/content/docs/5.3/components/card.md
@@ -20,7 +20,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text fw-bold mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -69,7 +69,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
   <div class="card-body">
     <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
@@ -122,7 +122,7 @@ Mix and match multiple content types to create the card you need, or throw every
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text fw-bold">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -356,7 +356,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
 
 {{< example >}}
 <div class="card mb-3">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -369,7 +369,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
     <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
-  {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-bottom" text="icon" >}}
 </div>
 {{< /example >}}
 
@@ -400,7 +400,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
 <div class="card mb-3" style="max-width: 480px;">
   <div class="row g-0">
     <div class="col-md-4">
-      {{< placeholder width="100%" height="250" text="Image" class="img-fluid" >}}
+      {{< placeholder width="100%" height="250" text="icon" class="img-fluid" >}}
     </div>
     <div class="col-md-8">
       <div class="card-body">
@@ -494,7 +494,7 @@ Use card groups to render cards as a single, attached element with equal width a
 {{< example >}}
 <div class="card-group">
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -502,7 +502,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -510,7 +510,7 @@ Use card groups to render cards as a single, attached element with equal width a
     </div>
   </div>
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -525,7 +525,7 @@ When using card groups with footers, their content will automatically line up.
 {{< example >}}
 <div class="card-group">
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -535,7 +535,7 @@ When using card groups with footers, their content will automatically line up.
     </div>
   </div>
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -545,7 +545,7 @@ When using card groups with footers, their content will automatically line up.
     </div>
   </div>
   <div class="card">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+    {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
@@ -565,7 +565,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
 <div class="row row-cols-1 row-cols-md-2 g-4">
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -574,7 +574,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -583,7 +583,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
@@ -592,7 +592,7 @@ Use the Boosted grid system and its [`.row-cols` classes]({{< docsref "/layout/g
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -608,7 +608,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
 <div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -617,7 +617,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -626,7 +626,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
@@ -635,7 +635,7 @@ Change it to `.row-cols-3` and you'll see the fourth card wrap.
   </div>
   <div class="col">
     <div class="card">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -651,7 +651,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
 <div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -660,7 +660,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
   </div>
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a short card.</p>
@@ -669,7 +669,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
   </div>
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
@@ -678,7 +678,7 @@ When you need equal height, add `.h-100` to the cards. If you want equal heights
   </div>
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="140" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -694,7 +694,7 @@ Just like with card groups, card footers will automatically line up.
 <div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -706,7 +706,7 @@ Just like with card groups, card footers will automatically line up.
   </div>
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -718,7 +718,7 @@ Just like with card groups, card footers will automatically line up.
   </div>
   <div class="col">
     <div class="card h-100">
-      {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
+      {{< placeholder width="100%" height="180" class="card-img-top" text="icon" >}}
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index 0198ccdd01..c9f7e5ccc9 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -89,7 +89,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
   <div class="modal position-static d-block" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
-        {{< placeholder width="100%" height="260" class="modal-img" text="Image cap" >}}
+        {{< placeholder width="100%" height="260" class="modal-img" text="icon" >}}
         <div class="modal-header">
           <h5 class="modal-title">Modal title</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
diff --git a/site/content/docs/5.3/examples/masonry/index.html b/site/content/docs/5.3/examples/masonry/index.html
index 9435adf14c..de4f7cc098 100644
--- a/site/content/docs/5.3/examples/masonry/index.html
+++ b/site/content/docs/5.3/examples/masonry/index.html
@@ -27,7 +27,7 @@ <h1>Boosted and Masonry</h1>
   <div class="row" data-masonry='{"percentPosition": true }'>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
+        {{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
         <div class="card-body">
           <h5 class="card-title">Card title that wraps to a new line</h5>
           <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -48,7 +48,7 @@ <h5 class="card-title">Card title that wraps to a new line</h5>
     </div>
     <div class="col-sm-6 col-lg-4 mb-4">
       <div class="card">
-        {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}}
+        {{< placeholder width="100%" height="200" class="card-img-top" text="icon" >}}
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
           <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
diff --git a/site/content/docs/5.3/helpers/stretched-link.md b/site/content/docs/5.3/helpers/stretched-link.md
index 4855c4deee..fb082a0eed 100644
--- a/site/content/docs/5.3/helpers/stretched-link.md
+++ b/site/content/docs/5.3/helpers/stretched-link.md
@@ -15,7 +15,7 @@ Multiple links and tap targets are not recommended with stretched links. However
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card icon" >}}
   <div class="card-body">
     <h5 class="card-title">Card with stretched link</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -61,7 +61,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
 
 {{< example >}}
 <div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card icon" >}}
   <div class="card-body">
     <h5 class="card-title">Card with stretched links</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md
index 4cc2791e43..9c3b77a4f1 100644
--- a/site/content/docs/5.3/utilities/flex.md
+++ b/site/content/docs/5.3/utilities/flex.md
@@ -636,7 +636,7 @@ Looking to replicate the [media object component](https://getbootstrap.com/docs/
 {{< example >}}
 <div class="d-flex">
   <div class="flex-shrink-0">
-    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="icon" >}}
   </div>
   <div class="flex-grow-1 ms-3">
     This is some content from a media component. You can replace this with any content and adjust it as needed.
@@ -649,7 +649,7 @@ And say you want to vertically center the content next to the image:
 {{< example >}}
 <div class="d-flex align-items-center">
   <div class="flex-shrink-0">
-    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="icon" >}}
   </div>
   <div class="flex-grow-1 ms-3">
     This is some content from a media component. You can replace this with any content and adjust it as needed.
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
index a0e68846bf..7262fe1735 100644
--- a/site/layouts/shortcodes/card.html
+++ b/site/layouts/shortcodes/card.html
@@ -22,9 +22,11 @@
 {{- $rtl := .Get "rtl" | default false -}}
 
 <div class="card{{ if eq $borders false }} border-0{{ end }}{{ if and $borders (eq $background "dark") }} border-dark{{ end }}">
-  <svg class="bd-placeholder-img card-img-top" width="100%" height="162" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}تعليق على الصورة{{ else }}Image cap{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
+  <svg class="bd-placeholder-img card-img-top" width="100%" height="169" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="{{ if $rtl }}العنصر النائب: شرح الصورة{{ else }}Placeholder: Image caption{{ end }}" preserveAspectRatio="xMidYMid slice" focusable="false">
     <rect width="100%" height="100%" fill="{{ (index $.Site.Data.grays 3).hex }}"/>
-    <text x="50%" y="50%" fill="{{ (index $.Site.Data.grays 5).hex }}" dy=".3em">{{ if $rtl }}تعليق على الصورة{{ else }}Image cap{{ end }}</text>
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000014" aria-hidden="true" focusable="false">
+      <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
+    </svg>
   </svg>
   <div class="card-body text-{{ if eq $background "dark" }}white{{ else }}black{{ end }} bg-{{ $background }}{{ if $open }} px-0{{ end }}">
     <h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if $rtl }}عنوان{{ else }}Title{{ end }}</h3>
diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html
index 211cbafe4c..109d1ca3eb 100644
--- a/site/layouts/shortcodes/placeholder.html
+++ b/site/layouts/shortcodes/placeholder.html
@@ -42,7 +42,7 @@
     <rect width="100%" height="100%" fill="{{ $background }}"/>
     {{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
     {{- if $show_icon }}
-    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#00000088">
+    <svg x="30%" y="30%" width="40%" height="40%" viewBox="0 0 24 24" fill="#{{ if eq $background "#000" }}ffffff30{{ else }}00000014{{ end }}">
       <path d="M20.4 5.4a1.8 1.8 0 0 0-1.8-1.8h-15v15a1.8 1.8 0 0 0 1.8 1.8h15v-15ZM4.8 4.8h13.5a.9.9 0 0 1 .9.9V15l-4.61-5.237c-.167-.217-.436-.217-.602 0l-3.428 3.983-1.894-2.657c-.166-.217-.435-.217-.6 0L5.28 14.21c-.281-.211-.47-.444-.48-.926V4.8Zm4.8 3.25a1.5 1.5 0 1 1-3 .1 1.5 1.5 0 0 1 3-.1Z"></path>
     </svg>
     {{ end -}}