Reshaping icons

Icon shape and consistency, or lack thereof, has always been a popular topic in Android launcher circles. Google originally embraced freeform icons, and two years ago Nova lead the way in providing some consistency to freeform by introducing icon normalization. It was an improvement, and Google and other launchers followed suit. However not everyone was satisfied.

I’d been toying with the idea of another approach this problem, intelligently reshaping icons, for years now. With Android 8.0, Google is abandoning freeform icons, instead replacing them with Adaptive Icons, which are specifically designed to reshape. It could be great for consistency, aside from the problem that very few apps support it. This gave me the extra motivation I needed to figure out how to reshape existing icons.

One thing I want to make clear is what this is not. This is not simply chopping the icon to a new shape, that leads to cutting off important content and looks wrong. Likewise, this isn’t a set of home made icons to apply in place of existing ones, that leaves behind too many icons and introduces even stronger inconsistencies for the unthemed icons. It also is not perfect. It works for icons that clearly have a distinctive background and foreground, in a standard shape, without lots of details around the edges.

Snapchat’s simple icon

Sometimes we luck out and have an icon as simple as the Snapchat icon. It’s very easy to differentiate the background from the foreground and the background can easily be cropped off or redrawn to any shape. There are no shadows or bevels to worry about. The real challenge comes from properly handling shadows, bevels and gradients.

I’ve been testing against a set of around 500 icons off the “Top Free” list on Google Play and I’m very happy with how well Nova handles most of these. It analyzes the shapes of images, as was done before for Icon Normalization. Then it walks around the perimeter, taking into account shadows and borders, and attempts to fill in the blanks to match a given shape. This is only possible for icons that have distinctive foregrounds and backgrounds. For a freeform icon there is nothing to reshape, it needs to be placed onto a background. And for very immersive icon, content would either be clipped off or poorly extended to fit different shapes. For icons we can’t seamlessly reshape, they’re scaled down and put on a plate of the desired shape.

I’m looking forward to feedback on this. There is plenty of room to tune further but there are also technical limitations of what is practical. Ultimately I want to see more and more apps properly adopt adaptive icons. But until then, Nova has your back.

Grab the beta and give it try!

Nova Settings > Look and feel > Adaptive icon style > Reshape legacy icons

The original app’s icon is on the left, the other shapes are automatically generated from the original.

Facebook. Challenging because of the off-center nature, the bottom of the ‘f’’ touching the border, the gradient background and the slight bevel on the bottom.
Accuweather
Discord
Fruit Garden Blast. Game icons tend to be very complex and generally just get plated. But for this one not only can be reshaped, the result is pretty great.
Uber
Walmart, up close you can see some distortion of the long shadow especially on the Teardrop shape
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.