@elmqeddem/react-avatar

About This Package

As 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

Installation

npm install @elmqeddem/react-avatar

Usage (React)

import { Avatar } from "@elmqeddem/react-avatar";
import { User, Camera } from "lucide-react";

export default function App() {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      {/* Default initials */}
      <Avatar name="John Doe" />

      {/* Emoji */}
      <Avatar content="🎉" />

      {/* Lucide icon */}
      <Avatar content={<User size={24} />} />

      {/* Another icon */}
      <Avatar content={<Camera size={24} />} />

      {/* Custom size with initials */}
      <Avatar name="Jane Doe" size={60} />
    </div>
  );
}

Usage (Next.js App Router)

"use client";

import { Avatar } from "@elmqeddem/react-avatar";

export default function Page() {
  return <Avatar name="🎉🎉" />;
}