Lightweight React avatar component with initials and custom content
npm install @elmqeddem/react-avatarAs a solo project builder working on www.invoaza.com, I ran into a persistent UI problem: I needed each user to have a clean, consistent avatar that could:
- Automatically generate a unique color
- Show initials if no picture was available
- Display custom icons or emojis when needed
The existing solutions I tried were either too heavy, didn’t support full TypeScript typing, or didn’t work well with modern frameworks like Next.js. This made it harder to build a professional, consistent UI for our community users on Invoaza.
So I built @elmqeddem/react-avatar — a simple, lightweight React component that checks all those boxes, while being fully typed, customizable, and compatible with React 18+, Next.js, Vite, and CRA.
> Perfect for:
> - CRM dashboards — quickly show client/user avatars with unique colors
> - Team management tools — display initials when profile pictures aren’t available
> - Community platforms — use custom emojis or icons to make avatars more engaging
> - Any React project that needs lightweight, customizable, and professional avatars
---
``bash`
npm install @elmqeddem/react-avatar
`
import { Avatar } from "@elmqeddem/react-avatar";
import { User, Camera } from "lucide-react";
export default function App() {
return (
{/ Emoji /}
{/ Lucide icon /}
{/ Another icon /}
{/ Custom size with initials /}
`
`
"use client";
import { Avatar } from "@elmqeddem/react-avatar";
export default function Page() {
return
}
``