LibreOffice New 2020 Icons

Hi... Again.

After so many years, I'm back to LibreOffice icons development. Or at least that's what I'm trying to do with this:

A spoiler of what's in the end. Caution: work in progress.

Here I'm going to start documenting this journey, from my first contribution in 2011, through my first failed try of returning in 2015, up to the present days of 2020 with the development of the icons above. I'll try my best to write as many details as I can, because I like it that way, so take your time and enjoy the ride.

Preface

Before I start, a recap of my history in LibreOffice. Back in 2011, I've joined the design team, and helped stylizing and creating bigger sizes for the new icons, originally and beautifully created by Christoph Noack at the time.

Comparison between Christoph's original icons, and my additions, both from 2011.

These icons are called the Mimetype Icons and they were used in the main applications desktop icon, and in the document files created by LibreOffice. My contribution was little, but it was very well received by the original author, and by the others developers. After many adjustments done together with the design team, and many icon sizes individually created, the final result became the official icons in the 3.3.1 release of LibreOffice, and stayed as that for many years.

As you can see, my style was more decorative and shaded, full of degrades, highlights, outlines and shadows... And then, very shortly after that, the so called Flat Design became a thing, and a big thing. With its minimalism, lack of complexity, it made the life easier, both for users to understand, and for developers to create icons. It was quickly adopted by most software.

So, Flat Design became the norm in the early 2010s, and with that, my styled icons for LibreOffice became more and more obsolete through the years. And yet they lasted in the official icon set, as far as I could find out, until the 6.1 release in 2018. After 7 years, they were finally replaced by a simpler and much more modern version made by Andreas Kainz.

Comparison between my 2011 version and Andreas Kainz's 2018 modern version.

Ironically, they ended up looking closer in style to what Christoph created back in 2011. People say good design lasts forever, so I believe that's not just by chance.

My Flopped 2015 Icons

As soon as I noticed that one of my proudest designs was really getting outdated, I thought about doing an update. It was only in the end of 2015, with all that Android 4.4 Material Design - from my first android phone - screaming at my face, that I actually started working on a new version for the LibreOffice Mimetype icons.

At the time, I wasn't so familiar with this design, so the result was a middle ground between my old detailed style and a strong desire to get the holy gra... I mean, to create a Material Design style.

First version of my unused 2015 icons, aiming at a more flat design.

I was so excited when I shared these new icons with the design team, but at the time most of the team I worked back in 2011 had left or were taking a break. Actually, it was worse than that, at least for me. It was a moment in the LibreOffice development when people was starting to realize that one unique icon set wasn't enough to deliver a good user experience in all the platforms, Linux, Windows and Mac.

A big part of the design development was being done to create different icon sets. So my beloved new icons just... flopped. Rest in peace.

I totally understand it was the wrong time and my icons, although they may be beautiful (please understand that I really like my own work), they weren't modern enough, and maybe wouldn't last long, anyway. But I have the right to mourn this lost, right? Right? Well, one special guy didn't think so.

[Moment of excitement for the next chapter, where it actually starts the interesting subject of this post.]

"I love your work. Can you give me the .svg file?"

It was basically what Rizal Muttaqin has said to me in his first contact with me through a Facebook direct message, on April 28th, 2020. And that was everything I would love to read, coming out of nowhere.

Rizal is a LibreOffice developer that had been interested in updating the Mimetype Icons for years, and he found out about my previous work, and loved my 2015 version. So he asked me to jump aboard again, or at least to give him the .svg file, so he could work on it.

Being an autistic person, who loves returning to old things from my past that I still like, and also being a total lover of the open source slash copyleft movement, these are both two things I would LOVE to do immediately. But the current COVID-19 situation we are enduring in the world, specially in Brazil, where I live, it hasn't left me much free time, or a good mind to create.

It was only in May 7th, that I could find the right time to read Rizal messages with care, and decided to update and optimize the .svg file from 2015 (the file I created the icons using Inkscape) before sending it to him. I've also created display images to better present the icons:

Some sample images from my a new 2020 optimized version of my 2015 icons, also unused and unofficial.

As I have said to Rizal on Telegram:

"Since the .svg file was from 2015, Inkscape warned me about the default dpi chance (90 to 96dpi) and I had to make sure everything was fine. I decided to take this as a chance to finish some unfinished parts and polish the file as a whole.

The zip file contains the full .svg file and some sample images exported from graphics in the layer Samples. Let me know if you find any trouble opening the file." - Paulo José Amaro

With 11 different icons (Document, Writer, Calc, Draw, Impress, Math, Base, and 4 templates), in 7 different sizes (16, 32, 48, 64, 96, 128, and 256), and a high contrast version beside the normal one, that's a total of 154 unique icons. That it was a lot of work, not used since 2015 and probably forever. But it was fun.

You can also download the zip file of my 2015 unofficial LibreOffice icons, with the original SVG file and sample images.

A new start. Maybe really modern this time?

Since Rizal also invited me to return to the design team, I asked him to give me an overview of the current situation. That's what he kindly answered me:

"So, we have a relatively new platform to discussed many things https://t.me/LibreOfficeDesign beside old IRC channel of course.

One topic that occurs many times is the need to change current LibreOffice app icons to differentiate them from MIME type icons and also from TDF (The Document Foundation) »
https://t.me/LibreOfficeDesign/22166,
https://redmine.documentfoundation.org/issues/2910,
https://bugs.documentfoundation.org/show_bug.cgi?id=132398.

The current LibO app icons are still using old shape (which you were involved to design CMIIW) but with flatter appearance in mind from  6.0 version follow the current design trends. (I'm pretty sure you know that matter more than me).

But as platforms evolve, we need more pleasant and different approach to make them have good contrast in black environment. You know, while GNU/Linux has been join to this trend, dark mode is a thing for more many OSes including Windows 10 and macOS.

Unfortunately current white most app icon does give good contrast in the dark environment. We can see this phenomenon in latest MS Office icon iteration (https://developer.microsoft.com/en-us/fabric#/styles/web/office-brand-icons) which use icons that fits best in the dark environment." - Rizal Muttaqin

I took my time to read carefully Rizal's message and the links in it, and in the early morning of May 18th, I worked hard on a new icon set. A fresh start with a style based on Material design, with no gradients and few details, but strong use of colors and "fake-gradients", inspired by the Microsoft Office new icons.

I also tried to keep the essence in the symbols originally created by Christoph Noack in 2011, but with the highest level of simplification I could get. And that's really hard for me to achieve. Again, part of my autism expression, which I've learned to love and respect.

I posted the first version of new icons on the official Telegram group LibreOffice Design EN, with some notes:

"This new proposal tries to improve contrast and simplify shapes. The icons are the 128px version, exported in 2x size for better view on smartphones and high dpi screens. I believe they can be scaled down until 48px with no big issues. Some more simplifications and optimizations would be good to create smaller sizes, and I'm willing to help making these or other sizes, if they are requested.

I've choose to omit the "donkey ear", and instead added a highlighted element in the background right upper corner. I preserved the document shape, so these could be used as Mimetype icons. I will wait for feedback from you to make app versions of the icons, maybe varying the icons shape." - Paulo José Amaro

First version of my new 2020 icons, with 128px versions at 2x size (256px). Flat design, strong colors, and simplified symbols.

The reactions were few, but felt positive in general. Some very useful observations were made by developer Heiko Tietze:

"Beautiful artwork with surprisingly strong colors (setting a trend?).
I'm not a fan of leaving out the donkey ear as this is the main part of our brand (admitted that symbol on top right are some kind of an alternative).

The Writer symbolic reminds me on Apple, Calc triggers frequency analysis like known from music apps. Math and Base have similar colors and rely much on the symbols.
And last but not least the grey L app icon has something of a 50th b/w TV show. Keep in mind, this is all what macOS users see on their dock." - Heiko Tietze

In the next version, I tried to address most of these issues. I've posted that in the group:

"About the donkey ear, I experimented a lot with it, but ended up not find a satisfying way to include it. The less worse try is shown in the v2.

About the Apple feeling on Writer symbol, I was hoping it was only me... I changed the symbol to be more like before, less rounded.

I hope the changes in Calc and the L app may help a little.

The similar color of Base and Math is the only thing I didn't try to address for now. On my screens they look pink/purple distinct. Let's see if others also see this as an issue." - Paulo José Amaro

2nd version of my new 2020 icons, with 128px versions at 2x size (256px). Some changes in app symbols, and the comeback of a beloved old friend, the donkey ear.

One more developer felt the miss of the donkey ear, and also give great input about the colors:

"I like this one a lot more than the first one because it keeps the donkey ear which is the defining element of  the LibreOffice icons. I love it.

As for feedback: the color palette seems to be slightly off.

The Impress icon is more red than brown, and the Math icon is more pink than red. Also, IMO the dark blue portion of the Writer icon is too dark against a dark background. In dark themes this will equate to the feeling that the icon will fade out in the dark background.

So I would probably slightly adjust that. Also please, use gradients of the LO color palette." - Pedro Rosmaninho

To what I responded with two new versions, on May 19th:

"You're right, I didn't use the LO color palette. I was experimenting with colors and just forgot about it.

I've made two new versions. One version v.0.3 strictly using the LO palette colors, with one exception being Math, what colors are missing on the palette.

And another version v.0.4 based on the LO palette, but a bit brighter, and with a little of color variance. That would bring it closer to what I imagined, while preserving the main hue of each icon from the official palette.

By the way, there's no gradients in these icons, just solid colors." - Paulo José Amaro

3rd and 4th versions of my new 2020 icons, with 128px versions at 2x size (256px). A comeback to LibreOffice official colors, being the first strict, and the second having some color variation.

The correction in colors was well received. I confess I got quite happy and surprised on how good the official color palette worked with the icons, with no need to adjust lightness at all. But I'm still for a bit of color variation, so I prefer v.0.4. Although the difference is really small.

Andreas Kainz noticed that the donkey ear size is a bit smaller than usual. I explained that it was deliberated, and he replied: "As we have this unbalanced issue with the donkey ear it's maybe better to have it smaller".

He also asked for 22px sized icons, and I've made these:

First version of 22px size of my new 2020 icons.

I got curious about this specific size, since I'm used to make 16px and 32px icons, but not a size in between. Andreas said this version may be used on Windows, so I guess it is a good idea to support that.

I also remembered and mentioned that back in 2011, there was a request for mimetype icons in the Tango style, to be used in the apps toolbar. Rizal agreed that there's a 24px version that's part of the icon theme, and we've decided to left this to a later moment.

Andreas also give input about why he personally prefers light themed icons:

"I prefer light mimetype icons cause LibreOffice is an office suite and first libo didn't has an dark mode only on Linux and second in the office you are at daytime where you use a light desktop theme.

App icons can be dark cause win10 use an dark panel and dark app icons look good on dark and light themes" - Andreas Kainz

I added that "I'm trying to make the icons look good on both. At least for my taste, they do. But I understand that icons with a most white background or somehow lighter in color are more common/familiar to many.".

So maybe it's a good idea to try lighter color of the icons, or even a new version with really light colors in the background and dark symbols.

Conclusion, up 'til now

I think the icons are being well received in general. I don't know it there's a real chance of them being included in one next release. But I hope so, and I'm gonna keep working on them. I already have some changes in the making, so wait for sooner updates.

That's all for this first and long report of my return to LibreOffice design team.

To be continued...