chromium/chrome/browser/resources/password_manager/sharing/share_password_group_avatar.html

<style include="cr-shared-style">
  :host {
    --divider-thickness_: 2px;
    --group-size_: 60px;

    border-radius: 50%;
    overflow: hidden;
    height: var(--group-size_);
    width: var(--group-size_);

    display: flex;
    gap: var(--divider-thickness_);
    background-color: white;
  }

  .inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--divider-thickness_);
    flex: 1;
  }

  img,
  #more {
    overflow: hidden;
    object-fit: cover;
    flex: 1;
    width: 100%;

    background-color: var(--google-grey-800);
    color: white;
    display: flex;
  }

  #more > span {
    cursor: default;
    user-select: none;
    margin-inline-start: 5px;
    margin-block-start: 4px;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      background-color: var(--google-grey-900);
    }
  }
</style>

<div class="inner-container" hidden="[[isMembersCountLessThan_(2, members)]]">
  <!-- Left / Top-Left -->
  <img is="cr-auto-img" draggable="false" alt="" id="secondImg"
      auto-src="[[getProfileImageUrl_(1, members)]]">
  <!-- Bottom-Left -->
  <img is="cr-auto-img" draggable="false" alt="" id="fourthImg"
      auto-src="[[getProfileImageUrl_(3, members)]]"
      hidden="[[isMembersCountLessThan_(4, members)]]">
</div>
<div class="inner-container">
  <!-- Top-Right -->
  <img is="cr-auto-img" draggable="false" alt="" id="thirdImg"
      auto-src="[[getProfileImageUrl_(2, members)]]"
      hidden="[[isMembersCountLessThan_(3, members)]]" >
  <!-- Full size / Right / Bottom-Right -->
  <img is="cr-auto-img" draggable="false" alt="" id="firstImg"
      auto-src="[[getProfileImageUrl_(0, members)]]"
      hidden="[[!isMembersCountLessThan_(5, members)]]">
  <!-- Bottom-Right -->
  <div id="more" hidden="[[isMembersCountLessThan_(5, members)]]">
    <span draggable="false">+[[getMoreCount_(members)]]</span>
  </div>
</div>