diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index b86bb8bf7..75317abea 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -141,7 +141,7 @@
             @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
             <div slot="label">
               Gray colorfulness
-              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+              <wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
             </div>
           </wa-slider>
           <div class="label-min">Neutral</div>
@@ -160,7 +160,7 @@
           @change="tweaking.hue = tweaking.{{ hue }} = false">
           <div slot="label">
             Tweak {{ hue }} hue
-            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
           </div>
         </wa-slider>
         <div class="label-min">More {{hueBefore}}</div>
@@ -204,7 +204,7 @@ style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
     @change="tweaking.chroma = false">
     <div slot="label">
       Overall colorfulness
-      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
+      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" variant="regular" label="Reset"></wa-icon-button>
     </div>
   </wa-slider>
   <div class="label-min">More muted</div>
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index adb15abf7..061fbcdce 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -107,16 +107,10 @@ export default class WaAnimatedImage extends WebAwesomeElement {
 
               <div part="control-box" class="control-box">
                 <slot name="play-icon">
-                  <wa-icon
-                    name="play"
-                    library="system"
-                    variant="solid"
-                    class="default"
-                    style="margin-inline-start: 3px;"
-                  ></wa-icon>
+                  <wa-icon name="play" variant="solid" class="default" style="margin-inline-start: 3px;"></wa-icon>
                 </slot>
                 <slot name="pause-icon">
-                  <wa-icon name="pause" library="system" variant="solid" class="default"></wa-icon>
+                  <wa-icon name="pause" variant="solid" class="default"></wa-icon>
                 </slot>
               </div>
             `
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index e163fa86d..a225e265b 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -81,7 +81,7 @@ export default class WaAvatar extends WebAwesomeElement {
     } else {
       avatarWithoutImage = html`
         <slot name="icon" part="icon" class="icon" role="img" aria-label=${this.label}>
-          <wa-icon name="user" library="system" variant="solid"></wa-icon>
+          <wa-icon name="user" variant="solid"></wa-icon>
         </slot>
       `;
     }
diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts
index ff3b11843..436390fc9 100644
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -91,11 +91,7 @@ export default class WaBreadcrumb extends WebAwesomeElement {
 
       <span hidden aria-hidden="true">
         <slot name="separator">
-          <wa-icon
-            name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'}
-            library="system"
-            variant="solid"
-          ></wa-icon>
+          <wa-icon name=${this.localize.dir() === 'rtl' ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
         </slot>
       </span>
     `;
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 75a5e59d0..7811d8086 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -263,13 +263,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         <slot name="prefix" part="prefix" class="prefix"></slot>
         <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
         <slot name="suffix" part="suffix" class="suffix"></slot>
-        ${
-          this.caret
-            ? html`
-                <wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
-              `
-            : ''
-        }
+        ${this.caret ? html` <wa-icon part="caret" class="caret" name="chevron-down" variant="solid"></wa-icon> ` : ''}
         ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </${tag}>
     `;
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index fdc930be9..b26037c9f 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -608,7 +608,7 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${prevEnabled ? () => this.previous() : null}
                 >
                   <slot name="previous-icon">
-                    <wa-icon library="system" name="${isRTL ? 'chevron-right' : 'chevron-left'}"></wa-icon>
+                    <wa-icon name="${isRTL ? 'chevron-right' : 'chevron-left'}"></wa-icon>
                   </slot>
                 </button>
 
@@ -625,7 +625,7 @@ export default class WaCarousel extends WebAwesomeElement {
                   @click=${nextEnabled ? () => this.next() : null}
                 >
                   <slot name="next-icon">
-                    <wa-icon library="system" name="${isRTL ? 'chevron-left' : 'chevron-right'}"></wa-icon>
+                    <wa-icon name="${isRTL ? 'chevron-left' : 'chevron-right'}"></wa-icon>
                   </slot>
                 </button>
               </div>
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index d60ba8c29..7ab5ddd03 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -234,7 +234,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
             @click=${this.handleClick}
           />
 
-          <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
+          <wa-icon part="${iconState}-icon icon" name=${iconName}></wa-icon>
         </span>
 
         <slot part="label"></slot>
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index 4e835c52f..b58893b65 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1041,7 +1041,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                     @focus=${this.stopNestedEventPropagation}
                   >
                     <wa-icon
-                      library="system"
                       name="eye-dropper"
                       variant="solid"
                       label=${this.localize.term('selectAColorFromTheScreen')}
diff --git a/src/components/comparer/comparer.ts b/src/components/comparer/comparer.ts
index 3f2bac570..f42d31570 100644
--- a/src/components/comparer/comparer.ts
+++ b/src/components/comparer/comparer.ts
@@ -133,7 +133,7 @@ export default class WaComparer extends WebAwesomeElement {
           tabindex="0"
         >
           <slot name="handle">
-            <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
           </slot>
         </div>
       </div>
diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts
index e4eee306e..abcc0cd66 100644
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -196,13 +196,13 @@ export default class WaCopyButton extends WebAwesomeElement {
         <!-- Render a visually hidden label to appease the accessibility checking gods -->
         <span class="wa-visually-hidden">${this.currentLabel}</span>
         <slot part="copy-icon" name="copy-icon">
-          <wa-icon library="system" name="copy" variant="regular" fixed-width></wa-icon>
+          <wa-icon name="copy" variant="regular" fixed-width></wa-icon>
         </slot>
         <slot part="success-icon" name="success-icon" variant="solid" hidden>
-          <wa-icon library="system" name="check" fixed-width></wa-icon>
+          <wa-icon name="check" fixed-width></wa-icon>
         </slot>
         <slot part="error-icon" name="error-icon" variant="solid" hidden>
-          <wa-icon library="system" name="xmark" fixed-width></wa-icon>
+          <wa-icon name="xmark" fixed-width></wa-icon>
         </slot>
         <wa-tooltip
           class=${classMap({
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index e9e6d596f..969cbd8b8 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -235,20 +235,10 @@ export default class WaDetails extends WebAwesomeElement {
 
           <span part="icon">
             <slot name="expand-icon">
-              <wa-icon
-                library="system"
-                variant="solid"
-                name=${isRtl ? 'chevron-left' : 'chevron-right'}
-                fixed-width
-              ></wa-icon>
+              <wa-icon variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'} fixed-width></wa-icon>
             </slot>
             <slot name="collapse-icon">
-              <wa-icon
-                library="system"
-                variant="solid"
-                name=${isRtl ? 'chevron-left' : 'chevron-right'}
-                fixed-width
-              ></wa-icon>
+              <wa-icon variant="solid" name=${isRtl ? 'chevron-left' : 'chevron-right'} fixed-width></wa-icon>
             </slot>
           </span>
         </summary>
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 6cd943000..6000ee16f 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -239,7 +239,6 @@ export default class WaDialog extends WebAwesomeElement {
                     class="close"
                     name="xmark"
                     label=${this.localize.term('close')}
-                    library="system"
                     variant="solid"
                     @click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
                   ></wa-icon-button>
diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts
index cf5b0d9b9..3f137daee 100644
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@@ -255,7 +255,6 @@ export default class WaDrawer extends WebAwesomeElement {
                     class="close"
                     name="xmark"
                     label=${this.localize.term('close')}
-                    library="system"
                     variant="solid"
                     @click="${(event: PointerEvent) => this.requestClose(event.target as Element)}"
                   ></wa-icon-button>
diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts
index f137269ce..5d212ab6a 100644
--- a/src/components/icon-button/icon-button.test.ts
+++ b/src/components/icon-button/icon-button.test.ts
@@ -34,11 +34,7 @@ describe('<wa-icon-button>', () => {
       describe('when styling the host element', () => {
         it('renders the correct color and font size', async () => {
           const el = await fixture<WaIconButton>(html`
-            <wa-icon-button
-              library="system"
-              name="check"
-              style="color: rgb(0, 136, 221); font-size: 2rem;"
-            ></wa-icon-button>
+            <wa-icon-button name="check" style="color: rgb(0, 136, 221); font-size: 2rem;"></wa-icon-button>
           `);
           const icon = el.shadowRoot!.querySelector('wa-icon')!;
           const styles = getComputedStyle(icon);
@@ -50,9 +46,7 @@ describe('<wa-icon-button>', () => {
 
       describe('when icon attributes are present', () => {
         it('renders an wa-icon from a library', async () => {
-          const el = await fixture<WaIconButton>(html`
-            <wa-icon-button library="system" name="check"></wa-icon-button>
-          `);
+          const el = await fixture<WaIconButton>(html` <wa-icon-button name="check"></wa-icon-button> `);
           expect(el.shadowRoot?.querySelector('wa-icon')).to.exist;
         });
 
diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts
index 26c2f96a1..e7cfd58de 100644
--- a/src/components/icon/icon.test.ts
+++ b/src/components/icon/icon.test.ts
@@ -53,7 +53,7 @@ describe('<wa-icon>', () => {
         });
 
         it('renders pre-loaded system icons and emits wa-load event', async () => {
-          const el = await fixture<WaIcon>(html` <wa-icon library="system"></wa-icon> `);
+          const el = await fixture<WaIcon>(html` <wa-icon></wa-icon> `);
           const listener = oneEvent(el, 'wa-load') as Promise<WaLoadEvent>;
 
           el.name = 'check';
@@ -65,12 +65,12 @@ describe('<wa-icon>', () => {
         });
 
         it('the icon is accessible', async () => {
-          const el = await fixture<WaIcon>(html` <wa-icon library="system" name="check"></wa-icon> `);
+          const el = await fixture<WaIcon>(html` <wa-icon name="check"></wa-icon> `);
           await expect(el).to.be.accessible();
         });
 
         it('the icon has the correct default aria attributes', async () => {
-          const el = await fixture<WaIcon>(html` <wa-icon library="system" name="check"></wa-icon> `);
+          const el = await fixture<WaIcon>(html` <wa-icon name="check"></wa-icon> `);
 
           expect(el.getAttribute('role')).to.be.null;
           expect(el.getAttribute('aria-label')).to.be.null;
@@ -81,9 +81,7 @@ describe('<wa-icon>', () => {
       describe('when a label is provided', () => {
         it('the icon has the correct default aria attributes', async () => {
           const fakeLabel = 'a label';
-          const el = await fixture<WaIcon>(html`
-            <wa-icon label="${fakeLabel}" library="system" name="check"></wa-icon>
-          `);
+          const el = await fixture<WaIcon>(html` <wa-icon label="${fakeLabel}" name="check"></wa-icon> `);
 
           expect(el.getAttribute('role')).to.equal('img');
           expect(el.getAttribute('aria-label')).to.equal(fakeLabel);
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 446b35d05..c38b3fbbb 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -445,7 +445,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
                 tabindex="-1"
               >
                 <slot name="clear-icon">
-                  <wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
+                  <wa-icon name="circle-xmark" variant="regular"></wa-icon>
                 </slot>
               </button>
             `
@@ -463,12 +463,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
                 ${!this.passwordVisible
                   ? html`
                       <slot name="show-password-icon">
-                        <wa-icon name="eye" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye" variant="regular"></wa-icon>
                       </slot>
                     `
                   : html`
                       <slot name="hide-password-icon">
-                        <wa-icon name="eye-slash" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="eye-slash" variant="regular"></wa-icon>
                       </slot>
                     `}
               </button>
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 3356c1f63..13ee70279 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -211,7 +211,7 @@ export default class WaMenuItem extends WebAwesomeElement {
         ?aria-expanded="${isSubmenuExpanded ? true : false}"
       >
         <span part="checked-icon" class="check">
-          <wa-icon name="check" library="system" variant="solid" aria-hidden="true"></wa-icon>
+          <wa-icon name="check" variant="solid" aria-hidden="true"></wa-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="prefix"></slot>
@@ -221,12 +221,7 @@ export default class WaMenuItem extends WebAwesomeElement {
         <slot name="suffix" part="suffix" class="suffix"></slot>
 
         <span part="submenu-icon" class="chevron">
-          <wa-icon
-            name=${isRtl ? 'chevron-left' : 'chevron-right'}
-            library="system"
-            variant="solid"
-            aria-hidden="true"
-          ></wa-icon>
+          <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid" aria-hidden="true"></wa-icon>
         </span>
 
         ${this.submenuController.renderSubmenu()} ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 356e41d2d..549391f58 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -184,14 +184,7 @@ export default class WaOption extends WebAwesomeElement {
 
   render() {
     return html`
-      <wa-icon
-        part="checked-icon"
-        class="check"
-        name="check"
-        library="system"
-        variant="solid"
-        aria-hidden="true"
-      ></wa-icon>
+      <wa-icon part="checked-icon" class="check" name="check" variant="solid" aria-hidden="true"></wa-icon>
       <slot part="prefix" name="prefix" class="prefix"></slot>
       <slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
       <slot part="suffix" name="suffix" class="suffix"></slot>
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index d492c727a..2f513d589 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -68,8 +68,7 @@ export default class WaRating extends WebAwesomeElement {
    * The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
    * well with `<wa-icon>` elements.
    */
-  @property() getSymbol: (value: number) => string = () =>
-    '<wa-icon name="star" library="system" variant="solid"></wa-icon>';
+  @property() getSymbol: (value: number) => string = () => '<wa-icon name="star" variant="solid"></wa-icon>';
 
   /** The component's size. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 648ff52a4..04383edec 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -957,7 +957,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <wa-icon name="circle-xmark" library="system" variant="regular"></wa-icon>
+                        <wa-icon name="circle-xmark" variant="regular"></wa-icon>
                       </slot>
                     </button>
                   `
@@ -966,7 +966,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               <slot name="suffix" part="suffix" class="suffix"></slot>
 
               <slot name="expand-icon" part="expand-icon" class="expand-icon">
-                <wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
+                <wa-icon name="chevron-down" variant="solid"></wa-icon>
               </slot>
             </div>
 
diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index b03c12818..520196945 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -405,7 +405,6 @@ export default class WaTabGroup extends WebAwesomeElement {
                   exportparts="base:scroll-button__base"
                   class="scroll-button scroll-button-start"
                   name=${isRtl ? 'chevron-right' : 'chevron-left'}
-                  library="system"
                   variant="solid"
                   label=${this.localize.term('scrollToStart')}
                   @click=${this.handleScrollToStart}
@@ -427,7 +426,6 @@ export default class WaTabGroup extends WebAwesomeElement {
                   class="scroll-button scroll-button-end"
                   exportparts="base:scroll-button__base"
                   name=${isRtl ? 'chevron-left' : 'chevron-right'}
-                  library="system"
                   variant="solid"
                   label=${this.localize.term('scrollToEnd')}
                   @click=${this.handleScrollToEnd}
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 02199579f..21ee97bf7 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -68,7 +68,6 @@ export default class WaTag extends WebAwesomeElement {
               part="remove-button"
               exportparts="base:remove-button__base"
               name="xmark"
-              library="system"
               variant="solid"
               label=${this.localize.term('remove')}
               class="remove"
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index e2b34fab1..e7e61ba11 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -276,10 +276,10 @@ export default class WaTreeItem extends WebAwesomeElement {
                 this.loading,
                 () => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
               )}
-              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
+              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
             </slot>
             <slot class="expand-icon-slot" name="collapse-icon">
-              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
+              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} variant="solid"></wa-icon>
             </slot>
           </div>