diff --git a/assets/js/blocks/active-filters/style.scss b/assets/js/blocks/active-filters/style.scss
index f28e2091ff3..30adf7fd4ef 100644
--- a/assets/js/blocks/active-filters/style.scss
+++ b/assets/js/blocks/active-filters/style.scss
@@ -127,6 +127,10 @@
 				max-width: 200px;
 			}
 		}
+
+		> .wc-block-active-filters__list-item .wc-block-active-filters__list-item-name {
+			margin: 9px 0 0;
+		}
 	}
 
 	.wc-block-active-filters__list-item-type {
@@ -151,9 +155,12 @@
 	}
 
 	.wc-block-active-filters__list-item-remove {
-		background: transparent;
+		@include font-size(smaller);
+		background: $gray-200;
 		border: 0;
+		border-radius: 25px;
 		appearance: none;
+		padding: 0;
 		height: 16px;
 		width: 16px;
 		line-height: 16px;
@@ -161,8 +168,13 @@
 		margin: 0 0.5em 0 0;
 		color: currentColor;
 
-		&:hover {
-			color: $gray-600;
+		&:hover,
+		&:focus {
+			background: $gray-600;
+
+			.wc-block-components-chip__remove-icon {
+				fill: #fff;
+			}
 		}
 
 		&:disabled {
diff --git a/assets/js/blocks/active-filters/utils.tsx b/assets/js/blocks/active-filters/utils.tsx
index e99059b7637..7786ebae0b9 100644
--- a/assets/js/blocks/active-filters/utils.tsx
+++ b/assets/js/blocks/active-filters/utils.tsx
@@ -7,6 +7,7 @@ import { RemovableChip } from '@woocommerce/base-components/chip';
 import Label from '@woocommerce/base-components/label';
 import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl } from '@woocommerce/utils';
+import { Icon, closeSmall } from '@wordpress/icons';
 
 /**
  * Format a min/max price range to display.
@@ -108,39 +109,11 @@ export const renderRemovableListItem = ( {
 						className="wc-block-active-filters__list-item-remove"
 						onClick={ removeCallback }
 					>
-						<svg
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<ellipse
-								cx="8"
-								cy="8"
-								rx="8"
-								ry="8"
-								transform="rotate(-180 8 8)"
-								fill="currentColor"
-								fillOpacity="0.7"
-							/>
-							<rect
-								x="10.636"
-								y="3.94983"
-								width="2"
-								height="9.9466"
-								transform="rotate(45 10.636 3.94983)"
-								fill="white"
-							/>
-							<rect
-								x="12.0503"
-								y="11.0209"
-								width="2"
-								height="9.9466"
-								transform="rotate(135 12.0503 11.0209)"
-								fill="white"
-							/>
-						</svg>
+						<Icon
+							className="wc-block-components-chip__remove-icon"
+							icon={ closeSmall }
+							size={ 16 }
+						/>
 						<Label screenReaderLabel={ removeText } />
 					</button>
 					{ prefixedName }