diff --git a/packages/demo/public/delete_icon.svg b/packages/demo/public/delete_icon.svg
new file mode 100644
index 00000000..917e1d65
--- /dev/null
+++ b/packages/demo/public/delete_icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.79289 7.49998L4.14645 4.85353L4.85355 4.14642L7.5 6.79287L10.1464 4.14642L10.8536 4.85353L8.20711 7.49998L10.8536 10.1464L10.1464 10.8535L7.5 8.20708L4.85355 10.8535L4.14645 10.1464L6.79289 7.49998Z" fill="#ffffff"/>
+</svg>
diff --git a/packages/demo/public/options.json b/packages/demo/public/options.json
index 262f46f5..d5e74d62 100644
--- a/packages/demo/public/options.json
+++ b/packages/demo/public/options.json
@@ -1,5 +1,6 @@
 {
     "iconOptions": {
+        "deleteUrl": "delete_icon.svg",
         "infoUrl": "info-circle-svgrepo-com.svg",
         "selectAll": {
             "text": "Add all"
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
index ce2674da..34dbaa7d 100644
--- a/packages/demo/src/ccp.css
+++ b/packages/demo/src/ccp.css
@@ -307,15 +307,31 @@ lens-search-bar-multiple::part(info-button-dialogue) {
   text-align: left;
 }
 
-lens-search-bar-multiple::part(query-delete-button-item) {
-  border-color: var(--white);
+lens-search-bar::part(delete-button-icon-item), 
+lens-search-bar-multiple::part(delete-button-icon-item) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(-1px, -1px);
+  width: 20px;
 }
 
-lens-search-bar-multiple::part(query-delete-button-group) {
-  background-color: var(--white);
-  border-color: var(--white);
+lens-search-bar::part(delete-button-icon-group), 
+lens-search-bar-multiple::part(delete-button-icon) {
+  filter: invert(41%) sepia(43%) saturate(4610%) hue-rotate(357deg) brightness(96%) contrast(90%);
+  transform: translate(0px, 2px);
+}
+
+lens-search-bar::part(delete-button-icon),
+lens-search-bar-multiple::part(delete-button-icon-value) {
+  transform: translate(-1px, -1px);
+  width: 20px;
+}
+
+lens-search-bar::part(delete-button-icon):hover,
+lens-search-bar-multiple::part(delete-button-icon-value):hover {
+  filter: invert(38%) sepia(78%) saturate(1321%) hue-rotate(352deg) brightness(92%) contrast(99%);
 }
 
+
 lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
@@ -326,7 +342,6 @@ lens-search-button::part(lens-search-button):hover {
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
-  transform: translateX(1px);
 }
 
 /**
diff --git a/packages/lib/src/components/Options.wc.svelte b/packages/lib/src/components/Options.wc.svelte
index f2bc28fb..85da93a3 100644
--- a/packages/lib/src/components/Options.wc.svelte
+++ b/packages/lib/src/components/Options.wc.svelte
@@ -35,6 +35,12 @@
                     ) {
                         store.set("infoUrl", options.iconOptions.infoUrl);
                     }
+                    if (
+                        "deleteUrl" in options.iconOptions &&
+                        typeof options.iconOptions["deleteUrl"] === "string"
+                    ) {
+                        store.set("deleteUrl", options.iconOptions.deleteUrl);
+                    }
                     if (
                         "selectAll" in options.iconOptions &&
                         typeof options.iconOptions["selectAll"] === "object" &&
diff --git a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
index 70bba09d..6baff648 100644
--- a/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
+++ b/packages/lib/src/components/buttons/StoreDeleteButtonComponent.svelte
@@ -4,9 +4,12 @@
         removeItemFromQuery,
         removeValueFromQuery,
     } from "../../stores/query";
+    import { iconStore } from "../../stores/icons";
     import type { QueryItem } from "../../types/queryData";
     export let itemToDelete: { type: string; index: number; item?: QueryItem };
 
+    $: deleteUrl = $iconStore.get("deleteUrl");
+
     const { type, index, item } = itemToDelete;
 
     /**
@@ -34,5 +37,15 @@
 
 <button
     part="query-delete-button query-delete-button-{type}"
-    on:click={deleteItem}>&#x2715;</button
+    on:click={deleteItem}
 >
+    {#if deleteUrl}
+        <img
+            part="delete-button-icon delete-button-icon-{type}"
+            src={deleteUrl}
+            alt="delete icon"
+        />
+    {:else}
+        &#x2715;
+    {/if}
+</button>
diff --git a/packages/lib/src/styles/searchbars.css b/packages/lib/src/styles/searchbars.css
index 4d45a723..09b8412a 100644
--- a/packages/lib/src/styles/searchbars.css
+++ b/packages/lib/src/styles/searchbars.css
@@ -204,7 +204,7 @@ lens-search-bar-multiple::part(query-delete-button-item) {
   position: absolute;
   top: -6px;
   right: -10px;
-  border: solid 2px var(--white);
+  border: solid 1px var(--white);
 }
 
 lens-search-bar::part(query-delete-button-group),