diff --git a/.changeset/dirty-bears-win.md b/.changeset/dirty-bears-win.md
new file mode 100644
index 0000000000..fe7f079524
--- /dev/null
+++ b/.changeset/dirty-bears-win.md
@@ -0,0 +1,34 @@
+---
+"@patternfly/elements": major
+---
+`<pf-icon>`: removed the `getIconUrl` static method, and replaced it with the 
+`resolve` static method
+
+The steps for overriding icon loading behaviour have changed. Before, you had to 
+return a string from the `getIconUrl` method, or the second argument to 
+`addIconSet`. Now, both of those functions must return a Node, or any lit-html
+renderable value, or a Promise thereof.
+
+BEFORE:
+
+```js
+PfIcon.addIconSet('local', (set, icon) =>
+  new URL(`/assets/icons/${set}-${icon}.js`));
+
+// or
+PfIcon.getIconUrl = (set, icon) =>
+  new URL(`/assets/icons/${set}-${icon}.js`))
+```
+
+AFTER
+```js
+PfIcon.addIconSet('local', (set, icon) =>
+  import(`/assets/icons/${set}-${icon}.js`))
+    .then(mod => mod.default);
+
+// or
+PfIcon.resolve = (set, icon) =>
+  import(`/assets/icons/${set}-${icon}.js`))
+    .then(mod => mod.default);
+```
+
diff --git a/.changeset/fresh-shrimps-work.md b/.changeset/fresh-shrimps-work.md
new file mode 100644
index 0000000000..0e550d4716
--- /dev/null
+++ b/.changeset/fresh-shrimps-work.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-icon>`: removed the `defaultIconSet` static field.
diff --git a/elements/package.json b/elements/package.json
index d2ef0d5d74..516c6b50fa 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -130,7 +130,7 @@
   ],
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@patternfly/icons": "^1.0.2",
+    "@patternfly/icons": "^1.0.3",
     "@patternfly/pfe-core": "^3.0.0",
     "lit": "^3.1.2",
     "tslib": "^2.6.2"
diff --git a/elements/pf-icon/README.md b/elements/pf-icon/README.md
index 280462273e..f739929014 100644
--- a/elements/pf-icon/README.md
+++ b/elements/pf-icon/README.md
@@ -49,6 +49,7 @@ Icon comes with three built-in icon sets:
 
 1. `fas`: Font Awesome Free Solid icons (the default set)
 1. `far`: Font Awesome Free Regular icons
+1. `fab`: Font Awesome Free Bold icons
 1. `patternfly`: PatternFly icons
 
 Use the `set` attribute to pick an alternative icon set.
@@ -61,19 +62,31 @@ Use the `set` attribute to pick an alternative icon set.
 It is possible to add custom icon sets or override the default sets.
 Icon sets are defined in detail in [the docs][icon-sets].
 
-### Bundling
+### Bundling and custom loading behaviour
 
-When bundling PfIcon with other modules, the default icon imports will be
-relative to the bundle, not the source file, so be sure to either register all
-the icon sets you'll need, or override the default getter.
+When bundling `<pf-icon>` with other modules (e.g. using webpack, rollup,
+esbuild, vite, or similar tools), icon imports will be code-split into chunks,
+as they are imported from the `@patternfly/icons` package. Ensure that your
+bundler is configured to permit dynamic imports, or mark the `@patternfly/icons`
+package as "external" and apply an [import map][importmap] to your page instead.
+If you would like to
+customize the loading behaviour, override the `PfIcon.resolve()` static method.
+This methods takes two arguments: the icon set (a string) and the icon name
+(a string), and returns a promise of the icon contents, which is a DOM node, or
+[anything else that lit-html can render][renderable].
 
 ```js
-// Workaround for bundled pf-icon: make icon imports absolute, instead of 
-relative to the bundle
 import { PfIcon } from '/pfe.min.js';
-PfIcon.getIconUrl = (set, icon) =>
-  new URL(`/assets/icons/${set}/${icon}.js`, import.meta.url);
-  // default: new URL(`./icons/${set}/${icon}.js`, import.meta.url);
+PfIcon.resolve = async function(set, icon) {
+  try {
+    const { default: content } = await import(`/assets/icons/${set}/${icon}.js`);
+    if (content instanceof Node) {
+      return content.cloneNode(true);
+    }
+  } catch (e) {
+    return '';
+  }
+}
 ```
 
 ## Loading
@@ -84,3 +97,5 @@ see the [docs][docs] for more info.
 
 [docs]: https://patternflyelements.org/components/icon/
 [icon-sets]: https://patternflyelements.org/components/icon/#icon-sets
+[renderable]: https://lit.dev/docs/components/rendering/#renderable-values
+[importmap]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
diff --git a/elements/pf-icon/demo/custom-icon-sets.html b/elements/pf-icon/demo/custom-icon-sets.html
index ef9ba98e14..9e62817bd6 100644
--- a/elements/pf-icon/demo/custom-icon-sets.html
+++ b/elements/pf-icon/demo/custom-icon-sets.html
@@ -15,8 +15,9 @@ <h3>Custom Icon Sets</h3>
       ```
       ```js
       import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
-      PfIcon.addIconSet('rh', (set, icon) =>
-        new URL(`./icons/${set}/${icon}.js`, import.meta.url));
+      PfIcon.addIconSet('rh', async (set, icon) =>
+        import(`./icons/${set}/${icon}.js`)
+          .then(mod => mod.default));
       ```
     </script>
   </zero-md>
@@ -25,8 +26,9 @@ <h3>Custom Icon Sets</h3>
 <script type="module">
   import 'zero-md';
   import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
-  PfIcon.addIconSet('rh', (set, icon) =>
-    new URL(`../icons/${set}/${icon}.js`, import.meta.url));
+    PfIcon.addIconSet('rh', async (set, icon) =>
+      import(`../icons/${set}/${icon}.js`)
+        .then(mod => mod.default));
 </script>
 
 <style>
diff --git a/elements/pf-icon/docs/pf-icon.md b/elements/pf-icon/docs/pf-icon.md
index c1136ba883..c6578df53b 100644
--- a/elements/pf-icon/docs/pf-icon.md
+++ b/elements/pf-icon/docs/pf-icon.md
@@ -60,11 +60,11 @@ Icons are JavaScript module which export a [lit renderable][renderable],
 typically an inline SVG element [template literal][template-literals] tagged
 with the Lit [`svg`][svg-tag] template tag. To register a new icon set, call
 the static `addIconSet` method with the set name and a getter function. The
-getter function takes the icon set and icon name and returns a URL object or a 
-string that points to the icon's JavaScript module.
+getter function takes the icon set and icon name and returns a promise containing
+the icon node, or any other [renderable][renderable] value.
 
 ```ts
-type getter = (set: string, icon: string) => URL | string
+type IconResolveFunction = (set: string, icon: string) => Promise<Node> | Node;
 ```
 
 ```javascript
@@ -74,7 +74,8 @@ import { PfIcon } from '@patternfly/pf-icon';
 // const PfIcon = await customElements.whenDefined('pf-icon');
 
 PfIcon.addIconSet('local', (set, icon) =>
-  new URL(`/assets/icons/${set}-${icon}.js`));
+  import(`/assets/icons/${set}-${icon}.js`))
+    .then(mod => mod.default);
 ```
 
 ### Updating an Existing Icon Set
@@ -89,7 +90,8 @@ PfIcon.addIconSet('patternfly', (set, icon) => {
     // add your custom icons
     case 'my-custom-icon':
     case 'other-custom-icon':
-      return new URL(`/icons/patternfly-custom/${icon}.js`, window.location.href);
+      return import(`/icon-overrides/patternfly-custom/${icon}.js`)
+        .then(mod => mod.default);
     // fall back to built-in icons
     default:
       return PfIcon.getIconUrl(set, icon);
@@ -107,14 +109,9 @@ like to override the default icon sets across the entire page, you can use
 ```js
 import { PfIcon } from '@patternfly/pf-icon';
 
-PfIcon.getIconUrl = (set, icon) =>
-  new URL(`/icons/js/${set}/${icon}.js`, 'https://static.redhat.com');
-```
-
-To change the default set name, you can also override `PfIcon.defaultIconSet`
-
-```js
-PfIcon.defaultIconSet = 'patternfly';
+PfIcon.resolve = (set, icon) =>
+  import(`/icons/${set}-${icon}.js`))
+    .then(mod => mod.default);
 ```
 
 Now when `<pf-icon>` is loaded from the [RedHat DX 
diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-icon/pf-icon.ts
index 795865912c..f82646adce 100644
--- a/elements/pf-icon/pf-icon.ts
+++ b/elements/pf-icon/pf-icon.ts
@@ -7,19 +7,23 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import style from './pf-icon.css';
 
-export type URLGetter = (set: string, icon: string) => URL | string;
+type Renderable = unknown;
+
+export type IconResolverFunction = (set: string, icon: string) =>
+  Renderable | Promise<Renderable>;
 
 /** requestIdleCallback when available, requestAnimationFrame when not */
 const ric = window.requestIdleCallback ?? window.requestAnimationFrame;
 
 /** Fired when an icon fails to load */
-class IconLoadError extends ErrorEvent {
+export class IconResolveError extends ErrorEvent {
   constructor(
-    pathname: string,
+    set: string,
+    icon: string,
     /** The original error when importing the icon module */
     public originalError: Error
   ) {
-    super('error', { message: `Could not load icon at ${pathname}` });
+    super('error', { message: `Could not load icon "${icon}" from set "${set}".` });
   }
 }
 
@@ -36,12 +40,31 @@ class IconLoadError extends ErrorEvent {
 export class PfIcon extends LitElement {
   public static readonly styles = [style];
 
-  public static defaultIconSet = 'fas';
+  private static onIntersect: IntersectionObserverCallback = records =>
+    records.forEach(({ isIntersecting, target }) => {
+      const icon = target as PfIcon;
+      icon.#intersecting = isIntersecting;
+      ric(() => {
+        if (icon.#intersecting) {
+          icon.load();
+        }
+      });
+    });
+
+  private static defaultResolve: IconResolverFunction = (set: string, icon: string): Renderable =>
+    import(`@patternfly/icons/${set}/${icon}.js`)
+        .then(mod => mod.default.cloneNode(true));
+
+  private static io = new IntersectionObserver(PfIcon.onIntersect);
+
+  private static resolvers = new Map<string, IconResolverFunction>();
+
+  private static instances = new Set<PfIcon>();
 
   /**
    * Register a new icon set
    * @param setName - The name of the icon set
-   * @param getter - A function that returns the URL of an icon
+   * @param resolver - A function that returns the URL of an icon
    * @example returning a URL object
    *          ```js
    *          PfIcon.addIconSet('rh', (set, icon) =>
@@ -53,55 +76,65 @@ export class PfIcon extends LitElement {
    *            `/assets/icons/${set}/${icon}.js`);
    *          ```
    */
-  public static addIconSet(setName: string, getter: URLGetter) {
-    if (typeof getter !== 'function') {
-      Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);
+  public static addIconSet(setName: string, resolver: IconResolverFunction) {
+    if (typeof setName !== 'string') {
+      Logger.warn(`[${this.name}]: the first argument to addIconSet must be a string.`);
+    } else if (typeof resolver !== 'function') {
+      Logger.warn(`[${this.name}]: the second argument to addIconSet must be a function.`);
     } else {
-      this.getters.set(setName, getter);
+      this.resolvers.set(setName, resolver);
       for (const instance of this.instances) {
-        instance.load();
+        instance.#load();
       }
     }
   }
 
+  /** Removes all added icon sets and resets resolve function */
+  public static reset() {
+    this.resolvers.clear();
+    this.resolve = this.defaultResolve;
+  }
+
   /**
-   * Gets the URL of an icon. Override this to customize how icon URLs are resolved.
+   * Gets a renderable icon. Override this to customize how icons are resolved.
    * @param set - The name of the icon set
    * @param icon - The name of the icon
-   * @returns The URL of the icon
-   * @example returning a URL object
+   * @returns The icon content, a node or anything else which lit-html can render
+   * @example resolving an icon node from an icon module
    *          ```js
-   *          PfIcon.getIconUrl = (set, icon) =>
-   *            new URL(`./icons/${set}/${icon}.js`, import.meta.url);
+   *          PfIcon.resolve = (set, icon) =>
+   *            import(`/assets/icons/${set}/${icon}.js`)
+   *              .then(mod => mod.default.cloneNode(true));
    *          ```
-   * @example returning a string
+   * @example resolving a named export from an icon collection module
+   *          ```js
+   *          PfIcon.resolve = (set, icon) =>
+   *            import(`/assets/icons.js`)
+   *              .then(module => module[icon]?.cloneNode(true));
+   *          ```
+   * @example resolving a new node from an svg file
    *          ```js
-   *          PfIcon.getIconUrl = (set, icon) =>
-   *            `/assets/icons/${set}/${icon}.js`;
+   *          const iconCacne = new Map();
+   *          function getCachedIconOrNewNode(set, icon, svg) {
+   *            const key = `${set}_${icon}`;
+   *            if (!iconCache.has(key)) {
+   *              const template = document.createElement('template');
+   *                    template.innerHTML = svg;
+   *              iconCache.set(key, template);
+   *            }
+   *            return iconCache.get(key);
+   *          }
+   *          PfIcon.resolve = (set, icon) =>
+   *            fetch(`/assets/icons/${set}/${icon}.svg`)
+   *              .then(response => response.text())
+   *              .then(svg => getCachedIconOrNewNode(set, icon, svg))
+   *              .then(node => node.content.cloneNode(true));
    *          ```
    */
-  public static getIconUrl: URLGetter = (set: string, icon: string) =>
-    new URL(`./icons/${set}/${icon}.js`, import.meta.url);
-
-  private static onIntersect: IntersectionObserverCallback = records =>
-    records.forEach(({ isIntersecting, target }) => {
-      const icon = target as PfIcon;
-      icon.#intersecting = isIntersecting;
-      ric(() => {
-        if (icon.#intersecting) {
-          icon.load();
-        }
-      });
-    });
-
-  private static io = new IntersectionObserver(PfIcon.onIntersect);
-
-  private static getters = new Map<string, URLGetter>();
-
-  private static instances = new Set<PfIcon>();
+  public static resolve = PfIcon.defaultResolve;
 
   /** Icon set */
-  @property() set = this.#class.defaultIconSet;
+  @property() set = 'fas';
 
   /** Icon name */
   @property({ reflect: true }) icon = '';
@@ -124,18 +157,14 @@ export class PfIcon extends LitElement {
 
   #logger = new Logger(this);
 
-  get #class(): typeof PfIcon {
-    return this.constructor as typeof PfIcon;
-  }
-
   #lazyLoad() {
-    this.#class.io.observe(this);
+    PfIcon.io.observe(this);
     if (this.#intersecting) {
       this.load();
     }
   }
 
-  #iconChanged() {
+  #load() {
     switch (this.loading) {
       case 'idle': return void ric(() => this.load());
       case 'lazy': return void this.#lazyLoad();
@@ -143,20 +172,26 @@ export class PfIcon extends LitElement {
     }
   }
 
+  async #contentChanged() {
+    await this.updateComplete;
+    this.dispatchEvent(new Event('load', { bubbles: true }));
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this.#class.instances.add(this);
+    PfIcon.instances.add(this);
   }
 
   willUpdate(changed: PropertyValues<this>) {
     if (changed.has('icon')) {
-      this.#iconChanged();
+      this.#load();
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#class.instances.delete(this);
+    PfIcon.io.unobserve(this);
+    PfIcon.instances.delete(this);
   }
 
   render() {
@@ -171,23 +206,14 @@ export class PfIcon extends LitElement {
 
   protected async load() {
     const { set, icon } = this;
-    const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;
-    let spec = 'UNKNOWN ICON';
-    if (set && icon) {
+    const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve;
+    if (set && icon && typeof resolver === 'function') {
       try {
-        const gotten = getter(set, icon);
-        if (gotten instanceof URL) {
-          spec = gotten.pathname;
-        } else {
-          spec = gotten;
-        }
-        const mod = await import(spec);
-        this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;
-        await this.updateComplete;
-        this.dispatchEvent(new Event('load', { bubbles: true }));
+        this.content = await resolver(set, icon);
+        this.#contentChanged();
       } catch (error: unknown) {
-        const event = new IconLoadError(spec, error as Error);
-        this.#logger.error((error as IconLoadError).message);
+        const event = new IconResolveError(set, icon, error as Error);
+        this.#logger.error((error as IconResolveError).message);
         this.dispatchEvent(event);
       }
     }
diff --git a/elements/pf-icon/test/pf-icon.spec.ts b/elements/pf-icon/test/pf-icon.spec.ts
index 601d71cadc..fd1f2c46f2 100644
--- a/elements/pf-icon/test/pf-icon.spec.ts
+++ b/elements/pf-icon/test/pf-icon.spec.ts
@@ -1,5 +1,5 @@
 import { expect, fixture, oneEvent } from '@open-wc/testing';
-import { html, render } from 'lit';
+import { html, render, type TemplateResult } from 'lit';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -7,24 +7,39 @@ import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
 
 import '@patternfly/pfe-tools/test/stub-logger.js';
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore: don't want to include these
+import aed from './rh-icon-aed.js';
+// @ts-ignore: don't want to include these
+import api from './rh-icon-api.js';
+// @ts-ignore: don't want to include these
+import atom from './rh-icon-atom.js';
+// @ts-ignore: don't want to include these
+import bike from './rh-icon-bike.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+/* eslint-enable @typescript-eslint/ban-ts-comment */
+
+const TEST_ICONS = { aed, api, atom, bike };
+
+async function expectIconsEqual(element: PfIcon, tpl: TemplateResult) {
+  await oneEvent(element, 'load', false);
+  const rootNode = render(tpl, document.createDocumentFragment());
+  const actual = element.shadowRoot?.querySelector('svg');
+  const expected = (rootNode.parentNode as DocumentFragment).querySelector('svg');
+  expect(actual?.outerHTML).to.equal(expected?.outerHTML);
+}
+
 describe('<pf-icon>', function() {
   let element: PfIcon;
 
-  async function expectIconsEqual(actualIconUrl: URL) {
-    await oneEvent(element, 'load', false);
-    const tpl = await import(actualIconUrl.pathname).then(x => x.default);
-    const rootNode = render(tpl, document.createDocumentFragment());
-    const actual = element.shadowRoot?.querySelector('svg');
-    const expected = (rootNode.parentNode as DocumentFragment).querySelector('svg');
-    expect(actual?.outerHTML).to.equal(expected?.outerHTML);
-  }
-
   beforeEach(async function() {
-    // @ts-expect-error: this is necessary to reset test state
-    PfIcon.getters = new Map(); PfIcon.io.disconnect();
     element = await fixture(html`<pf-icon></pf-icon>`);
   });
 
+  afterEach(function() {
+    PfIcon.reset();
+  });
+
   it('imperatively instantiates', function() {
     expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon);
   });
@@ -36,62 +51,66 @@ describe('<pf-icon>', function() {
         .to.be.an.instanceOf(PfIcon);
   });
 
-  it('should warn if the 2nd argument to addIconSet is not a function', function() {
-    // @ts-expect-error: 3rd input is a string
-    PfIcon.addIconSet('test', './', 'rh-icon-aed.svg');
-    expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon.addIconSet(setName, getter)]: getter must be a function`);
-  });
-
-  it('should warn if there is no function provided to resolve the icon names', function() {
-    // @ts-expect-error: testing bad input
-    PfIcon.addIconSet('test', './');
-
-    expect(Logger.warn).to.have.been.calledOnceWith('[PfIcon.addIconSet(setName, getter)]: getter must be a function');
-  });
-
-  describe('with a custom icon set', function() {
-    const testIcons = ['aed', 'api', 'atom', 'bike'];
-
-    function getter(_: string, icon: string) {
-      return new URL(`./rh-icon-${icon}.js`, import.meta.url);
-    }
+  describe('addIconSet', function() {
+    describe('when 1st argument is not a string', function() {
+      beforeEach(function() {
+        PfIcon.addIconSet(
+          // @ts-expect-error: testing bad input
+          {},
+          () => void 0,
+        );
+      });
+      it('should warn', function() {
+        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the first argument to addIconSet must be a string.`);
+      });
+    });
 
-    beforeEach(async function() {
-      // replace the default built-in icon set resolveIconName function
-      // with one that loads local icons.  we don't want tests dependent on
-      // prod servers.
-      PfIcon.addIconSet('rh', getter);
-      element.set = 'rh';
+    describe('when 2nd argument is not a function', function() {
+      beforeEach(function() {
+        PfIcon.addIconSet(
+          'rh',
+          // @ts-expect-error: testing bad input
+          'haha'
+        );
+      });
+      it('should warn', function() {
+        expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the second argument to addIconSet must be a function.`);
+      });
     });
 
-    for (const iconName of testIcons) {
-      it('loads icons', async function() {
-        // wait for each test icon to be loaded, then move to the next one
-        element.icon = iconName;
-        await expectIconsEqual(getter('rh', iconName));
+    describe('with a good resolve function', function() {
+      beforeEach(async function() {
+        // replace the default built-in icon set resolveIconName function
+        // with one that loads local icons.  we don't want tests dependent on
+        // prod servers.
+        PfIcon.addIconSet('rh', (_, icon: string) => TEST_ICONS[icon as keyof typeof TEST_ICONS]);
+        element.set = 'rh';
       });
-    }
 
-    it('should hide the fallback when it successfully upgrades', async function() {
-      element.innerHTML = `<p>Icon failed to load.</p>`;
-      // Check that the fallback is hidden when the icon is successfully loaded
-      element.icon = 'bike';
-      await oneEvent(element, 'load', false);
-      expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback" hidden>
-          <slot></slot>
-        </span>
-      </div>`);
-    });
+      for (const [iconName, icon] of Object.entries(TEST_ICONS)) {
+        it('loads icons', async function() {
+          // wait for each test icon to be loaded, then move to the next one
+          element.icon = iconName;
+          await expectIconsEqual(element, icon);
+        });
+      }
+
+      it('should hide the fallback when it successfully upgrades', async function() {
+        element.innerHTML = `<p>Icon failed to load.</p>`;
+        element.icon = 'bike';
+        await oneEvent(element, 'load', false);
+        expect(element.shadowRoot?.querySelector('[part=fallback]'))
+            .to.have.attribute('hidden');
+      });
 
-    it('should change color when pf-icon\'s color CSS property is changed', async function() {
-      const newColor = 'rgb(11, 12, 13)';
-      element.style.setProperty('color', newColor);
-      element.icon = 'atom';
-      await oneEvent(element, 'load', false);
-      const color = getComputedStyle(element.shadowRoot!.querySelector('svg')!).getPropertyValue('color');
-      expect(color).to.equal(newColor);
+      it('should change color when pf-icon\'s color CSS property is changed', async function() {
+        const newColor = 'rgb(11, 12, 13)';
+        element.style.setProperty('color', newColor);
+        element.icon = 'atom';
+        await oneEvent(element, 'load', false);
+        const color = getComputedStyle(element.shadowRoot!.querySelector('svg')!).getPropertyValue('color');
+        expect(color).to.equal(newColor);
+      });
     });
   });
 
@@ -111,40 +130,41 @@ describe('<pf-icon>', function() {
     }
   });
 
-  it(`should fetch an icon even when the icon set is registered after the element upgrades`, async function() {
-    const url = new URL('./rh-icon-bike.js', import.meta.url);
-    element.set = 'asdfasdf';
-    element.icon = 'foo';
-    await element.updateComplete;
-    PfIcon.addIconSet('asdfasdf', () => url);
-    await oneEvent(element, 'load', false);
-    await expectIconsEqual(url);
-  });
-
-  it(`should show fallback when given a valid icon set but invalid icon name, fallback provided`, async function() {
-    element.innerHTML = '<p>Image failed to load.</p>.';
-    element.icon = 'no-scrubs';
-    await oneEvent(element, 'error', false);
-    expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;
-    expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback">
-          <slot></slot>
-        </span>
-      </div>`);
+  describe('when the icon has a custom set attribute', function() {
+    let element: PfIcon;
+    before(async function() {
+      element = await fixture(html`<pf-icon set="asdfasdf" icon="foo"></pf-icon>`);
+    });
+    describe('then the icon set is registered', function() {
+      beforeEach(async function() {
+        PfIcon.addIconSet('asdfasdf', () =>
+          import(`./rh-icon-${'bike'}.js`)
+              .then(m => m.default));
+        await oneEvent(element, 'load', false);
+      });
+      it(`should render the icon`, function() {
+        expectIconsEqual(element, bike);
+      });
+    });
   });
 
-  it('should show fallback when given an invalid icon set, fallback provided', async function() {
-    element.innerHTML = '<p>Image failed to load.</p>.';
-    element.set = 'choopee-doopee-pie';
-    element.icon = 'bike';
-    await oneEvent(element, 'error', false);
-    expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;
-    expect(element).shadowDom.to.equal(`
-      <div id="container" aria-hidden="true">
-        <span part="fallback">
-          <slot></slot>
-        </span>
-      </div>`);
+  describe('when the icon has a fallback content', function() {
+    let element: PfIcon;
+    before(async function() {
+      element = await fixture(html`
+        <pf-icon icon="no-scrubs">
+          <p>Image failed to load.</p>.
+        </pf-icon>`);
+      await oneEvent(element, 'error', false);
+    });
+    it('should display the fallback', function() {
+      expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;
+      expect(element).shadowDom.to.equal(`
+        <div id="container" aria-hidden="true">
+          <span part="fallback">
+            <slot></slot>
+          </span>
+        </div>`);
+    });
   });
 });
diff --git a/package-lock.json b/package-lock.json
index 1f6ff4ac96..161c4d6a69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@lit/react": "^1.0.4",
         "@octokit/core": "^6.1.1",
         "@patternfly/patternfly": "^4.224.2",
-        "@rhds/elements": "^1.3.1",
+        "@rhds/elements": "^1.4.5",
         "@types/koa__router": "^12.0.4",
         "@types/node": "^20.12.7",
         "@types/numeral": "^2.0.5",
@@ -61,7 +61,7 @@
       "license": "MIT",
       "dependencies": {
         "@lit/context": "^1.1.0",
-        "@patternfly/icons": "^1.0.2",
+        "@patternfly/icons": "^1.0.3",
         "@patternfly/pfe-core": "^3.0.0",
         "lit": "^3.1.2",
         "tslib": "^2.6.2"
@@ -2409,9 +2409,9 @@
       "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
     },
     "node_modules/@lit/context": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.0.tgz",
-      "integrity": "sha512-fCyv4dsH05wCNm3AKbB+PdYbXGJd/XT8OOwo4hVmD4COq5wOWJlQreGAMDvmHZ7osqxuu06Y4nmP6ooXpN7ErA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.2.tgz",
+      "integrity": "sha512-S0nw2C6Tkm7fVX5TGYqeROGD+Z9Coa2iFpW+ysYBDH3YvCqOY3wVQvSgwbaliLJkjTnSEYCBe9qFqKV8WUFpVw==",
       "dependencies": {
         "@lit/reactive-element": "^1.6.2 || ^2.0.0"
       }
@@ -2791,9 +2791,9 @@
       "link": true
     },
     "node_modules/@patternfly/icons": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/icons/-/icons-1.0.2.tgz",
-      "integrity": "sha512-/faOTZsKkTPxuCDcWZbunknjUhJIjjN0h+OicNiFWxTq/saLp366cLhdgNf8A46oeGR/21aQTYVXTqcQA1yvOg=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@patternfly/icons/-/icons-1.0.3.tgz",
+      "integrity": "sha512-8BARaCFBUZU2/TxuOQb8R2/VIpxGMnFwdw5ddT1AMnR2KSifdo+d05SgZtVmFkOIAOA0oCo/YKRgSORDA47wig=="
     },
     "node_modules/@patternfly/patternfly": {
       "version": "4.224.5",
@@ -2873,90 +2873,65 @@
       }
     },
     "node_modules/@rhds/elements": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@rhds/elements/-/elements-1.3.1.tgz",
-      "integrity": "sha512-WTFC59EQ6TLDaUmPyTibfvRiARkwKWK6PB8QCLOVCc9CNBBSDBFta87ySl3024fri969nslR9N2ggzes1yTPWg==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@rhds/elements/-/elements-1.4.5.tgz",
+      "integrity": "sha512-qOsEg4a5EBvbFxRJTpaYVj1Bj5VbWJ7mTPiX4+k3dyJ6pDGembY3sMTbS31XRz4QKOp+pbN2PlHBFJh2vH6Q2w==",
       "dev": true,
       "dependencies": {
-        "@patternfly/elements": "^2.4.0",
+        "@lit/context": "^1.1.1",
+        "@patternfly/elements": "^3.0.2",
         "@patternfly/icons": "^1.0.2",
+        "@patternfly/pfe-core": "^3.0.0",
         "@rhds/tokens": "^2.0.1",
-        "lit": "^2.7.3",
-        "tslib": "^2.5.0"
+        "lit": "^3.1.3",
+        "tslib": "^2.6.2"
+      },
+      "optionalDependencies": {
+        "@esbuild/linux-x64": "^0.21.3",
+        "@rollup/rollup-darwin-x64": "4.14.2"
       }
     },
-    "node_modules/@rhds/elements/node_modules/@lit/reactive-element": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
-      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+    "node_modules/@rhds/elements/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/@rhds/elements/node_modules/@patternfly/elements": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/elements/-/elements-2.4.0.tgz",
-      "integrity": "sha512-mA6I76R8aHdBKRX+IbaVuD24OnYUBsjStDwGVq7ytopA0XUKx12xTwgRZGNM7wKBBFYbNKpIxxuaanQSLZTGIQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/elements/-/elements-3.0.2.tgz",
+      "integrity": "sha512-YsmDu0XP7YyWdwIKXQIvtI81JfQ9+R3QszKQyFlEuhiS1ufA86f7L/1toQvOhZgmEBfAitnJBejndYi5s13EGw==",
       "dev": true,
       "dependencies": {
+        "@lit/context": "^1.1.0",
         "@patternfly/icons": "^1.0.2",
-        "@patternfly/pfe-core": "^2.4.0",
-        "lit": "2.6.1",
-        "tslib": "^2.4.1"
-      }
-    },
-    "node_modules/@rhds/elements/node_modules/@patternfly/elements/node_modules/lit": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz",
-      "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==",
-      "dev": true,
-      "dependencies": {
-        "@lit/reactive-element": "^1.6.0",
-        "lit-element": "^3.2.0",
-        "lit-html": "^2.6.0"
-      }
-    },
-    "node_modules/@rhds/elements/node_modules/@patternfly/pfe-core": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/pfe-core/-/pfe-core-2.4.1.tgz",
-      "integrity": "sha512-ZqN4Zk2ysrnHp84hKvUr54xeSwtzqM3qRPpMzdd2fa58htYnPfhow4TQ8LH9vArLxPzEAB3Hrfql0VW1bk5PXw==",
-      "dev": true,
-      "dependencies": {
-        "@floating-ui/dom": "^1.2.6",
-        "lit": "^2.7.2"
-      }
-    },
-    "node_modules/@rhds/elements/node_modules/lit": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
-      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
-      "dev": true,
-      "dependencies": {
-        "@lit/reactive-element": "^1.6.0",
-        "lit-element": "^3.3.0",
-        "lit-html": "^2.8.0"
-      }
-    },
-    "node_modules/@rhds/elements/node_modules/lit-element": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
-      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
-      "dev": true,
-      "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.1.0",
-        "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.8.0"
+        "@patternfly/pfe-core": "^3.0.0",
+        "lit": "^3.1.2",
+        "tslib": "^2.6.2"
       }
     },
-    "node_modules/@rhds/elements/node_modules/lit-html": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
-      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+    "node_modules/@rhds/elements/node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.14.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz",
+      "integrity": "sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@types/trusted-types": "^2.0.2"
-      }
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
     },
     "node_modules/@rhds/tokens": {
       "version": "2.0.1",
diff --git a/package.json b/package.json
index afebb397dc..bd8cb8b4e6 100644
--- a/package.json
+++ b/package.json
@@ -291,7 +291,7 @@
     "@lit/react": "^1.0.4",
     "@octokit/core": "^6.1.1",
     "@patternfly/patternfly": "^4.224.2",
-    "@rhds/elements": "^1.3.1",
+    "@rhds/elements": "^1.4.5",
     "@types/koa__router": "^12.0.4",
     "@types/node": "^20.12.7",
     "@types/numeral": "^2.0.5",