diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 38a9c8847a77b926dbe8ff37c72f575478c8cebb..5f65c958e07c10e37b2e9eade12cef4035020be4 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -60,11 +60,14 @@
         <h2 class="heading-2">Icons</h2>
         <div class="mb-6 flex gap-1">
           <ods-icon name="account-circle" size="xxl" />
-          <ods-icon name="accessibility" size="extra-large" fill="text" />
+          <ods-icon name="accessibility" size="extra-large" fill="text" label="Barrierefreiheit" />
           <ods-icon name="accessibility" size="large" fill="error" />
           <ods-icon name="accessibility" class="fill-red-500" />
           <ods-icon name="accessibility" size="small" />
           <ods-icon name="admin-logo" size="full" />
+          <ods-button variant="ghost" size="fit">
+            <ods-icon icon name="accessibility" fill="text" label="Barrierefreiheitseite öffnen" />
+          </ods-button>
         </div>
         <h1 class="mb-6 text-2xl font-semibold text-text">Auswertungen</h1>
         <ods-button text="Auswertung hinzufügen" />
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index a545fcc93d4ce73192897404cc9ec93f52815b4c..0c998775c807a04aeafdfbca4b29edb524361084 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -56,15 +56,17 @@ type IconVariants = VariantProps<typeof iconVariants>;
   standalone: true,
   imports: [CommonModule, SvgIconComponent],
   template: `<svg-icon
-    [src]="'assets/icons/' + name + '.svg'"
-    [svgClass]="twMerge(iconVariants({ size, fill }), class)"
-    aria-hidden="true"
-  />`,
+      [src]="'assets/icons/' + name + '.svg'"
+      [svgClass]="twMerge(iconVariants({ size, fill }), class)"
+      aria-hidden="true"
+    />
+    <span class="sr-only empty:hidden">{{ label }}</span>`,
   styles: [':host {@apply block size-fit}'],
 })
 export class IconComponent {
   @Input({ required: true }) name!: string;
   @Input() class: string;
+  @Input() label: string = '';
   @Input() size: IconVariants['size'] = 'medium';
   @Input() fill: IconVariants['fill'] = 'primary';