chore: removing duplicate icons and updating account splash page

app/component-library/components/Icons/Icon/Icon.assets.ts

@@ -167,7 +167,6 @@ import passwordcheckSVG from './assets/password-check.svg';
 import pendingSVG from './assets/pending.svg';
 import peopleSVG from './assets/people.svg';
 import personcancelSVG from './assets/person-cancel.svg';
-import petrolPumpSVG from './assets/petrol-pump.svg';
 import pinSVG from './assets/pin.svg';
 import plantSVG from './assets/plant.svg';
 import plugSVG from './assets/plug.svg';
@@ -223,10 +222,8 @@ import snapsSVG from './assets/snaps.svg';
 import sortbyalphaSVG from './assets/sort-by-alpha.svg';
 import sortSVG from './assets/sort.svg';
 import sparkleSVG from './assets/sparkle.svg';
-import sparkleFilledSVG from './assets/sparkle-filled.svg';
 import speedSVG from './assets/speed.svg';
 import speedometerSVG from './assets/speedometer.svg';
-import speedometerFilledSVG from './assets/speedometer-filled.svg';
 import squareSVG from './assets/square.svg';
 import stakeSVG from './assets/stake.svg';
 import starfilledSVG from './assets/star-filled.svg';
@@ -445,7 +442,6 @@ export const assetByIconName: AssetByIconName = {
   [IconName.Pending]: pendingSVG,
   [IconName.People]: peopleSVG,
   [IconName.PersonCancel]: personcancelSVG,
-  [IconName.PetrolPump]: petrolPumpSVG,
   [IconName.Pin]: pinSVG,
   [IconName.Plant]: plantSVG,
   [IconName.Plug]: plugSVG,
@@ -501,10 +497,8 @@ export const assetByIconName: AssetByIconName = {
   [IconName.SortByAlpha]: sortbyalphaSVG,
   [IconName.Sort]: sortSVG,
   [IconName.Sparkle]: sparkleSVG,
-  [IconName.SparkleFilled]: sparkleFilledSVG,
   [IconName.Speed]: speedSVG,
   [IconName.Speedometer]: speedometerSVG,
-  [IconName.SpeedometerFilled]: speedometerFilledSVG,
   [IconName.Square]: squareSVG,
   [IconName.Stake]: stakeSVG,
   [IconName.StarFilled]: starfilledSVG,

app/component-library/components/Icons/Icon/Icon.types.ts

@@ -237,7 +237,6 @@ export enum IconName {
   Pending = 'Pending',
   People = 'People',
   PersonCancel = 'PersonCancel',
-  PetrolPump = 'PetrolPump',
   Pin = 'Pin',
   Plant = 'Plant',
   Plug = 'Plug',
@@ -293,10 +292,8 @@ export enum IconName {
   SortByAlpha = 'SortByAlpha',
   Sort = 'Sort',
   Sparkle = 'Sparkle',
-  SparkleFilled = 'SparkleFilled',
   Speed = 'Speed',
   Speedometer = 'Speedometer',
-  SpeedometerFilled = 'SpeedometerFilled',
   Square = 'Square',
   Stake = 'Stake',
   StarFilled = 'StarFilled',

app/components/Views/confirmations/components/smart-account-update-splash/smart-account-update-splash.tsx

@@ -8,16 +8,15 @@ import Button, {
   ButtonSize,
   ButtonVariants,
 } from '../../../../../component-library/components/Buttons/Button';
-import Icon, {
-  IconColor,
-  IconName,
-} from '../../../../../component-library/components/Icons/Icon';
+import { IconName } from '../../../../../component-library/components/Icons/Icon';
+import AvatarIcon from '../../../../../component-library/components/Avatars/Avatar/variants/AvatarIcon';
 import Text, {
   TextColor,
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import Name from '../../../../UI/Name';
 import { NameType } from '../../../../UI/Name/Name.types';
+import { useTheme } from '../../../../../util/theme';
 import { useStyles } from '../../../../hooks/useStyles';
 import { useConfirmActions } from '../../hooks/useConfirmActions';
 import { useTransactionMetadataRequest } from '../../hooks/transactions/useTransactionMetadataRequest';
@@ -39,17 +38,24 @@ const ListItem = ({
   title: string;
   description: ReactElement;
   styles: ReturnType<typeof styleSheet>;
-}) => (
-  <View style={styles.listWrapper}>
-    <Icon name={iconName} color={IconColor.Primary} />
-    <View style={styles.textSection}>
-      <Text variant={TextVariant.BodyMDBold}>{title}</Text>
-      <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
-        {description}
-      </Text>
+}) => {
+  const { colors } = useTheme();
+  return (
+    <View style={styles.listWrapper}>
+      <AvatarIcon
+        name={iconName}
+        iconColor={colors.primary.default}
+        backgroundColor={colors.primary.muted}
+      />
+      <View style={styles.textSection}>
+        <Text variant={TextVariant.BodyMDBold}>{title}</Text>
+        <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
+          {description}
+        </Text>
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
 export const SmartAccountUpdateSplash = () => {
   const [acknowledged, setAcknowledged] = useState(false);
@@ -89,7 +95,7 @@ export const SmartAccountUpdateSplash = () => {
         />
       </View>
       <ListItem
-        iconName={IconName.SpeedometerFilled}
+        iconName={IconName.Speedometer}
         title={strings(
           'confirm.7702_functionality.splashpage.betterTransaction',
         )}
@@ -99,15 +105,15 @@ export const SmartAccountUpdateSplash = () => {
         styles={styles}
       />
       <ListItem
-        iconName={IconName.PetrolPump}
+        iconName={IconName.Gas}
         title={strings('confirm.7702_functionality.splashpage.payToken')}
         description={strings(
           'confirm.7702_functionality.splashpage.payTokenDescription',
         )}
         styles={styles}
       />
       <ListItem
-        iconName={IconName.SparkleFilled}
+        iconName={IconName.Sparkle}
         title={strings('confirm.7702_functionality.splashpage.sameAccount')}
         description={
           <>