Personalize Your Apps with Material Letter Icons

Imagine a perfect world where every single one of your users has uploaded a photo of themselves to their profile. Unfortunately, we don't live in that quintessential world (yet), and certainly every single app that offers user-to-user interaction has to deal with this UI constraint in its own way.

Solutions

Most slap a generic silhouette icon of a person, as seen on Google+:

Others improve on the silhouette approach and add gender-specific silhouettes, as seen on Facebook:

Some choose to display a user's Gravatar using their e-mail address, a nifty approach:

And finally, the most creative approach to date, a colorful, rounded icon containing the first letter of the user's (or, in this case, sender's) name, as seen in Gmail and a few other Google apps:

I really liked Gmail's approach. It's much more personal than the other approaches I mentioned, as it varies between different senders.

And after facing this very same UI dilemma in one of my recent projects, Applicationize, I decided to solve it once and for all by building a package that generates these Material Design-colored letter icons on-the-fly in Node.js:
https://github.com/eladnava/material-letter-icons

Material Letter Icons

The package generates a round 512x512 icon for every letter of the alphabet, background-colored using the Material Design color palette, and typed in the thin, elegant Roboto Light typeface.

The result are icons that are nearly-identical to those in Google's magnificent Gmail app in Android Lollipop and newer:

Get them here:
https://github.com/eladnava/material-letter-icons

I hope that next time you are faced with this very same UI decision, you make use of these icons to make the interaction just a little more personal.