UX: Icons: Remove lock icon (#17739)

* UX: Icons: Remove lock icon

* set icon to auto for improved alignment

* remove unused import

---------

Co-authored-by: garrettbear <gwhisten@gmail.com>

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

@@ -925,8 +925,6 @@
   "ui/components/ui/loading-indicator/loading-indicator.js",
   "ui/components/ui/loading-screen/index.js",
   "ui/components/ui/loading-screen/loading-screen.component.js",
-  "ui/components/ui/lock-icon/index.js",
-  "ui/components/ui/lock-icon/lock-icon.component.js",
   "ui/components/ui/logo/logo-coinbasepay.js",
   "ui/components/ui/logo/logo-deposit-eth.js",
   "ui/components/ui/logo/logo-lattice.js",

ui/components/ui/lock-icon/index.js

@@ -1 +0,0 @@
-export { default } from './lock-icon.component';

ui/components/ui/lock-icon/lock-icon.component.js

@@ -1,32 +0,0 @@
-import React from 'react';
-
-export default function LockIcon(props) {
-  return (
-    <svg
-      version="1.1"
-      id="Capa_1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      width="401.998px"
-      height="401.998px"
-      viewBox="0 0 401.998 401.998"
-      style={{ enableBackground: 'new 0 0 401.998 401.998' }}
-      xmlSpace="preserve"
-      {...props}
-    >
-      <g>
-        <path
-          d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218
-            C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821
-            h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417
-            c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135
-            C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675
-            c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728
-            z"
-        />
-      </g>
-    </svg>
-  );
-}

ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js

@@ -7,7 +7,6 @@ import {
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
   NETWORK_TYPES,
 } from '../../../../../shared/constants/network';
-import LockIcon from '../../../../components/ui/lock-icon';
 import IconCheck from '../../../../components/ui/icon/icon-check';
 import { NETWORKS_ROUTE } from '../../../../helpers/constants/routes';
 import { setSelectedSettingsRpcUrl } from '../../../../store/actions';
@@ -18,6 +17,12 @@ import Identicon from '../../../../components/ui/identicon';
 import UrlIcon from '../../../../components/ui/url-icon';
 
 import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../../components/component-library';
+import { Color } from '../../../../helpers/constants/design-system';
 
 const NetworksListItem = ({
   network,
@@ -122,7 +127,12 @@ const NetworksListItem = ({
       >
         {label || t(labelKey)}
         {currentProviderType !== NETWORK_TYPES.RPC && (
-          <LockIcon width="14px" height="17px" fill="var(--color-icon-muted)" />
+          <Icon
+            name={ICON_NAMES.LOCK}
+            color={Color.iconMuted}
+            size={ICON_SIZES.AUTO}
+            marginInlineStart={2}
+          />
         )}
       </div>
     </div>