Angular Avatar Component | ng-hub-ui-avatar

Angular avatar component with initials, fallback images, presence badges and CSS variables for reusable user identity interfaces.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Avatar Sources

Resolve avatars from social profiles, custom images, name initials or a custom value, with automatic fallback.

Facebook Profile

https://graph.facebook.com/nasa/picture?width=60&height=60

Gravatar

https://secure.gravatar.com/avatar/adde9b2b981a8083cf084c63ad86f753?s=60&d=404

GitHub Profile

Custom Image Source

https://i.pravatar.cc/150?u=custom

Name Initials

JD

Value Display

75%

Fallback System

Gracefully degrade through every configured source until a meaningful representation is shown.

Fallback System

https://graph.facebook.com/invalid_id/picture?width=60&height=60

Showing GitHub source (Facebook ID invalid)

Sizing

Control avatar dimensions, the text-to-size ratio and how many initials are rendered.

Custom Size

SD

Text Size Ratio

RD

Initials Size Limit

JD

Styling

Shape, corner radius, colours, borders and arbitrary inline styles — all driven by inputs and CSS variables.

Round Avatar

R

Corner Radius

R

Background & Foreground Color

C
Custom BG & FG (inputs)
TD
Themed via --hub-avatar-bg-color ([autoColor]="false")

Border Color

B

Custom Styles

S

Interactivity

React to user interaction with the avatar click event.

Click Event Handler

CM
Click the avatar...

Groups & badge

Stack avatars into a group, and overlay a corner badge — a presence dot or a labelled count — coloured by the semantic palette.

Avatar Group Display

A
B
C
+3

Badge (dot & count)

AL
GH
AT
LT
CM
4k
JD
9+

Custom content

Project any icon, inline SVG, image or emoji inside the avatar. It is centered, padded and clipped to the avatar shape, sized agnostically (font icons scale, SVG/images fill) and themed with the regular bgColor / fgColor inputs.

Custom content (icons, SVG)

🚀