diff --git a/README.md b/README.md
index 3eff8ec54ca..799f0d2a5b4 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ designers, and content authors build, maintain, and scale best of class digital
 | [ngx-components](https://github.com/db-ui/mono/tree/main/output/angular)    | Native Angular components           | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM")     |
 | [react-components](https://github.com/db-ui/mono/tree/main/output/react)    | Native React components             | [![@db-ui/react-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
 | [v-components](https://github.com/db-ui/mono/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
-| [web-components](https://github.com/db-ui/mono/tree/main/output/stencil)        | Web Components                      | [![@db-ui/web-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/web-components "DB UI – on NPM")     |
+| [web-components](https://github.com/db-ui/mono/tree/main/output/stencil)    | Web Components                      | [![@db-ui/web-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/web-components "DB UI – on NPM")     |
 
 ## How to use
 
diff --git a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png
index 37ef710488c..95a50a32a2c 100644
Binary files a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png and b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png
index 0f6f631ddcf..76edfefc764 100644
Binary files a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png and b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png
index 8d76c4ffc15..257494752e6 100644
Binary files a/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ
diff --git a/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png
index adc5c88f1bf..ea22a4d38e4 100644
Binary files a/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ
diff --git a/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png
index 217c4f79095..4d724d2f747 100644
Binary files a/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ
diff --git a/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png
index 8e13e998309..15cb343306c 100644
Binary files a/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png and b/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ
diff --git a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png
index 813b4d55116..8b04709805d 100644
Binary files a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png and b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png
index 75cb1f33a25..df2b23e04a2 100644
Binary files a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png and b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index 9eaf8455612..cfe5f7711d9 100644
Binary files a/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index ffd671aeb20..5c4553913e5 100644
Binary files a/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index 3b70119be56..140b6552ce6 100644
Binary files a/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index 971fd945999..c10d7f77611 100644
Binary files a/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index ed178387758..38c71f39163 100644
Binary files a/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png
index c3594b7e9fc..a31a8025cc1 100644
Binary files a/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png and b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ
diff --git a/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png
index 2bcee43beaa..7dc803f53d3 100644
Binary files a/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png and b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png b/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png
index 9eda293c68a..9bf95392ff6 100644
Binary files a/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png and b/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png differ
diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png
index d955b6d3610..8bc5f8cb0bd 100644
Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png differ
diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png
index 03bd8627b3c..303ed8f4376 100644
Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png differ
diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png
index d955b6d3610..8bc5f8cb0bd 100644
Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png differ
diff --git a/packages/components/scripts/utils/index.ts b/packages/components/scripts/utils/index.ts
index 2e01b14a794..7ea0b19c7a1 100644
--- a/packages/components/scripts/utils/index.ts
+++ b/packages/components/scripts/utils/index.ts
@@ -21,6 +21,11 @@ export const runReplacements = (
 		replacements = [...replacements, ...component.overwrites.global];
 	}
 
+	replacements.push({
+		from: ',\n' + ',',
+		to: ','
+	});
+
 	for (const replacement of replacements) {
 		const option = {
 			files: file,
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
index 402e6449f3b..c0a11fe0e57 100644
--- a/packages/components/src/components/badge/badge.lite.tsx
+++ b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,6 +1,7 @@
 import {
 	onMount,
 	onUpdate,
+	Show,
 	useMetadata,
 	useRef,
 	useStore
@@ -51,7 +52,9 @@ export default function DBBadge(props: DBBadgeProps) {
 				props.placement?.startsWith('corner') &&
 				(props.label ?? DEFAULT_LABEL)
 			}>
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</span>
 	);
 }
diff --git a/packages/components/src/components/badge/model.ts b/packages/components/src/components/badge/model.ts
index 9307b8d2732..3773cfe1936 100644
--- a/packages/components/src/components/badge/model.ts
+++ b/packages/components/src/components/badge/model.ts
@@ -4,7 +4,8 @@ import {
 	GlobalState,
 	InitializedState,
 	SemanticProps,
-	SizeProps
+	SizeProps,
+	TextProps
 } from '../../shared/model';
 
 export const BadgePlacementList = [
@@ -34,7 +35,8 @@ export type DBBadgeProps = DBBadgeDefaultProps &
 	GlobalProps &
 	SemanticProps &
 	SizeProps &
-	EmphasisProps;
+	EmphasisProps &
+	TextProps;
 
 export type DBBadgeDefaultState = {};
 
diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index 96e995aef9e..0fac1db160b 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,5 +1,5 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
-import { cls } from '../../utils';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { cls, getHideIcon } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 import { DEFAULT_ICON } from '../../shared/constants';
 
@@ -15,9 +15,12 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</div>
 	);
 }
diff --git a/packages/components/src/components/brand/model.ts b/packages/components/src/components/brand/model.ts
index c18d7387b9f..2b6b2f5ce87 100644
--- a/packages/components/src/components/brand/model.ts
+++ b/packages/components/src/components/brand/model.ts
@@ -1,13 +1,23 @@
-import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
+import {
+	GlobalProps,
+	GlobalState,
+	IconProps,
+	ShowIconProps,
+	TextProps
+} from '../../shared/model';
 
 export type DBBrandDefaultProps = {
 	/**
-	 * Disable the default logo svg to pass in a custom `img`
+	 * @deprecated: Disable the default logo svg to pass in a custom `img`
 	 */
 	hideLogo?: boolean;
 };
 
-export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps;
+export type DBBrandProps = DBBrandDefaultProps &
+	GlobalProps &
+	IconProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBBrandDefaultState = {};
 
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index ef0d1b20f83..396f04321ae 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,6 +1,6 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls, getBooleanAsString } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -27,6 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-size={props.size}
 			data-state={props.state}
 			data-width={props.width}
@@ -40,7 +41,9 @@ export default function DBButton(props: DBButtonProps) {
 			onClick={(event: ClickEvent<HTMLButtonElement>) =>
 				state.handleClick(event)
 			}>
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</button>
 	);
 }
diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts
index 469b2cf6094..752342f7b7d 100644
--- a/packages/components/src/components/button/model.ts
+++ b/packages/components/src/components/button/model.ts
@@ -4,7 +4,9 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
+	ShowIconProps,
 	SizeProps,
+	TextProps,
 	WidthProps
 } from '../../shared/model';
 
@@ -79,7 +81,9 @@ export type DBButtonProps = DBButtonDefaultProps &
 	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps &
-	SizeProps;
+	SizeProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBButtonDefaultState = {};
 
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 40e0083c26c..8acd9cf9ac0 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -17,7 +17,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
 useMetadata({});
@@ -167,13 +170,12 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					}
 					aria-describedby={state._descByIds}
 				/>
-				<Show when={props.label}>
-					<span>{props.label}</span>
+				<Show when={props.label} else={props.children}>
+					{props.label}
 				</Show>
-				{props.children}
 			</label>
 
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
index 5292c44bcd6..862e71ff14d 100644
--- a/packages/components/src/components/checkbox/checkbox.scss
+++ b/packages/components/src/components/checkbox/checkbox.scss
@@ -65,7 +65,7 @@
 
 				border-width: form-components.$check-border-size;
 
-				&::before {
+				&:not([data-hide-icon-before="true"])::before {
 					align-content: center;
 					font-size: calc(
 						var(--db-icon-font-size) - 2 * #{form-components.$check-border-size}
diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
index 060934db98a..f9519768289 100644
--- a/packages/components/src/components/icon/icon.lite.tsx
+++ b/packages/components/src/components/icon/icon.lite.tsx
@@ -1,4 +1,4 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBIconProps, DBIconState } from './model';
 import { cls } from '../../utils';
 
@@ -20,7 +20,9 @@ export default function DBIcon(props: DBIconProps) {
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
 			aria-hidden="true">
-			{props.children}
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</span>
 	);
 }
diff --git a/packages/components/src/components/icon/model.ts b/packages/components/src/components/icon/model.ts
index 597cc4d19d1..330c8b1f756 100644
--- a/packages/components/src/components/icon/model.ts
+++ b/packages/components/src/components/icon/model.ts
@@ -1,4 +1,9 @@
-import { GlobalProps, GlobalState, IconProps } from '../../shared/model';
+import {
+	GlobalProps,
+	GlobalState,
+	IconProps,
+	TextProps
+} from '../../shared/model';
 
 export const IconVariantList = ['default', 'inverted', 'filled'] as const;
 export type IconVariantType = (typeof IconVariantList)[number];
@@ -11,7 +16,10 @@ export type DBIconDefaultProps = {
 	weight?: IconWeightType;
 };
 
-export type DBIconProps = DBIconDefaultProps & GlobalProps & IconProps;
+export type DBIconProps = DBIconDefaultProps &
+	GlobalProps &
+	IconProps &
+	TextProps;
 
 export type DBIconDefaultState = {};
 
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index 1da5c521a2c..7e49ea5d5f4 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,6 +1,6 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
-import { cls } from '../../utils';
+import { cls, getHideIcon } from '../../utils';
 
 useMetadata({});
 
@@ -18,8 +18,11 @@ export default function DBInfotext(props: DBInfotextProps) {
 			class={cls('db-infotext', props.className)}
 			data-icon={props.icon}
 			data-semantic={props.semantic}
-			data-size={props.size}>
-			{props.children}
+			data-size={props.size}
+			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}>
+			<Show when={props.text} else={props.children}>
+				{props.text}
+			</Show>
 		</span>
 	);
 }
diff --git a/packages/components/src/components/infotext/model.ts b/packages/components/src/components/infotext/model.ts
index 85af440b7c9..c2e248f073b 100644
--- a/packages/components/src/components/infotext/model.ts
+++ b/packages/components/src/components/infotext/model.ts
@@ -3,7 +3,9 @@ import {
 	GlobalState,
 	IconProps,
 	SemanticProps,
-	SizeProps
+	ShowIconProps,
+	SizeProps,
+	TextProps
 } from '../../shared/model';
 
 export type DBInfotextDefaultProps = {};
@@ -12,7 +14,9 @@ export type DBInfotextProps = DBInfotextDefaultProps &
 	GlobalProps &
 	SemanticProps &
 	IconProps &
-	SizeProps;
+	SizeProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBInfotextDefaultState = {};
 
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index ee42440185d..48976558921 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -8,7 +8,14 @@ import {
 	useStore,
 	useTarget
 } from '@builder.io/mitosis';
-import { cls, delay, hasVoiceOver, isArrayOfStrings, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getHideIcon,
+	hasVoiceOver,
+	isArrayOfStrings,
+	uuid
+} from '../../utils';
 import { DBInputProps, DBInputState } from './model';
 import {
 	DEFAULT_DATALIST_ID_SUFFIX,
@@ -27,7 +34,10 @@ import {
 	ValueLabelType
 } from '../../shared/model';
 import DBInfotext from '../infotext/infotext.lite';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 
 useMetadata({});
 
@@ -161,8 +171,10 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-icon={props.icon}
-			data-icon-after={props.iconAfter}>
+			data-icon-after={props.iconAfter}
+			data-hide-icon-after={getHideIcon(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<input
 				aria-invalid={props.customValidity === 'invalid'}
@@ -217,7 +229,7 @@ export default function DBInput(props: DBInputProps) {
 				</datalist>
 			</Show>
 			{props.children}
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}
diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
index f1b8540e4ed..9bab1019cad 100644
--- a/packages/components/src/components/input/model.ts
+++ b/packages/components/src/components/input/model.ts
@@ -13,6 +13,7 @@ import {
 	IconProps,
 	InputEventProps,
 	InputEventState,
+	ShowIconProps,
 	ValueLabelType
 } from '../../shared/model';
 
@@ -77,7 +78,8 @@ export type DBInputProps = DBInputDefaultProps &
 	FormProps &
 	IconProps &
 	IconAfterProps &
-	FormMessageProps;
+	FormMessageProps &
+	ShowIconProps;
 
 export type DBInputDefaultState = {
 	_dataListId?: string;
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index f9ce2235c2c..44813ca26e9 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBLinkProps, DBLinkState } from './model';
-import { cls, getBooleanAsString } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -38,15 +38,15 @@ export default function DBLink(props: DBLinkProps) {
 			aria-label={props.label}
 			aria-current={props.current}
 			data-size={props.size}
+			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
 				state.handleClick(event)
 			}>
-			<Show when={props.text}>
-				<span>{props.text}</span>
+			<Show when={props.text} else={props.children}>
+				{props.text}
 			</Show>
-			{props.children}
 		</a>
 	);
 }
diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
index 70e65f7461c..fc0f3a35d84 100644
--- a/packages/components/src/components/link/link.scss
+++ b/packages/components/src/components/link/link.scss
@@ -17,18 +17,16 @@
 		@extend %db-link-height;
 	}
 
-	&:not([data-variant="inline"]) {
-		&[data-content="internal"] {
-			@include icons.set-icon("arrow_right", "after");
+	&[data-content="internal"] {
+		@include icons.set-icon("arrow_right", "after");
 
-			&::after {
-				vertical-align: top;
-			}
+		&:not([data-hide-icon-after="true"])::after {
+			vertical-align: top;
 		}
+	}
 
-		&[data-content="external"] {
-			@include icons.set-icon("arrow_up_right", "after");
-		}
+	&[data-content="external"] {
+		@include icons.set-icon("arrow_up_right", "after");
 	}
 
 	&[data-content="internal"],
diff --git a/packages/components/src/components/link/model.ts b/packages/components/src/components/link/model.ts
index 96dd3006ac3..8f6a4d5bb75 100644
--- a/packages/components/src/components/link/model.ts
+++ b/packages/components/src/components/link/model.ts
@@ -3,10 +3,12 @@ import {
 	ClickEventState,
 	GlobalProps,
 	GlobalState,
-	LinkProps
+	LinkProps,
+	ShowIconProps,
+	TextProps
 } from '../../shared/model';
 
-export const LinkVariantList = ['adaptive', 'brand', 'inline'] as const;
+export const LinkVariantList = ['adaptive', 'brand'] as const;
 export type LinkVariantType = (typeof LinkVariantList)[number];
 
 export const LinkSizeList = ['medium', 'small'] as const;
@@ -33,7 +35,9 @@ export type DBLinkDefaultProps = {
 export type DBLinkProps = DBLinkDefaultProps &
 	GlobalProps &
 	ClickEventProps<HTMLAnchorElement> &
-	LinkProps;
+	LinkProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBLinkDefaultState = {};
 
diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts
index 93289df0bdb..1ecdf62acb0 100644
--- a/packages/components/src/components/navigation-item/model.ts
+++ b/packages/components/src/components/navigation-item/model.ts
@@ -7,6 +7,8 @@ import {
 	IconProps,
 	InitializedState,
 	NavigationBackButtonProps,
+	ShowIconProps,
+	TextProps,
 	WidthProps
 } from '../../shared/model';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
@@ -39,7 +41,9 @@ export type DBNavigationItemProps = DBNavigationItemDefaultProps &
 	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps &
-	NavigationBackButtonProps;
+	NavigationBackButtonProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBNavigationItemDefaultState = {
 	handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 240cae8d706..3df164e8827 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -9,7 +9,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import DBButton from '../button/button.lite';
-import { cls, getBooleanAsString, uuid } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon, uuid } from '../../utils';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
@@ -97,9 +97,14 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-active={props.active}
 			aria-disabled={getBooleanAsString(props.disabled)}>
-			<Show when={!state.hasSubNavigation}>{props.children}</Show>
+			<Show when={!state.hasSubNavigation}>
+				<Show when={props.text} else={props.children}>
+					{props.text}
+				</Show>
+			</Show>
 
 			<Show when={state.hasSubNavigation}>
 				<button
@@ -110,7 +115,9 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 					onClick={(event: ClickEvent<HTMLButtonElement>) =>
 						state.handleClick(event)
 					}>
-					{props.children}
+					<Show when={props.text} else={props.children}>
+						{props.text}
+					</Show>
 				</button>
 
 				{/* TODO: Consider using popover here */}
diff --git a/packages/components/src/components/notification/model.ts b/packages/components/src/components/notification/model.ts
index 6e1c1606cf8..6607a50b8cd 100644
--- a/packages/components/src/components/notification/model.ts
+++ b/packages/components/src/components/notification/model.ts
@@ -6,7 +6,9 @@ import {
 	IconProps,
 	InnerCloseButtonProps,
 	PopoverProps,
-	SemanticProps
+	SemanticProps,
+	ShowIconProps,
+	TextProps
 } from '../../shared/model';
 
 export const NotificationVariantList = [
@@ -81,7 +83,9 @@ export type DBNotificationProps = DBNotificationDefaultProps &
 	IconProps &
 	SemanticProps &
 	InnerCloseButtonProps &
-	PopoverProps;
+	PopoverProps &
+	ShowIconProps &
+	TextProps;
 
 export type DBNotificationDefaultState = {};
 
diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx
index 332f7f9bfba..4929c3bfac0 100644
--- a/packages/components/src/components/notification/notification.lite.tsx
+++ b/packages/components/src/components/notification/notification.lite.tsx
@@ -2,7 +2,7 @@ import { Show, Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBNotificationProps, DBNotificationState } from './model';
 import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls } from '../../utils';
+import { cls, getHideIcon } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -28,12 +28,17 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>
 				<header>{props.headline}</header>
 			</Show>
-			<p>{props.children}</p>
+			<p>
+				<Show when={props.text} else={props.children}>
+					{props.text}
+				</Show>
+			</p>
 			<Show when={props.timestamp}>
 				<span>{props.timestamp}</span>
 			</Show>
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index fa81b5fb72c..4ff4dcf98ca 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -101,10 +101,9 @@ export default function DBRadio(props: DBRadioProps) {
 					state.handleFocus(event)
 				}
 			/>
-			<Show when={props.label}>
-				<span>{props.label}</span>
+			<Show when={props.label} else={props.children}>
+				{props.label}
 			</Show>
-			{props.children}
 		</label>
 	);
 }
diff --git a/packages/components/src/components/select/model.ts b/packages/components/src/components/select/model.ts
index fd3439e0627..a371cc606ed 100644
--- a/packages/components/src/components/select/model.ts
+++ b/packages/components/src/components/select/model.ts
@@ -13,7 +13,8 @@ import {
 	IconProps,
 	InitializedState,
 	InputEventProps,
-	InputEventState
+	InputEventState,
+	ShowIconProps
 } from '../../shared/model';
 
 export type DBSelectDefaultProps = {
@@ -68,7 +69,8 @@ export type DBSelectProps = DBSelectDefaultProps &
 	InputEventProps<HTMLSelectElement> &
 	FormProps &
 	IconProps &
-	FormMessageProps;
+	FormMessageProps &
+	ShowIconProps;
 
 export type DBSelectDefaultState = {
 	_placeholderId: string;
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 074584ba0ac..ace5f832d30 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -9,7 +9,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
-import { cls, delay, hasVoiceOver, uuid } from '../../utils';
+import { cls, delay, getHideIcon, hasVoiceOver, uuid } from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -26,7 +26,10 @@ import {
 	InputEvent,
 	InteractionEvent
 } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 
 useMetadata({
 	angular: {
@@ -163,7 +166,8 @@ export default function DBSelect(props: DBSelectProps) {
 		<div
 			class={cls('db-select', props.className)}
 			data-variant={props.variant}
-			data-icon={props.icon}>
+			data-icon={props.icon}
+			data-hide-icon={getHideIcon(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
 				aria-invalid={props.customValidity === 'invalid'}
@@ -238,7 +242,7 @@ export default function DBSelect(props: DBSelectProps) {
 			<span id={state._placeholderId}>
 				{props.placeholder ?? props.label}
 			</span>
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index 2d5cc3e69c7..4470a8c6e57 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -1,5 +1,6 @@
 import {
 	onMount,
+	Show,
 	useMetadata,
 	useRef,
 	useStore,
@@ -95,7 +96,9 @@ export default function DBSwitch(props: DBSwitchProps) {
 					state.handleFocus(event)
 				}
 			/>
-			{props.children}
+			<Show when={props.label} else={props.children}>
+				{props.label}
+			</Show>
 		</label>
 	);
 }
diff --git a/packages/components/src/components/tab-item/model.ts b/packages/components/src/components/tab-item/model.ts
index fceaf3a9f9d..21592776933 100644
--- a/packages/components/src/components/tab-item/model.ts
+++ b/packages/components/src/components/tab-item/model.ts
@@ -7,7 +7,8 @@ import {
 	GlobalState,
 	IconAfterProps,
 	IconProps,
-	InitializedState
+	InitializedState,
+	ShowIconProps
 } from '../../shared/model';
 
 export type DBTabItemDefaultProps = {
@@ -36,7 +37,8 @@ export type DBTabItemProps = GlobalProps &
 	IconAfterProps &
 	ActiveProps &
 	AriaControlsProps &
-	ChangeEventProps<HTMLInputElement>;
+	ChangeEventProps<HTMLInputElement> &
+	ShowIconProps;
 
 export type DBTabItemDefaultState = {
 	_selected: boolean;
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index a29a50c13bb..3235e1e8ea5 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import type { DBTabItemProps, DBTabItemState } from './model';
-import { cls } from '../../utils';
+import { cls, getHideIcon } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -57,6 +57,8 @@ export default function DBTabItem(props: DBTabItemProps) {
 				htmlFor={props.id}
 				data-icon={props.icon}
 				data-icon-after={props.iconAfter}
+				data-hide-icon={getHideIcon(props.showIcon)}
+				data-hide-icon-after={getHideIcon(props.showIcon)}
 				data-no-text={props.noText}>
 				<input
 					disabled={props.disabled}
diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts
index 65089107187..1a6b94cf68f 100644
--- a/packages/components/src/components/tag/model.ts
+++ b/packages/components/src/components/tag/model.ts
@@ -5,7 +5,8 @@ import {
 	IconProps,
 	InitializedState,
 	OverflowProps,
-	SemanticProps
+	SemanticProps,
+	ShowIconProps
 } from '../../shared/model';
 
 export const TagBehaviourList = ['static', 'removable'] as const;
@@ -50,7 +51,8 @@ export type DBTagProps = DBTagDefaultProps &
 	IconProps &
 	SemanticProps &
 	OverflowProps &
-	EmphasisProps;
+	EmphasisProps &
+	ShowIconProps;
 
 export type DBTagDefaultState = {
 	getRemoveButtonText: () => string;
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index 1e29e3c10e6..32f18d4f70c 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -7,7 +7,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBTagProps, DBTagState } from './model';
-import { cls, getBooleanAsString } from '../../utils';
+import { cls, getBooleanAsString, getHideIcon } from '../../utils';
 
 useMetadata({});
 
@@ -57,6 +57,7 @@ export default function DBTag(props: DBTagProps) {
 			data-semantic={props.semantic}
 			data-emphasis={props.emphasis}
 			data-icon={props.icon}
+			data-hide-icon={getHideIcon(props.showIcon)}
 			data-no-text={getBooleanAsString(props.noText)}
 			data-overflow={getBooleanAsString(props.overflow)}>
 			{props.children}
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
index e60daea082f..297ae052baf 100644
--- a/packages/components/src/components/tag/tag.scss
+++ b/packages/components/src/components/tag/tag.scss
@@ -130,8 +130,10 @@
 					background-color: colors.$db-brand-bg-basic-transparent-full-default;
 				}
 
-				&::before {
-					--db-icon: "";
+				&:not([data-hide-icon-before="true"]) {
+					&::before {
+						content: none;
+					}
 				}
 			}
 		}
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index 9ea3046369e..cb715d49e4d 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -22,7 +22,10 @@ import {
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
 import { ChangeEvent, InputEvent, InteractionEvent } from '../../shared/model';
-import { handleFrameworkEvent } from '../../utils/form-components';
+import {
+	handleFrameworkEvent,
+	messageVisible
+} from '../../utils/form-components';
 
 useMetadata({});
 
@@ -174,7 +177,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 				cols={props.cols}
 			/>
 
-			<Show when={props.message}>
+			<Show when={messageVisible(props.message, props.showMessage)}>
 				<DBInfotext
 					size="small"
 					icon={props.messageIcon}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 01be8600b09..98884aff78e 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -62,6 +62,14 @@ export type IconProps = {
 	icon?: IconTypes;
 };
 
+export type ShowIconProps = {
+	/**
+	 * Enables or disables the visibility of the icon. The default value depends on the component.
+	 * For many components this property is optional to reflect figma properties.
+	 */
+	showIcon?: boolean;
+};
+
 export type IconAfterProps = {
 	/**
 	 * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
@@ -383,6 +391,11 @@ export type FormMessageProps = {
 	 * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 	 */
 	autocomplete?: string | AutoCompleteType;
+
+	/**
+	 * Enables or disables the visibility of the message.
+	 */
+	showMessage?: boolean;
 };
 
 export type FormState = {
@@ -468,6 +481,9 @@ export type LinkProps = {
 	 * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
 	 */
 	selected?: boolean;
+};
+
+export type TextProps = {
 	/**
 	 * Alternative for default slot/children.
 	 */
diff --git a/packages/components/src/utils/form-components.ts b/packages/components/src/utils/form-components.ts
index efac6c24ab4..229ed71915b 100644
--- a/packages/components/src/utils/form-components.ts
+++ b/packages/components/src/utils/form-components.ts
@@ -10,6 +10,12 @@ export const handleFrameworkEvent = (
 	// ANGULAR: component.writeValue(event.target[modelValue]);
 };
 
-export default {
-	handleFrameworkEvent
+export const messageVisible = (message?: string, showMessage?: boolean) => {
+	if (showMessage === undefined) {
+		return !!message;
+	} else {
+		return showMessage && message;
+	}
 };
+
+export default { messageVisible, handleFrameworkEvent };
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
index e93d79feeb8..b4eb8464997 100644
--- a/packages/components/src/utils/index.ts
+++ b/packages/components/src/utils/index.ts
@@ -248,6 +248,7 @@ export const enableCustomElementAttributePassing = (
  * if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
  * @param originBool Some boolean to convert to string
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getBooleanAsString = (originBool?: boolean): any => {
 	if (originBool) {
 		return String(originBool);
@@ -256,6 +257,15 @@ export const getBooleanAsString = (originBool?: boolean): any => {
 	return originBool;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getHideIcon = (showIcon?: boolean): any => {
+	if (showIcon === undefined) {
+		return undefined;
+	}
+
+	return getBooleanAsString(!showIcon);
+};
+
 export default {
 	filterPassingProps,
 	cls,
@@ -269,5 +279,6 @@ export default {
 	hasVoiceOver,
 	delay,
 	enableCustomElementAttributePassing,
-	getBooleanAsString
+	getBooleanAsString,
+	getHideIcon
 };
diff --git a/packages/foundations/scss/icons/_icon-helpers.scss b/packages/foundations/scss/icons/_icon-helpers.scss
index 0bf96168509..4ddd55bcb3b 100644
--- a/packages/foundations/scss/icons/_icon-helpers.scss
+++ b/packages/foundations/scss/icons/_icon-helpers.scss
@@ -60,22 +60,24 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 
 // Icon SCSS mixin
 @mixin set-icon($icon: "", $position: "before") {
-	&::#{$position} {
-		@if $icon != "" {
-			@extend %icon;
+	&:not([data-hide-icon-#{$position}="true"]) {
+		&::#{$position} {
+			@if $icon != "" {
+				@extend %icon;
 
-			@if $position == "before" {
-				--db-icon: "#{$icon}";
+				@if $position == "before" {
+					--db-icon: "#{$icon}";
 
-				margin-inline-end: $default-icon-margin-end;
-			}
+					margin-inline-end: $default-icon-margin-end;
+				}
 
-			@if $position == "after" {
-				--db-icon-after: "#{$icon}";
+				@if $position == "after" {
+					--db-icon-after: "#{$icon}";
 
-				@include icon-content($default-icon-content-after);
+					@include icon-content($default-icon-content-after);
 
-				margin-inline-start: $default-icon-margin-start;
+					margin-inline-start: $default-icon-margin-start;
+				}
 			}
 		}
 	}
diff --git a/packages/foundations/scss/icons/include.scss b/packages/foundations/scss/icons/include.scss
index ccd443f4b80..8053120accf 100644
--- a/packages/foundations/scss/icons/include.scss
+++ b/packages/foundations/scss/icons/include.scss
@@ -67,6 +67,8 @@
 	}
 }
 
+[data-hide-icon="true"],
+[data-hide-icon-before="true"],
 [data-icon="none"],
 [data-icon-before="none"] {
 	&::before {
@@ -86,6 +88,7 @@
 	}
 }
 
+[data-hide-icon-after="true"],
 [data-icon-after="none"] {
 	&::after {
 		content: none;
diff --git a/showcases/angular-showcase/src/app/components/link/link.component.html b/showcases/angular-showcase/src/app/components/link/link.component.html
index e2652fae756..35d43944f1e 100644
--- a/showcases/angular-showcase/src/app/components/link/link.component.html
+++ b/showcases/angular-showcase/src/app/components/link/link.component.html
@@ -16,6 +16,7 @@
 			[disabled]="exampleProps?.disabled"
 			[size]="exampleProps?.size"
 			[content]="exampleProps?.content"
+			[showIcon]="exampleProps?.showIcon"
 			>{{ exampleName }}</db-link
 		>
 	</ng-template>
diff --git a/showcases/next-showcase/tsconfig.json b/showcases/next-showcase/tsconfig.json
index 55a12c9efc0..2e8cd0fc7f5 100644
--- a/showcases/next-showcase/tsconfig.json
+++ b/showcases/next-showcase/tsconfig.json
@@ -13,7 +13,8 @@
 		"isolatedModules": true,
 		"jsx": "preserve",
 		"strictNullChecks": true,
-		"downlevelIteration": true
+		"downlevelIteration": true,
+		"target": "ES2017"
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
 	"exclude": ["node_modules"]
diff --git a/showcases/react-showcase/src/components/default-component.tsx b/showcases/react-showcase/src/components/default-component.tsx
index bc5d7ecf106..efa453b6605 100644
--- a/showcases/react-showcase/src/components/default-component.tsx
+++ b/showcases/react-showcase/src/components/default-component.tsx
@@ -6,6 +6,10 @@ import type {
 	ReactDefaultComponentVariants
 } from '../../../shared/react-default-component-data';
 
+const redirectURLSearchParams = process?.env?.REDIRECT_URL_SEARCH_PARAMS
+	? process.env.REDIRECT_URL_SEARCH_PARAMS === 'true'
+	: true;
+
 const VariantList = ({
 	name,
 	examples,
@@ -20,6 +24,10 @@ const VariantList = ({
 
 	const [open, setOpen] = useState<boolean>();
 
+	const validExamples = examples.filter(
+		(example) => redirectURLSearchParams || !example.experimental
+	);
+
 	return (
 		<DBCard
 			className="variants-card db-code-docs"
@@ -28,7 +36,7 @@ const VariantList = ({
 				role={role}
 				aria-label={role ? name : undefined}
 				className="variants-list">
-				{examples.map((example, exampleIndex) => (
+				{validExamples.map((example, exampleIndex) => (
 					<div
 						key={`${example.name}-${exampleIndex}`}
 						style={example.style}
@@ -70,9 +78,6 @@ const DefaultComponent = ({
 	isSubComponent,
 	componentName
 }: ReactDefaultComponentProps) => {
-	const redirectURLSearchParams = process?.env?.REDIRECT_URL_SEARCH_PARAMS
-		? process.env.REDIRECT_URL_SEARCH_PARAMS === 'true'
-		: true;
 	const pageName = useQuery(redirectURLSearchParams)[4];
 	const color = useQuery(redirectURLSearchParams)[2];
 
@@ -129,22 +134,30 @@ const DefaultComponent = ({
 		<>
 			<div className="default-container">
 				<HeadlineTag>{title}</HeadlineTag>
-				{variants?.map((variant, index) => (
-					<div key={`${variant.name}-${index}`}>
-						<DBDivider></DBDivider>
-						<DBLink
-							className="link-headline"
-							content="external"
-							target="_blank"
-							onClick={(event) => {
-								openVariantInNewWindow(event, variant.name);
-							}}
-							href={getHref(variant.name)}>
-							{variant.name}
-						</DBLink>
-						<VariantList {...variant} color={color} />
-					</div>
-				))}
+				{variants
+					?.filter(
+						(variant) =>
+							redirectURLSearchParams ||
+							variant.examples.find(
+								(example) => !example.experimental
+							)
+					)
+					.map((variant, index) => (
+						<div key={`${variant.name}-${index}`}>
+							<DBDivider></DBDivider>
+							<DBLink
+								className="link-headline"
+								content="external"
+								target="_blank"
+								onClick={(event) => {
+									openVariantInNewWindow(event, variant.name);
+								}}
+								href={getHref(variant.name)}>
+								{variant.name}
+							</DBLink>
+							<VariantList {...variant} color={color} />
+						</div>
+					))}
 			</div>
 			{subComponent}
 		</>
diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
index 7bc407f1470..e4fbb664ee7 100644
--- a/showcases/react-showcase/src/components/form/index.tsx
+++ b/showcases/react-showcase/src/components/form/index.tsx
@@ -277,7 +277,7 @@ const FormComponent = () => {
 				<p>
 					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
 					diam nonumy eirmod tempor{' '}
-					<DBLink variant="inline" href="#">
+					<DBLink showIcon={false} href="#">
 						invidunt
 					</DBLink>{' '}
 					ut labore et dolore magna aliquyam erat, sed diam voluptua.
@@ -285,7 +285,7 @@ const FormComponent = () => {
 					Stet clita kasd gubergren, no sea takimata sanctus est Lorem
 					ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
 					sadipscing elitr, sed diam nonumy eirmod tempor{' '}
-					<DBLink variant="inline" href="#">
+					<DBLink showIcon={false} href="#">
 						labore et dolore magna aliquyam erat, sed diam voluptua.
 						At vero eos et accusam et justo duo dolores et ea rebum.
 						Stet
@@ -447,6 +447,21 @@ const FormComponent = () => {
 						Beschreibungstext
 					</DBTooltip>
 				</DBButton>
+
+				<div>
+					<DBTag>
+						<DBButton>Test</DBButton>
+					</DBTag>
+					<DBTag>
+						<DBLink>Test</DBLink>
+					</DBTag>
+					<DBTag>
+						<DBRadio>Test</DBRadio>
+					</DBTag>
+					<DBTag>
+						<DBCheckbox>Test</DBCheckbox>
+					</DBTag>
+				</div>
 			</div>
 		</div>
 	);
diff --git a/showcases/react-showcase/src/components/link/index.tsx b/showcases/react-showcase/src/components/link/index.tsx
index 1026bb65200..fa9c12e7d90 100644
--- a/showcases/react-showcase/src/components/link/index.tsx
+++ b/showcases/react-showcase/src/components/link/index.tsx
@@ -11,14 +11,16 @@ const getLink = ({
 	disabled,
 	size,
 	content,
-	children
+	children,
+	showIcon
 }: DBLinkProps) => (
 	<DBLink
 		href={href}
 		variant={variant}
 		disabled={disabled}
 		size={size}
-		content={content}>
+		content={content}
+		showIcon={showIcon}>
 		{children}
 	</DBLink>
 );
diff --git a/showcases/shared/default-component-data.ts b/showcases/shared/default-component-data.ts
index f157d318f0a..791857481de 100644
--- a/showcases/shared/default-component-data.ts
+++ b/showcases/shared/default-component-data.ts
@@ -1,5 +1,6 @@
 export type DefaultComponentExample = {
 	name?: string;
+	experimental?: boolean;
 	example?: any;
 	style?: {
 		display?: string;
diff --git a/showcases/shared/input.json b/showcases/shared/input.json
index faef42f1620..d287c86f1d5 100644
--- a/showcases/shared/input.json
+++ b/showcases/shared/input.json
@@ -288,6 +288,7 @@
 			},
 			{
 				"name": "Datalist",
+				"experimental": true,
 				"props": {
 					"label": "Label",
 					"dataList": true
@@ -295,6 +296,7 @@
 			},
 			{
 				"name": "File",
+				"experimental": true,
 				"props": {
 					"label": "Label",
 					"type": "file"
@@ -403,6 +405,7 @@
 			},
 			{
 				"name": "Datalist",
+				"experimental": true,
 				"props": {
 					"label": "Label",
 					"variant": "floating",
@@ -411,6 +414,7 @@
 			},
 			{
 				"name": "File",
+				"experimental": true,
 				"props": {
 					"label": "Label",
 					"type": "file",
diff --git a/showcases/shared/link.json b/showcases/shared/link.json
index 53c845c12a5..2dd054920df 100644
--- a/showcases/shared/link.json
+++ b/showcases/shared/link.json
@@ -94,6 +94,14 @@
 					"href": "#",
 					"content": "external"
 				}
+			},
+			{
+				"name": "Show Icon",
+				"props": {
+					"href": "#",
+					"content": "external",
+					"showIcon": false
+				}
 			}
 		]
 	}
diff --git a/showcases/vue-showcase/src/components/link/Link.vue b/showcases/vue-showcase/src/components/link/Link.vue
index b3ea5aa1c6c..21585262043 100644
--- a/showcases/vue-showcase/src/components/link/Link.vue
+++ b/showcases/vue-showcase/src/components/link/Link.vue
@@ -15,6 +15,7 @@ import { DBLink } from "../../../../../output/vue/src";
 				:disabled="exampleProps?.disabled"
 				:size="exampleProps?.size"
 				:content="exampleProps?.content"
+				:showIcon="exampleProps?.showIcon"
 			>
 				{{ exampleName }}
 			</DBLink>