diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js b/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
index 33eaec93d0b..ce1f9766445 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/removable-chip.js
@@ -72,7 +72,11 @@ const RemovableChip = ( {
 				className="wc-block-components-chip__remove"
 				{ ...removeProps }
 			>
-				<Icon srcElement={ noAlt } size={ 16 } />
+				<Icon
+					className="wc-block-components-chip__remove-icon"
+					srcElement={ noAlt }
+					size={ 16 }
+				/>
 			</RemoveElement>
 		</Chip>
 	);
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss
index e4d1881092d..729e81e1db2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss
@@ -44,10 +44,10 @@
 		border: 0;
 		appearance: none;
 		padding: 0;
+	}
 
-		> .dashicon {
-			vertical-align: middle;
-		}
+	.wc-block-components-chip__remove-icon {
+		vertical-align: middle;
 	}
 }
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/assets/js/base/components/chip/test/__snapshots__/index.js.snap
index 2a1097e6313..d7f89a5c353 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/chip/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/test/__snapshots__/index.js.snap
@@ -107,7 +107,7 @@ exports[`RemovableChip should render custom aria label 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -149,7 +149,7 @@ exports[`RemovableChip should render default aria label if text is a node 1`] =
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -189,7 +189,7 @@ exports[`RemovableChip should render screen reader text aria label 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -224,7 +224,7 @@ exports[`RemovableChip should render text and the remove button 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -259,7 +259,7 @@ exports[`RemovableChip should render with disabled remove button 1`] = `
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
@@ -295,7 +295,7 @@ exports[`RemovableChip with removeOnAnyClick should be a button when removeOnAny
   >
     <svg
       aria-hidden="true"
-      className="dashicon dashicons-arrow-down-alt2"
+      className="wc-block-components-chip__remove-icon"
       focusable="false"
       height={16}
       role="img"
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
index c71b2624091..e4f1971f2ac 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
@@ -123,7 +123,7 @@ $dropdown-selector-line-height: 18/14;
 		line-height: 1;
 		padding: 0 0 0 0.3em;
 
-		> .dashicon {
+		> svg {
 			display: block;
 		}
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js
index 574eabfcd08..a2fbf8f534d 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/arrow-down-alt2.js
@@ -2,19 +2,13 @@
  * External dependencies
  */
 import { SVG } from 'wordpress-components';
-import classnames from 'classnames';
 
 const Component = ( { className, size = 20, ...extraProps } ) => {
-	const iconClass = classnames(
-		'dashicon',
-		'dashicons-arrow-down-alt2',
-		className
-	);
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
-			className={ iconClass }
+			className={ className }
 			width={ size }
 			height={ size }
 			{ ...extraProps }
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js b/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js
index 47af505ebc5..0b2144becd5 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/no-alt.js
@@ -2,19 +2,13 @@
  * External dependencies
  */
 import { SVG } from 'wordpress-components';
-import classnames from 'classnames';
 
 const Component = ( { className, size, ...extraProps } ) => {
-	const iconClass = classnames(
-		'dashicon',
-		'dashicons-arrow-down-alt2',
-		className
-	);
 	return (
 		<SVG
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 20 20"
-			className={ iconClass }
+			className={ className }
 			width={ size }
 			height={ size }
 			{ ...extraProps }