@bmartinezcalvo from the design system team suggested to work on the following details:

1. The tip of the brush is too curved (and we don't used curved shapes in our iconography)
2. The brush stick is too thin comparing it with the pencil stick, what if you make it more robust like the one in this image attached?

And other icon concepts that you could explore for "Appearance" that could fit with our system:

3. Paint pot (it as squared shapes)
4. Color palette (making ir more squared, not than curved)

Some updates:

A. Original first version
B. Increaded the width of the brush handle, and simplified the brush tip. I'm wondering if it's too similar to the pencil icon just below, thoughts?
C. Explored the idea of a large brush. While it's different from the pencil icon I'm not sure if it's truly recognizable for a wider audience.
D. While looking at "comparative" products I noticed that another recurring metaphor is the brush in a "square". I think it's my favorite!
E. Color palette. I took the icon from the Material Design to first assess the idea. I'm not sure if it's understandable for non-designers.
D. Same as E.

Options with and without icon grid

Options in context

Some additional consideration to take in mind during the evaluation, these are the settings that are currently avaiable under Special:Preferences/Appearance:

• Skin (Vector, Minerva, ...)
• Date format
• Time offset
• Files
• Diff
• Math
• Languges

That said we could also consider which is the icon that can potentially be reused in other contenxts, so that we don't introduce an icon that is too specific to this use-case only.

I'm going to share this also in design review (or async) to collect some additional feedback!

Of the non-paintbrush options my personal favourite for this menu would be the color palette :)

Hey @bmartinezcalvo after chatting with Pau (and Sam) we narrowed down the selection to option B. and option E. In order to better inform a final decision I'm also going to "imagine" alternative use cases for those two icons. For example, would one of those icon work for a "theme" feature? Or a "draw" feature on Wikistories? Or maybe a "filter" or "colorize" feature on Commons?

Do you have any preference or suggestions on this selection (B. and E.)? Many many thanks!

In T311514#8041682, @aminalhazwani wrote:

Hey @bmartinezcalvo after chatting with Pau (and Sam) we narrowed down the selection to option B. and option E. In order to better inform a final decision I'm also going to "imagine" alternative use cases for those two icons. For example, would one of those icon work for a "theme" feature? Or a "draw" feature on Wikistories? Or maybe a "filter" or "colorize" feature on Commons?

Do you have any preference or suggestions on this selection (B. and E.)? Many many thanks!

@aminalhazwani thank you for sharing all these options, great exploration. My favorite options are also B and E since they are the ones that better fit with our iconography system and they are the ones that I think are best understood at a universal level for this "appearance" concept.

About my preferences for both icons, I think E could work better than B in our icon system. We already have the pencil icon (edit) which is too similar to a brush one in a concept and design perspective, so I think the color palette icon could be reused more than the brush. In addition, viewing both icons (pencil and brush) on the same screen and being positioned one on top of the other, they are too similar to indicate two different concepts.

I would move forward with the color palette icon but try to make it less curved so it fits better with our iconography.

I would move forward with the color palette icon but try to make it less curved so it fits better with our iconography.

On it! Thank you @bmartinezcalvo!

+1 Although I support the addition of 'brush' to our icon system, I'd suggest to move forward with the 'color palette' icon to be used in this specific case.

Hello hello, yesterday we did not manage to chat about this update during design system office hour. Following @bmartinezcalvo feedback, I tried to explore how we could make the palette icon less curved.

In the screenshots below you can find some explorations with minor different details. For example, with the palette handle angled, or with growing "tempera" spots. I also add a wireframe/outline image to highlight how the icons was built.

Here you can see the 4 proposals in context. Feel free to consult the Figma file if you prefer to do so.

Looking forward to hearing from you!

@aminalhazwani thank you for sharing all these options for the palette icon. Although you have greatly simplified the curve of the palette, I think it's still not the right curve since we should use a more geometric and simple shape in the curve of the palette. Something like these options E and F:

{F35327479}

Thanks @bmartinezcalvo, here's a new update! After following your inputs, I set the orientation (the icon is now "pointing" to the top right corner) similarly to the other icons (eg. pencil, key), but I see that some other icons (eg. search, tag) have the opposite direction. Does it make sense? Do you have any recommendation?

Through this reduction process, I do wonder if the icon is starting to look more like a bite cookie and less like a color palette. What do you think? Thank you!

In T311514#8101052, @aminalhazwani wrote:

Thanks @bmartinezcalvo, here's a new update! After following your inputs, I set the orientation (the icon is now "pointing" to the top right corner) similarly to the other icons (eg. pencil, key), but I see that some other icons (eg. search, tag) have the opposite direction. Does it make sense? Do you have any recommendation?

Through this reduction process, I do wonder if the icon is starting to look more like a bite cookie and less like a color palette. What do you think? Thank you!

@aminalhazwani good point about the orientation! My preference it's for option G but I agree that now the icon could be similar to a bite cookie.. I think it's a good topic to present during the Design Review with the rest of designers so you can collect feedback from more people.

After presenting the different options during a design review, the majority of the group favored option A or B. I would suggest to go forward with B as it's a simpler shape.

Blueprint,

icon in context,

icon in code,

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <title>palette</title>
  <path d="M20 10a5 5 0 0 1-5 5h-2v2a3 3 0 0 1-3 3C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10Zm-6-5.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm1.5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9 4.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0ZM4.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
</svg>

and icons as file.

What are the next steps @bmartinezcalvo? Does the design system team takes the lead now or do you need anything else on my end? Do you need me to update the task description? Thank you!

In T311514#8201396, @AAlhazwani-WMF wrote:

What are the next steps @bmartinezcalvo? Does the design system team takes the lead now or do you need anything else on my end? Do you need me to update the task description? Thank you!

@AAlhazwani-WMF now the icon proposal has been defined, you should do the following:

• Update the proposal section in the task description
• Add the link to the Figma file with the proposed icon
• Export the icon in an optimized SVG and add it in the task (in the SVG icon section)

To add the icon in our icon system (you can do it yourself) you should:

• Create the RTL version of the icon (as the icon has directional orientation I think we need the RTL version, read more about bidirectionality in iconography here)
• Add the new icon in our Icon System Figma file and publish the library with the new icon added. You can create a Figma branch with the new icon and share it with me so we can review it before merge it.

I've added this checklist as acceptance criteria in this task description so make sure to check all.

Thank you @bmartinezcalvo! The task description has been updated!

@Sarai-WMDE can we merge my Figma branch into the main Icon System Figma file?

For adding the icon to Codex/OOUI do you maybe have an ETA? Thank youuu!

Change 831647 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'palette' to collection

https://gerrit.wikimedia.org/r/831647

Change 831648 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] icons: Add 'palette' to 'editing-advanced'

https://gerrit.wikimedia.org/r/831648

Change 831647 merged by jenkins-bot:

[design/codex@main] icons: Add 'palette' to collection

https://gerrit.wikimedia.org/r/831647

In T311514#8229776, @AAlhazwani-WMF wrote:

@Sarai-WMDE can we merge my Figma branch into the main Icon System Figma file?

Hey @AAlhazwani-WMF ! Sorry for only seeing this now. The Figma branch was merged and a new version of the Icon library was published.

For adding the icon to Codex/OOUI do you maybe have an ETA? Thank youuu!

The icon is already available in Codex. With regard to OOUI, there's an open patch, so it should be available there soon too.

Change 831947 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

https://gerrit.wikimedia.org/r/831947

Change 831947 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

https://gerrit.wikimedia.org/r/831947

In Codex demo action including RTL:

Change 831648 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'palette' to 'editing-advanced'

https://gerrit.wikimedia.org/r/831648

Change 836237 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.45.0

https://gerrit.wikimedia.org/r/836237

Change 836237 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.45.0

https://gerrit.wikimedia.org/r/836237