Update "New Circuit" icon

changed milestone to %Sponsor 30 - Objective 3.5

added UX Team Next Q1 Sponsor 30 - FINISHED UX labels

assigned to @nicob

marked this issue as related to #41600 (closed)

oh yeah I agree this is a good point - I wonder if it would translate to incorporate a node into the current icon design? I feel like the "refresh" symbol is so recognizable as an action for users?

Thinking something like this

I think we could get rid of the whole semi-circle part too (it was meant to evoke the old torbutton icon design at the time). Feel free to try something entirely new if you like!

added Doing label and removed Next label

Some explorations here! Note that the plug and bolt elements are from font awesome and haven't been adapted to proton style yet.

Figma file: Figma

I really like new-cicuit-10, but I'm using the Firefox sync icon for onion-related redirects in the new circuit display and they're too similar imo:

https://www.figma.com/file/RS584DcR4emXrw1F8g3l5x/Tor-Browser-12.5?node-id=1%3A11162&t=bIAnPx3UNvlnTkYW-0

So maybe new-circuit-6 instead?

Oooh, yeah that could be confusing. I wonder though since it would be used at 16px compared to the 12px sync icon, and in a different location that it could work..?

Otherwise, I could see new-circuit-6 working as well. I imagine it would be in the same spot as the current new circuit icon is to the right of the toolbar?

Oh so it's an optional icon-button in Tor Browser. It's not there by default, but you can add it anywhere from the Customize Toolbar screen. I just happened to throw it there for the screenshot.

Quick example of new-circuit-6 added to toolbar favorites:

Could you also add the original version you did, but without the semi-circle please @nicob?

this one @donuts?

Let's go with new-circuit-6 please @nicob! Please hand over to @richard once the asset's ready for dev.

hi @richard, here's the new new-circuit icon assets! Do you need any other sizes/file types?

@nicob we should only need the svg, thanks!

@nicob I tested with the new icon, but the "+" symbol is hard to read on my display:

I think the two lines either side are a little blurry compared to the other two symbols as well. I think because they are 1.25px wide, rather than 1px.

Okay, good to know – thanks @henry! Can we iterate on this a little more please @nicob?

I think the two lines either side are a little blurry compared to the other two symbols as well. I think because they are 1.25px wide, rather than 1px.

Sadly, this is the standard for Acorn icons at 16px. We sometimes deviate from the standard stroke size for optical balance though, but I think the whole "+" needs to be made larger here.

yeah def! Should I maintain the 1.25px stroke?

Not sure actually. A round 1px will probably look too light, and 2px too thick. 1.5px is still splitting pixels, but may look better if it’s enlarged also?

Here's a few iterations based on our most recent feedback: I kept stroke at 1.25px because it seemed like it was working well with more space/not interacting with the +

I really like alt-2! Can we give that one a go please?

@donuts awesome, yep. @henry here's the svg file, thank you!

new-circuit.svg

Thanks :) I tried it out and I think the "+" part looks better than before but still a little blurry on my display, and is making the icon look a little dense overall.

What do you think? I might be over thinking it.

Thanks for testing @henry, let’s give it one more go please @nicob

Maybe we could do without the circle?

What about one of the "reload" designs? Since this button reloads the page with a new circuit, rather than "adds" a circuit.

yep I'll give it another go, thanks @henry! @donuts are you referencing the circle that the plus symbol is in?

thoughts on these? plus sign on alt-4-1px is off-centered for visual balance because it looked off being actually balanced, but not sure that its working.

What about one of the "reload" designs? Since this button reloads the page with a new circuit, rather than "adds" a circuit.

This got me thinking – how about using a sparkle to denote "new" (like we do for new-identity) instead of the "+"?

Material symbols have something similar: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aauto_mode%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048

The sparkle could be within a full reload arrow like those in your most recent iterations: #41607 (comment 2893517), or something more circuity like these previous iterations: #41607 (comment 2892935)