#
  • Dashboard
  • dashboard4
    • Project
    • Ecommerce
  • apps
    • Calendar
    • Profile Page
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • Api
    • Ticket
      • Ticket
      • Ticket Details
    • Emails Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • Bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • Widgets
  • Component
  • Ui Kits
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avatar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • Advanced UI12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
    • Tree View
  • Icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • Misc
  • Map & Charts
  • Map & Charts
    • Google Maps
    • Leaflet map
  • Chart
    • Chart js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • Table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • Forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • Ready to usenew
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • Auth Pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • Error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • Other pages
    • Blank
    • Maintenance
    • Landing Pages
    • Coming Soon
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • Document
  • Support
  • 26 °C
  • EN
  • 5
  • avatar

  • Copyright © 2025 axelit. All rights reserved 💖

  • V1.0.0
  • Need Help

Avatar

  • Ui Kits
  • Avatar
Colors

Use color bg-* to change the background theme color of avatar.

PAD
<Card>
  <CardHeader>
    <h5>Colors</h5>
    <p className="text-muted">
      Use color <code>bg-*</code> to change the background theme color of avatar.
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
<span className="bg-primary h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-secondary h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-success h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-info h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-warning h-45 w-45 d-flex-center b-r-50">
        P
      </span>
<span className="bg-danger h-45 w-45 d-flex-center b-r-50">
        AD
      </span>
    </div>
  </CardBody>
</Card>
Light Background

For light style use text-light-* class.

<Card>
  <CardHeader>
    <h5>Light Background</h5>
    <p className="text-muted">
      For light style use <code>text-light-*</code> class.
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-light-primary h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
    </div>
  </CardBody>
</Card>
Radius

Radius avatar text in soft color example

<Card>
  <CardHeader>
    <h5>Radius</h5>
    <p className="text-muted">
      Radius avatar text in soft color example
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-light-primary h-45 w-45 d-flex-center b-r-0">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-6">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-10">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-14">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-20">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-30">
        <FontAwesomeIcon icon={faUser} />
      </span>
    </div>
  </CardBody>
</Card>
Outline

For outline style use text-outline-* class.

ARTE
<div className="card equal-card">
  <div className="card-header">
    <h5>Outline</h5>
    <p className="text-muted">For outline style use <code>text-outline-*</code> class.</p>
  </div>
  <div className="card-body">
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-outline-primary h-45 w-45 d-flex-center b-r-50">
        [object Object]
      </span>
      <span className="text-outline-secondary h-45 w-45 d-flex-center b-r-50">
        [object Object]
      </span>
      <span className="text-outline-success h-45 w-45 d-flex-center b-r-50">
        [object Object]
      </span>
      <span className="text-outline-info h-45 w-45 d-flex-center b-r-50">
        [object Object]
      </span>
      <span className="text-outline-warning h-45 w-45 d-flex-center b-r-50">
        AR
      </span>
      <span className="text-outline-danger h-45 w-45 d-flex-center b-r-50">
        TE
      </span>
    </div>
  </div>
</div>
Images
Avatar 1
Avatar 2
Avatar 3
Avatar 4
Avatar 5
Avatar 6
<div className="d-flex gap-3 flex-wrap">
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
    <img src="/images/avatar/1.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
    <img src="/images/avatar/2.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <img src="/images/avatar/3.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
    <img src="/images/avatar/4.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <img src="/images/avatar/5.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
    <img src="/images/avatar/6.png" alt="" className="img-fluid">
  </div>
</div>
Size
<div className="d-flex gap-3 flex-wrap">
  <span className="bg-secondary h-30 w-30 d-flex-center b-r-50">
    <i className="fa fa-user"></i>
  </span>
  <span className="bg-success h-35 w-35 d-flex-center b-r-50">
    <i className="fa fa-user"></i>
  </span>
  <span className="bg-info h-40 w-40 d-flex-center b-r-50">
    <i className="fa fa-user"></i>
  </span>
  <span className="bg-warning h-45 w-45 d-flex-center b-r-50">
    <i className="fa fa-user"></i>
  </span>
  <span className="bg-danger h-50 w-50 d-flex-center b-r-50">
    <i className="fa fa-user"></i>
  </span>
</div>
Indicator Position And Icon

Radious avatar text in soft color example

3
<div className="d-flex gap-3 flex-wrap">
  <span className="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute top-0 start-1 p-1 bg-danger border border-light rounded-circle"></span>
  </span>
  <span className="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
  </span>
  <span className="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/1.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/4.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 end-0 d-flex-center bg-warning border-light text-center h-20 w-20 f-s-10 start-30  rounded-circle">3</span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/6.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 d-flex-center bg-danger border border-light text-center h-20 w-20 f-s-10 start-30  rounded-circle">&lt;IconMail /&gt;</span>
  </span>
</div>
Group with Tooltip

User group with tooltip

  • A
  • CD
  • XYZ
  • 2+
<div className="d-flex gap-3 flex-wrap">
  <ul className="avatar-group">
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary" ">
      <img src="/images/avatar/4.png" alt="" className="img-fluid">
    </li>
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success" ">
      <img src="/images/avatar/5.png" alt="" className="img-fluid">
    </li>
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger" ">
      <img src="/images/avatar/6.png" alt="" className="img-fluid">
    </li>
  </ul>

  <ul className="avatar-group">
    <li className="text-bg-primary h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
    <li className="text-bg-secondary h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
    <li className="text-bg-success h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
  </ul>

  <ul className="avatar-group">
    <li className="text-bg-danger h-45 w-45 d-flex-center b-r-50" >
      A
    </li>
    <li className="text-bg-dark h-45 w-45 d-flex-center b-r-50" >
      CD
    </li>
    <li className="text-bg-warning h-45 w-45 d-flex-center b-r-50" >
      XYZ
    </li>
    <li className="text-bg-secondary h-30 w-30 d-flex-center b-r-50" >
      2+
    </li>
  </ul>
</div>