Instead of star/tab search icons in front of the results, for the megabar we want to implement badged favicons, according to the spec.

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS. We need the new icons from UX before proceeding.

(In reply to Harry Twyford [:harry] from comment #1)

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS.

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

(In reply to Dão Gottwald [::dao] from comment #2)

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

That's the thought indeed... my experience is - generally - that scaling vector icons up is no trouble at all, but when scaling them down they tend to need different shapes to get the same visual expression. This became clear to me right away when looking at the swith-to-tab icon. They might also be considered to not match the Photon tab style currently (since the icon shows a curvy tab).

Drawing the circle with CSS seems like the right plan, because you can work with different contrast modes easier that way, since we generally work with only one fill-color for icons.

Why?

I recall a meeting last week where we decided to use pre-made icons instead of CSS circles because we'd need new icons for the small size anyways, and that way we could save the small bit of computation needed to draw the CSS circle every time.

I'm glad we've settled on CSS circles now though, since they're more flexible like Mike said. I've asked Bryan Bell if the current star and tab icons are suitable for display at the small badge size or if we'll need new icons. I'll needinfo him here for posterity.

Bryan and shorlander have asked that we do the badges like this instead.

We'll be using slightly different colours in dark mode:

Light mode

Star: Blue-60
Tab: Teal-70
Outline: #fff

Dark mode

Star: Blue-50
Tab: Teal-60
Outline: Grey-70

https://hg.mozilla.org/mozilla-central/rev/48203e499be2