Avataaars API Documentation - v3.1.0
    Preparing search index...

    Interface Props

    Props for the main Avatar component.

    Supports all avatar customization options plus optional animation features. Animation features (idle animation, hover scale, hover animation) are independent and can be combined as needed.

    <Avatar
      avatarStyle={AvatarStyle.Circle}
      topType="LongHairStraight"
      eyeType="Happy"
      animationSpeed={2000}
      hoverScale={1.2}
    />
    interface Props {
        avatarStyle: string;
        style?: CSSProperties;
        topType?: string;
        accessoriesType?: string;
        hairColor?: string;
        hatColor?: string;
        facialHairType?: string;
        facialHairColor?: string;
        clotheType?: string;
        clotheColor?: string;
        graphicType?: string;
        eyeType?: string;
        eyebrowType?: string;
        mouthType?: string;
        skinColor?: string;
        pieceType?: string;
        pieceSize?: string;
        viewBox?: string;
        animationSpeed?: number;
        hoverScale?: number;
        hoverSequence?: HoverExpression[];
        hoverAnimationSpeed?: number;
        backgroundColor?: string;
        maskBackgroundColor?: string;
        originalEyeType?: string;
        originalEyebrowType?: string;
        originalMouthType?: string;
    }
    Index

    Properties

    avatarStyle style? topType? accessoriesType? hairColor? hatColor? facialHairType? facialHairColor? clotheType? clotheColor? graphicType? eyeType? eyebrowType? mouthType? skinColor? pieceType? pieceSize? viewBox? animationSpeed? hoverScale? hoverSequence? hoverAnimationSpeed? backgroundColor? maskBackgroundColor? originalEyeType? originalEyebrowType? originalMouthType?

    Properties

    avatarStyle: string

    Avatar style (Circle or Transparent). Accepts enum or string for backward compatibility.

    style?: CSSProperties

    Inline CSS styles to apply to the avatar container

    topType?: string

    Top/hair style (e.g., "LongHairStraight", "ShortHairDreads01")

    accessoriesType?: string

    Accessories type (e.g., "Blank", "Kurt", "Prescription01")

    hairColor?: string

    Hair color (e.g., "Auburn", "Black", "Blonde")

    hatColor?: string

    Hat color (e.g., "Black", "Blue01", "Red")

    facialHairType?: string

    Facial hair type (e.g., "Blank", "BeardMedium", "MoustacheFancy")

    facialHairColor?: string

    Facial hair color (e.g., "Auburn", "Black", "Blonde")

    clotheType?: string

    Clothing type (e.g., "BlazerShirt", "GraphicShirt", "Hoodie")

    clotheColor?: string

    Clothing color (e.g., "Black", "Blue01", "PastelGreen")

    graphicType?: string

    Graphic type for GraphicShirt (e.g., "Bat", "Cumbia", "Deer")

    eyeType?: string

    Eye type (e.g., "Default", "Happy", "Wink", "Surprised")

    eyebrowType?: string

    Eyebrow type (e.g., "Default", "Angry", "RaisedExcited")

    mouthType?: string

    Mouth type (e.g., "Default", "Smile", "Serious", "Tongue")

    skinColor?: string

    Skin color (e.g., "Tanned", "Yellow", "Pale", "Light", "Brown", "DarkBrown", "Black")

    pieceType?: string

    Piece type for Piece component

    pieceSize?: string

    Piece size for Piece component

    viewBox?: string

    ViewBox for Piece component

    animationSpeed?: number

    Speed for idle animation in milliseconds (500-3000ms). Controls how often random expression changes occur when not hovering. Lower values = faster/more frequent changes.

    hoverScale?: number

    Scale multiplier on hover (1.05-1.32). Visual scaling effect only, does not change expressions.

    hoverSequence?: HoverExpression[]

    Expression sequence for hover animation. Array of HoverExpression objects to cycle through on hover.

    hoverAnimationSpeed?: number

    Speed for hover sequence animation in milliseconds (100-2000ms). Controls how fast the hover sequence cycles.

    backgroundColor?: string

    Background color for circle style avatars (hex color string). Falls back to parent element's background color if not specified.

    The avatar automatically watches for CSS variable changes on the document root and parent elements, so the clip mask dynamically responds to theme changes.

    maskBackgroundColor?: string

    Explicit background color for the clip mask overlay. When provided, this color is used immediately without auto-detection, eliminating the ~16ms delay from MutationObserver polling.

    Use this for dynamic themes where the parent background changes frequently and you want instant synchronization.

    // Pass the theme color directly for instant updates
    <Avatar maskBackgroundColor={themeColor} ... />
    originalEyeType?: string

    Original eye type before hover animation (used internally)

    originalEyebrowType?: string

    Original eyebrow type before hover animation (used internally)

    originalMouthType?: string

    Original mouth type before hover animation (used internally)

    Settings

    Member Visibility

    On This Page

    Properties