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).

[oandregal]

#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?

[pablohoneyhoney]

To pick this up, sharing here an icon that's cleaner, contextually more balanced, and more encompassing of all the capabilities and intricacies of GS. It also plays along with other new icons and evolving language.

Other explorations here too, some of which could perhaps land themselves in more specific functions if needed.

[estelaris]

The design team reviewed today and we think that more iterations are needed. We feel like most of the icons presented make reference to color

[paaljoachim]

Here is a link to the discussion: https://wordpress.slack.com/archives/C02S78ZAL/p1615306694219300

[kjellr]

To pick this up, sharing here an icon that's cleaner, contextually more balanced, and more encompassing of all the capabilities and intricacies of GS. It also plays along with other new icons and evolving language.

My main hesitation with this version is its similarity to the standard "contrast" icon. I could get used to it, but I'm not sure I'd know what that meant the first time I saw it in context.

I do think some of the more artistic icons (brush, ruler, etc) are a clearer metaphor, though since Global Styles covers so many different options, some sort of abstract icon might be our best bet here.

[pagelab]

Some sort of abstract icon might be our best bet here.

I imagine that a totally abstract icon, not based on the task at hand in any way, will require a high dose of good faith from the user to understand it, which is not ideal in this case.

It's definitely possible to learn the meaning over time, of course, but just like pretty much all other icons in use today (Gutenberg icon library or Dashicons font) adopt some form of figurative representation, I would argue that the same is needed here to make this new feature a little more obvious and to arouse more interest in it at the same time – like it was done for the Share and REST API Icons, which are “almost” abstract.

[ghost]

Please, reconsider the chosen icon.

Problem:
When "light/dark mode" is an icon instead of a toggle, websites and applications choose this icon to indicate "light/dark mode".

Settings regarding "design, appearance and styles" commonly are represented on projects by a brush icon or a color palette.

Even though this new feature, Global Styles, has a larger scope than what WordPress used to offer, I don't see the benefit in choosing an abstract icon to convey the idea.

Global Styles is not a new system disconnected from styles and themes, indeed is an improvement to the current themes system. If we were to consider the strength of WordPress' past and present, we would perceive that on the dashboard, indeed a brush icon has been developed for years in people's memory as an association with appearance, themes, styles, personalization. Therefore, the icon that would be most comprehensible in people's memory regarding the new Customizer remains a brush. I say new and better Customizer, because this is how common people manifest what they understand about Global Styles. Departing from a pencil brush to yin-yang, moon, or water drop, I have not tested yet with public, but from past experience I assure you people are going to find this new icon unrelated and confusing.

Proposed solution:
It would be desirable to honor the current dashboard icon regarding Themes, a pencil brush, bring it into Gutenberg in order to maintain the subjectivity regarding Themes permeating WordPress project, and hold a referendum with the public outside the developers' scope regarding the experimentation and initiatives here.

[ZebulanStanphill]

I don't see how a half-moon shape has anything to do with styles. Like the previous comment pointed out, it looks like a dark-mode toggle icon. A brush makes far more sense for something related to "styles", and the icon is already used by WordPress so there's familiarity with it.