Vscode-gitlens: Update the sidebar icon

[jletey]

With the new vscode icons being released soon 🎉 (https://github.com/microsoft/vscode/issues/8017) ... the icon definitely needs to be updated to match the new icons' styles!

Note: I already have an icon designed and will submit a PR soon!

[jletey]

@eamodio How does this look:

I will submit a PR once you give me the green light!

[jletey]

@eamodio I'm currently designing updates for the rest of the icons in the extension! Stay tuned!

[iyashpal]

Please consider this icon as well. it doesn't look good with the new icon set of vs code.

Thanks

[jletey]

@iyashpal Not to worry ... I am going through and updating all of the icons throughout the package so that everything looks great for the new vscode release!

You can check out my progress here: Figma. Or alternatively on my fork

I have already updated quite a few icons already and am working hard on the others so that we can have a PR up soon!

EDIT: Actually @iyashpal, that icon is part of the vscode set ... I've notified them though: https://github.com/microsoft/vscode/issues/8017#issuecomment-510062263

[misolori]

@johnletey the stash all icons are referenced here:

https://github.com/eamodio/vscode-gitlens/blob/84363ec5aca56e62e407965c2e55f62f17edc59f/package.json#L2281-L2288

[eamodio]

@johnletey Awesome -- thanks for taking this on! The activity bar icon looks good at that size, but I'd need to see it in product to really know. Are the strokes the same width as the vscode icons?

[jletey]

I'm not quite sure ... they are 2px strokes @eamodio ... what are the stroke sizes for the vscode icons @misolori?

[eamodio]

@johnletey also for quite a few of the icons, I lifted directly from vscode, so we should just lift the new versions directly

[jletey]

I understand ... and actually, that's exactly what I've been doing @eamodio

[misolori]

@johnletey icons have a 1.5px border width and have a bevel edge:

[jletey]

Thanks, @misolori ... how does this look @eamodio?

Figma

[eamodio]

@johnletey it looks great there, but in-product it looks a bit wonky

I'm assuming that is because of some (mis-)alignment to the pixel grid? I'd also suggest moving the bottom-most dot, up a tad to give it a little more space between it and the circle

[jletey]

@eamodio I have moved up the bottom-most dot a tad bit ... here it is now:

The icon itself and everything are all aligned in the pixel grid! 🤔

PS. What vscode theme are you using? 👀

PPS. Also, how do you like the other icons that I have updated?

[eamodio]

Hrm, the spacing at the bottom is better, but now it looks chunkier for some reason:

I'm using my Dark Amethyst theme: https://marketplace.visualstudio.com/items?itemName=eamodio.amethyst-theme

[jletey]

@eamodio Just some minor updates here ... how does it look now?

[eamodio]

Still chunky:

Do you see the same in vscode?

[jletey]

I'm actually not running this in local development

I will investigate why it's showing up chunky though!

[jletey]

For anyone that is following the progression of this issue, I have updated the activity bar icon (and it is not showing up chunky when in local development)

Update commit: https://github.com/johnletey/vscode-gitlens/commit/e1f2f51ee22c058c8ac7637d3fc5857d78c12e80

[jonbp]

Going to throw my two cents in here as i think the proposed sidebar icon isn't quite there yet.

Expanding on the work started by @johnletey, I've redrawn the icon to ensure that the strokes match the 1.5px width as mentioned by @misolori. My reworked icon also utilises the space inside the circle a little better.

I've also omitted the first small tail of the git icon, i feel it simplifies the icon a bit to be more uniform with the other activity bar icons without losing a sense of what it actually does.

Here's a side by side of the 2 icons for comparison:

I'd appreciate some feedback and the icon could do with testing on retina displays (I have no way of testing this ☹️)

Download

[jletey]

@jonbp Thanks for recommendation ... and personally, I like yours better! What do you think @eamodio?

[eamodio]

Looks great! Thanks @jonbp & @johnletey!

I have to say at first, I wasn't an immediate fan of losing the connecting tail since it deviates from the GitLens logo

But after looking at it a bit, I do like its clean feel. I do wonder, what if it had a very subtle hint of a tail?

[jonbp]

I've added the tail back into the logo and i think it looks pretty good now!

Here's a screenshot:

Download

[jletey]

@jonbp Is it centred? It doesn't look centred when I look at the screenshot

[jonbp]

I had to push the contents down a touch to accommodate the new small tail. I don't think it looks unbalanced, though I'm open to scrutiny!

[jletey]

No ... now that I look at it again, it looks fine to me

Great job @jonbp

[eamodio]

It's awesome! Thank you both so much!!

[mrmckeb]

This looks great, well done all. Will this be in the next release?

[jletey]

Hopefully yes @mrmckeb, but it's up to @eamodio

[tenF]

Why does it have to have the exact same git pattern as the Git logo. Why not make it more artsy and more _lensy_ if thats a word

Anyway I think all the lines having same width, the tail connecting to the outer circle, and the other circles having holes in them looks much cleaner

The tail of the @jonbp version doesn't have the same width as the other lines, why?

GitLens.zip

EDIT:
How it will look like

[eamodio]

FYI for anyone following along this work is progressing in Figma: https://www.figma.com/file/LFzZXPci3T5tui8O53KyWCGo/GitLens-Icons

[LukasPolak]

@eamodio when will be icons updated? Thanks!

[eamodio]

When v10 ships -- which is Soon™ 😄

[misolori]

I realize that the discussion around the icon has already passed (I wasn't actively engaged), but just to drop my two cents, it feels like the new icon doesn't fit so well with the rest of the VS Code icons:

• The circle around the icon feels odd/constraining
• Since the tail piece is removed, it's hard to decipher what metaphor of the icon is

I guess I was hoping for something a little simpler like:

I'm sure we'll all get used to the new icon over time but thought I'd drop this feedback here in case this ever gets revisited.

[eamodio]

@misolori Hrm, part of me is a bit concerned about familiarity by changing the icon too much -- the circle is quite recognizable. At the same time, I can see what you are saying (but I also think that will fade over time). I do worry though with your rendering about the closeness to the SCM icon -- I feel like you could easily mistake one for the other.

But, I am definitely open to suggestions and improvements

[misolori]

@eamodio that's fair, my suggestion was based on the original git logo anyways. Just thought I'd throw it out there. I'm sure you'll get the immediate "who moved my cheese" comments (we got our fair share on the VS Code icons 😉).

[eamodio]

Hehe -- yeah, omg there was so many of those 😉

[jletey]

@eamodio Thank you very much for continuing my work and updating all of the icons! I have really been appreciating the new icons!

One thing that I've been noticing, is that the circle around the activity bar icon isn't as thick as the official icons. For example, here is the official activity bar icon for the vscode-pull-request-github extension (which @misolori updated):

So, I've gone into Figma and updated the thickness of the circle from 1.25 to 1.5 (which is what @misolori says that he uses for the icons) so that the icon now matches the official ones. Here is what it looks like now:

[ltodorov]

Hi there,

The outline of the icon doesn't match the design of the other icons on the sidebar. I remember that Visual Studio Code switched for a while to lighter icons where this design was perfect.

Is there a plan to update Git Lens icon? Reported from VS Code version 1.46.1.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.