diff --git a/docs/_includes/layouts/pages/element.11ty.ts b/docs/_includes/layouts/pages/element.11ty.ts
index f39bb287f5..093f4760d7 100644
--- a/docs/_includes/layouts/pages/element.11ty.ts
+++ b/docs/_includes/layouts/pages/element.11ty.ts
@@ -897,16 +897,24 @@ export default class ElementsPage extends Renderer<Context> {
 
   async #renderPlaygrounds(ctx: Context, entries: FileEntry[]) {
     const common = await this.#renderPlaygroundsCommon(ctx, entries);
-    return entries.map(([filename, config]) => this.#renderPlayground(
-      filename,
-      config,
-      ctx,
-      common,
-      entries
-          .filter(([, config]) => config.inline === filename)
-          .map(([s]) => s)
-
-    ));
+    const { tagName } = ctx;
+    const iconAlert = (tagName !== 'rh-icon') ? '' : html`<rh-alert state="info">
+        <h2 slot="header">Looking for the icons?</h2>
+        <p> Head over to our <a href="/foundations/iconography/">Foundations: Iconography</a> page to explore the full collection.</p>
+      </rh-alert>
+      `;
+    return [
+      iconAlert,
+      entries.map(([filename, config]) => this.#renderPlayground(
+        filename,
+        config,
+        ctx,
+        common,
+        entries
+            .filter(([, config]) => config.inline === filename)
+            .map(([s]) => s)
+      )),
+    ].join('');
   };
 
   #renderPlayground(
diff --git a/elements/rh-icon/demo/sets.html b/elements/rh-icon/demo/sets.html
deleted file mode 100644
index 15a991e0fb..0000000000
--- a/elements/rh-icon/demo/sets.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<label for="select">Filter Icons</label>
-<pf-select id="select"
-           placeholder="Icon name"
-           variant="typeahead"></pf-select>
-
-<div id="rh-icon-demo-output"></div>
-
-<script type="module">
-  import '@patternfly/elements/pf-select/pf-select.js';
-  import '@patternfly/elements/pf-select/pf-option-group.js';
-  import '@rhds/elements/rh-icon/rh-icon.js';
-  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
-
-  import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';
-  import { RhButton } from '@rhds/elements/rh-button/rh-button.js';
-
-  import { iconSets } from '@rhds/elements/lib/environment.js';
-  import { render, html } from 'lit';
-  import { repeat } from 'lit/directives/repeat.js';
-
-  document.addEventListener('click', async function() {
-    if (event.target instanceof RhButton) {
-      const { html, icon } = event.target.dataset;
-      await navigator.clipboard.writeText(html)
-      await RhAlert.toast({ message: `Copied ${icon}` });
-    }
-  });
-
-  const select = document.getElementById('select');
-  const output = document.getElementById('rh-icon-demo-output');
-
-  render(repeat(iconSets, ([set, icons]) => html`
-    <h2 id="${set}">${set}</h2>
-    <section aria-labelledby="${set}">${repeat(icons, (icon) => html`
-      <figure data-set="${set}"
-              data-icon="${icon}">
-        <rh-icon set="${set}"
-                 icon="${icon}"></rh-icon>
-        <figcaption>
-          <span>${icon}</span>
-          <rh-tooltip>
-            <rh-button name="toast"
-                       variant="link"
-                       data-html='<rh-icon set="${set}" icon="${icon}"></rh-icon>'
-                       data-icon="${icon}">
-              <rh-icon set="ui"
-                       icon="copy"></rh-icon> Copy
-            </rh-button>
-            <pre slot="content"><code>&lt;rh-icon set="${set}" icon="${icon}"&gt;&lt;/rh-icon&gt;</code></pre>
-          </rh-tooltip>
-        </figcaption>
-      </figure>`)}
-    </section>`), output);
-
-  render(repeat(iconSets, ([set, icons]) => html`
-    <pf-option-group label="${set}" key="${set}">${icons.map(name => html`
-      <pf-option value="${name}"><rh-icon set="${set}" icon="${name}"></rh-icon> ${name}</pf-option>`)}
-    </pf-option-group>`), select);
-
-  select.addEventListener('change', function() {
-    for (const figure of output.querySelectorAll('figure')) {
-      const { set, icon } = figure.dataset;
-      figure.hidden = !!select.value && !(set.startsWith(select.value) || icon.startsWith(select.value))
-    }
-  })
-</script>
-
-<style>
-  #rh-icon-demo-output {
-    overflow: hidden;
-  }
-
-  #select {
-    max-width: 300px;
-  }
-
-  h2 {
-    text-transform: capitalize;
-  }
-
-  section {
-    --rh-tooltip-max-width: 50em;
-    --rh-tooltip-content-padding-block-start: 0;
-    --rh-tooltip-content-padding-block-end: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--rh-space-lg, 16px);
-    margin-block-end: var(--rh-space-2xl, 32px);
-  }
-
-  figure {
-    display: flex;
-    flex-direction: column;
-    place-items: center;
-    justify-content: space-between;
-    width: 12rem;
-    margin: 0;
-    padding: var(--rh-space-lg, 16px);
-    border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
-    border-radius: var(--rh-border-radius-default, 3px);
-    text-align: center;
-    & figcaption {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rh-space-lg, 16px);
-      margin-block-start: var(--rh-space-lg, 16px);
-      & span {
-        font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-      }
-    }
-    & rh-button::part(button) {
-      display: flex;
-      align-items: center;
-      gap: var(--rh-space-xs, 4px);
-    }
-  }
-
-</style>