⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Avatar

Avatar

Avatars act as visual representations for people or objects and can be personalised using images, icons, or letters.

Usage

  • Use to present an avatar for a merchant, customer, or business.
  • Visualize the user within the platform interface.
  • Avatars in messaging or chat interfaces can help identify participants.
  • Used to visually represent user profile.

Anatomy

An avatar typically features include user initials with circular stroke, a profile icon, or a user photo/3D avatar, providing a visual representation of the user within a digital environment.

Avatar Anatomy

Variant

Avatar variants include initials, icon, 3D icon, and image options.

One Initial

A

Two Initial

AA

With Icon

With Ring

Without Ring

Sizes

Avatar are available in small, medium and large sizes.

Small

Medium

Large

Small

Medium

Large

Specifications

Structure and spacing measurements for avatar.

Avatar Specifications

Live Demo

The Avatar is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

App Bar
Badge

Helix - HDFC Life 2025