Plug and Play Avatars in Laravel with Laravolt

Plug and Play Avatars in Laravel with Laravolt

The Laravolt Avatar by Bayu Hendra Winata is a package that turns strings like names into avatars effortlessly. This package uses the Intervention Image package under the hood to generate base64 images on-the-fly, saving as an image, and SVG.

The basic usage looks like this in your Blade templates:

<img src="{{ Avatar::create('Joko Widodo')->toBase64() }}" />

<!-- SVG markup -->
{!! Avatar::create('Susilo Bambang Yudhoyono')->toSvg(); !!}

This package is highly configurable—you can even configure an individual image on-the-fly while rendering it:

// width = 100, height = 200
Avatar::create('Soekarno')->setDimension(100, 200);

Here’s the full configuration at the time of writing so you can get a feel for all the ways you can customize avatar generation:


return [

    // Supported: "gd", "imagick"
    'driver'    => 'gd',

    // Initial generator class
    'generator' => \Laravolt\Avatar\Generator\DefaultGenerator::class,

    // Whether all characters supplied must be replaced with their closest ASCII counterparts
    'ascii'    => false,

    // Image shape: circle or square
    'shape' => 'circle',

    // Image width, in pixel
    'width'    => 100,

    // Image height, in pixel
    'height'   => 100,

    // Number of characters used as initials.
    'chars'    => 2,

    // font size
    'fontSize' => 48,

    // convert initial letter to uppercase
    'uppercase' => false,

    // Fonts used to render text.
    // If contains more than one fonts, randomly selected based on name supplied
    'fonts'    => ['path/to/OpenSans-Bold.ttf', 'path/to/rockwell.ttf'],

    // List of foreground colors to be used, randomly selected based on name supplied
    'foregrounds'   => [

    // List of background colors to be used, randomly selected based on name supplied
    'backgrounds'   => [

    'border'    => [
        'size'  => 1,

        // border color, available value are:
        // 'foreground' (same as foreground color)
        // 'background' (same as background color)
        // or any valid hex ('#aabbcc')
        'color' => 'foreground'

I would like to point out that at the time of writing I tried this package out with the GD extension and a base64 data URI and the image quality resulted in jagged edges. I would recommend experimenting with different configurations. I also tried the SVG output, and it worked well, with perhaps a little bit of font alignment in different browsers.

Learn More

Check out the official GitHub repository for the full readme and install it in your Laravel project with Composer:

composer require laravolt/avatar

# Or for Laravel 5.1
composer require laravolt/avatar ~0.3

Note that if you are using Laravel 5.4 or earlier you need to configure the Avatar facade manually to use it in your templates.

Filed in: Laravel Packages


Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Mid / Sen. Software Engineer
Clearwater, FL
Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
Full Stack Software Engineer
Atlanta, GA or Remote
Laravel/PHP Developer
Chicago, IL
Neon One
Software Engineer, Web Applications
Vaughan, ON, Canada
Blast Motion
Contract Services Software Engineer (Laravel | Vue | Tailwind)
Riverbed Technology
Senior Laravel Developer
Wilmington, NC
GE Software Inc.