added assets for reddit gold icons

docs/earn-money/payments/payments_add.mdx

@@ -1,5 +1,6 @@
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
 # Add Payments
 
@@ -241,6 +242,23 @@ You’ll need to clearly identify paid products or services. Here are some best
 - Try to keep purchases in a consistent location or use a consistent visual pattern.
 - Only use the gold icon to indicate purchases for Reddit Gold.
 
+### Reddit Gold icons
+
+Choose an official Reddit Gold icon below, then download it as an SVG or PNG.
+
+<div className="gold-icon-grid">
+  <div className="gold-icon-option">
+    <strong>Outline</strong>
+    <img src={useBaseUrl("/assets/payments/reddit-gold.png")} alt="Outline Reddit Gold icon" />
+    <div>Download: <a href={useBaseUrl("/assets/payments/reddit-gold.svg")} download>SVG</a> | <a href={useBaseUrl("/assets/payments/reddit-gold.png")} download>PNG</a></div>
+  </div>
+  <div className="gold-icon-option">
+    <strong>Filled</strong>
+    <img src={useBaseUrl("/assets/payments/reddit-gold-fill.png")} alt="Filled Reddit Gold icon" />
+    <div>Download: <a href={useBaseUrl("/assets/payments/reddit-gold-fill.svg")} download>SVG</a> | <a href={useBaseUrl("/assets/payments/reddit-gold-fill.png")} download>PNG</a></div>
+  </div>
+</div>
+
 ### Product image
 
 Product images need to meet the following requirements:

src/css/custom.css

@@ -134,6 +134,34 @@
   box-shadow: var(--ifm-global-shadow-lw);
 }
 
+.gold-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 256px));
+  gap: 2rem;
+  margin: 1rem 0 2rem;
+}
+
+.gold-icon-option > strong {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.gold-icon-option img {
+  display: block;
+  width: 256px;
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 0.75rem;
+  border-radius: var(--ifm-code-border-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+}
+
+@media (max-width: 576px) {
+  .gold-icon-grid {
+    grid-template-columns: minmax(0, 256px);
+  }
+}
+
 .theme-doc-markdown :is(h2, h3, h4, h5, h6) .hash-link {
   opacity: 0.6;
 }

versioned_docs/version-0.14/earn-money/payments/payments_add.mdx

@@ -1,5 +1,6 @@
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import useBaseUrl from "@docusaurus/useBaseUrl";
 
 # Add Payments
 
@@ -241,6 +242,23 @@ You’ll need to clearly identify paid products or services. Here are some best
 - Try to keep purchases in a consistent location or use a consistent visual pattern.
 - Only use the gold icon to indicate purchases for Reddit Gold.
 
+### Reddit Gold icons
+
+Choose an official Reddit Gold icon below, then download it as an SVG or PNG.
+
+<div className="gold-icon-grid">
+  <div className="gold-icon-option">
+    <strong>Outline</strong>
+    <img src={useBaseUrl("/assets/payments/reddit-gold.png")} alt="Outline Reddit Gold icon" />
+    <div>Download: <a href={useBaseUrl("/assets/payments/reddit-gold.svg")} download>SVG</a> | <a href={useBaseUrl("/assets/payments/reddit-gold.png")} download>PNG</a></div>
+  </div>
+  <div className="gold-icon-option">
+    <strong>Filled</strong>
+    <img src={useBaseUrl("/assets/payments/reddit-gold-fill.png")} alt="Filled Reddit Gold icon" />
+    <div>Download: <a href={useBaseUrl("/assets/payments/reddit-gold-fill.svg")} download>SVG</a> | <a href={useBaseUrl("/assets/payments/reddit-gold-fill.png")} download>PNG</a></div>
+  </div>
+</div>
+
 ### Product image
 
 Product images need to meet the following requirements: