Update for the application logos of several icons

[Hokiper]

I noticed that a lot of icons were using outdated logos of their corresponding applications, so I updated them using the current branding assets of the applications and also took the time to add some new ones. Maybe I will do the same thing with more icons in the future, but I believe the amount I've already done is enough for a pull request.

[Initu-Castilhos]

Isn't it better to make these changes in this P.R.? https://github.com/linuxmint/mint-y-icons/pull/360

[Hokiper]

Isn't it better to make these changes in this P.R.? #360

The icons on this pull request are quite far from the style of the original icon pack, which is based on the Moka icon theme. I see that it's trying to go for a more flat design ("modern", maybe) look since the gradients and almost all the shading have been removed, but I'm not inline with that direction. Not only because it doesn't preserve the shading, but also because it doesn't have the same design pattern that keeps a simplistic consistency between icons. See how the original theme avoids "slapping" a logo into a background when that would make the icon too distinct and complex, instead working with silhouettes and/or ways to integrate the logo with the background. I personally opt that the original shaded, simplistic design is preserved and, although these changes don't look bad, I think they would have more potential as another icon theme derived from Moka (perhaps a Moka 2?) instead of a merge, but I'll let the maintainers make the call.

[Initu-Castilhos]

Não é melhor fazer essas mudanças neste PR? #360

Os ícones nesta solicitação pull estão muito longe do estilo do pacote de ícones original, que é baseado no tema de ícones Moka . Vejo que ele está tentando buscar um visual de design mais plano ("moderno", talvez), já que os gradientes e quase todo o sombreamento foram removidos, mas não estou alinhado com essa direção. Não só porque não preserva o sombreamento, mas também porque não possui o mesmo padrão de design que mantém uma consistência simplista entre os ícones. Veja como o tema original evita "colocar" um logotipo no fundo quando isso tornaria o ícone muito distinto e complexo, em vez de trabalhar com silhuetas e/ou formas de integrar o logotipo ao fundo. Eu pessoalmente opto por que o design original sombreado e simplista seja preservado e, embora essas mudanças não pareçam ruins, acho que teriam mais potencial como outro tema de ícone derivado do Moka (talvez um Moka 2?) em vez de uma mesclagem, mas Vou deixar os mantenedores fazerem a ligação.

The only icon that I find problematic in Mint-Y is the Firefox one, which is very different from the original, and what the user uses on the system is the internet browser, mainly which comes from Windows, but there is still Yaru and Breeze as an alternative from 21.1

[Hokiper]

Isn't it better to make these changes in this P.R.? #360

The icons on this pull request are quite far from the style of the original icon pack, which is based on the Moka icon theme. I see that it's trying to go for a more flat design ("modern", maybe) look since the gradients and almost all the shading have been removed, but I'm not inline with that direction. Not only because it doesn't preserve the shading, but also because it doesn't have the same design pattern that keeps a simplistic consistency between icons. See how the original theme avoids "slapping" a logo into a background when that would make the icon too distinct and complex, instead working with silhouettes and/or ways to integrate the logo with the background. I personally opt that the original shaded, simplistic design is preserved and, although these changes don't look bad, I think they would have more potential as another icon theme derived from Moka (perhaps a Moka 2?) instead of a merge, but I'll let the maintainers make the call.

Just to be clear, I'm referring to the icons of the pull request you pointed out compared to the icons already in use/the icons of the Moka theme.

[Hokiper]

The only icon that I find problematic in Mint-Y is the Firefox one, which is very different from the original, and what the user uses on the system is the internet browser, mainly which comes from Windows, but there is still Yaru and Breeze as an alternative from 21.1

It uses the monochrome version of the Firefox Browser logo (which by the way is provided by Mozilla), but I agree it could have more resemblance to their branding. I've even made a revision with that in mind, but didn't commit it yet.

[Initu-Castilhos]

https://github.com/linuxmint/mint-y-icons/pull/294

[Initu-Castilhos]

According to Mozilla, the icon cannot be gradient.

[Hokiper]

According to Mozilla, the icon cannot be gradient.

The only specification I could find regarding that refers to the full color logo (and even then it does allow gradients under some circumstances):

Besides, quite a lot of icons would be invalid if we were to follow the design guidelines of all the logos lol, that including the ones from the original Moka theme. But in any case, I gave the maintainers the permission to edit the pull request if they want to be more strict about that.

[Hokiper]

Also I think it looks really really pretty that way (specially alongside other gradient icons) so I hope they give it a chance

[SkullHex2]

Thank you for your work. I hope this gets merged quickly.

[irasponsible]

These are nice looking icons! I've added the Firefox icons to my setup manually, and they look good in practice too.

[clefebvre]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc.

Please make individual PRs for individual changes, they'll get merged much more easily.

[vadimk1337]

https://github.com/linuxmint/mint-y-icons/issues/316 Can you add a Kotlin icon? And can someone add a Kotlin icon to the main theme of the applications, it's been more than a year. The question arises, why didn’t I add it myself? Because I only know how to write comments 😋.

[Hokiper]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc.

Please make individual PRs for individual changes, they'll get merged much more easily.

OK, I will make individual PRs when I get some time. By the way, do you guys have a general consensus on how the icons should look like? What do you think you don't want to go for, for example? That would be good to know since at the moment I'm only following design patterns I spotted throughout the theme as a whole.

316 Can you add a Kotlin icon? And can someone add a Kotlin icon to the main theme of the applications, it's been more than a year. The question arises, why didn’t I add it myself? Because I only know how to write comments 😋.

I will look into that when I'm available. Thanks for the request!

[CZmisaCZ]

This looks great, hope it gets merged.

[Hokiper]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc.

Please make individual PRs for individual changes, they'll get merged much more easily.

@clefebvre I'm still waiting for a more detailed response regarding this before I go on with the individual pull requests, just so I have a better idea on how the icons are expected to look like. We can exchange messages at some other platform if you find that better.

[Vlamboyant]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc. Please make individual PRs for individual changes, they'll get merged much more easily.

@clefebvre I'm still waiting for a more detailed response regarding this before I go on with the individual pull requests, just so I have a better idea on how the icons are expected to look like. We can exchange messages at some other platform if you find that better.

Perhaps they're preparing for LM 22 and didn't prioritize the mint-y-theme as much i myself have made several new icons and would like to submit them but the pull request tab is a mess and a lot of things will have to change

Mind checking some of them and telling me what you think?

https://github.com/linuxmint/mint-y-icons/compare/master...PHPeon:mint-y-icons:master

[CZmisaCZ]

@clefebvre a more detailed guide/readme on how to commit to this repo would be nice.

Like what criteria new icons need to have? How to generate the PNGs out of SVGs? And how should the PR look like? 1 PR per icon? or multiple icons?

[Hokiper]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc. Please make individual PRs for individual changes, they'll get merged much more easily.

@clefebvre I'm still waiting for a more detailed response regarding this before I go on with the individual pull requests, just so I have a better idea on how the icons are expected to look like. We can exchange messages at some other platform if you find that better.

Perhaps they're preparing for LM 22 and didn't prioritize the mint-y-theme as much i myself have made several new icons and would like to submit them but the pull request tab is a mess and a lot of things will have to change

Mind checking some of them and telling me what you think?

master...PHPeon:mint-y-icons:master

I will take a look and comment your PR once I'm available. 🌝

@clefebvre a more detailed guide/readme on how to commit to this repo would be nice.

Like what criteria new icons need to have? How to generate the PNGs out of SVGs? And how should the PR look like? 1 PR per icon? or multiple icons?

You can generate the PNGs using the Python scripts under src/, although I had to figure that out since there is no guide on that. Judging by his response so far it seems that individual PRs are preferred, but clear guidelines about this would be great.

[Vlamboyant]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc. Please make individual PRs for individual changes, they'll get merged much more easily.

@clefebvre I'm still waiting for a more detailed response regarding this before I go on with the individual pull requests, just so I have a better idea on how the icons are expected to look like. We can exchange messages at some other platform if you find that better.

Perhaps they're preparing for LM 22 and didn't prioritize the mint-y-theme as much i myself have made several new icons and would like to submit them but the pull request tab is a mess and a lot of things will have to change Mind checking some of them and telling me what you think? master...PHPeon:mint-y-icons:master

I will take a look and comment your PR once I'm available. 🌝

@clefebvre a more detailed guide/readme on how to commit to this repo would be nice. Like what criteria new icons need to have? How to generate the PNGs out of SVGs? And how should the PR look like? 1 PR per icon? or multiple icons?

You can generate the PNGs using the Python scripts under src/, although I had to figure that out since there is no guide on that. Judging by his response so far it seems that individual PRs are preferred, but clear guidelines about this would be great.

Err...I'm a bit of a dummy, which one? there are three and i don't have any idea what each one might do

Also still wanting to know watcha think, some of these icons might not look as good tho

[Hokiper]

Err...I'm a bit of a dummy, which one? there are three and i don't have any idea what each one might do

Also still wanting to know watcha think, some of these icons might not look as good tho

render-apps-categories-bitmaps.py is the one responsible for generating PNGs from the apps category. Just run it passing the name of the icon you want to generate bitmaps for as an argument, like ./render-apps-categories-bitmaps.py cryptomator (this won't work for your icons yet because of issue number 1 down below). Also close all Inkscape windows before running the script to avoid a window mess.

Now the issues I encountered with your icons:

1. The icon-name is wrong

On Inkscape, you can go to Object > Layers and Objects to enable a panel that lets you see and manage the objects of the SVG file and the layers that they are in (I highly recommend that you analyze the layer and object structure of the original icon files and try to imitate them, as there are other issues related to this). Under the Baseplate layer (which you have to make visible by clicking that eye icon), there is a text object named icon-name whose content you have to edit with the Text Tool to match the file name (change it to "cryptomator" in this example). Make sure to make the layer invisible again after that.

2. The symbols are in the wrong layer

The symbols, which are the (usually monochrome) logos that appear inside the icons, are supposed to go into the Symbols layer, not the Background layer, which is reserved for the colored squares that fill the background of the icon.

3. Use more gradients for the background

I think some of your icons look too simple by being just a flat color background with the symbol on it. Although I'm pointing this out somewhat because of personal taste, I believe they would look more consistent with the rest of the theme if you added a slight gradient to them, to give that satisfying solid look the theme aims for.

By the way, to make the file easier to edit, all the size variations of the icon can share the same gradient attribute, that way you can change the colors of all the backgrounds simultaneously.

To change the gradient colors for a gradient attribute that is used across multiple elements:

• Select one of the background elements
• Select the Gradient Tool and enable the lock icon at the tool options (with it disabled, Inkscape will create a new gradient attribute for that specific element once you start editing the colors, which is not what we want).
• Then just change the colors at the Fill and Stroke panel.

I recommend that you just use one of the original icons as a template, since they already have the gradient stops (the position of the gradient) in the proper place, so you won't have to position them yourself.

4. The symbols' shadows are missing

With a few exceptions (mainly in cases that the symbol is already too complex), the original icons have a shadow under the symbols. The shadows are just a copy of the symbol placed behind it, moved down by 1px and with a different color. I suggest that you look for these patterns in the original icons, but the shadow is usually #000000 with 20% opacity for light symbols and #ffffff with 20% opacity for dark symbols. For example:

Feel free to ask if you need more clarification on something.

[Vlamboyant]

@Hokiper I really like what you're doing here, but I can't merge it. It's not modular enough... it's an ALL or NOTHING PR. There are changes I'm happy to merge immediately, some I'd like to think about, some I don't think we want to go for, some which conflict with other changes (Sublime icons got their own PR).. etc. Please make individual PRs for individual changes, they'll get merged much more easily.

@clefebvre I'm still waiting for a more detailed response regarding this before I go on with the individual pull requests, just so I have a better idea on how the icons are expected to look like. We can exchange messages at some other platform if you find that better.

Perhaps they're preparing for LM 22 and didn't prioritize the mint-y-theme as much i myself have made several new icons and would like to submit them but the pull request tab is a mess and a lot of things will have to change Mind checking some of them and telling me what you think? master...PHPeon:mint-y-icons:master

I will take a look and comment your PR once I'm available. 🌝

@clefebvre a more detailed guide/readme on how to commit to this repo would be nice. Like what criteria new icons need to have? How to generate the PNGs out of SVGs? And how should the PR look like? 1 PR per icon? or multiple icons?

You can generate the PNGs using the Python scripts under src/, although I had to figure that out since there is no guide on that. Judging by his response so far it seems that individual PRs are preferred, but clear guidelines about this would be great.

Err...I'm a bit of a dummy, which one? there are three and i don't have any idea what each one might do Also still wanting to know watcha think, some of these icons might not look as good tho

render-apps-categories-bitmaps.py is the one responsible for generating PNGs from the apps category. Just run it passing the name of the icon you want to generate bitmaps for as an argument, like ./render-apps-categories-bitmaps.py cryptomator (this won't work for your icons yet because of issue number 1 down below). Also close all Inkscape windows before running the script to avoid a window mess.

Now the issues I encountered with your icons:

1. The icon-name is wrong

On Inkscape, you can go to Object > Layers and Objects to enable a panel that lets you see and manage the objects of the SVG file and the layers that they are in (I highly you recommend you analyze the layer and object structure of the original icon files and try to imitate them, as there are other issues related to this. Under the Baseplate layer (which you have to make visible by clicking that eye icon), there is a text object named icon-name whose content you have to edit with the Text Tool to match the file name (change it to "cryptomator" in this example). Make sure to make the layer invisible again after that.

2. The symbols are in the wrong layer

The symbols, which are the (usually monochrome) logos that appear inside the icons, are supposed to go under the Symbols layer, not the Background layer, which is reserved to the colored squares that fill the background of the icon.

3. Use more gradients for the background

I think some of your icons look too simple by being just a flat color background with the symbol on it. Although I'm pointing this out somewhat because of personal taste, I believe they would look more consistent with the rest of the theme if you added a slight gradient to them, to give that satisfying solid look the theme aims for.

By the way, to make the file easier to edit, all the size variations of the icon can share the same gradient attribute, that way you can change the colors of all the backgrounds simultaneously.

To change the gradient colors for a gradient attribute that is used across multiple elements:

• Select one of the background elements
• Select the Gradient Tool and enable the lock icon at the tool options (with it disabled, Inkscape will create a gradient attribute for that specific element once you start editing the colors, which is not what we want).
• Then just change the colors at the Fill and Stroke panel.

I recommend that you just use one of the original icons as a template, since they already have the gradient stops (the position of the gradient) in the proper place, so you won't have to position them yourself.

4. The symbols' shadows are missing

With a few exceptions (mainly in cases that the icon is already too complex), the original icons have a shadow under the symbols. The shadows are just a copy of the symbol placed behind it, moved down by 1px and with a different color. I suggest you look for these patterns in the original icons, but the shadow is usually #000000 with 20% opcaity for light symbols and #ffffff with 20% opacity for dark symbols. For example:

Feel free to ask if you need more clarification on something.

Sorry for responding this late, yeah thx a lot ill keep this advice in mind, i do include shading on most of my icons but its mostly a darker colored layer on top of the main background (beneath the logo), i find it more pleasant to work with im sorry if certain problems arise from it

[clefebvre]

@Hokiper @PHPeon @CZmisaCZ @NikoKrause don't hesitate to join https://matrix.to/#/#linuxmint-artists:matrix.org. We're looking at artwork changes for Mint 22, it'd be good to have a chat about it.

[Hokiper]

316 Can you add a Kotlin icon? And can someone add a Kotlin icon to the main theme of the applications, it's been more than a year. The question arises, why didn’t I add it myself? Because I only know how to write comments 😋.

@vadimk1337 Just added the icon you requested. It took me quite a while to decide the colors… Let me know what you think. :tea:

[vadimk1337]

@Hokiper Looks beautiful

[clefebvre]

All merged on master, except the Firefox commit which needs a separate PR.