diff --git a/src/components/circular-progress/circular-progress.tsx b/src/components/circular-progress/circular-progress.tsx
index dc67e90ccb..48143e87dd 100644
--- a/src/components/circular-progress/circular-progress.tsx
+++ b/src/components/circular-progress/circular-progress.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, Watch } from '@stencil/core';
 import { CircularProgressSize } from '../circular-progress/circular-progress.types';
 import { abbreviate } from '../badge/format';
 
@@ -47,17 +47,33 @@ export class CircularProgress {
     public maxValue: number = PERCENT;
 
     /**
-     * The prefix which is displayed before the `value`, must be a few characters characters long.
+     * The prefix which is displayed before the `value`, must be a few characters long.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix?: string = null;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop()
     public suffix: string = '%';
 
+    /**
+     * The prefix which is displayed before the `value`, must be a few characters long.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix?: string = null;
+
+    /**
+     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
+     *
+     * @todo Change default value to `'%'` once the deprecated `suffix` property is removed.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix?: string = null;
+
     /**
      * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
      */
@@ -70,6 +86,33 @@ export class CircularProgress {
     @Prop({ reflect: true })
     public size: CircularProgressSize;
 
+    public componentWillLoad() {
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
+    }
+
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
+        if (
+            this.suffix !== '%' &&
+            this.suffix !== null &&
+            this.suffix !== undefined
+        ) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+    }
+
     public render() {
         const classList = {
             'lime-circular-progress': true,
@@ -79,27 +122,38 @@ export class CircularProgress {
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
 
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+
+        const ariaValueText = [
+            effectivePrefix,
+            abbreviate(value),
+            effectiveSuffix,
+        ]
+            .filter(Boolean)
+            .join('');
+
         return (
             <div
                 role="progressbar"
                 class={classList}
-                aria-label="%"
+                aria-valuetext={ariaValueText}
                 aria-valuemin="0"
                 aria-valuemax={this.maxValue}
                 aria-valuenow={this.value}
                 style={{ '--percentage': currentPercentage }}
             >
-                {this.renderPrefix()}
+                {this.renderPrefix(effectivePrefix)}
                 <span class="value">
                     {abbreviate(value)}
-                    <span class="suffix">{this.suffix}</span>
+                    <span class="suffix">{effectiveSuffix}</span>
                 </span>
             </div>
         );
     }
-    private renderPrefix = () => {
-        if (this.prefix) {
-            return <span class="prefix">{this.prefix}</span>;
+    private renderPrefix = (prefix?: string) => {
+        if (prefix) {
+            return <span class="prefix">{prefix}</span>;
         }
     };
 }
diff --git a/src/components/circular-progress/examples/circular-progress-css-variables.tsx b/src/components/circular-progress/examples/circular-progress-css-variables.tsx
index 3610570d0c..2c680f1ceb 100644
--- a/src/components/circular-progress/examples/circular-progress-css-variables.tsx
+++ b/src/components/circular-progress/examples/circular-progress-css-variables.tsx
@@ -24,6 +24,6 @@ export class CircularProgressCssVariablesExample {
     private value = 90;
 
     public render() {
-        return <limel-circular-progress prefix="↗" value={this.value} />;
+        return <limel-circular-progress valuePrefix="↗" value={this.value} />;
     }
 }
diff --git a/src/components/circular-progress/examples/circular-progress-props.tsx b/src/components/circular-progress/examples/circular-progress-props.tsx
index f17098337b..e8ade4384c 100644
--- a/src/components/circular-progress/examples/circular-progress-props.tsx
+++ b/src/components/circular-progress/examples/circular-progress-props.tsx
@@ -37,26 +37,26 @@ export class CircularProgressPropsExample {
                 size="x-large"
                 value={this.degree}
                 maxValue={this.maxDegrees}
-                suffix={this.degrees}
+                valueSuffix={this.degrees}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.second}
                 maxValue={this.maxSeconds}
-                suffix={this.seconds}
+                valueSuffix={this.seconds}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.star}
                 maxValue={this.maxStars}
-                suffix={this.stars}
+                valueSuffix={this.stars}
             />,
             <limel-circular-progress
                 size="x-large"
                 value={this.budget}
                 maxValue={this.maxBudget}
-                suffix={this.currency}
-                prefix={this.increase}
+                valueSuffix={this.currency}
+                valuePrefix={this.increase}
             />,
         ];
     }
diff --git a/src/components/info-tile/examples/info-tile-badge.tsx b/src/components/info-tile/examples/info-tile-badge.tsx
index f4a1f48d76..b20fb5cc58 100644
--- a/src/components/info-tile/examples/info-tile-badge.tsx
+++ b/src/components/info-tile/examples/info-tile-badge.tsx
@@ -32,7 +32,7 @@ export class InfoTileBadgeExample {
                 icon="water"
                 label="Average weekly usage"
                 value={this.StringValue}
-                suffix="L"
+                valueSuffix="L"
                 badge={this.StringBadge}
                 link={{ href: '#' }}
             />,
diff --git a/src/components/info-tile/examples/info-tile-loading.tsx b/src/components/info-tile/examples/info-tile-loading.tsx
index 4eb188ccba..bce4e1fbd5 100644
--- a/src/components/info-tile/examples/info-tile-loading.tsx
+++ b/src/components/info-tile/examples/info-tile-loading.tsx
@@ -37,9 +37,9 @@ export class InfoTileLoadingExample {
             <limel-info-tile
                 icon="partly_cloudy_rain"
                 label="Partly cloudy with a risk of rain"
-                prefix="temp"
+                valuePrefix="temp"
                 value="23"
-                suffix="°C"
+                valueSuffix="°C"
                 link={link}
                 loading={this.loading}
             />,
diff --git a/src/components/info-tile/examples/info-tile-primary-slot.tsx b/src/components/info-tile/examples/info-tile-primary-slot.tsx
index 3d3f60d89c..3203deb944 100644
--- a/src/components/info-tile/examples/info-tile-primary-slot.tsx
+++ b/src/components/info-tile/examples/info-tile-primary-slot.tsx
@@ -37,7 +37,7 @@ export class InfoTilePrimarySlotExample {
                     icon="cloud_storage"
                     label="Cloud storage usage"
                     value="215"
-                    suffix="GB"
+                    valueSuffix="GB"
                     link={link}
                     progress={progress} // won't be rendered
                 >
diff --git a/src/components/info-tile/examples/info-tile-progress.tsx b/src/components/info-tile/examples/info-tile-progress.tsx
index 2f00e13570..e73e9c80e6 100644
--- a/src/components/info-tile/examples/info-tile-progress.tsx
+++ b/src/components/info-tile/examples/info-tile-progress.tsx
@@ -30,7 +30,7 @@ export class InfoTileProgressExample {
     @State()
     private progress: InfoTileProgress = {
         value: 76,
-        prefix: '↑',
+        valuePrefix: '↑',
         displayPercentageColors: true,
     };
 
@@ -39,9 +39,9 @@ export class InfoTileProgressExample {
             <limel-info-tile
                 label="Won deals this month"
                 icon="money"
-                prefix="Total value"
+                valuePrefix="Total value"
                 value="70,659"
-                suffix="EUR"
+                valueSuffix="EUR"
                 link={{ href: '#' }}
                 progress={this.progress}
             />,
diff --git a/src/components/info-tile/examples/info-tile-styling.tsx b/src/components/info-tile/examples/info-tile-styling.tsx
index 4ce63a3f71..e061556f12 100644
--- a/src/components/info-tile/examples/info-tile-styling.tsx
+++ b/src/components/info-tile/examples/info-tile-styling.tsx
@@ -21,7 +21,7 @@ export class InfoTileStylingExample {
     private progress: InfoTileProgress = {
         value: 12,
         maxValue: 100,
-        suffix: '%',
+        valueSuffix: '%',
         displayPercentageColors: false,
     };
 
@@ -31,16 +31,16 @@ export class InfoTileStylingExample {
                 icon="electricity"
                 label="Average weekly usage"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 badge={this.badge}
             />,
             <limel-info-tile
                 label="Average weekly usage"
                 icon="electricity"
                 value={this.value}
-                suffix="kWh"
+                valueSuffix="kWh"
                 progress={this.progress}
-                prefix="↑"
+                valuePrefix="↑"
             />,
         ];
     }
diff --git a/src/components/info-tile/examples/info-tile.tsx b/src/components/info-tile/examples/info-tile.tsx
index 516fcb9c1d..7ac8938e15 100644
--- a/src/components/info-tile/examples/info-tile.tsx
+++ b/src/components/info-tile/examples/info-tile.tsx
@@ -41,9 +41,9 @@ export class InfoTileExample {
                 <limel-info-tile
                     icon="partly_cloudy_rain"
                     label="Partly cloudy with a risk of rain"
-                    prefix="temp"
+                    valuePrefix="temp"
                     value="23"
-                    suffix="°C"
+                    valueSuffix="°C"
                     link={link}
                 />
             </div>
diff --git a/src/components/info-tile/info-tile.tsx b/src/components/info-tile/info-tile.tsx
index 4e9045617e..b5cac8514c 100644
--- a/src/components/info-tile/info-tile.tsx
+++ b/src/components/info-tile/info-tile.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, Host, State } from '@stencil/core';
+import { Component, Prop, h, Element, Host, State, Watch } from '@stencil/core';
 import { InfoTileProgress } from '../info-tile/info-tile.types';
 import { Link } from '../../global/shared-types/link.types';
 import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
@@ -47,16 +47,30 @@ export class InfoTile {
 
     /**
      * A string of text that is visually placed before the value.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix?: string;
 
     /**
      * A string of text that is visually placed after the value.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public suffix?: string;
 
+    /**
+     * A string of text that is visually placed before the value.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix?: string;
+
+    /**
+     * A string of text that is visually placed after the value.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix?: string;
+
     /**
      * Set to `true` if info tile is disabled.
      */
@@ -96,7 +110,7 @@ export class InfoTile {
      *
      * Defaults:
      * - `maxValue`: 100
-     * - `suffix`: %
+     * - `valueSuffix`: %
      * - `displayPercentageColors`: false
      *
      * Colors change with intervals of 10 %.
@@ -123,19 +137,73 @@ export class InfoTile {
         this.handleMouseEnter = handleMouseEnter;
         this.handleMouseLeave = handleMouseLeave;
         this.updateHasPrimarySlotContent();
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
+        this.warnIfDeprecatedProgressPrefix();
+        this.warnIfDeprecatedProgressSuffix();
+    }
+
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
+        if (this.suffix !== null && this.suffix !== undefined) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+    }
+
+    @Watch('progress')
+    private warnIfDeprecatedProgressPrefix() {
+        if (
+            this.progress?.prefix !== null &&
+            this.progress?.prefix !== undefined
+        ) {
+            console.warn(
+                'The `prefix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('progress')
+    private warnIfDeprecatedProgressSuffix() {
+        if (
+            this.progress?.suffix !== null &&
+            this.progress?.suffix !== undefined &&
+            this.progress?.valueSuffix === undefined
+        ) {
+            console.warn(
+                'The `suffix` property in InfoTileProgress is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
     }
 
     public render() {
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+
         const extendedAriaLabel =
-            this.checkProps(this?.prefix) +
+            this.checkProps(effectivePrefix) +
             this.value +
             ' ' +
-            this.checkProps(this?.suffix) +
+            this.checkProps(effectiveSuffix) +
             this.checkProps(this?.label) +
             '. ' +
-            this.checkProps(this?.progress?.prefix) +
+            this.checkProps(
+                this?.progress?.valuePrefix ?? this?.progress?.prefix
+            ) +
             this.checkProps(this?.progress?.value) +
-            this.checkProps(this?.progress?.suffix) +
+            this.checkProps(
+                this?.progress?.valueSuffix ?? this?.progress?.suffix
+            ) +
             this.checkProps(this?.link?.title);
 
         const link = this.disabled ? '#' : this.link?.href;
@@ -188,8 +256,9 @@ export class InfoTile {
     }
 
     private renderPrefix = () => {
-        if (this.prefix) {
-            return <span class="prefix">{this.prefix}</span>;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        if (effectivePrefix) {
+            return <span class="prefix">{effectivePrefix}</span>;
         }
     };
 
@@ -215,8 +284,9 @@ export class InfoTile {
     };
 
     private renderSuffix = () => {
-        if (this.suffix) {
-            return <span class="suffix">{this.suffix}</span>;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        if (effectiveSuffix) {
+            return <span class="suffix">{effectiveSuffix}</span>;
         }
     };
 
@@ -242,12 +312,17 @@ export class InfoTile {
             return;
         }
 
+        const effectiveProgressPrefix =
+            this.progress.valuePrefix ?? this.progress.prefix;
+        const effectiveProgressSuffix =
+            this.progress.valueSuffix ?? this.progress.suffix;
+
         return (
             <limel-circular-progress
                 class="progress"
-                prefix={this.progress.prefix}
+                valuePrefix={effectiveProgressPrefix}
+                valueSuffix={effectiveProgressSuffix}
                 value={this.progress.value}
-                suffix={this.progress.suffix}
                 maxValue={this.progress.maxValue}
                 displayPercentageColors={this.progress.displayPercentageColors}
             />
diff --git a/src/components/info-tile/info-tile.types.ts b/src/components/info-tile/info-tile.types.ts
index 1093f7689d..935eb35e2b 100644
--- a/src/components/info-tile/info-tile.types.ts
+++ b/src/components/info-tile/info-tile.types.ts
@@ -15,14 +15,27 @@ export interface InfoTileProgress {
     /**
      * The prefix which is displayed before the `progressValue`.
      * Keep to a few characters at most.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     prefix?: string;
 
     /**
      * The suffix which is displayed after the `value`, must be one or two characters long.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     suffix?: string;
 
+    /**
+     * The prefix which is displayed before the `progressValue`.
+     * Keep to a few characters at most.
+     */
+    valuePrefix?: string;
+
+    /**
+     * The suffix which is displayed after the `value`, must be one or two characters long.
+     */
+    valueSuffix?: string;
+
     /**
      * When set to `true`, the progress bar changes color depending on its current value.
      */
diff --git a/src/components/input-field/examples/input-field-number-prefix.tsx b/src/components/input-field/examples/input-field-number-prefix.tsx
index 028f79221d..e553f28429 100644
--- a/src/components/input-field/examples/input-field-number-prefix.tsx
+++ b/src/components/input-field/examples/input-field-number-prefix.tsx
@@ -16,7 +16,7 @@ export class InputFieldPrefixExample {
         return (
             <limel-input-field
                 label="Price per unit"
-                prefix="$"
+                valuePrefix="$"
                 value={this.value}
                 type="number"
                 onChange={this.handleChange}
diff --git a/src/components/input-field/examples/input-field-text-suffix.tsx b/src/components/input-field/examples/input-field-text-suffix.tsx
index d2ddb148dc..352ec223c3 100644
--- a/src/components/input-field/examples/input-field-text-suffix.tsx
+++ b/src/components/input-field/examples/input-field-text-suffix.tsx
@@ -16,7 +16,7 @@ export class InputFieldSuffixExample {
         return (
             <limel-input-field
                 label="Quantity"
-                suffix="pcs"
+                valueSuffix="pcs"
                 value={this.value}
                 type="number"
                 onChange={this.handleChange}
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index 78d4e5a1b2..2802b24280 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -107,6 +107,7 @@ export class InputField {
     /**
      * A short piece of text to display before the value inside the input field.
      * Displayed for all types except `textarea`.
+     * @deprecated Use `valuePrefix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public prefix: string;
@@ -114,10 +115,25 @@ export class InputField {
     /**
      * A short piece of text to display after the value inside the input field.
      * Displayed for all types except `textarea`.
+     * @deprecated Use `valueSuffix` instead. Will be removed in a future version.
      */
     @Prop({ reflect: true })
     public suffix: string;
 
+    /**
+     * A short piece of text to display before the value inside the input field.
+     * Displayed for all types except `textarea`.
+     */
+    @Prop({ reflect: true })
+    public valuePrefix: string;
+
+    /**
+     * A short piece of text to display after the value inside the input field.
+     * Displayed for all types except `textarea`.
+     */
+    @Prop({ reflect: true })
+    public valueSuffix: string;
+
     /**
      * Set to `true` to indicate that the field is required.
      */
@@ -343,6 +359,24 @@ export class InputField {
         }
     }
 
+    @Watch('prefix')
+    private warnIfDeprecatedPrefix() {
+        if (this.prefix !== null && this.prefix !== undefined) {
+            console.warn(
+                'The `prefix` property is deprecated and will be removed in a future version. Use `valuePrefix` instead.'
+            );
+        }
+    }
+
+    @Watch('suffix')
+    private warnIfDeprecatedSuffix() {
+        if (this.suffix !== null && this.suffix !== undefined) {
+            console.warn(
+                'The `suffix` property is deprecated and will be removed in a future version. Use `valueSuffix` instead.'
+            );
+        }
+    }
+
     public render() {
         const properties = this.getAdditionalProps();
         properties['aria-labelledby'] = this.labelId;
@@ -452,6 +486,8 @@ export class InputField {
         }
 
         this.mapCompletions();
+        this.warnIfDeprecatedPrefix();
+        this.warnIfDeprecatedSuffix();
 
         window.addEventListener('resize', this.layout, { passive: true });
         this.limelInputField.addEventListener('focus', this.setFocus);
@@ -640,11 +676,13 @@ export class InputField {
             'mdc-text-field__affix--suffix': true,
         };
 
-        return <span class={classList}>{this.suffix}</span>;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        return <span class={classList}>{effectiveSuffix}</span>;
     };
 
     private hasSuffix = () => {
-        return this.suffix !== null && this.suffix !== undefined;
+        const effectiveSuffix = this.valueSuffix ?? this.suffix;
+        return effectiveSuffix !== null && effectiveSuffix !== undefined;
     };
 
     private renderPrefix = () => {
@@ -657,11 +695,13 @@ export class InputField {
             'mdc-text-field__affix--prefix': true,
         };
 
-        return <span class={classList}>{this.prefix}</span>;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        return <span class={classList}>{effectivePrefix}</span>;
     };
 
     private hasPrefix = () => {
-        return this.prefix !== null && this.prefix !== undefined;
+        const effectivePrefix = this.valuePrefix ?? this.prefix;
+        return effectivePrefix !== null && effectivePrefix !== undefined;
     };
 
     private isInvalid = () => {
diff --git a/src/components/markdown/default-whitelist.ts b/src/components/markdown/default-whitelist.ts
index a7fec78fbc..520f7b4fb1 100644
--- a/src/components/markdown/default-whitelist.ts
+++ b/src/components/markdown/default-whitelist.ts
@@ -51,6 +51,8 @@ export const DEFAULT_MARKDOWN_WHITELIST: CustomElementDefinition[] = [
             'max-value',
             'prefix',
             'suffix',
+            'value-prefix',
+            'value-suffix',
             'size',
             'display-percentage-colors',
         ],
@@ -61,6 +63,15 @@ export const DEFAULT_MARKDOWN_WHITELIST: CustomElementDefinition[] = [
     },
     {
         tagName: 'limel-info-tile',
-        attributes: ['value', 'icon', 'label', 'prefix', 'suffix', 'badge'],
+        attributes: [
+            'value',
+            'icon',
+            'label',
+            'prefix',
+            'suffix',
+            'value-prefix',
+            'value-suffix',
+            'badge',
+        ],
     },
 ];