DEV Community

Cover image for Generate Avatars with Initials Using UI Avatars
trueqap
trueqap

Posted on

Generate Avatars with Initials Using UI Avatars

In today’s digital world, having a unique and personalized avatar can make a significant difference in user experience. Whether it's for a profile picture, comment section, or user dashboard, avatars help in identifying and connecting with users. One of the simplest and most effective tools for generating avatars with initials is UI Avatars.

What is UI Avatars?

UI Avatars is a straightforward API that generates avatars based on user initials. It's designed to be easy to use, with no login required and no usage tracking. The final images are cached, but no other information is stored. You can create avatars by simply providing a name or surname, or both.

Key Statistics:

  • +275,557,117 Daily requests
  • 2.8931ms Avg. Processing Time

How to Use UI Avatars

All requests to the UI Avatars API return an image stream that can be used directly in an <img/> tag. Here’s how you can generate avatars with different settings:

Basic Usage

To generate a default avatar for a user named "John Doe":

<img src="https://ui-avatars.com/api/?name=John+Doe" alt="John Doe Avatar">
Enter fullscreen mode Exit fullscreen mode

Customizing the Avatar

You can customize the avatar by changing various parameters:

  1. Background Color:
   <img src="https://ui-avatars.com/api/?background=0D8ABC&color=fff" alt="Blue Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Random Background:
   <img src="https://ui-avatars.com/api/?background=random" alt="Random Background Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Image Size:
   <img src="https://ui-avatars.com/api/?size=128" alt="128px Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Font Size:
   <img src="https://ui-avatars.com/api/?font-size=0.33" alt="Small Font Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Initial Characters:
   <img src="https://ui-avatars.com/api/?length=1" alt="Single Initial Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Rounded Image:
   <img src="https://ui-avatars.com/api/?rounded=true" alt="Rounded Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Bold Text:
   <img src="https://ui-avatars.com/api/?bold=true" alt="Bold Text Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Uppercase:
   <img src="https://ui-avatars.com/api/?uppercase=false&name=different+Case" alt="Lowercase Initials Avatar">
Enter fullscreen mode Exit fullscreen mode
  1. Format (SVG or PNG):
   <img src="https://ui-avatars.com/api/?format=svg" alt="SVG Avatar">
Enter fullscreen mode Exit fullscreen mode

Combining Settings

You can combine multiple settings to create a more personalized avatar:

<img src="https://ui-avatars.com/api/?name=Elon+Musk&size=128&background=a0a0a0&color=ff0000&length=1&rounded=true&bold=true" alt="Custom Avatar">
Enter fullscreen mode Exit fullscreen mode

Using UI Avatars with Gravatar

A practical use-case is to use UI Avatars as a fallback for Gravatar:

<img src="https://www.gravatar.com/avatar/EMAIL_MD5?d=https%3A%2F%2Fui-avatars.com%2Fapi%2F/Elon+Musk/128" alt="Gravatar Fallback Avatar">
Enter fullscreen mode Exit fullscreen mode

Note: Due to Gravatar’s limitations, parameters must be passed as sub-directories instead of query parameters. Consider URL encoding the name if it contains special characters.

Retina Display Support

For crisp avatars on high DPI screens, use 1.5x or 2x sizes but keep the <img> tag at the original size:

<img src="https://ui-avatars.com/api/?name=John+Doe&size=128" width="64" height="64" alt="Retina Avatar">
Enter fullscreen mode Exit fullscreen mode

Language/Script Support

UI Avatars supports several Unicode scripts and languages, including Arabic, Armenian, Bengali, Georgian, Hebrew, Chinese, Japanese, Mongolian, Thai, and Tibetan.

WordPress Plugin

If you have a WordPress site, you can use the free UI Avatars WordPress plugin for easy integration.

Conclusion

UI Avatars provides a simple and efficient way to generate avatars with initials from names. With a variety of customization options and no need for login or usage tracking, it's a perfect solution for developers looking to enhance their user interfaces with personalized avatars.

Try out UI Avatars today and see how it can improve your application's user experience!

Top comments (0)