Opened 7 months ago

Last modified 7 months ago

#25763 assigned enhancement

Design a .onion icon

Reported by: antonela Owned by: antonela
Priority: Medium Milestone:
Component: Webpages/Styleguide Version:
Severity: Major Keywords: ux-team, tor-hs
Cc: isabela, steph@…, mcs, dmr Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

Designing a .onion icon is part of the .onion services branding project.

Motivation

We need a standard way to communicate that users are using onions services, across different environments. The problem right now is that we have a ton of different onions referencing it.

This icon should work perfectly at small sizes (e.g., 8x8px) and medium and big sizes too.

We can have a progressive enhancement based on the size of the icon. Similar to
https://useiconic.com/guides/using-iconic-responsively/

We should support a way to identify v1, v2, and v3 onion services.

Uses Cases

  • Url Bar on browsers to communicate .onion services running (#23247)
  • A small icon at footer indicating that this website has a .onion service available
  • Products Icons for Tor Browser Desktop + Tor Browser Android
  • More here #21952

What do we want to communicate?

hidden, secure, encrypted, private, layers

Resources/Useful links

https://thenounproject.com/search/?q=onion
https://github.com/FortAwesome/Font-Awesome/issues/5101

Child Tickets

Attachments (2)

23247- icon exploration.png (126.2 KB) - added by antonela 7 months ago.
icon-exploration2.png (126.1 KB) - added by antonela 7 months ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 7 months ago by antonela

Keywords: ux-team added

comment:2 Changed 7 months ago by antonela

Cc: isabela added; antonela removed
Reviewer: isabela

Changed 7 months ago by antonela

Attachment: 23247- icon exploration.png added

comment:3 Changed 7 months ago by antonela

Some exploration I did before

https://trac.torproject.org/projects/tor/attachment/ticket/25763/23247-%20icon%20exploration.png

Is it the onion recognizable? If not, does the icon work?

Changed 7 months ago by antonela

Attachment: icon-exploration2.png added

comment:5 Changed 7 months ago by steph

Cc: steph@… added

comment:6 Changed 7 months ago by mcs

Cc: mcs added

comment:7 in reply to:  description ; Changed 7 months ago by arma

Replying to antonela:

We should support a way to identify v1, v2, and v3 onion services.

A small mercy: v1 onion services disappeared long long ago. So now there are only "legacy" (v2) and "new" (v3).

comment:8 Changed 7 months ago by elioqoshi

I like the 2nd exploration Antonela! They seem like material for GUI elements as status indicators. Maybe we can design a proper onion and have more abstract shapes like these to indicate onion services?

These are the onions I designed from scratch.
https://presentator.ura.design/en/iZZBur31 (you can comment on there like in InVision)

It includes also a potential refresh of the Tor logo to this exact onion. The onion body is symmetrical and I was careful that the shape have a minimum thickness consistently, so it looks okay also on very small sizes. Something we need to keep it mind is that the onion should be as short as possible, as icons would ideally fit well into a square (1:1 proportions), yet it still need to look like an onion. I shortened the leaves a bit to accommodate for that.

Feedback is welcome

comment:9 in reply to:  7 Changed 7 months ago by antonela

Replying to arma:

Replying to antonela:

We should support a way to identify v1, v2, and v3 onion services.

A small mercy: v1 onion services disappeared long long ago. So now there are only "legacy" (v2) and "new" (v3).

Cool, thanks Arma!

comment:10 in reply to:  8 Changed 7 months ago by antonela

These are the onions I designed from scratch.
https://presentator.ura.design/en/iZZBur31 (you can comment on there like in InVision)

The stylised icon version works better at small sizes than the current one. And, we are still having a recognizable onion icon. That is cool! The container form is something that could be nice to explore: different fills, divider lines, a dot pattern? Do you want to play with it?

Something we need to keep it mind is that the onion should be as short as possible, as >icons would ideally fit well into a square (1:1 proportions), yet it still need to look like >an onion. I shortened the leaves a bit to accommodate for that.

+1. It is hard but agreed we should try to have a 1:1 aspect radio solution for the icon.

I like the 2nd exploration Antonela! They seem like material for GUI elements as status indicators. Maybe we can design a proper onion and have more abstract shapes like these to indicate onion services?

I think we are going in the right direction. I don't think we are ready for a drastic change like I explored in option 2, yet.

Feedback is welcome

hey, thanks Elio for working on it! I'd like to play with your icon a little bit too, do you want to share your .svg?

comment:11 Changed 7 months ago by antonela

Another thing that came to my mind is the Perl Foundation onion icon.
http://www.perlfoundation.org/perl_trademark

We already have another color palette which identifies us, but we should be sure that we are taking distance from it and not getting closer.

comment:12 Changed 7 months ago by elioqoshi

Thanks Antonela.

The SVG are here:
https://demo.identihub.co/project/tor-evolutionion

Also added the colors used in the new illustrations for reference.

The stylised icon version works better at small sizes than the current one. And, we are still having a recognizable onion icon. That is cool! The container form is something that could be nice to explore: different fills, divider lines, a dot pattern? Do you want to play with it?

I am mostly concerned about the inverted versions where it would need to be ideally outlined and not invert the actual shape simply. This was an issue I addressed in the initial styleguide but as this icon is simpler, need to be analyzed as well.

comment:13 Changed 7 months ago by dmr

Cc: dmr added

comment:14 in reply to:  12 Changed 7 months ago by antonela

The SVG are here:
https://demo.identihub.co/project/tor-evolutionion

Thanksss, I'll work on it and I'll back here :)

I am mostly concerned about the inverted versions where it would need to be ideally outlined and not invert the actual shape simply. This was an issue I addressed in the initial styleguide but as this icon is simpler, need to be analyzed as well.

Yep, the outlined version could be an option

comment:15 Changed 7 months ago by dmr

Owner: changed from < antonela > to antonela

After discussing with antonela, the < and > had no specific meaning. "Reassigning". :)

comment:16 Changed 7 months ago by dmr

Keywords: tor-hs added
Note: See TracTickets for help on using tickets.