[SALAD-21921] WebApp: Passkey vendor icons (#1207)

* passkey vendor icon - added

* Default Passkey Icon - added

packages/web-app/src/modules/account-views/account-views/components/AccountSecurity/AccountSecurity.tsx

@@ -13,6 +13,8 @@ import { SuccessText } from '../../../../../components/primitives/content/Succes
 import type { EditPasskeyNameStatus, Passkey, RegisterPasskeyStatus } from '../../../../passkey-setup'
 import type { ProtectRewardsRedemptionStatus } from '../../../../profile'
 import type { FormValues } from '../Account'
+import DefaultPasskeyIcon from './assets/DefaultPasskeyIcon.svg'
+import { passkeyVendorIcons } from './constants'
 
 const styles: () => Record<string, CSS.Properties> = () => ({
   accountSecurityWrapper: {
@@ -70,7 +72,7 @@ const styles: () => Record<string, CSS.Properties> = () => ({
     marginRight: '5px',
   },
   passkeyNameWrapper: {
-    width: '200px',
+    width: '180px',
     height: '30px',
     overflow: 'hidden',
   },
@@ -123,6 +125,10 @@ const styles: () => Record<string, CSS.Properties> = () => ({
     height: '40px',
     width: '100%',
   },
+  passkeyVendorIcon: {
+    width: '15px',
+    height: '15px',
+  },
 })
 
 const passkeysAmountLimit = 30
@@ -240,8 +246,15 @@ const _AccountSecurity: FC<Props> = ({
           </div>
           <div className={classes.passkeysList}></div>
           {passkeys.map((passkey) => {
+            const passkeyVendorIcon = passkeyVendorIcons[passkey.aaGuid]
+            const icon = isTabletOrMobile ? passkeyVendorIcon?.iconLight : passkeyVendorIcon?.iconDark
             return (
               <div className={classes.passkeysListItem} key={passkey.id}>
+                <img
+                  className={classes.passkeyVendorIcon}
+                  src={icon ?? DefaultPasskeyIcon}
+                  alt={passkeyVendorIcon?.alt}
+                />
                 <div className={classes.passkeyNameWrapper}>
                   {passkey.id === editPasskeyId ? (
                     <TextField