# Avatars

> Components for displaying user avatars with different styles and sizes.

Web: https://react.email/components/avatars

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Avatars group stacked

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/avatars-group-stacked

### Tailwind

```tsx
<Row width={undefined} className="border-collapse border-spacing-0">
  <Column
    width="44"
    height="44"
    className="h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
  >
    <div className="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950">
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        className="inline-block h-full w-full object-cover object-center"
      />
    </div>
  </Column>
  <Column
    width="44"
    height="44"
    className="relative left-[-12px] h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
  >
    <div className="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950">
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        className="inline-block h-full w-full object-cover object-center"
      />
    </div>
  </Column>
  <Column
    width="44"
    height="44"
    className="relative left-[-24px] h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
  >
    <div className="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950">
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        className="inline-block h-full w-full object-cover object-center"
      />
    </div>
  </Column>
</Row>
```

### Inline styles

```tsx
<Row
  width={undefined}
  style={{
    tableLayout: 'fixed',
    borderCollapse: 'collapse',
    borderSpacing: 0,
  }}
>
  <Column
    width="44"
    height="44"
    style={{
      height: '44px',
      width: '44px',
      padding: 0,
      textAlign: 'center',
      verticalAlign: 'middle',
      lineHeight: '0px',
    }}
  >
    <div
      style={{
        boxSizing: 'border-box',
        height: '100%',
        width: '100%',
        overflow: 'hidden',
        borderRadius: '9999px',
        border: '4px solid white',
        backgroundColor: '#030712',
      }}
    >
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        style={{
          display: 'inline-block',
          height: '100%',
          width: '100%',
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />
    </div>
  </Column>
  <Column
    width="44"
    height="44"
    style={{
      position: 'relative',
      left: '-12px',
      height: '44px',
      width: '44px',
      padding: 0,
      textAlign: 'center',
      verticalAlign: 'middle',
      lineHeight: '0px',
    }}
  >
    <div
      style={{
        boxSizing: 'border-box',
        height: '100%',
        width: '100%',
        overflow: 'hidden',
        borderRadius: '9999px',
        border: '4px solid white',
        backgroundColor: '#030712',
      }}
    >
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        style={{
          display: 'inline-block',
          height: '100%',
          width: '100%',
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />
    </div>
  </Column>
  <Column
    width="44"
    height="44"
    style={{
      position: 'relative',
      left: '-24px',
      height: '44px',
      width: '44px',
      padding: 0,
      textAlign: 'center',
      verticalAlign: 'middle',
      lineHeight: '0px',
    }}
  >
    <div
      style={{
        boxSizing: 'border-box',
        height: '100%',
        width: '100%',
        overflow: 'hidden',
        borderRadius: '9999px',
        border: '4px solid white',
        backgroundColor: '#030712',
      }}
    >
      <Img
        src="https://github.com/bukinoshita.png?size=100"
        alt="Bu Kinoshita"
        width="40"
        height="40"
        style={{
          display: 'inline-block',
          height: '100%',
          width: '100%',
          objectFit: 'cover',
          objectPosition: 'center',
        }}
      />
    </div>
  </Column>
</Row>
```

## Avatars with text

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/avatars-with-text

### Tailwind

```tsx
<Row>
  <Column align="center">
    <Link href="https://github.com/zehfernandes">
      <Row className="w-auto table-fixed border-collapse border-spacing-0">
        <Column className="h-[44px] w-[44px] overflow-hidden rounded-full p-0 text-center align-middle leading-[0px]">
          <Img
            src="https://github.com/zehfernandes.png?size=100"
            width="36"
            height="36"
            alt="Zeh Fernandes"
            className="h-full w-full object-cover object-center"
          />
        </Column>
        <Column className="pl-3 text-[14px] leading-[20px] font-medium text-gray-500">
          <p className="m-0 text-gray-700">Zeh Fernandes</p>
          <p className="m-0 text-[12px] leading-[14px]">Founding Designer</p>
        </Column>
      </Row>
    </Link>
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column align="center">
    <Link href="https://github.com/zehfernandes">
      <Row
        style={{
          width: 'auto',
          tableLayout: 'fixed',
          borderCollapse: 'collapse',
          borderSpacing: 0,
        }}
      >
        <Column
          style={{
            height: '44px',
            width: '44px',
            overflow: 'hidden',
            borderRadius: '9999px',
            padding: 0,
            textAlign: 'center',
            verticalAlign: 'middle',
            lineHeight: '0px',
          }}
        >
          <Img
            src="https://github.com/zehfernandes.png?size=100"
            width="36"
            height="36"
            alt="Zeh Fernandes"
            style={{
              height: '100%',
              width: '100%',
              objectFit: 'cover',
              objectPosition: 'center',
            }}
          />
        </Column>
        <Column
          style={{
            paddingLeft: '12px',
            fontSize: '14px',
            lineHeight: '20px',
            fontWeight: 500,
            color: '#6b7280',
          }}
        >
          <p style={{ margin: 0, color: '#374151' }}>Zeh Fernandes</p>
          <p style={{ margin: 0, fontSize: '12px', lineHeight: '14px' }}>
            Founding Designer
          </p>
        </Column>
      </Row>
    </Link>
  </Column>
</Row>
```

## Circular avatars

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/avatars-circular

### Tailwind

```tsx
<Row>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="30"
      height="30"
      className="inline-block w-[30px] h-[30px] rounded-full"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="42"
      height="42"
      className="inline-block w-[42px] h-[42px] rounded-full"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="54"
      height="54"
      className="inline-block w-[54px] h-[54px] rounded-full"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="66"
      height="66"
      className="inline-block w-[66px] h-[66px] rounded-full"
    />
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="30"
      height="30"
      style={{
        display: 'inline-block',
        width: '30px',
        height: '30px',
        borderRadius: '9999px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="42"
      height="42"
      style={{
        display: 'inline-block',
        width: '42px',
        height: '42px',
        borderRadius: '9999px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="54"
      height="54"
      style={{
        display: 'inline-block',
        width: '54px',
        height: '54px',
        borderRadius: '9999px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/luxonauta.png?size=100"
      alt="Lucas de França"
      width="66"
      height="66"
      style={{
        display: 'inline-block',
        width: '66px',
        height: '66px',
        borderRadius: '9999px',
      }}
    />
  </Column>
</Row>
```

## Rounded avatars

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/avatars-rounded

### Tailwind

```tsx
<Row>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="30"
      height="30"
      className="inline-block w-[30px] h-[30px] rounded-md"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="42"
      height="42"
      className="inline-block w-[42px] h-[42px] rounded-md"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="54"
      height="54"
      className="inline-block w-[54px] h-[54px] rounded-md"
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="66"
      height="66"
      className="inline-block w-[66px] h-[66px] rounded-md"
    />
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="30"
      height="30"
      style={{
        display: 'inline-block',
        width: '30px',
        height: '30px',
        borderRadius: '6px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="42"
      height="42"
      style={{
        display: 'inline-block',
        width: '42px',
        height: '42px',
        borderRadius: '6px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="54"
      height="54"
      style={{
        display: 'inline-block',
        width: '54px',
        height: '54px',
        borderRadius: '6px',
      }}
    />
  </Column>
  <Column align="center">
    <Img
      src="https://github.com/zenorocha.png?size=100"
      alt="Zeno Rocha"
      width="66"
      height="66"
      style={{
        display: 'inline-block',
        width: '66px',
        height: '66px',
        borderRadius: '6px',
      }}
    />
  </Column>
</Row>
```