Simple implementation

[kangfenmao]

import jazzicon from '@metamask/jazzicon'
import React, { CSSProperties, useEffect, useRef } from 'react'

interface Props {
  account: string
  size: number
  style?: CSSProperties
}

const MetaMaskAvatar: React.FC<Props> = ({ account, size, style }) => {
  const avatarRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const element = avatarRef.current
    if (element && account) {
      const addr = account.slice(2, 10)
      const seed = parseInt(addr, 16)
      const icon = jazzicon(size, seed)
      if (element.firstChild) {
        element.removeChild(element.firstChild)
      }
      element.appendChild(icon)
    }
  }, [account, avatarRef, size])

  return <div style={style} ref={avatarRef} />
}

export default MetaMaskAvatar

[John-Oldman-Wang]

you can use this package to solve your question. https://www.npmjs.com/package/@cfx-kit/wallet-avatar