Components
Identity
Identicon
Identicon turns an address into a compact visual anchor. It is useful anywhere the UI needs to distinguish accounts quickly without rendering the full address every time.
Address mapping
Stable visual identity
The same address always resolves to the same gradient treatment.
Customization
Size + shape
Adjust the visual footprint to fit compact lists or larger wallet/profile surfaces.
Unique identities
Different addresses resolve to clearly different gradients, which helps scanning in dense wallet UI.
import { Identicon } from '@avalabs/avacloud-kit-ui-preview';export function Example() {return ( <Identicon address="0x1234567890abcdef1234567890abcdef12345678" />);}Size variants
Scale the avatar up or down depending on whether it sits inside a row, card header, or profile surface.
24px
40px
64px
<Identicon address="0x1234..." size={24} /><Identicon address="0x1234..." size={40} /><Identicon address="0x1234..." size={64} />Shape options
Choose the shape that best fits the surrounding UI language.
circle
rounded
square
<Identicon address="0x1234..." shape="circle" /><Identicon address="0x1234..." shape="rounded" /><Identicon address="0x1234..." shape="square" />Props
Prop
Type
Utilities
import { generateColorsFromAddress, generateGradient } from '@avalabs/avacloud-kit-ui-preview';
const colors = generateColorsFromAddress('0x1234...');
const gradient = generateGradient('0x1234...');