Storybook
-
Theme
-
-
-
-
Light tone
-
-
-
-
-
Dark tone
-
-
-
-
-
-
Reset to default
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
Avatar
User profile image.
Avatar photo by Nicolas Horn on Unsplash
-
Documentation
- avatar
Default
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
Sizes
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
Custom size
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
Round
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
Avatar pair
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-elixir-09bfbe197fb34534cb05dcf347a524eb.png?vsn=d)
![](/images/avatar-elixir-09bfbe197fb34534cb05dcf347a524eb.png?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-elixir-09bfbe197fb34534cb05dcf347a524eb.png?vsn=d)
![](/images/avatar-elixir-09bfbe197fb34534cb05dcf347a524eb.png?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
![](/images/avatar-852456f1b8521065497cd6be7668307b.jpg?vsn=d)
-
On this page
- Top of page
- Documentation
-
Stories
- Default
- Sizes
- Custom size
- Round
- Avatar pair