How to Create Identicon in .NET Core?

Recently, I was working on a .NET Core project and a requirement in that project was to create random avatars for each user. A first, I decided to use Gravatar. But later I found something cool - Identicons.

Identicon is an image representation of hash of some values like a text, email, or name. With Identicons, we can easily create unique avatars.

You can download the source code of a sample project from GitHub.

Create Identicon in .NET Core

Jdenticon is an open-source library for generating Identicons. This library is available for .Net Core, JavaScript, and PHP.

To create identicons in your .Net core web application, install the Jdenticon NuGet package using the following command.

Install-Package Jdenticon.AspNetCore

You can open the NuGet package manager console in Visual Studio from Tools -> NuGet Package Manager -> Package Manager Console.

After installing the package, we have to make some changes to the startup.cs file and _ViewImports.cshtml file.

Add the following line above app.UseStaticFiles(); in the Configure method of Startup.cs.

app.UseJdenticon();
app.UseStaticFiles();

Next, add these two lines of code to _ViewImports.cshtml file located in the Views folder. If this file does not exist, create it first.

@using Jdenticon.AspNetCore
@addTagHelper "*, Jdenticon.AspNetCore"

With this code, we are importing the custom tag helpers defined in the Jdenticon library.

Now, we are all set to create Identicons in our application.

Open any view file and add the following code to it. In this post, I will be using the Index.cshtml file.

@{
	var text = "<Your_Value_Here>";
}

<img identicon-value="" width="100" height="100" alt="Identicon" />

@*Alternate way*@
@Html.Identicon(text2, 200)

Replace <Your_Value_Here> placeholder with the username, email, or any text.

If you are using .NET Core Identity you want to create an Identicon based on the user email, use @User.Identity.Name as the value.

I hope this post was helpful. If you have any suggestions, let me know in the comments below.