<template>
  <div class="d-flex align-center justify-space-around">
    <v-avatar color="info">
      <v-icon icon="mdi-account-circle"></v-icon>
    </v-avatar>

    <v-avatar>
      <v-img
        alt="John"
        src="https://cdn.vuetifyjs.com/images/john.jpg"
      ></v-img>
    </v-avatar>

    <v-avatar color="red">
      <span class="text-headline-small">CJ</span>
    </v-avatar>
  </div>
</template>

<example-meta lang="json">
  {
    "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2771-90954&t=tC3y53U3XKPv8ZyJ-4"
  }
</example-meta>
