diff --git a/packages/angular-test-app/src/preview-examples/input-search.ts b/packages/angular-test-app/src/preview-examples/input-search.ts
new file mode 100644
index 00000000000..6e25a486f0f
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/input-search.ts
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+  <form class="needs-validation m-2">
+  <ix-input-group>
+    <span slot="input-start">
+      <ix-icon name="search" size="16"></ix-icon>
+    </span>
+    <input
+      ng-init="verifyStart()"
+      [(ngModel)]="customSearch"
+      name="input"
+      (keyup)="onKey($event)"
+      id="input-string"
+      type="string"
+      class="form-control"
+    />
+    <span slot="input-end">
+      <ix-icon-button
+        (click)="clearInput()"
+        id="clear-button"
+        icon="clear"
+        ghost="{true}"
+        size="16"
+        [style.display]="display"
+      ></ix-icon-button>
+    </span>
+  </ix-input-group>
+</form>
+  `,
+})
+export default class Input {
+  customSearch = ''
+  display = 'none'
+
+  public ngOnInit(): void {
+    if(this.customSearch !== ''){
+      this.display = 'block'
+    }
+ }
+
+  clearInput() {
+    this.customSearch = ''
+    this.display = 'none'
+  }
+
+  onKey(event: any) {
+    event.target.value === '' ? this.display = 'none'
+    : this.display = 'block'
+  }
+}
diff --git a/packages/core/src/components/input-group/input-group.scss b/packages/core/src/components/input-group/input-group.scss
index bf265aae871..d630e18089a 100644
--- a/packages/core/src/components/input-group/input-group.scss
+++ b/packages/core/src/components/input-group/input-group.scss
@@ -28,4 +28,8 @@
   .group-end {
     right: 0px;
   }
+
+  ::slotted(*) {
+    display: flex;
+  }
 }
diff --git a/packages/documentation/docs/controls/input.md b/packages/documentation/docs/controls/input.md
index a1e1f17be4f..78567dc64e3 100644
--- a/packages/documentation/docs/controls/input.md
+++ b/packages/documentation/docs/controls/input.md
@@ -4,21 +4,25 @@ import SourceInput from './../auto-generated/previews/web-component/input.md'
 import SourceInputDisabled from './../auto-generated/previews/web-component/input-disabled.md'
 import SourceInputReadonly from './../auto-generated/previews/web-component/input-readonly.md'
 import SourceInputIcon from './../auto-generated/previews/web-component/input-with-icon.md'
+import SourceInputSearch from './../auto-generated/previews/web-component/input-search.md'
 
 import SourceReactInput from './../auto-generated/previews/react/input.md'
 import SourceReactInputDisabled from './../auto-generated/previews/react/input-disabled.md'
 import SourceReactInputReadonly from './../auto-generated/previews/react/input-readonly.md'
 import SourceReactInputIcon from './../auto-generated/previews/react/input-with-icon.md'
+import SourceReactInputSearch from './../auto-generated/previews/react/input-search.md'
 
 import SourceAngularInput from './../auto-generated/previews/angular/input.ts.md'
 import SourceAngularInputDisabled from './../auto-generated/previews/angular/input-disabled.ts.md'
 import SourceAngularInputReadonly from './../auto-generated/previews/angular/input-readonly.ts.md'
 import SourceAngularInputIcon from './../auto-generated/previews/angular/input-with-icon.ts.md'
+import SourceAngularInputSearch from './../auto-generated/previews/angular/input-search.ts.md'
 
 import SourceVueInput from './../auto-generated/previews/vue/input.md'
 import SourceVueInputDisabled from './../auto-generated/previews/vue/input-disabled.md'
 import SourceVueInputReadonly from './../auto-generated/previews/vue/input-readonly.md'
 import SourceVueInputIcon from './../auto-generated/previews/vue/input-with-icon.md'
+import SourceVueInputSearch from './../auto-generated/previews/vue/input-search.md'
 
 # Input
 
@@ -68,3 +72,15 @@ frameworks={{
   javascript: SourceInputIcon,
   vue: SourceVueInputIcon
 }}></Playground>
+
+### Search
+
+<Playground
+name="input-search"
+hideInitalCodePreview
+frameworks={{
+  react: SourceReactInputSearch,
+  angular: SourceAngularInputSearch,
+  javascript: SourceInputSearch,
+  vue: SourceVueInputSearch
+}}></Playground>
diff --git a/packages/html-test-app/src/preview-examples/input-search.html b/packages/html-test-app/src/preview-examples/input-search.html
new file mode 100644
index 00000000000..6575c609b7b
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/input-search.html
@@ -0,0 +1,51 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Input Search example</title>
+  </head>
+  <body class="theme-brand-dark">
+    <form class="needs-validation m-2">
+      <ix-input-group>
+        <span slot="input-start">
+          <ix-icon name="search" size="16"></ix-icon>
+        </span>
+        <input
+          onInput="toggleClear()"
+          id="input-string"
+          type="string"
+          class="form-control"
+        />
+        <span slot="input-end">
+          <ix-icon-button
+            id="clear-button"
+            icon="clear"
+            ghost="{true}"
+            size="16"
+            onClick="{clearInput()}"
+          ></ix-icon-button>
+        </span>
+      </ix-input-group>
+    </form>
+    <script>
+      toggleClear();
+      function clearInput() {
+        document.getElementById('input-string').value = '';
+        toggleClear();
+      }
+
+      function toggleClear() {
+        const hasContent = document.getElementById('input-string').value !== '';
+        document.getElementById('clear-button').style.display = hasContent
+          ? 'block'
+          : 'none';
+      }
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/react-test-app/src/preview-examples/input-search.tsx b/packages/react-test-app/src/preview-examples/input-search.tsx
new file mode 100644
index 00000000000..c6d517731ee
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/input-search.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { IxIcon, IxIconButton, IxInputGroup } from '@siemens/ix-react';
+import React, { useState } from 'react';
+
+export default () => {
+  const [message, setMessage] = useState('');
+
+  function reset() {
+    setMessage('');
+  }
+
+  let display = message === '' ? 'none' : 'block';
+
+  const handleChange = (event: {
+    target: { value: React.SetStateAction<string> };
+  }) => {
+    setMessage(event.target.value);
+  };
+
+  return (
+    <form className="needs-validation m-2">
+      <IxInputGroup>
+        <span slot="input-start">
+          <IxIcon name="search" size="16"></IxIcon>
+        </span>
+        <input
+          id="input-string"
+          type="string"
+          className="form-control"
+          onChange={handleChange}
+          value={message}
+        />
+        <span slot="input-end">
+          <IxIconButton
+            onClick={reset}
+            id="clear-button"
+            icon="clear"
+            ghost
+            size="16"
+            style={{ display: display }}
+          ></IxIconButton>
+        </span>
+      </IxInputGroup>
+    </form>
+  );
+};
diff --git a/packages/vue-test-app/src/preview-examples/input-search.vue b/packages/vue-test-app/src/preview-examples/input-search.vue
new file mode 100644
index 00000000000..cda8626c3a9
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/input-search.vue
@@ -0,0 +1,39 @@
+/* * SPDX-FileCopyrightText: 2023 Siemens AG * * SPDX-License-Identifier: MIT *
+* This source code is licensed under the MIT license found in the * LICENSE file
+in the root directory of this source tree. */
+<script setup lang="ts">
+import { IxIcon, IxIconButton, IxInputGroup } from '@siemens/ix-vue';
+import { ref } from 'vue';
+
+const text = ref('');
+
+function clearInput() {
+  text.value = '';
+}
+</script>
+
+<template>
+  <form className="needs-validation m-2">
+    <IxInputGroup>
+      <span slot="input-start">
+        <IxIcon name="search" size="16"></IxIcon>
+      </span>
+      <input
+        id="input-string"
+        type="string"
+        className="form-control"
+        v-model="text"
+      />
+      <span slot="input-end">
+        <IxIconButton
+          @click="clearInput"
+          id="clear-button"
+          icon="clear"
+          ghost
+          size="16"
+          :style="[text === '' ? { display: 'none' } : { display: 'block' }]"
+        ></IxIconButton>
+      </span>
+    </IxInputGroup>
+  </form>
+</template>