Skip to content


Use avatars to represent users or organizations.

Avatar can be used to represent users and organizations on GitHub.

  • Use the default round avatar for users, and the square argument for organizations or any other non-human avatars.
  • By default, Avatar will render a static <img>. To have Avatar function as a link, set the href which will wrap the <img> in a <a>.
  • Set size to update the height and width of the Avatar in pixels.
  • To stack multiple avatars together, use AvatarStack.


Images should have text alternatives that describe the information or function represented. If the avatar functions as a link, provide alt text that helps convey the function. For instance, if Avatar is a link to a user profile, the alt attribute should be @kittenuser profile rather than @kittenuser. Learn more about best image practices (WAI Images)


srcStringN/AThe source url of the avatar image.
altStringN/APassed through to alt on img tag.
sizeInteger20Adds the avatar-small class if less than 24.
squareBooleanfalseUsed to create a square avatar.
hrefStringnilThe URL to link to. If used, component will be wrapped by an <a> tag.
system_argumentsHashN/ASystem arguments



<%= render( "", alt: "@kittenuser")) %>


<%= render( "", alt: "@kittenuser", square: true)) %>
@kittenuser profile
<%= render( "#", src: "", alt: "@kittenuser profile")) %>

With size

<%= render( "", alt: "@kittenuser", size: 16)) %>
<%= render( "", alt: "@kittenuser", size: 20)) %>
<%= render( "", alt: "@kittenuser", size: 24)) %>
<%= render( "", alt: "@kittenuser", size: 28)) %>
<%= render( "", alt: "@kittenuser", size: 32)) %>
<%= render( "", alt: "@kittenuser", size: 36)) %>