diff --git a/Build/Sources/TypeScript/backend/input/clearable.ts b/Build/Sources/TypeScript/backend/input/clearable.ts
index f33c4ea858a35169791c3e7f9dcdd02d2aa4e656..0dc0b04d845ae48daf2d69a0be0c4e8bb1d154f0 100644
--- a/Build/Sources/TypeScript/backend/input/clearable.ts
+++ b/Build/Sources/TypeScript/backend/input/clearable.ts
@@ -32,20 +32,17 @@ class Clearable {
     // icon should be updated.
     //
     // https://github.com/typo3/typo3.icons
-    const closeIcon =
-      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
+    const closeIcon = `
+      <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
         <span class="icon-markup">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                <path
-                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0
-                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7
-                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5
-                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7
-                    0l.7.7c.2.2.2.5 0 .7z"
-                    class="icon-color"/>
-            </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+            <g fill="currentColor">
+              <path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/>
+            </g>
+          </svg>
         </span>
-    </span>`;
+      </span>
+    `;
 
     const closeButton = document.createElement('button');
     closeButton.type = 'button';
diff --git a/Build/Sources/TypeScript/install/renderable/clearable.ts b/Build/Sources/TypeScript/install/renderable/clearable.ts
index 5c523ae3d410cc19e9af82ee1f53d878ec5084f0..d22e1fce60c61f7e93bcb6c8876483fcf7d23c80 100644
--- a/Build/Sources/TypeScript/install/renderable/clearable.ts
+++ b/Build/Sources/TypeScript/install/renderable/clearable.ts
@@ -32,20 +32,17 @@ class Clearable {
     // icon should be updated.
     //
     // https://github.com/typo3/typo3.icons
-    const closeIcon =
-      `<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
+    const closeIcon = `
+      <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">
         <span class="icon-markup">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-                <path
-                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0
-                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7
-                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5
-                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7
-                    0l.7.7c.2.2.2.5 0 .7z"
-                    class="icon-color"/>
-              </svg>
-            </span>
-          </span>`;
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+            <g fill="currentColor">
+              <path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/>
+            </g>
+          </svg>
+        </span>
+      </span>
+    `;
 
     const closeButton = document.createElement('button');
     closeButton.type = 'button';
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/input/clearable.js b/typo3/sysext/backend/Resources/Public/JavaScript/input/clearable.js
index 5caddf26eb0a20d286be7caaa565e99fafba938b..f74822f504d3fd214eb3d813bab71e24c17aa230 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/input/clearable.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/input/clearable.js
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-class Clearable{constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n            </svg>\n        </span>\n    </span>',e.style.visibility="hidden",e.classList.add("close"),e}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");this.classList.add("form-control-clearable");const t=document.createElement("div");t.classList.add("form-control-clearable-wrapper"),this.parentNode.insertBefore(t,this),t.appendChild(this);const n=Clearable.createCloseButton(),s=()=>{n.style.visibility=0===this.value.length?"hidden":"visible"};n.addEventListener("click",(t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),s()})),t.appendChild(n),this.addEventListener("focus",s),this.addEventListener("keyup",s),s(),this.isClearable=!0}}}export default new Clearable;
\ No newline at end of file
+class Clearable{constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='\n      <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n            <g fill="currentColor">\n              <path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/>\n            </g>\n          </svg>\n        </span>\n      </span>\n    ',e.style.visibility="hidden",e.classList.add("close"),e}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.isClearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");this.classList.add("form-control-clearable");const t=document.createElement("div");t.classList.add("form-control-clearable-wrapper"),this.parentNode.insertBefore(t,this),t.appendChild(this);const n=Clearable.createCloseButton(),s=()=>{n.style.visibility=0===this.value.length?"hidden":"visible"};n.addEventListener("click",(t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),s()})),t.appendChild(n),this.addEventListener("focus",s),this.addEventListener("keyup",s),s(),this.isClearable=!0}}}export default new Clearable;
\ No newline at end of file
diff --git a/typo3/sysext/install/Resources/Public/JavaScript/renderable/clearable.js b/typo3/sysext/install/Resources/Public/JavaScript/renderable/clearable.js
index e90caeef460f1bcfe15ca16461989a28c2717c2e..be7026850c29b02ff8da48e7f27b17e94efe6d0c 100644
--- a/typo3/sysext/install/Resources/Public/JavaScript/renderable/clearable.js
+++ b/typo3/sysext/install/Resources/Public/JavaScript/renderable/clearable.js
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-class Clearable{constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='<span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n                <path\n                    d="M11.9 5.5L9.4 8l2.5 2.5c.2.2.2.5 0\n                    .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7\n                    0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5\n                    0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7\n                    0l.7.7c.2.2.2.5 0 .7z"\n                    class="icon-color"/>\n              </svg>\n            </span>\n          </span>',e.style.visibility="hidden",e.classList.add("close"),e}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.dataset.clearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");this.classList.add("form-control-clearable");const t=document.createElement("div");t.classList.add("form-control-clearable-wrapper"),this.parentNode.insertBefore(t,this),t.appendChild(this);const n=Clearable.createCloseButton(),a=()=>{n.style.visibility=0===this.value.length?"hidden":"visible"};n.addEventListener("click",(t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),a()})),t.appendChild(n),this.addEventListener("focus",a),this.addEventListener("keyup",a),a(),this.dataset.clearable="true"}}}export default new Clearable;
\ No newline at end of file
+class Clearable{constructor(){"function"!=typeof HTMLInputElement.prototype.clearable&&this.registerClearable()}static createCloseButton(){const e=document.createElement("button");return e.type="button",e.tabIndex=-1,e.innerHTML='\n      <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-close" data-identifier="actions-close">\n        <span class="icon-markup">\n          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n            <g fill="currentColor">\n              <path d="M11.9 5.5 9.4 8l2.5 2.5c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L8 9.4l-2.5 2.5c-.2.2-.5.2-.7 0l-.7-.7c-.2-.2-.2-.5 0-.7L6.6 8 4.1 5.5c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0L8 6.6l2.5-2.5c.2-.2.5-.2.7 0l.7.7c.2.2.2.5 0 .7z"/>\n            </g>\n          </svg>\n        </span>\n      </span>\n    ',e.style.visibility="hidden",e.classList.add("close"),e}registerClearable(){HTMLInputElement.prototype.clearable=function(e={}){if(this.dataset.clearable)return;if("object"!=typeof e)throw new Error("Passed options must be an object, "+typeof e+" given");this.classList.add("form-control-clearable");const t=document.createElement("div");t.classList.add("form-control-clearable-wrapper"),this.parentNode.insertBefore(t,this),t.appendChild(this);const n=Clearable.createCloseButton(),a=()=>{n.style.visibility=0===this.value.length?"hidden":"visible"};n.addEventListener("click",(t=>{t.preventDefault(),this.value="","function"==typeof e.onClear&&e.onClear(this),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})),a()})),t.appendChild(n),this.addEventListener("focus",a),this.addEventListener("keyup",a),a(),this.dataset.clearable="true"}}}export default new Clearable;
\ No newline at end of file