diff --git a/coverage-targets.js b/coverage-targets.js
index a87a1b11c..f2d59d2f9 100644
--- a/coverage-targets.js
+++ b/coverage-targets.js
@@ -8,7 +8,7 @@ module.exports = {
   global: {
     lines: 63,
     branches: 51,
-    statements: 62.5,
+    statements: 62.45,
     functions: 55.5,
   },
   transforms: {
diff --git a/ui/components/ui/icon/approve-icon.component.js b/ui/components/ui/icon/approve-icon.component.js
index 07745eeea..8c7844874 100644
--- a/ui/components/ui/icon/approve-icon.component.js
+++ b/ui/components/ui/icon/approve-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Approve = ({ className, size, color }) => (
   <svg
     className={className}
diff --git a/ui/components/ui/icon/icon-caret-down.js b/ui/components/ui/icon/icon-caret-down.js
index 64b40a31a..910b53f4f 100644
--- a/ui/components/ui/icon/icon-caret-down.js
+++ b/ui/components/ui/icon/icon-caret-down.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretDown = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-caret-left.js b/ui/components/ui/icon/icon-caret-left.js
index 4fe22144e..3e71ddfe8 100644
--- a/ui/components/ui/icon/icon-caret-left.js
+++ b/ui/components/ui/icon/icon-caret-left.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretLeft = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-caret-right.js b/ui/components/ui/icon/icon-caret-right.js
index 890f89171..cb814ead1 100644
--- a/ui/components/ui/icon/icon-caret-right.js
+++ b/ui/components/ui/icon/icon-caret-right.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretRight = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-caret-up.js b/ui/components/ui/icon/icon-caret-up.js
index 8e455e638..74b917692 100644
--- a/ui/components/ui/icon/icon-caret-up.js
+++ b/ui/components/ui/icon/icon-caret-up.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretUp = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-check.js b/ui/components/ui/icon/icon-check.js
index 14e00339f..02586e7d1 100644
--- a/ui/components/ui/icon/icon-check.js
+++ b/ui/components/ui/icon/icon-check.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCheck = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-cog.js b/ui/components/ui/icon/icon-cog.js
index 9f54f38fc..3a76a93be 100644
--- a/ui/components/ui/icon/icon-cog.js
+++ b/ui/components/ui/icon/icon-cog.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCog = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-eye-slash.js b/ui/components/ui/icon/icon-eye-slash.js
index a509dcabd..2c40c69a0 100644
--- a/ui/components/ui/icon/icon-eye-slash.js
+++ b/ui/components/ui/icon/icon-eye-slash.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconEyeSlash = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-eye.js b/ui/components/ui/icon/icon-eye.js
index 60a51a55c..2ddf1bca2 100644
--- a/ui/components/ui/icon/icon-eye.js
+++ b/ui/components/ui/icon/icon-eye.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconEye = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-import.js b/ui/components/ui/icon/icon-import.js
index 9d37135dc..bdc20f30d 100644
--- a/ui/components/ui/icon/icon-import.js
+++ b/ui/components/ui/icon/icon-import.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconImport = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-plus.js b/ui/components/ui/icon/icon-plus.js
index 1f3c8b234..68d30aff2 100644
--- a/ui/components/ui/icon/icon-plus.js
+++ b/ui/components/ui/icon/icon-plus.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconPlus = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon-token-search.js b/ui/components/ui/icon/icon-token-search.js
index 2b4151a72..26f25c604 100644
--- a/ui/components/ui/icon/icon-token-search.js
+++ b/ui/components/ui/icon/icon-token-search.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconTokenSearch = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js
index cfa3a996d..efd51035a 100644
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@@ -94,6 +94,13 @@ IconItem.propTypes = {
 
 export const DefaultStory = (args) => (
   <div>
+    <Typography
+      variant={TypographyVariant.H2}
+      color={TextColor.errorDefault}
+      boxProps={{ marginBottom: 4 }}
+    >
+      DEPRECATED
+    </Typography>
     <Typography variant={TypographyVariant.H2} boxProps={{ marginBottom: 4 }}>
       Icons
     </Typography>
@@ -127,13 +134,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<SearchIcon {...args} />} />
       </div>
     </Box>
-    <Typography
-      variant={TypographyVariant.H2}
-      color={TextColor.errorDefault}
-      boxProps={{ marginBottom: 4 }}
-    >
-      DEPRECATED
-    </Typography>
     <Box marginBottom={4}>
       <div
         style={{
diff --git a/ui/components/ui/icon/info-icon-inverted.component.js b/ui/components/ui/icon/info-icon-inverted.component.js
index 8a48fae54..3d9811be8 100644
--- a/ui/components/ui/icon/info-icon-inverted.component.js
+++ b/ui/components/ui/icon/info-icon-inverted.component.js
@@ -3,6 +3,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function InfoIconInverted({ severity }) {
   const className = classnames('info-icon', {
     'info-icon--success': severity === SEVERITIES.SUCCESS,
diff --git a/ui/components/ui/icon/info-icon.component.js b/ui/components/ui/icon/info-icon.component.js
index ad4f34975..b1c0b7012 100644
--- a/ui/components/ui/icon/info-icon.component.js
+++ b/ui/components/ui/icon/info-icon.component.js
@@ -3,6 +3,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function InfoIcon({ severity }) {
   const className = classnames('info-icon', {
     'info-icon--success': severity === SEVERITIES.SUCCESS,
diff --git a/ui/components/ui/icon/interaction-icon.component.js b/ui/components/ui/icon/interaction-icon.component.js
index 6e5570ede..693f6701f 100644
--- a/ui/components/ui/icon/interaction-icon.component.js
+++ b/ui/components/ui/icon/interaction-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Interaction = ({ className, size, color }) => (
   <svg
     className={className}
diff --git a/ui/components/ui/icon/overview-buy-icon.component.js b/ui/components/ui/icon/overview-buy-icon.component.js
index a8deb10ae..ec6bb289d 100644
--- a/ui/components/ui/icon/overview-buy-icon.component.js
+++ b/ui/components/ui/icon/overview-buy-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function BuyIcon({
   width = '17',
   height = '21',
diff --git a/ui/components/ui/icon/overview-send-icon.component.js b/ui/components/ui/icon/overview-send-icon.component.js
index 5c29e0d1d..b86fac387 100644
--- a/ui/components/ui/icon/overview-send-icon.component.js
+++ b/ui/components/ui/icon/overview-send-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function SwapIcon({
   width = '15',
   height = '15',
diff --git a/ui/components/ui/icon/receive-icon.component.js b/ui/components/ui/icon/receive-icon.component.js
index 00c74f4f0..5e9a23a49 100644
--- a/ui/components/ui/icon/receive-icon.component.js
+++ b/ui/components/ui/icon/receive-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Receive = ({ className, size, color }) => (
   <svg
     className={className}
diff --git a/ui/components/ui/icon/search-icon.js b/ui/components/ui/icon/search-icon.js
index a8d4c48be..65ac9321a 100644
--- a/ui/components/ui/icon/search-icon.js
+++ b/ui/components/ui/icon/search-icon.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const SearchIcon = ({
   size = 24,
   color = 'currentColor',
diff --git a/ui/components/ui/icon/send-icon.component.js b/ui/components/ui/icon/send-icon.component.js
index f23614927..49b301c3d 100644
--- a/ui/components/ui/icon/send-icon.component.js
+++ b/ui/components/ui/icon/send-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Send = ({ className, size, color }) => (
   <svg
     className={className}
diff --git a/ui/components/ui/icon/sign-icon.component.js b/ui/components/ui/icon/sign-icon.component.js
index 2efd94f16..f1ab82d2a 100644
--- a/ui/components/ui/icon/sign-icon.component.js
+++ b/ui/components/ui/icon/sign-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function Sign({ className, size, color }) {
   return (
     <svg
diff --git a/ui/components/ui/icon/sun-check-icon.component.js b/ui/components/ui/icon/sun-check-icon.component.js
index 2c1bbe6df..d58d68c2f 100644
--- a/ui/components/ui/icon/sun-check-icon.component.js
+++ b/ui/components/ui/icon/sun-check-icon.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function SunCheck({ reverseColors }) {
   const sunColor = reverseColors
     ? 'var(--color-primary-default)'
diff --git a/ui/components/ui/icon/swap-icon-for-list.component.js b/ui/components/ui/icon/swap-icon-for-list.component.js
index 81e0c7af2..a1fb6cee3 100644
--- a/ui/components/ui/icon/swap-icon-for-list.component.js
+++ b/ui/components/ui/icon/swap-icon-for-list.component.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Swap = ({ className, size, color }) => (
   <svg
     width={size}