diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
index 684060275a1f..45ca3e5b6a8e 100644
--- a/development/ts-migration-dashboard/files-to-convert.json
+++ b/development/ts-migration-dashboard/files-to-convert.json
@@ -896,7 +896,6 @@
   "ui/components/ui/icon/icon-eye.js",
   "ui/components/ui/icon/icon-import.js",
   "ui/components/ui/icon/icon-plus.js",
-  "ui/components/ui/icon/icon-speech-bubbles.js",
   "ui/components/ui/icon/icon-token-search.js",
   "ui/components/ui/icon/icon.stories.js",
   "ui/components/ui/icon/info-icon-inverted.component.js",
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 495f79ae5590..673987563ce9 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -32,7 +32,6 @@ import {
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 import IconCheck from '../../ui/icon/icon-check';
-import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
 import IconConnect from '../../ui/icon/icon-connect';
 import IconCog from '../../ui/icon/icon-cog';
 import IconPlus from '../../ui/icon/icon-plus';
@@ -41,6 +40,8 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -460,10 +461,7 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <IconSpeechBubbles
-              color="var(--color-icon-alternative)"
-              ariaLabel={supportText}
-            />
+            <Icon name={ICON_NAMES.MESSAGES} color={Color.iconAlternative} />
           }
           text={supportText}
         />
diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js
index 0bac2d952f00..e682cdba36fe 100644
--- a/ui/components/app/flask/copyable/copyable.js
+++ b/ui/components/app/flask/copyable/copyable.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../../../ui/box';
-import IconCopied from '../../../ui/icon/icon-copied';
-import IconCopy from '../../../ui/icon/icon-copy';
 import Typography from '../../../ui/typography';
 import {
   AlignItems,
@@ -13,8 +11,10 @@ import {
   TypographyVariant,
   BackgroundColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
 
 export const Copyable = ({ text }) => {
   const [copied, handleCopy] = useCopyToClipboard();
@@ -46,17 +46,17 @@ export const Copyable = ({ text }) => {
         marginBottom={1}
       >
         {copied ? (
-          <IconCopied
-            color="var(--color-icon-alternative)"
-            className="copyable__icon"
-            size={18}
+          <Icon
+            name={ICON_NAMES.COPY_SUCCESS}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
           />
         ) : (
-          <IconCopy
-            className="copyable__icon"
-            color="var(--color-icon-alternative)"
+          <Icon
+            name={ICON_NAMES.COPY}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
             onClick={() => handleCopy(text)}
-            size={18}
           />
         )}
       </Box>
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
index 43abd93b0133..bc50d1054d78 100644
--- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js
+++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -4,7 +4,6 @@ import { getAccountLink } from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import Box from '../../../ui/box';
-import IconCopy from '../../../ui/icon/icon-copy';
 import IconBlockExplorer from '../../../ui/icon/icon-block-explorer';
 import Button from '../../../ui/button/button.component';
 import Tooltip from '../../../ui/tooltip/tooltip';
@@ -22,12 +21,14 @@ import {
   BorderStyle,
   BorderColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import UrlIcon from '../../../ui/url-icon/url-icon';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
+import { ButtonIcon, ICON_NAMES } from '../../../component-library';
 
 export default function ContractDetailsModal({
   onClose,
@@ -146,15 +147,15 @@ export default function ContractDetailsModal({
                         : t('copyToClipboard')
                     }
                   >
-                    <Button
-                      className="contract-details-modal__content__contract__buttons__copy"
-                      type="link"
-                      onClick={() => {
-                        handleCopyTokenAddress(tokenAddress);
-                      }}
-                    >
-                      <IconCopy color="var(--color-icon-muted)" />
-                    </Button>
+                    <ButtonIcon
+                      iconName={
+                        copiedTokenAddress
+                          ? ICON_NAMES.COPY_SUCCESS
+                          : ICON_NAMES.COPY
+                      }
+                      onClick={() => handleCopyTokenAddress(tokenAddress)}
+                      color={Color.iconMuted}
+                    />
                   </Tooltip>
                 </Box>
                 <Box marginTop={5} marginRight={5}>
@@ -264,15 +265,13 @@ export default function ContractDetailsModal({
                     : t('copyToClipboard')
                 }
               >
-                <Button
-                  className="contract-details-modal__content__contract__buttons__copy"
-                  type="link"
-                  onClick={() => {
-                    handleCopyToAddress(toAddress);
-                  }}
-                >
-                  <IconCopy color="var(--color-icon-muted)" />
-                </Button>
+                <ButtonIcon
+                  iconName={
+                    copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                  }
+                  onClick={() => handleCopyToAddress(toAddress)}
+                  color={Color.iconMuted}
+                />
               </Tooltip>
             </Box>
             <Box marginTop={5} marginRight={5}>
diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js
index 1dde64047774..ebe16e52f23f 100644
--- a/ui/components/ui/contract-token-values/contract-token-values.js
+++ b/ui/components/ui/contract-token-values/contract-token-values.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
-import IconCopy from '../icon/icon-copy';
 import IconBlockExplorer from '../icon/icon-block-explorer';
 import Box from '../box/box';
 import Tooltip from '../tooltip/tooltip';
@@ -18,6 +17,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import Button from '../button';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
 
 export default function ContractTokenValues({
   address,
@@ -52,15 +52,11 @@ export default function ContractTokenValues({
           position="top"
           title={copied ? t('copiedExclamation') : t('copyToClipboard')}
         >
-          <Button
-            type="link"
+          <ButtonIcon
+            iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
             className="contract-token-values__copy-address__button"
-            onClick={() => {
-              handleCopy(address);
-            }}
-          >
-            <IconCopy size={24} color="var(--color-icon-muted)" />
-          </Button>
+            onClick={() => handleCopy(address)}
+          />
         </Tooltip>
       </Box>
       <Box className="contract-token-values__block-explorer">
diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx
index 0f053cfce397..c2a05ed210b3 100644
--- a/ui/components/ui/icon/README.mdx
+++ b/ui/components/ui/icon/README.mdx
@@ -11,7 +11,6 @@ import SendIcon from './send-icon.component';
 import Sign from './sign-icon.component';
 import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
-import IconCopy from './icon-copy'
 import IconBlockExplorer from './icon-block-explorer';
 
 
@@ -182,14 +181,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={Preloader} />
 
-## IconCopy
-
-<Canvas>
-  <Story id="components-ui-icon--icon-copy-story" />
-</Canvas>
-
-<ArgsTable of={IconCopy} />
-
 ## IconBlockExplorer
 
 <Canvas>
diff --git a/ui/components/ui/icon/icon-copied.js b/ui/components/ui/icon/icon-copied.js
deleted file mode 100644
index 0883554bf53b..000000000000
--- a/ui/components/ui/icon/icon-copied.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCopied = ({
-  size = 24,
-  color = 'currentColor',
-  ariaLabel,
-  className,
-  onClick,
-}) => (
-  <svg
-    width={size}
-    height={size}
-    fill={color}
-    className={className}
-    aria-label={ariaLabel}
-    onClick={onClick}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-  >
-    <path d="M16.59 3H12.81C10.0352 3 8.73388 3.98468 8.46277 6.36511C8.40605 6.86311 8.81849 7.275 9.31971 7.275H11.19C14.97 7.275 16.725 9.03 16.725 12.81V14.6803C16.725 15.1815 17.1369 15.594 17.6349 15.5372C20.0153 15.2661 21 13.9648 21 11.19V7.41C21 4.26 19.74 3 16.59 3Z" />
-    <path d="M11.19 8.4H7.41C4.26 8.4 3 9.66 3 12.81V16.59C3 19.74 4.26 21 7.41 21H11.19C14.34 21 15.6 19.74 15.6 16.59V12.81C15.6 9.66 14.34 8.4 11.19 8.4ZM12.261 13.485L8.922 16.824C8.796 16.95 8.634 17.013 8.463 17.013C8.292 17.013 8.13 16.95 8.004 16.824L6.33 15.15C6.078 14.898 6.078 14.493 6.33 14.241C6.582 13.989 6.987 13.989 7.239 14.241L8.454 15.456L11.343 12.567C11.595 12.315 12 12.315 12.252 12.567C12.504 12.819 12.513 13.233 12.261 13.485Z" />
-  </svg>
-);
-
-IconCopied.propTypes = {
-  /**
-   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the icon accepts design token css variables
-   */
-  color: PropTypes.string,
-  /**
-   * An additional className to assign the Icon
-   */
-  className: PropTypes.string,
-  /**
-   * The onClick handler
-   */
-  onClick: PropTypes.func,
-  /**
-   * The aria-label of the icon for accessibility purposes
-   */
-  ariaLabel: PropTypes.string,
-};
-
-export default IconCopied;
diff --git a/ui/components/ui/icon/icon-copy.js b/ui/components/ui/icon/icon-copy.js
deleted file mode 100644
index df4825fcf865..000000000000
--- a/ui/components/ui/icon/icon-copy.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCopy = ({
-  size = 24,
-  color = 'currentColor',
-  ariaLabel,
-  className,
-  onClick,
-}) => (
-  <svg
-    width={size}
-    height={size}
-    fill={color}
-    className={className}
-    aria-label={ariaLabel}
-    onClick={onClick}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="m333 274l0 86c0 72-28 101-100 101l-86 0c-72 0-100-29-100-101l0-86c0-71 28-100 100-100l86 0c72 0 100 29 100 100z m23-223l-86 0c-63 0-93 23-99 77-1 11 8 20 20 20l42 0c86 0 126 40 126 126l0 43c0 11 9 21 21 19 54-6 76-35 76-98l0-86c0-72-28-101-100-101z" />
-  </svg>
-);
-
-IconCopy.propTypes = {
-  /**
-   * The size of the icon in pixels. Should follow 8px grid 16, 24, 32, etc
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the icon accepts design token css variables
-   */
-  color: PropTypes.string,
-  /**
-   * An additional className to assign the Icon
-   */
-  className: PropTypes.string,
-  /**
-   * The onClick handler
-   */
-  onClick: PropTypes.func,
-  /**
-   * The aria-label of the icon for accessibility purposes
-   */
-  ariaLabel: PropTypes.string,
-};
-export default IconCopy;
diff --git a/ui/components/ui/icon/icon-speech-bubbles.js b/ui/components/ui/icon/icon-speech-bubbles.js
deleted file mode 100644
index 5a7869ada80a..000000000000
--- a/ui/components/ui/icon/icon-speech-bubbles.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconSpeechBubbles = ({
-  size = 24,
-  color = 'currentColor',
-  ariaLabel,
-  className,
-}) => (
-  <svg
-    width={size}
-    height={size}
-    fill={color}
-    className={className}
-    aria-label={ariaLabel}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-  >
-    <path d="m357 221c0-63-66-114-146-114-81 0-146 51-146 114 0 25 10 47 27 66-10 22-25 39-25 39-2 1-3 4-2 6 2 3 3 3 6 3 25 0 46-8 61-18 23 12 50 18 79 18 80 0 146-50 146-114z m86 157c16-18 26-41 26-66 0-47-38-88-91-105 1 5 2 10 2 14 0 76-76 137-169 137-8 0-15 0-22-1 21 41 73 70 134 70 29 0 56-7 78-18 16 9 37 18 63 18 2 0 4-1 5-3 0-2 0-5-2-7 0 0-15-17-24-39z" />
-  </svg>
-);
-
-IconSpeechBubbles.propTypes = {
-  /**
-   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the icon accepts design token css variables
-   */
-  color: PropTypes.string,
-  /**
-   * An additional className to assign the Icon
-   */
-  className: PropTypes.string,
-  /**
-   * The aria-label of the icon for accessibility purposes
-   */
-  ariaLabel: PropTypes.string,
-};
-
-export default IconSpeechBubbles;
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
index d169f81963d0..04b51d1f7731 100644
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@@ -30,15 +30,12 @@ import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconConnect from './icon-connect';
 import IconImport from './icon-import';
-import IconSpeechBubbles from './icon-speech-bubbles';
 import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
 import SearchIcon from './search-icon';
-import IconCopy from './icon-copy';
 import IconBlockExplorer from './icon-block-explorer';
-import IconCopied from './icon-copied';
 
 const validColors = [
   'var(--color-icon-default)',
@@ -128,13 +125,10 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconPlus {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
         <IconItem Component={<IconConnect {...args} />} />
-        <IconItem Component={<IconSpeechBubbles {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
         <IconItem Component={<SearchIcon {...args} />} />
-        <IconItem Component={<IconCopy {...args} />} />
         <IconItem Component={<IconBlockExplorer {...args} />} />
-        <IconItem Component={<IconCopied {...args} />} />
       </div>
     </Box>
     <Typography
@@ -289,12 +283,6 @@ PreloaderStory.args = {
 };
 PreloaderStory.storyName = 'Preloader';
 
-export const IconCopyStory = (args) => <IconCopy {...args} />;
-IconCopyStory.args = {
-  size: 40,
-};
-IconCopyStory.storyName = 'IconCopy';
-
 export const IconBlockExplorerStory = (args) => <IconBlockExplorer {...args} />;
 IconBlockExplorerStory.args = {
   size: 40,