Create a consistent set of icons for relay flags

added component::webpages/website parent::24664 priority::medium resolution::fixed severity::normal status::closed type::enhancement ux-team labels

Edited description:

consensus-health uses ReachableIPv6 if a vote has an "a" line for a relay. This is similar to Relay Search's "IPv6 ORPort" in the consensus.

Trac:
Description: Relay Search currently uses a set of icons for relay flags that exist as 16x16 PNGs. Over time we have added new icons but we've never considered consistency across projects or reusability of these icons.

Ideally, we could have icons for the following flags that are reusable across projects (meanings are in dir-spec):

Authority
BadExit
Fast
Guard
HSDir
NoEdConsensus
Running
Stable
V2Dir
Valid
Exit

Atlas also synthesises additional flags, as does consensus-health:

Not Recommended - This relay is running a Tor version that is not recommended by the directory authorities and may contain known issues.
Unmeasured - This relay has not been measured by at least 3 bandwidth authorities and so its consensus weight is currently capped.
FallbackDir - This relay is hardcoded into the tor source code as a fallback directory.
IPv6 ORPort - This relay listens for OR connections using IPv6.
IPv6 Exit - This relay allows exit connections using IPv6.
Unreachable ORPort - This relay has an unreachable OR address according to at least one directory authority.
T-Shirt - This relay has met the t-shirt team criteria for a t-shirt (in theory).

Ideally these icons would be available for use in projects in the following formats:

Web Icon Font
SVG
16x16, 32x32 and 64x64 PNGs

If we could also throw in an onion, and relay and bridge icons, a fingerprint icon, AS icon, country icon (maybe a globe), this could be a really useful tool for user facing projects that has consistent UX across those projects.

to

Relay Search currently uses a set of icons for relay flags that exist as 16x16 PNGs. Over time we have added new icons but we've never considered consistency across projects or reusability of these icons.

Ideally, we could have icons for the following flags that are reusable across projects (meanings are in dir-spec):

Authority
BadExit
Fast
Guard
HSDir
NoEdConsensus
Running
Stable
V2Dir
Valid
Exit

Atlas also synthesises additional flags, as does consensus-health:

Not Recommended - This relay is running a Tor version that is not recommended by the directory authorities and may contain known issues.
Unmeasured - This relay has not been measured by at least 3 bandwidth authorities and so its consensus weight is currently capped.
FallbackDir - This relay is hardcoded into the tor source code as a fallback directory.
IPv6 ORPort - This relay listens for OR connections using IPv6. (consensus-health calls this "ReachableIPv6", because it looks at votes.)
IPv6 Exit - This relay allows exit connections using IPv6.
Unreachable ORPort - This relay has an unreachable OR address according to at least one directory authority.
T-Shirt - This relay has met the t-shirt team criteria for a t-shirt (in theory).

Ideally these icons would be available for use in projects in the following formats:

Web Icon Font
SVG
16x16, 32x32 and 64x64 PNGs

If we could also throw in an onion, and relay and bridge icons, a fingerprint icon, AS icon, country icon (maybe a globe), this could be a really useful tool for user facing projects that has consistent UX across those projects.
Cc: N/A to teor

Trac:
Cc: teor to teor, hola@antonela.me

Trac:
existing_flag_icons.tar.gz

Sorry this took a while to get back to. I've attached the existing icons that are used by Relay Search.

teor: That's exactly the same semantics as the Relay Search flag, so perhaps Relay Search should rename it?

antonela: Please let me know if you would like me to review/give feedback for any designs. I'm happy to make time to do so.

Also, the archive contains icons for "Named" and "Unnamed". These are not flags anymore, but perhaps it's worth having them in the icon set just in case anyone talks about history of the spec.

Replying to irl:

teor: That's exactly the same semantics as the Relay Search flag, so perhaps Relay Search should rename it?

They have subtly different semantics, so I'm not sure I want to rename them:

if an authority votes for one address in an "a" line, and another authority votes for a different address in an "a" line, they will both have the ReachableIPv6 flag in their votes, but the relay won't have an IPv6 ORPort in the consensus, because there is no majority.
for an authority to vote for any ReachableIPv6 "a" lines, it needs to have outbound IPv6 connectivity, and set AuthDirHasIPv6Connectivity. This is completely separate from whether the authority itself has an IPv6 ORPort. (Example: dannenberg has ReachableIPv6 in its votes, but does not declare an IPv6 ORPort for itself.)
there's a subtle difference in semantics, too: in votes, ReachableIPv6 means "I found this relay's IPv6 ORPort reachable" and UnreachableIPv6 means "I normally vote for IPv6 ORPorts, and this relay claims one, but I didn't find it reachable". But IPv6 ORPort means "we have a consensus between the authorities voting ReachableIPv6 on the exact address and port of the IPv6 ORPort of this relay".

Operators mainly care about IPv6 ORPort, until something goes wrong, and then they use ReachableIPv6 and UnreachableIPv6 for diagnostics.

So let's update the list:

Running: This relay was found reachable on all of its OR addresses and ports.
IPv6 ORPort (consensus) / ReachableIPv6 (votes): This relay listens for OR connections using IPv6, and was found reachable via IPv6.
Unreachable IPv6 ORPort (consensus) / UnreachableIPv6 (vote): This relay has an unreachable IPv6 OR address or port according to at least one authority. (We can leave the version off this if you want, but we'd have to assign it for UnreachableIPv6 and not Running.)

Ok, I see. There is some plan to add votes to Onionoo so that this information may one day be available in Relay Search so we should keep this distinction. I've updated the description, and also added "Hibernating" which I should really add to Relay Search.

I think I'll do the code to have it available in the model on Relay Search but wait for the new icons before actually deploying it.

Trac:
Description: Relay Search currently uses a set of icons for relay flags that exist as 16x16 PNGs. Over time we have added new icons but we've never considered consistency across projects or reusability of these icons.

Ideally, we could have icons for the following flags that are reusable across projects (meanings are in dir-spec):

Authority
BadExit
Fast
Guard
HSDir
NoEdConsensus
Running
Stable
V2Dir
Valid
Exit

Atlas also synthesises additional flags, as does consensus-health:

Not Recommended - This relay is running a Tor version that is not recommended by the directory authorities and may contain known issues.
Unmeasured - This relay has not been measured by at least 3 bandwidth authorities and so its consensus weight is currently capped.
FallbackDir - This relay is hardcoded into the tor source code as a fallback directory.
IPv6 ORPort - This relay listens for OR connections using IPv6. (consensus-health calls this "ReachableIPv6", because it looks at votes.)
IPv6 Exit - This relay allows exit connections using IPv6.
Unreachable ORPort - This relay has an unreachable OR address according to at least one directory authority.
T-Shirt - This relay has met the t-shirt team criteria for a t-shirt (in theory).

Ideally these icons would be available for use in projects in the following formats:

Web Icon Font
SVG
16x16, 32x32 and 64x64 PNGs

If we could also throw in an onion, and relay and bridge icons, a fingerprint icon, AS icon, country icon (maybe a globe), this could be a really useful tool for user facing projects that has consistent UX across those projects.

to

Relay Search currently uses a set of icons for relay flags that exist as 16x16 PNGs. Over time we have added new icons but we've never considered consistency across projects or reusability of these icons.

Ideally, we could have icons for the following flags that are reusable across projects (meanings are in dir-spec):

Authority
BadExit
Fast
Guard
HSDir
NoEdConsensus
Running
Stable
V2Dir
Valid
Exit

Atlas also synthesises additional flags, as does consensus-health:

Not Recommended - This relay is running a Tor version that is not recommended by the directory authorities and may contain known issues.
Unmeasured - This relay has not been measured by at least 3 bandwidth authorities and so its consensus weight is currently capped.
FallbackDir - This relay is hardcoded into the tor source code as a fallback directory.
IPv6 ORPort - This relay listens for OR connections using IPv6.
Unreachable IPv6 ORPort - This relay listens for OR connections using IPv6 but the directory authorities failed to confirm it was reachable.
ReachableIPv6 - This relay has at least one reachable OR port using IPv6. (in votes)
UnreachableIPv6 - This relay has at least one unreachable OR port using IPv6. (in votes)
IPv6 Exit - This relay allows exit connections using IPv6.
Unreachable ORPort - This relay has an unreachable OR address according to at least one directory authority.
T-Shirt - This relay has met the t-shirt team criteria for a t-shirt (in theory).
Hibernating - This relay is not currently running, and indicated that it was hibernating in its last known server descriptor.

Ideally these icons would be available for use in projects in the following formats:

Web Icon Font
SVG
16x16, 32x32 and 64x64 PNGs

If we could also throw in an onion, and relay and bridge icons, a fingerprint icon, AS icon, country icon (maybe a globe), this could be a really useful tool for user facing projects that has consistent UX across those projects.

Hi all!

Thanks for inviting the UX team to work on this ticket :)

I've started to work on this set. You can see the progress here:

https://24399.glitch.me/

To make it easy extendible, I opted in for looking into FontAwesome if some related icon exists and use it. If not, then I created a custom one.

Icons are tricky. Since Icons are a representation of an idea, each concept could take a lot of shapes. Having a consensus about them within the Tor community will allow us to make them easily recognizable.

So, I'd like to encourage people to comment this thread if some icon is not what you expected or if any icon could be more precise using another kind of representation.

Again, this is the first approach. I'm sure some of them will change after the review.

Fingerprinting and AS are remaining; I'm working on them.

Please, let me know if I missed any required and what do you think :)

This looks like a good set of icons. Thanks!

Here's how the definitions relate to one another:

"Reachable IPv6 ORPort" and "Reachable IPv6" are the same concept. We're going with the "Reachable IPv6" name. (We just had a conversation about this on the metrics list.)

Also, we might rename "Reachable ORPort" to be "Reachable IPv4".

And "Running" is a combination of "Reachable IPv4" and "Reachable IPv6".

I wonder if this helps us find an icon for "OR". I like the current "Running" icon. What does it look like if we add "4" or "6" or "IPv4" or "IPv6" to the "Running" icon, and use them for the "OR" icons?

I have some suggestions for consistency:

Can we make FallbackDir look like V2Dir? Can we take the "V2" out of "V2Dir", because it's the most common kind of generic directory?

Can we make "NoEdConsensus", "Unmeasured", and the "Unreachable" series look more like a warning, like "BadExit" or "Not Recommended"? Or should we make all the bad icons look grey?

This is looking great (:

For the IPv6, I like the IPv6 OR icon for "ReachableIPv6" and Unreachable IPv6 ORPort for "UnreachableIPv6", I think it would be useful though to keep the other IPv6 icons in case we need that for IPv6 in general, including the alt version but rename those to just "IPv6", "No IPv6" and "IPv6 Alt".

Can we also add an "IPv4Reachable" and unreachable variant, along with plain IPv4 and the alt version?

Can we add a "NoIPv6Consensus" to an "IPv6" with a question mark underneath? Can we then also change "NoEdConsensus" to be similar in that it has an "ED" and a question mark underneath?

For V2Dir, I think this is actually fine with the V2 inside it, but adding a generic "Directory" would be cool. Can we invert the FallbackDir icon and place it on the generic directory icon for FallbackDir?

Thanks both! I'll work on this review asap :)

Trac:

Thanks for the review irl and teor!

I re-worked IPv4, iPv6, and Directories

The reviewed icons are here

https://trac.torproject.org/projects/tor/attachment/ticket/24399/24399-review.png

Some notes:

Running + IPv4/6 is a good idea.
Unreachable states now have a specific icon. We can use a warning color too.
I'm including IPv4/6 alone glyphs just in case.
FallbackDir, v2Dir, and HSDir now are part of the same concept :)

If everything goes ok, I'll update the set officially :) Let me know what do you think!

Thanks!

These look good, but Fallback Directory needs a distinguishing symbol. I also think that V2Dir does not, because it is the base concept.

Trac:
Status: new to needs_revision

Replying to teor:

These look good, but Fallback Directory needs a distinguishing symbol. I also think that V2Dir does not, because it is the base concept.

Gotcha! https://trac.torproject.org/projects/tor/attachment/ticket/24399/24399-review2.png

Trac:

Ok, let's go with this! Can you group the icons by concept (rows?) and IP version (columns?) in the final set? That will help people see the visual similarities.

Thanks Teor!

The set was updated. Take a look there for a final review. https://24399.glitch.me/

Can you group the icons by concept (rows?) and IP version (columns?) in the final set? That will help people see the visual similarities.

Yes, sure! The final delivery from my side is going to be a .svg/.png export.

@irl let me know when you take a look so you can confirm me which assets do you need for the implementation.

I like these icons. (:

From my perspective, I would like the final export to be a tar file containing one square SVG for each of the icons. I will then run this through scripts to be able to generate the assets to be used in the webpages.

Could you also let me know what font you have used for text within the icons, as I may need to have this available for my scripts?

Trac:
24399-icons.zip

Replying to irl:

I like these icons. (:

Thanks :)

From my perspective, I would like the final export to be a tar file containing one square SVG for each of the icons. I will then run this through scripts to be able to generate the assets to be used in the webpages.

Here is the bundle, let me know if it works!

https://trac.torproject.org/projects/tor/attachment/ticket/24399/24399-icons.zip

Ok, so for now these are sitting here as an icon font:

https://people.torproject.org/~irl/icons/

I will hopefully finish off the scripts for generating the different assets in different formats next week.

Trac:

Attached is a screenshot of the new icons in Relay Search. I'm very happy with how these have turned out.

I've now finished off some scripts that generate PNGs and font files from the icons, and you can download a tar.gz archive from https://people.torproject.org/~irl/icons/ including the generated fonts and PNGs.

teor: How strongly do you feel about using the blank directory for the V2Dir flag? It's ok at larger sizes but I think that the V2 does help to visually distinguish it from being a black rectangle at 16x16.

Trac:

For comparison, this second screenshot uses the alt version of v2dir.

I agree that the alternative version is more distinguishable. i think standardising on one symbol or two letters per icon is a good thing.

One more thing I've noticed in the screenshot, that I didn't pick up before:

We use "v6" on the running icons, and "IPv6" on the exit icon. Can we see how the exit icon would look with "v6" please?

(And sorry for the late change.)

Trac:

teor: I think I prefer the "v6" version, thanks for spotting that. The screenshot is above.

I'm going to mark this closed, fixed in af88027 in user/irl/tor-icons.git. The web page at https://people.torproject.org/~irl/icons/ will be the canonical source for these icons for now, until they are integrated into the style guide in #24664 (moved).

Any requested changes or new icons should be new tickets on the Website/Webpages component tagged with ux-team for now. I assume there will be a style guide component in the future.

Thanks antonela for the design work, and thanks teor for the help in reviewing!

Trac:
Summary: Consistent set of icons for relay flags to Create a consistent set of icons for relay flags
Parent: N/A to #24664 (moved)
Resolution: N/A to fixed
Status: needs_revision to closed

＼(＾O＾)／

closed

mentioned in issue #24663 (moved)

mentioned in issue #24664 (moved)

moved to tpo/web/trac#24399 (closed)

mentioned in issue tpo/web/trac#24664 (closed)

Create a consistent set of icons for relay flags

Child items 0

Activity