Gutenberg: Consider the icon for global styles

[karmatosed]

With the recent icon work, I wanted to open up the discussion here about what icon should be used for the global styles at least in its first version. The current version is:

I personally, think this could be ok for a v1, but I feel it could be much better. Does anyone have some ideas here? I admit I am a little stuck on seeing beyond this right now, hence asking.

[pagelab]

The customizer is represented in the Dashicons icon font as a brush.

So, maybe giving it a spin with another graphic element would do?

Or perhaps you could play with this crayons/settings idea:

Another concept considering the dichotomy between global and local: a block inside a bigger block (a site), that also connects to the idea of a color wheel:

Here's a sketch file with these ideas, feel free to use it:
global-styles-ideas.sketch.zip

[pablohoneyhoney]

Adding to the conversation here. In the spirit of homogeneity, there's one icon for _color_ in the new library that could work well:

In case we want to break out color and font properties, just did one for font:

[karmatosed]

Thanks for those ideas @pagelab and @pablohoneyhoney. I do like the crayons, but that probably when small will look a bit more like equalizers. My instinct is for the droplet as I can see it working nicely in this case.

[shaunandrews]

I think the droplet works well for color (and that's how we currently use it) specifically because its inner shape represents the selected color. I'm not sure the droplet works for Global Styles as there will be multiple color controls. Also, having the same icon for color and global styles would confuse me.

Maybe some combination of the droplet and the font icon could work?

Random ideas:

• paintbrush
• palette
• blueprint
• fan deck (You know, those Pantone color reference thingies...)
• pencil + brush

[MichaelArestad]

The palette has worked well enough for the Customize sidebar item in wp-admin. This seems like a good application for it that might be familiar enough to understand. It's just a bit complex as far as shapes go.

[enriquesanchez]

I also think the palette could work well. It's already commonly seen as a styling tool.

And I'm also leaning towards the pencil + brush. Having these two tools together makes me think I can edit and style.

[pagelab]

More concepts for inspiration:

[richtabor]

I like the palette as it's relative to the Customizer, and its not a singular color (which is what the droplet may indicate).

[nosolosw]

https://github.com/WordPress/gutenberg/pull/24250 just landed and came with the typography icon. I wanted to ping folks about this, in case we can close this issue or want to update the icon.

[shaunandrews]

The typography icon is likely fine for now, but I do think a more representative icon is needed at some point down the road.

[noahshrader]

Took a quick pass at this.

For some of the early explorations, I had been using a color palette icon (moreso to just have something there) in a style consistent with those found in the block editor. While I love the consistency with the Customizer, and the icon being a relatively common indicator of style/color, it's really just that: _color_.

The above concept combines two elements that I think best represent the scope of global styles: _styling elements_ (paintbrush) and _measuring elements_(ruler) - both globally recognized. I agree with earlier sentiment here of keeping the shape as simple as possible, without obscuring (though really, once discovered, isn't overly critical).

Just a thought; not tied to it.

[MichaelArestad]

@noahshrader I like the direction. How does it look in context?