diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 9c1dc510..9afc9f87 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -7,9 +7,9 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
 For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
 
 ```html preview
-<sl-icon-button name="gear"></sl-icon-button>
-<sl-icon-button name="sliders"></sl-icon-button>
-<sl-icon-button name="x"></sl-icon-button>
+<sl-icon-button name="gear" label="Settings"></sl-icon-button>
+<sl-icon-button name="sliders" label="Options"></sl-icon-button>
+<sl-icon-button name="x" label="Close"></sl-icon-button>
 ```
 
 ## Examples
@@ -19,9 +19,9 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
 Icon buttons inherit their parent element's `font-size`.
 
 ```html preview
-<sl-icon-button name="pencil" style="font-size: 1.5rem;"></sl-icon-button>
-<sl-icon-button name="pencil" style="font-size: 2rem;"></sl-icon-button>
-<sl-icon-button name="pencil" style="font-size: 2.5rem;"></sl-icon-button>
+<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
+<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
+<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
 ```
 
 ### Colors
@@ -30,9 +30,9 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
 
 ```html preview
 <div class="icon-button-color">
-  <sl-icon-button name="type-bold"></sl-icon-button>
-  <sl-icon-button name="type-italic"></sl-icon-button>
-  <sl-icon-button name="type-underline"></sl-icon-button>
+  <sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
+  <sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
+  <sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
 </div>
 
 <style>
@@ -57,13 +57,13 @@ Wrap a tooltip around an icon button to provide contextual information to the us
 
 ```html preview
 <sl-tooltip content="Settings">
-  <sl-icon-button name="gear"></sl-icon-button>
+  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
 </sl-tooltip>
 ```
 
 ### Disabled
 ```html preview
-<sl-icon-button name="gear" disabled></sl-icon-button>
+<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
 ```
 
 [component-metadata:sl-icon-button]
diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index eb1c2b92..ff3c160a 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `disabled` could be set when buttons are rendered as links
 - Fixed a bug where hoisted dropdowns would render in the wrong position when place inside an `sl-dialog`
 - Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
+- Improved `sl-icon-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers
 - Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
 - Removed `console.log` from modal utility
 - 🚨 BREAKING CHANGE: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states
diff --git a/src/components.d.ts b/src/components.d.ts
index 0abcb526..3c531f5d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -493,7 +493,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
+          * A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should always include a label that describes what the icon button does.
          */
         "label": string;
         /**
@@ -2006,7 +2006,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
+          * A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should always include a label that describes what the icon button does.
          */
         "label"?: string;
         /**
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
index 14b63a3c..d7711809 100644
--- a/src/components/icon-button/icon-button.tsx
+++ b/src/components/icon-button/icon-button.tsx
@@ -25,7 +25,10 @@ export class IconButton {
   /** An external URL of an SVG file. */
   @Prop({ reflect: true }) src: string;
 
-  /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
+  /**
+   * A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should
+   * always include a label that describes what the icon button does.
+   */
   @Prop({ reflect: true }) label: string;
 
   /** Set to true to disable the button. */
@@ -49,8 +52,9 @@ export class IconButton {
           'icon-button--disabled': this.disabled
         }}
         type="button"
+        aria-label={this.label}
       >
-        <sl-icon library={this.library} name={this.name} src={this.src} label={this.label} />
+        <sl-icon library={this.library} name={this.name} src={this.src} aria-hidden="true" />
       </button>
     );
   }