Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.
npm install boring-avatars
import Avatar from 'boring-avatars';
<Avatar name="Maria Mitchell" />;
Prop | Type | Default |
---|---|---|
size | number or string | 40px |
square | boolean | false |
title | boolean | false |
name | string | Clara Barton |
variant | oneOf: marble , beam , pixel ,sunset , ring , bauhaus |
marble |
colors | array | ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'] |
The name
prop is used to generate the avatar. It can be the username, email or any random string.
<Avatar name="Maria Mitchell"/>
The variant
prop is used to change the theme of the avatar. The available variants are: marble
, beam
, pixel
, sunset
, ring
and bauhaus
.
<Avatar name="Alice Paul" variant="beam"/>
The size
prop is used to change the size of the avatar.
<Avatar name="Ada Lovelace" size={88}/>
The colors
prop is used to change the color palette of the avatar.
<Avatar name="Grace Hopper" colors={["#fb6900", "#f63700", "#004853", "#007e80", "#00b9bd"]}/>
The square
prop is used to make the avatar square.
<Avatar name="Helen Keller" square/>
Important
Please note that the old service will be paused by the end of this month - July 31st 2024. We recommend transitioning to our new API service to ensure uninterrupted access and support.
Get access to the Boring avatars API service here →.