diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
index be2de4b93..658dbe4ba 100644
--- a/packages/beeq/src/components.d.ts
+++ b/packages/beeq/src/components.d.ts
@@ -443,6 +443,10 @@ export namespace Components {
           * Set the stroke color of the SVG. The value should be a valid value of the palette color
          */
         "color"?: string;
+        /**
+          * Label for the icon, used for accessibility
+         */
+        "label"?: string;
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
@@ -2413,6 +2417,10 @@ declare namespace LocalJSX {
           * Set the stroke color of the SVG. The value should be a valid value of the palette color
          */
         "color"?: string;
+        /**
+          * Label for the icon, used for accessibility
+         */
+        "label"?: string;
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx
index 27ec3f9ed..223428284 100644
--- a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx
+++ b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx
@@ -20,6 +20,7 @@ const meta: Meta = {
   argTypes: {
     icons: { table: { disable: true } },
     color: { control: 'text' },
+    label: { control: 'text' },
     name: { control: 'select', options: [...ICONS_SET] },
     size: { control: 'number' },
     src: { control: 'text' },
@@ -27,6 +28,7 @@ const meta: Meta = {
   },
   args: {
     color: 'text--brand',
+    label: undefined,
     size: 24,
     src: undefined,
     weight: 'regular',
@@ -39,6 +41,7 @@ type Story = StoryObj;
 const Template = (args: Args) => html`
   <bq-icon
     color=${ifDefined(args.color)}
+    label=${ifDefined(args.label)}
     name=${ifDefined(args.name)}
     size=${ifDefined(args.size)}
     src=${ifDefined(args.src)}
diff --git a/packages/beeq/src/components/icon/bq-icon.tsx b/packages/beeq/src/components/icon/bq-icon.tsx
index 728ec2d32..ad426166e 100644
--- a/packages/beeq/src/components/icon/bq-icon.tsx
+++ b/packages/beeq/src/components/icon/bq-icon.tsx
@@ -32,6 +32,9 @@ export class BqIcon {
   // Public Property API
   // ========================
 
+  /** Label for the icon, used for accessibility */
+  @Prop({ reflect: true }) label?: string;
+
   /** Set the stroke color of the SVG. The value should be a valid value of the palette color */
   @Prop({ reflect: true }) color?: string;
 
@@ -125,11 +128,11 @@ export class BqIcon {
     return (
       <Host style={styles}>
         <div
+          aria-label={this.label ?? `${this.name} icon`}
           class="flex h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]"
           innerHTML={this._svgContent}
           part="base"
           role="img"
-          title={`${this.name} icon`}
         />
       </Host>
     );
diff --git a/packages/beeq/src/components/spinner/bq-spinner.tsx b/packages/beeq/src/components/spinner/bq-spinner.tsx
index 826b702d2..5ef06717c 100644
--- a/packages/beeq/src/components/spinner/bq-spinner.tsx
+++ b/packages/beeq/src/components/spinner/bq-spinner.tsx
@@ -1,7 +1,14 @@
 import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
 
 import { SPINNER_SIZE, SPINNER_TEXT_POSITION, TSpinnerSize, TSpinnerTextPosition } from './bq-spinner.types';
-import { getCSSVariableValue, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';
+import {
+  getCSSVariableValue,
+  getTextContent,
+  hasSlotContent,
+  isHTMLElement,
+  isNil,
+  validatePropValue,
+} from '../../shared/utils';
 
 /**
  * Spinners are designed for users to display data loading.
@@ -140,16 +147,19 @@ export class BqSpinner {
   }
 
   private setIconSize(): void {
-    if (!this.hasIconSlot) return;
+    if (!this.hasIconSlot || !this.bqIcon) return;
 
-    const iconElements = this.iconSlotElem
-      .querySelector<HTMLSlotElement>(`slot[name="icon"]`)
-      ?.assignedElements({ flatten: true })
-      .filter((element) => element.nodeName === 'BQ-ICON');
+    this.bqIcon.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();
+  }
 
-    iconElements.forEach((element: HTMLBqIconElement) => {
-      element.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();
-    });
+  private get bqIcon(): HTMLBqIconElement | null {
+    if (!this.hasIconSlot) return null;
+
+    const slot = this.iconSlotElem.querySelector('slot');
+
+    return [...slot.assignedElements({ flatten: true })].filter((el: Element) =>
+      isHTMLElement(el, 'bq-icon'),
+    )[0] as HTMLBqIconElement;
   }
 
   // render() function