Clarification on icon creation rules

[Neluji]

I don't know if it is only me but I found the contribution guidelines a little bit unclear on some points, on the icon design rules actually:

• Fonts: are we supposed to use provided fonts for every text present in the icon ? I mean if the icon is mainly the brand name with its specific font, are we supposed to replace it anyway ?
• Template: what do the two shades of grey represent ? Is it the background (flat color) in light grey and the content in the dark grey ?
• Colors: I understood that we are limited to the provided palette (why the variants btw ? It is a bit confusing and hard to understand if it is the same palette or not, full & simple are very similar), with the possibility of using 25%/50%/70% white & 15%/25% black to shade them, but is it actually the case ? And what about the Transparencies versions (only in full palette btw ?), are they meant to be used on any other color or only on white ? And why is there only detailed shades for red ? Globally I find the rules on the colors not so clear, I don't get if it is because there is some liberty on it ?

All of this are only personal feelings on the points I mentioned - maybe they are not shared by anyone ^^' I've designed an icon with the rules as I understood them, see #819

P.S.: also, is there a tool/command recommended to minify SVGs ? I am not sure of how I did it ^^'

[GitGitro]

Hi! I'll try my best to answer all your questions:

1. Fonts: usually icons with text have some basic fonts and thus we choose two fonts to use for our pack. The icon you made in #819 is a great example of how you're not forced to use these two fonts. So it depends really.
2. Template: I think you just downloaded the wrong file, it's template.svg and not template_tutorial.svg that you need to use. the template_tutorial as the name suggests it's just an example
3. Colors: imo the palettes are clear, especially the full one. The transparencies are meant to be used on also other colors not only white. Why only detailed shade of red idk to be honest we'd have to ask to the creator lol (btw join us on discord so you can ask him directly :D). What you need usually are the the basic colors and the shades of red and lighter skintones are for specific cases and rarely used by us.

The icon on #819 is a great start i've just increased the padding of the text a bit, removed the shading on the text, the purple alone is fine, and a little tip when you see white lines between layers that shouldn't exist just group the layers and duplicate them ^^

As for minifying the svgs you can export the svg as optimized if you are using inkscape or use svgo

I hope I have been exhaustive, if you have still questions feel free to ask!

[GitGitro]

Huge facepalm I didn't realized you used shade of red to make the icon, my bad

I've made the icon with only the basic colors in this commit, using only Pale gold. Pastel pink, Coral pink and Fuzzy wuzzy making it more 'delta'

I hope it's clear that we don't use the shades of red very much

[Neluji]

Ok, thanks for the clarification, indeed it is not evident in the first time that shades of red are not used often, in fact if I get it correctly the idea is to use only the Basic colors (+ greys), and the other ones only on very specific cases (idk exactly when but rarely ahah) ? Concerning the template, I got the good file to work ^^ But yes my question was on the tutorial, if the dark disc was here to represent where the "content" of the icon is supposed to be/the size it is supposed to take ; is it actually the case ? Thanks for pointing me out the Discord, I'll go look over it and maybe also ask there if needed as you suggested ^^

[GitGitro]

the idea is to use only the Basic colors (+ greys), and the other ones only on very specific cases (idk exactly when but rarely ahah) ?

Yes basically yes

And yes the darker color is the content of the icon and the lighter is the background

[GitGitro]

Closing this as complete, if you have more doubts join us on Discord!