Update Octicons to match new icon style

[miguelsolorio]

This is to track the work of updating Octicons to match our new outline icon style (#8017). We currently use Octicons in the Status Bar and Quick Pick items. Since we will be updating the icon style, this means that we will be replacing Octicons with our own custom icon font.

[miguelsolorio]

This is now enabled by default in master (will be on Insiders next week). We've introduced a new settings workbench.octiconsUpdate.enabled that controls the visibility of the new Octicons style. Below is a snapshot of the updates:

[jletey]

@misolori This is amazing! Can't wait to try out these new icons!

[jletey]

@misolori Would it be possible to also have the Figma for the new octicons?

[miguelsolorio]

@johnletey once they are finalized we will publish them as well to the same repo/Figma file. Though that might not happen until next month as we just added them and will be getting feedback/iterating on them.

[sean-mcmanus]

Before:

After -- not what the C/C++ extension team wants:

Expected: Can you allow extensions to still use the old style somehow for their icons? Or do you have another suggestion?

[bobbrow]

I agree with @sean-mcmanus. The flame icon is unrecognizable at this point. Some outlines just don't work well enough to convey meaning.

[bobbrow]

Some icons got to keep their solid fills:

Please keep the solid fill for the flame icon too.

[jletey]

I'm a fan of the new GitHub logo

[miguelsolorio]

@sean-mcmanus @bobbrow if you are using Octicons then you won't be able to use the previous version, I'll see if we can improve the flame icon.

[miguelsolorio]

⚠️ Update

Heads up that we're going to be disabling this as the default for Insiders tomorrow since we only had a week of coverage so it will move into the next iteration. You can still enable this by setting workbench.octiconsUpdate.enabled to true.

[bobbrow]

I'll see if we can improve the flame icon.

Thank you, @misolori!

[miguelsolorio]

@sean-mcmanus @bobbrow here's a few alternates for the flame that match our outline style, let me know if you like one over the other. I personally prefer 1 or 2.

[sean-mcmanus]

I'd prefer Flame 2 -- seems to match the original the closest.

Flame 1 and 3 don't look like flames to me -- too smooth and lacking "noise -- and searching the web for "flame icons" I get images that more closely resemble Flame 2 instead of Flames 1 or 3.

[eamodio]

Flame 2 is my vote

[sean-mcmanus]

Hmm...could the flame be made solid or can you make a solid-flame and outline-flame so users can choose which one they want? We color our flame red so it's more visible, but it's hard to tell if that will look as desired when it's an outline.

BTW, the Smiley face icon in the latest Insiders build looks strange (mouth seems too big).

[miguelsolorio]

We’re trying to align all of our icons to be the same outline style so we don’t have plans to provide solid icons. We also don’t recommend to hard code any colors in the status bar icons as that is not themeable and introduces contrast issues.

[jletey]

@misolori Personally like Flame 1

[bobbrow]

I like Flame 2 the best. To me, Flame 1 looks like a stylized "thumbs up" and Flame 3 looks like a teardrop.

I still think a more solid looking icon is better, but it could be my own bias against the thin lines. My eyesight is getting worse with time and most of these new icons look the same to me unless I really strain to differentiate them.

I apologize for defacing your art, but this is what my eyes understand best:

[Guema]

@sean-mcmanus @bobbrow here's a few alternates for the flame that match our outline style, let me know if you like one over the other. I personally prefer 1 or 2.

The 1 is the best in my opinion.
Even if unfortunately a graphic chart can never satisfy everyone.
It's look like a flame, and it's simple.

2nd works fine, but more complex.
The line inside make it more readable in red on blue though.

3rd is simple but can create confusion as it also looks like a water drop.

model 1 has the most identifiable shape in my opinion, while 2 is more readable.
Maybe a 1 shaped with an inside shape like the 2 could do the trick ?
But for me the 1 is fine (maybe filled for color readability ?)

[Tyriar]

Flame 2 looks best to me, I thought Flame 1 was a thumbs up icon.

[miguelsolorio]

Thanks everyone for the feedback, I've update the flame icon to version 2 and it'll be updated in tomorrow's Insiders: