UX: Icons: Remove usage of chevron fa- icons (#17668)

development/ts-migration-dashboard/files-to-convert.json

@@ -885,10 +885,6 @@
   "ui/components/ui/icon-with-fallback/index.js",
   "ui/components/ui/icon/approve-icon.component.js",
   "ui/components/ui/icon/copy-icon.component.js",
-  "ui/components/ui/icon/icon-caret-down.js",
-  "ui/components/ui/icon/icon-caret-left.js",
-  "ui/components/ui/icon/icon-caret-right.js",
-  "ui/components/ui/icon/icon-caret-up.js",
   "ui/components/ui/icon/icon-check.js",
   "ui/components/ui/icon/icon-cog.js",
   "ui/components/ui/icon/icon-connect.js",

test/e2e/swaps/swaps-notifications.spec.js

@@ -140,7 +140,7 @@ describe('Swaps - notifications', function () {
           swapToContractAddress: '0x72c9Fb7ED19D3ce51cea5C56B3e023cd918baaDf',
         });
         await driver.waitForSelector({
-          css: '.popover-header__title',
+          css: '.popover-header',
           text: 'Import token?',
         });
         await driver.clickElement(

ui/components/app/app-header/__snapshots__/app-header.test.js.snap

@@ -232,18 +232,10 @@ exports[`App Header should match snapshot 1`] = `
             <div
               class="chip__right-icon"
             >
-              <svg
+              <div
-                class="network-display__icon"
+                class="box mm-icon mm-icon--size-xs box--flex-direction-row box--color-inherit"
-                fill="currentColor"
+                style="mask-image: url('./images/icons/arrow-down.svg');"
-                height="16"
+              />
-                viewBox="0 0 512 512"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m399 177c-8-8-22-8-30 0l-113 113-113-113c-8-8-22-8-30 0-8 8-8 22 0 30l128 128c8 8 22 8 30 0l128-128c8-8 8-22 0-30z"
-                />
-              </svg>
             </div>
           </div>
         </div>

ui/components/app/asset-list-item/asset-list-item.js

@@ -11,11 +11,12 @@ import Button from '../../ui/button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { startNewDraftTransaction } from '../../../ducks/send';
 import { SEND_ROUTE } from '../../../helpers/constants/routes';
-import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { EVENT } from '../../../../shared/constants/metametrics';
 import { AssetType } from '../../../../shared/constants/transaction';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 const AssetListItem = ({
   className,
@@ -138,7 +139,11 @@ const AssetListItem = ({
       rightContent={
         !isERC721 && (
           <>
-            <i className="fas fa-chevron-right asset-list-item__chevron-right" />
+            <Icon
+              name={ICON_NAMES.ARROW_RIGHT}
+              color={Color.iconDefault}
+              className="asset-list-item__chevron-right"
+            />
             {sendTokenButton}
           </>
         )

ui/components/app/asset-list-item/asset-list-item.scss

@@ -29,10 +29,6 @@
     overflow: hidden;
   }
 
-  &__chevron-right {
-    color: var(--color-icon-default);
-  }
-
   .list-item__right-content {
     align-self: center;
   }
@@ -72,7 +68,7 @@
       display: inline-block;
     }
 
-    &__chevron-right {
+    &__arrow {
       display: none;
     }
   }

ui/components/app/asset-list-item/asset-list-item.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import AssetListItem from '.';
+
+export default {
+  title: 'Components/App/AssetListItem',
+  argTypes: {
+    className: {
+      control: 'text',
+    },
+    iconClassName: {
+      control: 'text',
+    },
+    onClick: {
+      action: 'onClick',
+    },
+    tokenAddress: {
+      control: 'text',
+    },
+    tokenSymbol: {
+      control: 'text',
+    },
+    tokenDecimals: {
+      control: 'number',
+    },
+    tokenImage: {
+      control: 'text',
+    },
+    warning: {
+      control: 'text',
+    },
+    primary: {
+      control: 'text',
+    },
+    secondary: {
+      control: 'text',
+    },
+    identiconBorder: {
+      control: 'boolean',
+    },
+    isERC721: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
+    tokenSymbol: 'ETH',
+    tokenImage: './images/eth_logo.svg',
+    identiconBorder: true,
+  },
+};
+
+export const DefaultStory = (args) => <AssetListItem {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap

@@ -13,17 +13,10 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
         class="confirm-page-container-header__back-button-container"
         style="visibility: hidden;"
       >
-        <svg
+        <div
-          fill="currentColor"
+          class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
-          height="24"
+          style="mask-image: url('./images/icons/arrow-left.svg');"
-          viewBox="0 0 512 512"
+        />
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
-          />
-        </svg>
         <span
           class="confirm-page-container-header__back-button"
           data-testid="confirm-page-back-edit-button"

ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -7,10 +7,10 @@ import {
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
 import NetworkDisplay from '../../network-display';
 import Identicon from '../../../ui/identicon';
-import IconCaretLeft from '../../../ui/icon/icon-caret-left';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { Icon, ICON_NAMES } from '../../../component-library';
 
 export default function ConfirmPageContainerHeader({
   onEdit,
@@ -54,7 +54,7 @@ export default function ConfirmPageContainerHeader({
               visibility: showEdit ? 'initial' : 'hidden',
             }}
           >
-            <IconCaretLeft />
+            <Icon name={ICON_NAMES.ARROW_LEFT} />
             <span
               data-testid="confirm-page-back-edit-button"
               className="confirm-page-container-header__back-button"

ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
 import {
+  Color,
   TextColor,
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
@@ -13,6 +14,7 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import Typography from '../../ui/typography/typography';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
   const t = useI18nContext();
@@ -71,7 +73,11 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
           </span>
         )}
         <span className="edit-gas-fee-button__label">{t(title)}</span>
-        <i className="fas fa-chevron-right asset-list-item__chevron-right" />
+        <Icon
+          name={ICON_NAMES.ARROW_RIGHT}
+          color={Color.primaryDefault}
+          size={ICON_SIZES.XS}
+        />
       </button>
       {estimateUsed === 'custom' && (
         <button onClick={openAdvancedGasFeeModal}>{t('edit')}</button>

ui/components/app/edit-gas-fee-button/index.scss

@@ -7,7 +7,7 @@
     @include H7;
 
     display: flex;
-    align-items: baseline;
+    align-items: center;
     color: var(--color-primary-default);
     background: transparent;
     border: 0;
@@ -15,19 +15,14 @@
     white-space: pre;
   }
 
-  i {
-    color: var(--color-primary-default);
-    margin-right: 2px;
-  }
-
   &__icon {
     font-size: 16px;
-    margin-right: 4px;
+    margin-right: 2px;
   }
 
   &__label {
     font-size: 12px;
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .info-tooltip {

ui/components/app/network-display/index.scss

@@ -30,10 +30,6 @@
     margin-right: 4px;
   }
 
-  &__icon {
-    display: block;
-  }
-
   &--clickable {
     cursor: pointer;
   }

ui/components/app/network-display/network-display.js

@@ -16,9 +16,9 @@ import {
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
 import Chip from '../../ui/chip/chip';
-import IconCaretDown from '../../ui/icon/icon-caret-down';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 export default function NetworkDisplay({
   indicatorSize,
@@ -68,7 +68,7 @@ export default function NetworkDisplay({
       }
       rightIcon={
         onClick ? (
-          <IconCaretDown size={16} className="network-display__icon" />
+          <Icon name={ICON_NAMES.ARROW_DOWN} size={ICON_SIZES.XS} />
         ) : null
       }
       label={

ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap

@@ -8,9 +8,10 @@ exports[`Collectible Details should match minimal props and state snapshot 1`] =
     <button
       class="asset-breadcrumb"
     >
-      <i
+      <div
-        class="fas fa-chevron-left asset-breadcrumb__chevron"
+        class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--flex-direction-row box--color-inherit"
         data-testid="asset__back"
+        style="mask-image: url('./images/icons/arrow-left.svg');"
       />
       <span>
         Test Account

ui/components/app/nfts-items/index.scss

@@ -27,10 +27,6 @@
       color: var(--color-overlay-inverse);
       text-align: center;
     }
-
-    &__icon-chevron {
-      color: var(--color-icon-default);
-    }
   }
 
   &__item-wrapper {

ui/components/app/nfts-items/nfts-items.js

@@ -31,6 +31,7 @@ import { usePrevious } from '../../../hooks/usePrevious';
 import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import CollectibleDefaultImage from '../nft-default-image';
+import { Icon, ICON_NAMES } from '../../component-library';
 
 const width =
   getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
@@ -163,10 +164,11 @@ export default function CollectiblesItems({
               </Typography>
             </Box>
             <Box alignItems={AlignItems.flexEnd}>
-              <i
+              <Icon
-                className={`collectibles-items__collection__icon-chevron fa fa-chevron-${
+                name={
-                  isExpanded ? 'down' : 'right'
+                  isExpanded ? ICON_NAMES.ARROW_DOWN : ICON_NAMES.ARROW_RIGHT
-                }`}
+                }
+                color={Color.iconDefault}
               />
             </Box>
           </Box>

ui/components/app/tab-bar/tab-bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import IconCaretRight from '../../ui/icon/icon-caret-right';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 const TabBar = (props) => {
   const { tabs = [], onSelect, isActive } = props;
@@ -21,7 +21,11 @@ const TabBar = (props) => {
             <div className="tab-bar__tab__content__icon">{icon}</div>
             <div className="tab-bar__tab__content__title">{content}</div>
           </div>
-          <IconCaretRight className="tab-bar__tab__caret" />
+          <Icon
+            name={ICON_NAMES.ARROW_RIGHT}
+            size={ICON_SIZES.SM}
+            className="tab-bar__tab__caret"
+          />
         </button>
       ))}
     </div>

ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap

@@ -80,8 +80,9 @@ exports[`Token Cell should match snapshot 1`] = `
     <div
       class="list-item__right-content"
     >
-      <i
+      <div
-        class="fas fa-chevron-right asset-list-item__chevron-right"
+        class="box asset-list-item__chevron-right mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
+        style="mask-image: url('./images/icons/arrow-right.svg');"
       />
       <a
         class="button btn-link asset-list-item__send-token-button"

ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap

@@ -19,8 +19,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
         <div
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
-          <i
+          <div
-            class="fa transaction-activity-log-icon__icon fa-plus"
+            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+            style="mask-image: url('./images/icons/add.svg');"
           />
         </div>
         <div
@@ -40,8 +41,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
         <div
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
-          <i
+          <div
-            class="fa transaction-activity-log-icon__icon fa-arrow-up"
+            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+            style="mask-image: url('./images/icons/arrow-up.svg');"
           />
         </div>
         <div
@@ -61,8 +63,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
         <div
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
-          <i
+          <div
-            class="fa transaction-activity-log-icon__icon fa-retweet"
+            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+            style="mask-image: url('./images/icons/programming-arrows.svg');"
           />
         </div>
         <div
@@ -82,8 +85,9 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = `
         <div
           class="transaction-activity-log-icon transaction-activity-log__activity-icon"
         >
-          <i
+          <div
-            class="fa transaction-activity-log-icon__icon fa-check"
+            class="box mm-icon mm-icon--size-sm box--flex-direction-row box--color-icon-default"
+            style="mask-image: url('./images/icons/check.svg');"
           />
         </div>
         <div

ui/components/app/transaction-activity-log/index.scss

@@ -45,7 +45,6 @@
     height: 15px;
     margin-right: 6px;
     border-radius: 50%;
-    background: var(--color-icon-default);
     flex: 0 0 auto;
     display: flex;
     justify-content: center;

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js

@@ -12,16 +12,18 @@ import {
   TRANSACTION_CANCEL_ATTEMPTED_EVENT,
   TRANSACTION_CANCEL_SUCCESS_EVENT,
 } from '../transaction-activity-log.constants';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import { Color } from '../../../../helpers/constants/design-system';
 
-export const imageHash = {
+export const ACTIVITY_ICONS = {
-  [TRANSACTION_CREATED_EVENT]: 'fa-plus',
+  [TRANSACTION_CREATED_EVENT]: ICON_NAMES.ADD,
-  [TRANSACTION_SUBMITTED_EVENT]: 'fa-arrow-up',
+  [TRANSACTION_SUBMITTED_EVENT]: ICON_NAMES.ARROW_UP,
-  [TRANSACTION_RESUBMITTED_EVENT]: 'fa-retweet',
+  [TRANSACTION_RESUBMITTED_EVENT]: ICON_NAMES.PROGRAMMING_ARROWS,
-  [TRANSACTION_CONFIRMED_EVENT]: 'fa-check',
+  [TRANSACTION_CONFIRMED_EVENT]: ICON_NAMES.CHECK,
-  [TRANSACTION_DROPPED_EVENT]: 'fa-times',
+  [TRANSACTION_DROPPED_EVENT]: ICON_NAMES.CLOSE,
-  [TRANSACTION_ERRORED_EVENT]: 'fa-exclamation',
+  [TRANSACTION_ERRORED_EVENT]: ICON_NAMES.DANGER,
-  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: 'fa-times',
+  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: ICON_NAMES.CLOSE,
-  [TRANSACTION_CANCEL_SUCCESS_EVENT]: 'fa-times',
+  [TRANSACTION_CANCEL_SUCCESS_EVENT]: ICON_NAMES.CLOSE,
 };
 
 export default class TransactionActivityLogIcon extends PureComponent {
@@ -31,23 +33,17 @@ export default class TransactionActivityLogIcon extends PureComponent {
 
   static propTypes = {
     className: PropTypes.string,
-    eventKey: PropTypes.oneOf(Object.keys(imageHash)),
+    eventKey: PropTypes.oneOf(Object.keys(ACTIVITY_ICONS)),
   };
 
   render() {
     const { className, eventKey } = this.props;
-    const iconClassName = imageHash[eventKey];
+    const icon = ACTIVITY_ICONS[eventKey];
 
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
-        {iconClassName ? (
+        {icon ? (
-          <i
+          <Icon name={icon} color={Color.iconDefault} size={ICON_SIZES.SM} />
-            className={classnames(
-              'fa',
-              'transaction-activity-log-icon__icon',
-              iconClassName,
-            )}
-          />
         ) : null}
       </div>
     );

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { imageHash } from './transaction-activity-log-icon.component';
+import { ACTIVITY_ICONS } from './transaction-activity-log-icon.component';
 import TransactionActivityLogIcon from '.';
 
 export default {
@@ -11,11 +11,11 @@ export default {
     },
     eventKey: {
       control: 'select',
-      options: Object.keys(imageHash),
+      options: Object.keys(ACTIVITY_ICONS),
     },
   },
   args: {
-    eventKey: Object.keys(imageHash)[0],
+    eventKey: Object.keys(ACTIVITY_ICONS)[0],
   },
 };
 

ui/components/ui/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import IconCaretDown from '../icon/icon-caret-down';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
 
 const Dropdown = ({
   className,
@@ -41,7 +41,11 @@ const Dropdown = ({
           );
         })}
       </select>
-      <IconCaretDown size={16} className="dropdown__icon-caret-down" />
+      <Icon
+        name={ICON_NAMES.ARROW_DOWN}
+        size={ICON_SIZES.SM}
+        className="dropdown__icon-caret-down"
+      />
     </div>
   );
 };

ui/components/ui/icon/README.mdx

@@ -1,6 +1,5 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-import IconCaretLeft from './icon-caret-left.js';
 import Approve from './approve-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
@@ -20,7 +19,7 @@ A range of SVG icon components
 
 ## Props
 
-<ArgsTable of={IconCaretLeft} />
+<ArgsTable of={SunCheck} />
 
 ## Usage
 

ui/components/ui/icon/icon-caret-down.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCaretDown = ({
-  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="m399 177c-8-8-22-8-30 0l-113 113-113-113c-8-8-22-8-30 0-8 8-8 22 0 30l128 128c8 8 22 8 30 0l128-128c8-8 8-22 0-30z" />
-  </svg>
-);
-
-IconCaretDown.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 IconCaretDown;

ui/components/ui/icon/icon-caret-left.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCaretLeft = ({
-  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="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z" />
-  </svg>
-);
-
-IconCaretLeft.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 IconCaretLeft;

ui/components/ui/icon/icon-caret-right.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCaretRight = ({
-  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="m177 113c-8 8-8 22 0 30l113 113-113 113c-8 8-8 22 0 30 8 8 22 8 30 0l128-128c8-8 8-22 0-30l-128-128c-8-8-22-8-30 0z" />
-  </svg>
-);
-
-IconCaretRight.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 IconCaretRight;

ui/components/ui/icon/icon-caret-up.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const IconCaretUp = ({
-  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="m399 335c-8 8-22 8-30 0l-113-113-113 113c-8 8-22 8-30 0-8-8-8-22 0-30l128-128c8-8 22-8 30 0l128 128c8 8 8 22 0 30z" />
-  </svg>
-);
-
-IconCaretUp.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 IconCaretUp;

ui/components/ui/icon/icon.stories.js

@@ -22,10 +22,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 IconCaretLeft from './icon-caret-left';
-import IconCaretRight from './icon-caret-right';
-import IconCaretDown from './icon-caret-down';
-import IconCaretUp from './icon-caret-up';
 import IconCheck from './icon-check';
 import IconCog from './icon-cog';
 import IconConnect from './icon-connect';
@@ -116,10 +112,6 @@ export const DefaultStory = (args) => (
           gridTemplateColumns: 'repeat(auto-fill, 176px)',
         }}
       >
-        <IconItem Component={<IconCaretLeft {...args} />} />
-        <IconItem Component={<IconCaretRight {...args} />} />
-        <IconItem Component={<IconCaretDown {...args} />} />
-        <IconItem Component={<IconCaretUp {...args} />} />
         <IconItem Component={<IconCheck {...args} />} />
         <IconItem Component={<IconPlus {...args} />} />
         <IconItem Component={<IconImport {...args} />} />
@@ -174,9 +166,9 @@ DefaultStory.args = {
 
 export const Size = (args) => (
   <div>
-    <IconCaretLeft size={16 || args.size} />
+    <SunCheck size={16 || args.size} />
-    <IconCaretLeft size={24 || args.size} />
+    <SunCheck size={24 || args.size} />
-    <IconCaretLeft size={32 || args.size} />
+    <SunCheck size={32 || args.size} />
   </div>
 );
 
@@ -187,12 +179,12 @@ Size.args = {
 export const Color = (args) => (
   <>
     {Object.values(validColors).map((color) => (
-      <IconCaretLeft {...args} color={args.color || color} key={color} />
+      <SunCheck {...args} color={args.color || color} key={color} />
     ))}
   </>
 );
 
-export const AriaLabel = (args) => <IconCaretLeft {...args} />;
+export const AriaLabel = (args) => <SunCheck {...args} />;
 
 AriaLabel.args = {
   ariaLabel: 'back',

ui/components/ui/popover/index.scss

@@ -22,46 +22,6 @@
 
   &-header {
     position: relative;
-
-    &__title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      @include H4;
-
-      font-weight: bold;
-      padding-bottom: 8px;
-
-      h2 {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        button {
-          margin-right: 24px;
-        }
-      }
-
-      &.center {
-        justify-content: center;
-      }
-    }
-
-    &__subtitle {
-      @include H6;
-    }
-
-    &__button {
-      background: none;
-      font-size: inherit;
-      padding: 0;
-      color: var(--color-icon-default);
-    }
-
-    i {
-      cursor: pointer;
-    }
   }
 
   &-bg {

ui/components/ui/popover/popover.component.js

@@ -9,7 +9,12 @@ import {
   BackgroundColor,
   FLEX_DIRECTION,
   JustifyContent,
+  Color,
+  DISPLAY,
+  TextVariant,
+  Size,
 } from '../../../helpers/constants/design-system';
+import { ButtonIcon, Text, ICON_NAMES } from '../../component-library';
 
 const defaultHeaderProps = {
   padding: [6, 4, 4],
@@ -53,43 +58,44 @@ const Popover = ({
 }) => {
   const t = useI18nContext();
   const showHeader = title || onBack || subtitle || onClose;
-  const Header = () => {
+  const Header = () => (
-    return (
+    <Box
+      {...{ ...defaultHeaderProps, ...headerProps }}
+      className="popover-header"
+    >
       <Box
-        {...{ ...defaultHeaderProps, ...headerProps }}
+        display={DISPLAY.FLEX}
-        className="popover-header"
+        alignItems={AlignItems.center}
+        justifyContent={
+          centerTitle ? JustifyContent.center : JustifyContent.spaceBetween
+        }
+        marginBottom={2}
       >
-        <div
+        {onBack ? (
-          className={classnames(
+          <ButtonIcon
-            'popover-header__title',
+            iconName={ICON_NAMES.ARROW_LEFT}
-            centerTitle ? 'center' : '',
+            ariaLabel={t('back')}
-          )}
+            onClick={onBack}
-        >
+            color={Color.iconDefault}
-          <h2 title="popover">
+            size={Size.SM}
-            {onBack ? (
+          />
-              <button
+        ) : null}
-                className="fas fa-chevron-left popover-header__button"
+        <Text ellipsis variant={TextVariant.headingSm}>
-                title={t('back')}
+          {title}
-                onClick={onBack}
+        </Text>
-              />
+        {onClose ? (
-            ) : null}
+          <ButtonIcon
-            {title}
+            iconName={ICON_NAMES.CLOSE}
-          </h2>
+            ariaLabel={t('close')}
-          {onClose ? (
+            data-testid="popover-close"
-            <button
+            onClick={onClose}
-              className="fas fa-times popover-header__button"
+            size={Size.SM}
-              title={t('close')}
+          />
-              data-testid="popover-close"
-              onClick={onClose}
-            />
-          ) : null}
-        </div>
-        {subtitle ? (
-          <p className="popover-header__subtitle">{subtitle}</p>
         ) : null}
       </Box>
-    );
+      {subtitle ? <Text variant={TextVariant.bodySm}>{subtitle}</Text> : null}
-  };
+    </Box>
+  );
 
   return (
     <div className="popover-container">

ui/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import copyToClipboard from 'copy-to-clipboard';
 import Tooltip from '../tooltip';
-import IconCaretRight from '../icon/icon-caret-right';
 import Identicon from '../identicon';
 import { shortenAddress } from '../../../helpers/utils/util';
 import AccountMismatchWarning from '../account-mismatch-warning/account-mismatch-warning.component';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import NicknamePopovers from '../../app/modals/nickname-popovers';
+import { Icon, ICON_NAMES } from '../../component-library';
 import {
   DEFAULT_VARIANT,
   CARDS_VARIANT,
@@ -199,7 +199,7 @@ function Arrow({ variant }) {
     </div>
   ) : (
     <div className="sender-to-recipient__arrow-container">
-      <IconCaretRight />
+      <Icon name={ICON_NAMES.ARROW_RIGHT} />
     </div>
   );
 }

ui/pages/asset/asset.scss

@@ -22,11 +22,6 @@
   color: var(--color-text-default);
   background-color: inherit;
 
-  &__chevron {
-    font-size: $font-size-paragraph;
-    padding: 0 10px 0 2px;
-  }
-
   &__asset {
     font-weight: bold;
   }

ui/pages/asset/components/asset-breadcrumb.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../components/component-library';
 
 const AssetBreadcrumb = ({ accountName, assetName, onBack }) => {
   return (
     <button className="asset-breadcrumb" onClick={onBack}>
-      <i
+      <Icon
-        className="fas fa-chevron-left asset-breadcrumb__chevron"
+        name={ICON_NAMES.ARROW_LEFT}
         data-testid="asset__back"
+        marginInlineEnd={3}
+        size={ICON_SIZES.XS}
       />
       <span>{accountName}</span>
       &nbsp;/&nbsp;

ui/pages/confirmation/confirmation.js

@@ -33,6 +33,7 @@ import {
 import NetworkDisplay from '../../components/app/network-display/network-display';
 import Callout from '../../components/ui/callout';
 import SiteOrigin from '../../components/ui/site-origin';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 import ConfirmationFooter from './components/confirmation-footer';
 import {
   getTemplateValues,
@@ -283,7 +284,7 @@ export default function ConfirmationPage({
                 setCurrentPendingConfirmation(currentPendingConfirmation - 1)
               }
             >
-              <i className="fas fa-chevron-left" />
+              <Icon name={ICON_NAMES.ARROW_LEFT} />
             </button>
           )}
           <button
@@ -295,7 +296,7 @@ export default function ConfirmationPage({
               setCurrentPendingConfirmation(currentPendingConfirmation + 1)
             }
           >
-            <i className="fas fa-chevron-right" />
+            <Icon name={ICON_NAMES.ARROW_RIGHT} />
           </button>
         </div>
       )}

ui/pages/notifications/notifications.js

@@ -14,9 +14,14 @@ import {
   deleteExpiredNotifications,
   markNotificationsAsRead,
 } from '../../store/actions';
-import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
 import Button from '../../components/ui/button';
 import { useI18nContext } from '../../hooks/useI18nContext';
+import {
+  ButtonIcon,
+  ICON_SIZES,
+  ICON_NAMES,
+} from '../../components/component-library';
+import { Color } from '../../helpers/constants/design-system';
 
 export function NotificationItem({ notification, snaps, onItemClick }) {
   const { message, origin, createdDate, readDate } = notification;
@@ -85,10 +90,10 @@ export default function Notifications() {
     <div className="main-container notifications">
       <div className="notifications__header">
         <div className="notifications__header__title-container">
-          <IconCaretLeft
+          <ButtonIcon
-            className="notifications__header__title-container__back-button"
+            iconName={ICON_NAMES.ARROW_LEFT}
-            color="var(--color-text-default)"
+            size={ICON_SIZES.LG}
-            size={23}
+            color={Color.textDefault}
             onClick={() => history.push(DEFAULT_ROUTE)}
           />
           <div className="notifications__header__title-container__title">

ui/pages/permissions-connect/index.scss

@@ -31,10 +31,6 @@
     color: var(--color-icon-default);
     font-weight: bold;
     cursor: pointer;
-
-    i {
-      margin-right: 10px;
-    }
   }
 
   &__page-count {

ui/pages/permissions-connect/permissions-connect.component.js

@@ -9,6 +9,11 @@ import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
 import { MILLISECOND } from '../../../shared/constants/time';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import PermissionPageContainer from '../../components/app/permission-page-container';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../components/component-library';
 import ChooseAccount from './choose-account';
 import PermissionsRedirect from './redirect';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
@@ -231,7 +236,11 @@ export default class PermissionConnect extends Component {
             className="permissions-connect__back"
             onClick={() => this.goBack()}
           >
-            <i className="fas fa-chevron-left"></i>
+            <Icon
+              name={ICON_NAMES.ARROW_RIGHT}
+              marginInlineEnd={1}
+              size={ICON_SIZES.XS}
+            />
             {t('back')}
           </div>
         ) : null}

ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap

@@ -80,18 +80,10 @@ exports[`Add Recipient Component Own Account Recipient Search should match snaps
         role="button"
         tabindex="0"
       >
-        <svg
+        <div
-          class="send__select-recipient-wrapper__list__back-caret"
+          class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-inherit"
-          fill="currentColor"
+          style="mask-image: url('./images/icons/arrow-left.svg');"
-          height="24"
+        />
-          viewBox="0 0 512 512"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
-          />
-        </svg>
         Back to all
       </a>
       <div

ui/pages/send/send-content/add-recipient/add-recipient.component.js

@@ -7,8 +7,8 @@ import ContactList from '../../../../components/app/contact-list';
 import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component';
 import { ellipsify } from '../../send.utils';
 import Button from '../../../../components/ui/button';
-import IconCaretLeft from '../../../../components/ui/icon/icon-caret-left';
 import Confusable from '../../../../components/ui/confusable';
+import { Icon, ICON_NAMES } from '../../../../components/component-library';
 
 export default class AddRecipient extends Component {
   static propTypes = {
@@ -181,7 +181,7 @@ export default class AddRecipient extends Component {
           className="send__select-recipient-wrapper__list__link"
           onClick={useContactListForRecipientSearch}
         >
-          <IconCaretLeft className="send__select-recipient-wrapper__list__back-caret" />
+          <Icon name={ICON_NAMES.ARROW_LEFT} />
           {t('backToAll')}
         </Button>
         <RecipientGroup

ui/pages/settings/settings-search-list/settings-search-list.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { highlightSearchedText } from '../../../helpers/utils/settings-search';
 import { I18nContext } from '../../../contexts/i18n';
-import IconCaretRight from '../../../components/ui/icon/icon-caret-right';
+import { Icon, ICON_NAMES } from '../../../components/component-library';
-import { Icon } from '../../../components/component-library';
+import { Size } from '../../../helpers/constants/design-system';
 
 export default function SettingsSearchList({ results, onClickSetting }) {
   const t = useContext(I18nContext);
@@ -44,8 +44,9 @@ export default function SettingsSearchList({ results, onClickSetting }) {
                 >
                   {tabMessage(t)}
                 </span>
-                <IconCaretRight
+                <Icon
-                  size={16}
+                  name={ICON_NAMES.ARROW_RIGHT}
+                  size={Size.SM}
                   className="settings-page__header__search__list__item__caret"
                 />
                 <span

ui/pages/settings/settings.component.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { Switch, Route, matchPath } from 'react-router-dom';
 import classnames from 'classnames';
 import TabBar from '../../components/app/tab-bar';
-import IconCaretLeft from '../../components/ui/icon/icon-caret-left';
 
 import {
   ALERTS_ROUTE,
@@ -28,7 +27,13 @@ import {
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
 import AddNetwork from '../../components/app/add-network/add-network';
-import { Icon, ICON_NAMES } from '../../components/component-library';
+import {
+  Icon,
+  ButtonIcon,
+  ICON_SIZES,
+  ICON_NAMES,
+} from '../../components/component-library';
+import { Color } from '../../helpers/constants/design-system';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';
@@ -111,6 +116,7 @@ class SettingsPage extends PureComponent {
     } = this.props;
 
     const { searchResults, isSearchList, searchText } = this.state;
+    const { t } = this.context;
 
     return (
       <div
@@ -121,10 +127,11 @@ class SettingsPage extends PureComponent {
         <div className="settings-page__header">
           <div className="settings-page__header__title-container">
             {currentPath !== SETTINGS_ROUTE && (
-              <IconCaretLeft
+              <ButtonIcon
-                className="settings-page__back-button"
+                ariaLabel={t('back')}
-                color="var(--color-icon-default)"
+                name={ICON_NAMES.ARROW_LEFT}
-                size={32}
+                size={ICON_SIZES.XL}
+                color={Color.iconDefault}
                 onClick={() => history.push(backRoute)}
               />
             )}