New Folder Icons for Lunaby Imported Article

With Luna’s release just around the corner and “feature freeze” far behind us, just what is our UX team doing these days? Well for one thing, we’re making sure Luna looks super sharp.

Old and Busted

The last revision of folder icons landed in our icon set several years ago, and it shows. They still carry a very Web 2.0 glossy feel and an oddly cloudy blue-gray. Additionally, many will notice that there’s an inconsistency in shape when resizing, some icons don’t even have all the standard sizes, the lighting doesn’t match our other icons, and the borders look awful on dark backgrounds. No more! A brand new set of folder icons is landing in elementary today that addresses every one of these issues.

The Right Color

Since we were planning to be doing a lot of drawing, we decided first to make sure that the color was just right. We tried out a muted silver, a couple of “manila” flavors, different saturations of blue and purple and even a black variant. In the end, we (and our community on Google+) favored sticking with blue, but one that fit in better with our playful and exciting brand.

Going Symbolic

Another decision we made was to ditch the bold colorful icon overlays of old for subtle and modern symbolic icons. While we did resist this change back in the old days, there’s no doubt that these icons fit in better with the values of simplicity and elegance that we want to convey. Not to mention they open the doors for automated recoloring of icons, something that not only makes the icon set more maintainable should our brand change, but could also give way to new features.

Light and Dark Backgrounds

Another problem we’ve had in the past as a side effect of our playful Tango-like style is that our icons haven’t looked that great on darker backgrounds; note the blurry tab on the old icon. This is going to be a big problem in the next version of elementary OS when apps will be able to request a dark theme from the system. So, these icons demonstrate a new technique for “stroking” (outlining) our icons that allows us to keep our style while also adapting to app’s needs.

Files' New Icon

A sort of side affect of designing these new icons was that we needed to give Files, the file manager app, a new icon to match. Instead of its old blue folder with a white mouse cursor (a relic of pre-elementary OS days and pigeon-hole into the desktop-only market), we decided it’d make sense to give it the same icon as a user’s home folder (opening the app opens the user’s home folder). Lastly, we liked the silver variant so much we couldn't let it go; we decided to give Files a silver icon to make it stand out from a regular folder icon and rid ourselves of a sort of "uncanny valley" feeling the blue icon gave against the more vibrant blue used in most apps.

Scaling

Last but not least, all of our folder icons now come in 16, 22, 24, 32, 48, 64, and 128 pixels. So you’ll never run into a case where there’s a blurry or mismatched folder icon. In total this comes to a set of 98 places, actions, and app icons!

Get 'em Today

As of now, these new icons are available for anyone to download from Launchpad. For our Luna Beta users, you’ll see them soon in update manager.


Cassidy James contributed to this Journal entry.

Published April 15th, 2013
Just one second… Login in to comment, ask questions and more.
Cancel