Koyaka
Patreon

Avatar

Avatar Basic

Preview Code 

    <div class="avatar">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>

Rounded Avatar

Preview Code 

    <div class="avatar rounded">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>

Avatar Sizes

Preview Code 

    <div class="avatar rounded xs">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>
    <div class="avatar rounded sm">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>
    <div class="avatar rounded">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>
    <div class="avatar rounded lg">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>
    <div class="avatar rounded xl">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
    </div>

Avatar with Text

Preview Code
A
A
A
B
C

    <div class="avatar rounded xs">A</div>
    <div class="avatar rounded sm">A</div>
    <div class="avatar rounded">A</div>
    <div class="avatar rounded lg">B</div>
    <div class="avatar rounded xl">C</div>

Avatar with Status

Preview Code 

    <div class="avatar rounded xl">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
        <div class="indicator tr mt-2 mr-2">
            <div class="status"></div>
        </div>
    </div>

    <div class="avatar rounded xl">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
        <div class="indicator tr mt-2 mr-2">
            <div class="status success"></div>
        </div>
    </div>

    <div class="avatar rounded xl">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
        <div class="indicator tr mt-2 mr-2">
            <div class="status danger"></div>
        </div>
    </div>

    <div class="avatar xl">
        <img
            src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
        />
        <div class="indicator tr">
            <div class="status success animate"></div>
        </div>
    </div>

Avatar Group

Preview Code
99+

    <div class="avatar-group">
        <div class="avatar rounded lg">
            <img
                src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
            />
        </div>
        <div class="avatar rounded lg">
            <img
                src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
            />
        </div>
        <div class="avatar rounded lg">
            <img
                src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
            />
        </div>
        <div class="avatar rounded lg">99+</div>
    </div>

Contents