Avatar
Show the profile picture and name of your users inside an avatar. If there is no picture to show, a placeholder is used instead.
<x-avatar picture="/people/fake/john-hammond.webp" name="John Hammond" class="bg-sky-300 size-14 border-2 border-base-content"/>
<x-avatar name="John Doe" class="text-base-100 bg-base-content border-2 border-black size-14"/>
#Placeholder picture
You can use the placeholder attribute to change the profile icon used when no picture is provided.
Trying outline vs. filled icons with a corresponding combination of color / background / border / outline / ring can help finetune what you want to show, even without changing the icon library you use.
<x-avatar placeholder="heroicon-o-question-mark-circle" name="Edward Nigma" class="text-base-100 bg-base-content border-2 border-base-content size-14"/>
<x-avatar placeholder="heroicon-s-question-mark-circle" name="Edward Nashton" class="bg-base-100 text-base-content border-2 border-base-content size-14"/>
<x-avatar name="Clark Kent">
<x-slot:placeholder>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 -6400 12800 6400"
class="bg-base-100 text-base-content p-1 size-14 rounded-full border-2 border-base-content">
<g fill="currentColor" stroke="none">
<path d="M9960 -5134 c-25 2 -106 8 -180 14 -352 29 -767 103 -1450 260
-1060 244 -1395 295 -1930 295 -479 -1 -669 -31 -1475 -235 -214 -54 -436 -108
-492 -119 -263 -54 -939 -156 -1248 -188 -243 -25 -811 -25 -1015 0 -341 42
-640 103 -1270 259 -223 55 -512 124 -643 153 -131 29 -241 55 -243 58 -3
3 -6 148 -7 323 -3 496 1 509 270 860 109 142 177 257 207 348 9 27 30 112
46 188 126 588 305 1192 521 1756 107 279 199 425 374 590 274 259 730
464 1205 541 216 35 365 44 628 38 626 -15 1009 -129 1390 -414 103 -77 304
-273 396 -387 222 -274 434 -635 621 -1058 109 -248 133 -321 225 -713 70
-294 120 -456 175 -565 55 -109 72 -130 133 -158 55 -25 58 -25 236 -19 255 10
249 8 328 87 55 55 76 86 126 190 64 132 91 214 167 505 168 638 406 1174
696 1570 98 133 357 391 479 477 705 497 1693 616 2488 299 614 -245 1043 -709
1267 -1371 70 -206 113 -374 210 -811 137 -620 197 -833 276 -993 63 -126 107
-180 239 -285 79 -64 98 -151 81 -386 -7 -96 -6 -177 1 -258 18 -197 -10 -286 -109
-339 -32 -18 -102 -38 -194 -58 -151 -31 -269 -64 -599 -169 -271 -86 -425 -122
-800 -186 -480 -81 -601 -95 -860 -99 -124 -2 -245 -2 -270 0z m-6185 435 c226
20 496 78 761 163 566 183 884 419 1017 756 49 125 67 234 68 415 0 213 -36
428 -121 720 -73 249 -249 708 -360 942 -310 651 -793 1072 -1414 1234 -415
108 -913 94 -1386 -38 -449 -125 -790 -448 -985 -933 -88 -219 -217 -707 -284
-1075 -95 -519 -117 -1069 -53 -1310 113 -422 450 -655 1122 -774 129 -23
523 -74 705 -91 315 -30 658 -33 930 -9z m6215 5 c215 18 455 47 662 79 586
91 924 250 1103 519 116 176 145 292 152 621 11 492 -62 987 -243 1645
-69 255 -102 347 -178 505 -103 214 -208 360 -359 500 -177 165 -375
269 -637 335 -783 196 -1489 85 -2033 -321 -339 -253 -597 -614 -807 -1130 -277
-680 -390 -1119 -377 -1469 3 -74 12 -171 22 -215 91 -438 472 -744 1173
-944 327 -93 515 -125 867 -145 110 -6 478 5 655 20z"/>
</g>
</svg>
</x-slot:placeholder>
</x-avatar>