How to generate Metamask account picture?

Question

In Metamask, each account has a colorful picture filled with shapes as shown in the image attached below (right side)

Is there a way to generate them programatically on the client side? I have seen websites generating a similar design to them such as https://www.partybid.app/

Answer 1

Metamask uses something called Jazzicon. Check it out here

Answer 2

There is a react lib that does this job (https://www.npmjs.com/package/react-jazzicon)

import Jazzicon from 'react-jazzicon'
export default function App(){
…
return (
    <Jazzicon diameter={100} seed={Math.round(Math.random() * 10000000)} />
  )
}

Answer 3

There is a lib that solve this problem (https://www.npmjs.com/package/@cfx-kit/wallet-avatar)

import { generateAvatarURL } from '@cfx-kit/wallet-avatar'
export default function App() {
    // ...
    return <img src={generateAvatarURL(account)} alt='account-avatar' />
}