diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index dcb07c0a219..b25034c72ca 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -15,7 +15,7 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-show-icon={getBooleanAsString(props.showIcon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
 			<Show when={props.text} else={props.children}>
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 6d2281301fa..9a23483f813 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -27,7 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-size={props.size}
 			data-state={props.state}
 			data-width={props.width}
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index 14badba22a3..bfe537affc8 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -19,7 +19,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-show-icon={getBooleanAsString(props.showIcon)}>
+			data-hide-icon-after={getBooleanAsString(!props.showIcon)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 5379f5ada5e..ad2c6ac05e8 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -171,7 +171,7 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-icon={props.icon}
 			data-icon-after={props.iconAfter}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index b7975dcc7a2..6439537bfbf 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -38,7 +38,7 @@ export default function DBLink(props: DBLinkProps) {
 			aria-label={props.label}
 			aria-current={props.current}
 			data-size={props.size}
-			data-show-icon={getBooleanAsString(props.showIcon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
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 ab1b500142e..39cb5b47433 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -97,7 +97,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-active={props.active}
 			aria-disabled={getBooleanAsString(props.disabled)}>
 			<Show when={!state.hasSubNavigation}>
diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx
index 3a2afa00e00..eaf1a823d34 100644
--- a/packages/components/src/components/notification/notification.lite.tsx
+++ b/packages/components/src/components/notification/notification.lite.tsx
@@ -28,7 +28,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 4ec245c62f4..858f4f3143a 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -173,7 +173,7 @@ export default function DBSelect(props: DBSelectProps) {
 			class={cls('db-select', props.className)}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}>
+			data-hide-icon={getBooleanAsString(!props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
 				aria-invalid={props.customValidity === 'invalid'}
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 8c7dbedfac6..031ed4960ac 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -57,9 +57,7 @@ export default function DBTabItem(props: DBTabItemProps) {
 				htmlFor={props.id}
 				data-icon={props.icon}
 				data-icon-after={props.iconAfter}
-				data-show-icon={getBooleanAsString(
-					props.showIcon ?? !!props.icon
-				)}
+				data-hide-icon={getBooleanAsString(!props.showIcon)}
 				data-no-text={props.noText}>
 				<input
 					disabled={props.disabled}
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index e2d3bbd59a2..ba43ec713f3 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -57,7 +57,7 @@ export default function DBTag(props: DBTagProps) {
 			data-semantic={props.semantic}
 			data-emphasis={props.emphasis}
 			data-icon={props.icon}
-			data-show-icon={getBooleanAsString(props.showIcon ?? !!props.icon)}
+			data-hide-icon={getBooleanAsString(!props.showIcon)}
 			data-no-text={getBooleanAsString(props.noText)}
 			data-overflow={getBooleanAsString(props.overflow)}>
 			{props.children}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 258ed730b58..25b58277d8e 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -65,6 +65,7 @@ export type IconProps = {
 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;
 };
diff --git a/packages/foundations/scss/icons/include.scss b/packages/foundations/scss/icons/include.scss
index 6932809d48f..766999a1da0 100644
--- a/packages/foundations/scss/icons/include.scss
+++ b/packages/foundations/scss/icons/include.scss
@@ -67,7 +67,7 @@
 	}
 }
 
-[data-show-icon="false"],
+[data-hide-icon="true"],
 [data-icon="none"],
 [data-icon-before="none"] {
 	&::before {
@@ -87,7 +87,7 @@
 	}
 }
 
-[data-show-icon="false"],
+[data-hide-icon-after="true"],
 [data-icon-after="none"] {
 	&::after {
 		content: none;