Vue Avatar Component

Avatar

The Vue Avatar component is used to display circular user profile pictures. Vue avatars can portray people or objects and support images, icons, or letters.

Available in Other JavaScript Frameworks

CoreUI Vue Avatar Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

On this page

Image avatars

Showcase Vue avatars using images. These avatars are typically circular and can display user profile pictures.

vue

<template>
  <CAvatar src="/assets/img/avatars/1.jpg" />
  <CAvatar src="/assets/img/avatars/2.jpg" />
  <CAvatar src="/assets/img/avatars/3.jpg" />
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Letter avatars

Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.

An avatar without a theme stays neutral; with one, the background takes the theme color and the letters take the color that reads on it.

vue

<template>
  <CAvatar>CUI</CAvatar>
  <CAvatar theme="primary">CUI</CAvatar>
  <CAvatar theme="secondary">CUI</CAvatar>
  <CAvatar theme="warning">CUI</CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Subtle avatars

Added in v6.0.0

Use variant="subtle" for a tinted avatar that keeps the theme color in the text rather than the background.

vue

<template>
  <CAvatar theme="primary" variant="subtle">CUI</CAvatar>
  <CAvatar theme="secondary" variant="subtle">CUI</CAvatar>
  <CAvatar theme="success" variant="subtle">CUI</CAvatar>
  <CAvatar theme="danger" variant="subtle">CUI</CAvatar>
  <CAvatar theme="warning" variant="subtle">CUI</CAvatar>
  <CAvatar theme="info" variant="subtle">CUI</CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Icons avatars

Incorporate icons within Vue avatars, allowing for a visual representation using scalable vector graphics (SVG).

vue

<template>
  <CAvatar theme="info">
    <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
      <path
        d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
      ></path>
      <path
        d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
      ></path>
    </svg>
  </CAvatar>
  <CAvatar theme="success">
    <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
      <path
        d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
      ></path>
      <path
        d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
      ></path>
    </svg>
  </CAvatar>
  <CAvatar theme="danger">
    <svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
      <path
        d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
      ></path>
      <path
        d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
      ></path>
    </svg>
  </CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Rounded avatars

Use the shape="rounded" prop to make Vue avatars squared with rounded corners.

vue

<template>
  <CAvatar theme="primary" shape="rounded">CUI</CAvatar>
  <CAvatar theme="secondary" shape="rounded">CUI</CAvatar>
  <CAvatar theme="warning" shape="rounded">CUI</CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Square avatars

Use the shape="rounded-0" prop to make Vue avatars squared.

vue

<template>
  <CAvatar theme="primary" shape="rounded-0">CUI</CAvatar>
  <CAvatar theme="secondary" shape="rounded-0">CUI</CAvatar>
  <CAvatar theme="warning" shape="rounded-0">CUI</CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Sizes

Fancy larger or smaller Vue avatar component? Add size="xl", size="lg", size="md", size="sm" or size="xs" for additional sizes. The status indicator scales with the avatar, so it stays proportional at every size.

vue

<template>
  <CAvatar theme="secondary" size="xl">CUI</CAvatar>
  <CAvatar theme="secondary" size="lg">CUI</CAvatar>
  <CAvatar theme="secondary" size="md">CUI</CAvatar>
  <CAvatar theme="secondary">CUI</CAvatar>
  <CAvatar theme="secondary" size="sm">CUI</CAvatar>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

Stacked avatars

Display multiple avatars in a stack to represent a group of users or items, with an additional count if there are more avatars than can be displayed. Each avatar in a stack wears a ring in the page background color, so overlapping photos stay separated in both color schemes.

vue

<template>
  <CAvatarStack>
    <CAvatar src="/assets/img/avatars/1.jpg" />
    <CAvatar src="/assets/img/avatars/2.jpg" />
    <CAvatar src="/assets/img/avatars/3.jpg" />
    <CAvatar>+2</CAvatar>
  </CAvatarStack>
</template>

<script setup>
import { CAvatar, CAvatarStack } from '@coreui/vue'
</script>

Size the whole stack at once with the size property on <CAvatarStack>, and tune the overlap with --cui-avatar-stack-spacing — the fraction of the avatar size each one is pulled over its neighbour:

vue

<template>
  <CAvatarStack size="lg" :style="{ '--cui-avatar-stack-spacing': -0.25 }">
    <CAvatar src="/assets/img/avatars/1.jpg" />
    <CAvatar src="/assets/img/avatars/2.jpg" />
    <CAvatar src="/assets/img/avatars/3.jpg" />
  </CAvatarStack>
</template>

<script setup>
import { CAvatar, CAvatarStack } from '@coreui/vue'
</script>

Avatars with status

Add a status indicator with the status property to show presence. The indicator takes its color from the matching theme-* class; status="secondary" reads as offline.

vue

<template>
  <div class="d-flex gap-4">
    <CAvatar src="/assets/img/avatars/1.jpg" status="success" aria-status-label="Online" />
    <CAvatar status="warning" aria-status-label="Away">CUI</CAvatar>
    <CAvatar status="danger" aria-status-label="Busy">CUI</CAvatar>
    <CAvatar status="secondary" aria-status-label="Offline">CUI</CAvatar>
  </div>
</template>

<script setup>
import { CAvatar } from '@coreui/vue'
</script>

The indicator is a few pixels of color and nothing else, so color is the only thing separating one state from another — not enough on its own, and at this size a different shape would not help either. Where the state means something rather than decorates, name it with ariaStatusLabel:

<CAvatar status="danger" aria-status-label="Busy">CUI</CAvatar>

That renders role="img" alongside the label, which is what makes the name stick: aria-label on a bare <span> has no role to attach to, and assistive technology is free to ignore it. Without the property the indicator stays decorative.

The ring around the indicator follows the page background through --cui-avatar-status-border-color, so it stays correct in dark mode.

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.