# Avatar > Avatars are a BootstrapVue custom component, and are typically used to display a user profile as a > picture, an icon, or short text. `` provides several props for customizing its > appearance such as color variant and roundness, and optionally supports acting as a button, link > or [router link](/docs/reference/router-links). ## Overview Avatars are lightweight components, which render inline by default, so that they are vertically centered beside any adjoining plain text. They also can be used as children of other components. ```html ``` ## Avatar types The avatar content can be either a an image, an icon, or short text string. Avatar content defaults to the [`'person-fill'` icon](/docs/icons) when no other content is specified. You can also supply custom content via the default slot, although you may need to apply additional styling on the content. ### Image content Use the `src` prop to specify a URL of an image to use as the avatar content. The image should have an aspect ratio of `1:1` (meaning the width and height should be equal), otherwise image aspect distortion will occur. The image will be scaled up or down to fit within the avatar's bounding box. ```html ``` **Notes:** - When using a module bundler and project relative image URLs, please refer to the [Component img src resolving](/docs/reference/images) reference section for additional details. - The `src` prop takes precedence over the `icon` and `text` props. - 2.11.0+ If the image fails to load, the avatar will fallback to the value of the `icon` or `text` props. If neither the `icon` or `text` props are provided, then the default avatar icon will be shown. Also, when the image fails to load, the `img-error` event will be emitted. - [Variant colors](#variants) when using images not normally visible, unless the image fails load. The variant will affect the focus styling when the image avatar is also an [actionalble avatar](#actionalble-avatars). ### Icon content Easily use one of [BootstrapVue's icons](/docs/icons) as the avatar content via the `icon` prop. The prop should be set to a valid icon name. Icons will scale respective to the [`size` prop](#sizing). ```html ``` **Notes:** - When providing a BootstrapVue icon name, you _must_ ensure that you have registered the corresponding icon component (either locally to your component/page, or globally), if not using the full [`BootstrapVueIcons` plugin](/docs/icons). - The `icon` prop takes precedence over the `text` prop. - If the `text`, `src`, or `icon` props are not provided _and_ the [default slot](#custom-content) has no content, then the `person-fill` icon will be used. ### Text content You can specify a short string as the content of an avatar via the `text` prop. The string should be short (1 to 3 characters), and will be transformed via CSS to be all uppercase. The font size will be scaled relative to the [`size` prop setting](#sizing). ```html ``` ### Custom content Use the `default` slot to render custom content in the avatar, for finer grained control of its appearance, or if using custom icons or SVGs e.g.: ```html

``` **Multi-line text example:** ```html ``` **Notes:** - The default slot takes precedence over the `text`, `src` and `icon` props. - The default slot content will be wrapped in a `` element to ensure proper centering. - You may need additional styling applied to the custom content to compensate for the [shape of avatar component](#rounding). ## Styling ### Variants Use the `variant` prop to specify one of Bootstrap theme variant colors. The default variant is `secondary`. ```html ``` If you have defined additional custom variants via [SASS theming variables](/docs/reference/theming), the custom variants will also be available to use. ### Sizing By default, avatars are sized to `2.5em` (which is relative to the current font size). You can change the size of the avatar by changing the current font size, or use the prop `size` to specify an explicit size. The sizes `sm`, `md` and `lg` default to `1.5em`, `2.5em` and `3.5em`. Numbers get converted to pixel values. Any other value _must_ include the units (such as `px`, `em`, or `rem`). ```html ``` **Note:** Avatars are _always_ rendered with an aspect ratio of `1:1`. ### Square Prefer a square avatar? simply set the `square` prop to `true`. ```html ``` ### Rounding `` renders with a circular border radius. You can change the rounding by setting the prop `rounded` to one of the values `true`, `'sm'`, `'lg'`, `'top'`, `'left'`, `'right'`, or `'bottom'`. When set to `true` (or the empty string `''`), it uses the Bootstrap default of medium rounding. ```html ``` **Notes:** - The `square` prop takes precedence over the `rounded` prop. - Alternatively to to the `square` prop, you can set the `rounded` prop to the string `'0'` to achieve a square avatar. ### Alignment By default `` will be vertically centered with its adjoining content. In some cases you may want to alter the alignment, such as ensuring that a text-only avatar aligns its text with the adjoining text. Simply set a [vertical alignment utility](/docs/reference/utility-classes) class on the component, such as `` or ``, etc. ## Actionable avatars Easily create avatars that respond to clicks, or avatars that change the URL/route when clicked. Actionable avatars will appear in the document tab sequence, and are accessible for both screen reader and keyboard-only users. Image avatars, when actionalble, employ a basic scale transform on the image when hovered. ### Button Want to trigger the opening of a modal or trigger an action? Set the `button` prop to instruct `` to render as a `