diff --git a/packages/demo/public/delete_icon.svg b/packages/demo/public/delete_icon.svg
index e03a318..917e1d6 100644
--- a/packages/demo/public/delete_icon.svg
+++ b/packages/demo/public/delete_icon.svg
@@ -1,4 +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="#000000"/>
-</svg>
\ No newline at end of file
+<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/src/ccp.css b/packages/demo/src/ccp.css
index ea49cb5..34dbaa7 100644
--- a/packages/demo/src/ccp.css
+++ b/packages/demo/src/ccp.css
@@ -318,9 +318,20 @@ 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);
 }