1522041 - Update search, filter and color picker icons to a Photon style

Status: RESOLVED FIXED

(DevTools :: Framework, enhancement, P2)

Description

[Florens Verschelde :fvsch]

UX issue: https://github.com/devtools-html/ux/issues/47

• Search icon: we can use the one from Firefox
• Filter icon: the one I drew is not perfect but it matches Photon style and Victoria is okay with it
• Color picker icon: going with something closer to Figma (and other tools') color picker icon

Should be a straightforward change.
Only subtility is that we may want to have 16px and 12px variants for search/filter, the 12px variant being used as a smaller icon in text boxes. Currently we downscale the existing 16px icons to a 11px size, which can be blurry on 1x displays. The 12px size comes from the Photon guidelines for small icons:
https://design.firefox.com/photon/visuals/iconography.html#shape

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1522041 - Update search, filter and color picker icons to a Photon style; r=pbro

Comment 2

[Florens Verschelde :fvsch]

In this patch I'm splitting the filter icon in two:

• filter.svg is designed on a 16px grid, and used by Console
• filter-small.svg is designed on a 12px grid, and used in text boxes and in Rules

We could theoretically do the same for search.svg, but the 16px icon from Photon/Firefox scales down cleanly to 12px. The 12px design I came up with is equivalent to the 16px design scaled down.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5592c56955ca
Update search, filter and color picker icons to a Photon style; r=pbro

Comment 4

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/5592c56955ca