Beautifully crafted unique avatar placeholder for your next react project
Lightweight and customizable ❤️
demo.mp4
Built by Nusu Alabuga and Oguz Yagiz Kara
🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏
- 🌈 40 Colors - Colors are so on point that most of the projects can use it without changing it
- 💠 60 Shapes - Beautifully crafted shapes that are unique to your user with color combination
- 🆎 Text or Shapes 🔸 - Use letters (eg. JD for John Doe) or unique shapes
- 🤠 Unique to user - Generated avatars are unique to the string that you provide, it means if you pass janedoe@gmail.com you will always get the same avatar
- 🕊 Lightweight - less than 20kb compressed + gzipped
- ✍️ Customizable - use shadows, change size, provide alternative text to display
- 🎯 Headless Mode - Use the core avatar generation logic in any environment, not just React
With yarn
yarn add avvvatars-reactWith npm
npm install avvvatars-reactImport Avvvatars to your app, then use it anywhere you want.
import Avvvatars from "avvvatars-react";
export default function MyAvatar() {
return <Avvvatars value="best_user@gmail.com" />;
}For non-React environments or when you need just the SVG generation logic, you can use the headless version:
import { createAvatar } from "avvvatars-react/headless";
// Generate an SVG string
const svgString = createAvatar("best_user@gmail.com", {
style: "character", // or 'shape'
size: 32,
shadow: false,
border: false,
borderSize: 2,
borderColor: "#fff",
radius: 32,
displayValue: "BU", // optional
});
// Use the SVG string as needed
console.log(svgString);The headless version provides the same customization options as the React component but returns an SVG string instead of a React component. This is useful for:
- Server-side rendering
- Non-React environments
- Custom implementations
- Generating avatars for emails or other non-browser contexts
This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.
<Avvvatars value="best_user@gmail.com" />Override default text by providing displayValue
for example if you provide value="best_user@gmail.com" the character output will be the first 2 letters of value which is "BE", if you pass displayValue="BU" you can override it to BU
<Avvvatars value="best_user@gmail.com" displayValue="BE" />Use shape or character as avatar.
<Avvvatars value="best_user@gmail.com" style="character" />Override default size (32px) by providing a number.
<Avvvatars value="best_user@gmail.com" size={32} />Enable shadow around the avatar.
<Avvvatars value="best_user@gmail.com" shadow={false} />radius?: number (default size)
Override the radius of the avatar, it takes size by default to always turn it to a circle
<Avvvatars value="best_user@gmail.com" radius={10} />Toggle border
<Avvvatars value="best_user@gmail.com" border={false} />Override border width
<Avvvatars value="best_user@gmail.com" borderSize={2} />Override border color
<Avvvatars value="best_user@gmail.com" borderColor="#fff" />If you want to access design files to change something or customize it to your own, use our Figma File
MIT