[website] Update product icons

[danilo-leal]

Updating the product icons after all the refinement and polish that @gerdadesign did on them to make sure both the shapes are more consistent and well-balanced 🙌

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35413--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 428d73b

[oliviertassinari]

A live comment comparing the difference:

• Core: nothing I can think of
• X: feels bigger, it seems to work
• Templates: feels smaller, is it expected?
• Design kit: feels smaller, is it expected? The contrast between the difference face could also maybe increased to better see the 3D shape.
• Toolpad: feels smaller, is it expected? It's also harder to see the T shape

[siriwatknp]

@danilo-leal I don't think I am helpful on this PR 😅. Removed my self from the reviewer.

[danilo-leal]

@oliviertassinari the cube sizes are the same throughout all the logos ⎯ the reason why X feels bigger is just because it has more cubes 😬 but agree that the Design Kits are a bit too dark ⎯ @gerdadesign maybe we can fallback to the previous colors?

[gerdadesign]

Logo colors are updated! This color difference came from the old product logos in Figma vs what was live on MUI.

Re: sizing — we updated the core cube building block and how that was used to build the logos. So, the cube within the X logo and the cube within the Design Kits logo are now more consistent with each other (size and corner radius).

[danilo-leal]

@gerdadesign @oliviertassinari logos updated per the new design ⎯ let me know if it's ready for merge 👌

[oliviertassinari]

the cube sizes are the same throughout all the logos

@danilo-leal @gerdadesign I see, it feels like it's taken from the same scene now. It seems like a step forward 👍.

---

In the long run, I think that we could explore these two questions for these logos:

1. Should we make the icons more distinguishable from one to the other? It's not necessarily obvious which product is which one based on the icon. We are now used to them, so I think that can make a difference quickly but what about our users?
2. Should we make them distinguishable at a smaller resolution? I'm thinking of browser tab favicon and low-res media.

e.g. HashiCorp

[danilo-leal]

I really like the push at a very small size such as these ones! It will definitely be a challenge given the cube-stacking type of logo ⎯ but it's something we should try 👌