Auto-Generate Cute Avatar Icons in React!

Introduction

I’ll introduce “boring-avatars,” a library for automatically generating cute avatar icons in React.

GitHub - boringdesigners/boring-avatars: Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette. - boringdesigners/boring-avatars

https://github.com/boringdesigners/boring-avatars

Usage

It’s very simple!

npm install boring-avatars

import Avatar from "boring-avatars";

const App = () => (
  <Avatar
    name="some random string"
    size={40}
    variant="marble"
  />
);

The avatar icon changes depending on the string you put in name. If you set this to something like a username, you can automatically generate an avatar icon based on the username. The available variants are marble, beam, pixel, sunset, ring, and bauhaus. Let’s look at a sample of each.

You can also try out samples on this site!

Boring Avatars: Open-Source React Library & Customizable SVG Avatar Service

Discover our open-source React library and subscription-based service for generating unique SVG user profile avatars for your website.

https://boringavatars.com/

marble

beam

pixel

sunset

ring

bauhaus

Conclusion

I hope this helps as a reference when building a web service.