diff --git a/package-lock.json b/package-lock.json
index 8070e078e471c0..eec16a309ef734 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10389,6 +10389,7 @@
 				"@wordpress/element": "file:packages/element",
 				"@wordpress/hooks": "file:packages/hooks",
 				"@wordpress/i18n": "file:packages/i18n",
+				"@wordpress/icons": "file:packages/icons",
 				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/media-utils": "file:packages/media-utils",
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
index 1b7d75761b7b2e..301f0953d16d1d 100644
--- a/packages/components/src/checkbox-control/index.js
+++ b/packages/components/src/checkbox-control/index.js
@@ -2,12 +2,12 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { Icon, check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import Dashicon from '../dashicon';
 
 export default function CheckboxControl( { label, className, heading, checked, help, onChange, ...props } ) {
 	const instanceId = useInstanceId( CheckboxControl );
@@ -27,7 +27,7 @@ export default function CheckboxControl( { label, className, heading, checked, h
 					aria-describedby={ !! help ? id + '__help' : undefined }
 					{ ...props }
 				/>
-				{ checked ? <Dashicon icon="yes" className="components-checkbox-control__checked" role="presentation" /> : null }
+				{ checked ? <Icon icon={ check } className="components-checkbox-control__checked" role="presentation" /> : null }
 			</span>
 			<label className="components-checkbox-control__label" htmlFor={ id }>
 				{ label }
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index 9909530c373c0d..279093acb72abc 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -63,7 +63,7 @@ $checkbox-input-size-sm: 25px; // width + height for small viewports
 	}
 }
 
-svg.dashicon.components-checkbox-control__checked {
+svg.components-checkbox-control__checked {
 	fill: #fff;
 	cursor: pointer;
 	position: absolute;
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index 5842b840f15534..584a8d5aa90696 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -9,8 +9,9 @@
 	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
 	.dashicon,
 	.components-menu-items__item-icon,
+	svg.components-menu-items__item-icon,
 	> span > svg {
-		margin-right: 5px;
+		margin-right: 4px;
 	}
 
 	.components-menu-items__item-icon {
diff --git a/packages/components/src/menu-items-choice/index.js b/packages/components/src/menu-items-choice/index.js
index 8412c64e4141ff..7fb798486e2046 100644
--- a/packages/components/src/menu-items-choice/index.js
+++ b/packages/components/src/menu-items-choice/index.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { check } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -14,7 +19,7 @@ export default function MenuItemsChoice( {
 			<MenuItem
 				key={ item.value }
 				role="menuitemradio"
-				icon={ isSelected && 'yes' }
+				icon={ isSelected && check }
 				isSelected={ isSelected }
 				shortcut={ item.shortcut }
 				className="components-menu-items-choice"
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 81a03515421a1b..e2bf59fcd15189 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -5,8 +5,4 @@
 	&.has-icon {
 		padding-left: 0.5rem;
 	}
-
-	.dashicon {
-		margin-right: 4px;
-	}
 }
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index b50229d9e1aaee..96b9ae2fb4802d 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -35,6 +35,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/media-utils": "file:../media-utils",
diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js
index 9dc6e3a5a93027..89a2a90d1a4179 100644
--- a/packages/edit-post/src/components/header/feature-toggle/index.js
+++ b/packages/edit-post/src/components/header/feature-toggle/index.js
@@ -10,6 +10,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { MenuItem, withSpokenMessages } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
 
 function FeatureToggle( { onToggle, isActive, label, info, messageActivated, messageDeactivated, speak } ) {
 	const speakMessage = () => {
@@ -22,7 +23,7 @@ function FeatureToggle( { onToggle, isActive, label, info, messageActivated, mes
 
 	return (
 		<MenuItem
-			icon={ isActive && 'yes' }
+			icon={ isActive && check }
 			isSelected={ isActive }
 			onClick={ flow( onToggle, speakMessage ) }
 			role="menuitemcheckbox"
diff --git a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
index c1f4ff42ae98aa..530a645f1dd755 100644
--- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
+++ b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
@@ -4,6 +4,7 @@
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withPluginContext } from '@wordpress/plugins';
+import { check } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ import PluginMoreMenuItem from '../plugin-more-menu-item';
 
 const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) => (
 	<PluginMoreMenuItem
-		icon={ isSelected ? 'yes' : icon }
+		icon={ isSelected ? check : icon }
 		isSelected={ isSelected }
 		role="menuitemcheckbox"
 		onClick={ onClick }
diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index 03b3c7afb72cfd..7988c3f41af705 100644
--- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -23,16 +23,16 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
         />
         <svg
           aria-hidden="true"
-          className="dashicon dashicons-yes components-checkbox-control__checked"
+          className="components-checkbox-control__checked"
           focusable="false"
-          height={20}
+          height={24}
           role="img"
-          viewBox="0 0 20 20"
-          width={20}
+          viewBox="-2 -2 24 24"
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+            d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
           />
         </svg>
       </span>
@@ -81,16 +81,16 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
         />
         <svg
           aria-hidden="true"
-          className="dashicon dashicons-yes components-checkbox-control__checked"
+          className="components-checkbox-control__checked"
           focusable="false"
-          height={20}
+          height={24}
           role="img"
-          viewBox="0 0 20 20"
-          width={20}
+          viewBox="-2 -2 24 24"
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+            d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
           />
         </svg>
       </span>
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index 4444eef5539679..3a9a1760550219 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -1868,16 +1868,16 @@ exports[`Storyshots Components/CheckboxControl All 1`] = `
       />
       <svg
         aria-hidden="true"
-        className="dashicon dashicons-yes components-checkbox-control__checked"
+        className="components-checkbox-control__checked"
         focusable="false"
-        height={20}
+        height={24}
         role="img"
-        viewBox="0 0 20 20"
-        width={20}
+        viewBox="-2 -2 24 24"
+        width={24}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+          d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
         />
       </svg>
     </span>
@@ -1917,16 +1917,16 @@ exports[`Storyshots Components/CheckboxControl Default 1`] = `
       />
       <svg
         aria-hidden="true"
-        className="dashicon dashicons-yes components-checkbox-control__checked"
+        className="components-checkbox-control__checked"
         focusable="false"
-        height={20}
+        height={24}
         role="img"
-        viewBox="0 0 20 20"
-        width={20}
+        viewBox="-2 -2 24 24"
+        width={24}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+          d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
         />
       </svg>
     </span>