HIG Avatar


1422441.4.05 months ago4 years agoMinified + gzip package size for @hig/avatar in KB



Avatars are a visual representation of a customer's identity. These may be small thumbnails as part of a menu or more prominent, standalone elements on account and management views.

Initials are dynamically generated from the provided name and always rendered. This allows the initials to serve as a placeholder while the image is loading.

Read more about when and how to use the Avatar component on the hig website.

Getting started

Install the package

yarn add @hig/avatar @hig/theme-context @hig/theme-data

Import the component

import Avatar, { sizes } from '@hig/avatar';

Basic usage

  name="David Gonzales"


Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Avatar also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

import Avatar from '@hig/avatar';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    avatarContainer: {
      color: themeData["colorScheme.status.error"]
    avatarImageWrapper: {
      opacity: 1
    avatarImage: {
      padding: `4px`
    avatarInitials: {
      position: `static`

  return (
    <Avatar stylesheet={customStylesheet} />

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.