Consider switching security coverage icon to something similar to D.O.

A picture says more than thousand words. Without some words everyone needs to figure out the meaning. Upon first use of the module I had to figure out what the meaning of the blue icon next to the green one was. Surprisingly enough it was the blue one that matches the green one on d.o. Now the green one is removed, the blue one can get its own color back.

Consider it bad UI design to change colors people are used to for this functionality. It is already a different symbol. In addition there is poor naming of the image. It shouldn't use attributes in its name (blue-). Now you not only need to change the color in the image, you also need to change its use in the two places it is used. Suggest to rename to security-shield-icon.svg, removing the color.

I was always puzzled by the color choice. To me, blue doesn't signify anything, whereas green has a positive connotation (stop/go - red/green). In my opinion, intuitive connotation should trump fresh design.

So here's my vote for making the security coverage icon in Project Browser green.

PS. I am equally puzzled by the choice of making the "covered by the security advisory policy" icon grey under projects (see for example https://www.drupal.org/project/captcha) which certainly doesn't convey any sense of security to me. But that's another discussion :-)

The shield in the legend is grey, but when it's used next to a project it's styled as #7cbc48 (green)

The explanation (at least for the project shield) is simple: It's a bug!

Firefox: Legend and project icons are grey

Chromium: Legend is grey and project icons is green

EDIT: I have created #3316926: Covered by the security advisory policy project icon is grey in Firefox.

I am still puzzled though, why the legend icon is grey ... But again, that's another discussion for somewhere else, since this issue is about blue or green shield in Project Browser.

Taking a look at this at MidCamp 2023. I agree with the above that it should be green. I experimented with just changing the line color of the existing icon, but it looked way too similar to the "Compatible with your Drupal installation" icon, which is a white checkmark inside a green circle on the admin/modules/browse/ctools page (for example):

Changing it to the solid green shield like on drupal.org looks a lot better, and this would be my recommendation:

Note that drupal.org uses a black icon with a green filter over it: filter: opacity(0.5) drop-shadow(0 0 0 #7cbc48) brightness(2). We could do it that way, but I say just make the icon itself green (#7cbc48). The current icon is images/blue-security-shield-icon.svg so the file name will need to be changed along with the icon itself. This file name is also referenced in the code itself, so a find-and-replace will be needed. Finally, there also needs to be a white version of the icon to replace images/blue-security-shield-icon--dark-color-scheme.svg.

Those two greens don't look great together. I'm not sure if we should borrow the two greens from .messages instead, maybe? Though I get that we should be consistent across d.o and the Project Browser, so I am in favor of this change.