Facebook and Google button styles should be updated

[EDCrasher]

Hello, on XenForo forums there is a "Log in using" section on the login page. The Facebook button color there should be updated to match the current Facebook logo color, #0866ff, and the Google icon should be replaced with the gradient "G" icon updated in 2025.


Before:


After:

 

[Tamer]

For anyone who wants to apply this before an official update, the Facebook color can already be changed/overridden from the .less side.

In core_button.less change/override:

&--facebook
{
    .m-buttonColorVariation(#3B5998, white);
}

to:

&--facebook
{
    .m-buttonColorVariation(#0866ff, white);
}

The Google icon is not handled in the same place. XF returns the Google icon from:

`src/XF/ConnectedAccount/Provider/GoogleProvider.php`

specifically from the `getIconUrl()` method, where the icon is embedded as a base64 SVG.

So the manual solution is to replace the SVG/base64 value returned by `getIconUrl()` with the updated Google “G” icon.

For ex, the method can be replaced with something like this:

public function getIconUrl()
{
    return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMy41IDI0Ij48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGQ9Ik0xMiAxMHY0LjVoNi40N2MtLjUgMi43LTMgNC43NC02LjQ3IDQuNzQtMy45IDAtNy4xLTMuMy03LjEtNy4yNVM4LjEgNC43NSAxMiA0Ljc1YzEuOCAwIDMuMzUuNiA0LjYgMS44bDMuNC0zLjRDMTggMS4yIDE1LjI0IDAgMTIgMCA1LjQgMCAwIDUuNCAwIDEyczUuNCAxMiAxMiAxMmM3IDAgMTEuNS00LjkgMTEuNS0xMS43IDAtLjgtLjEtMS41NC0uMi0yLjN6Ii8+PC9jbGlwUGF0aD48ZmlsdGVyIGlkPSJiIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxIi8+PC9maWx0ZXI+PGcgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI2EpIj48Zm9yZWlnbk9iamVjdCBzdHlsZT0iZmlsdGVyOnVybCgjYikiIGhlaWdodD0iMjgiIHdpZHRoPSIyOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIgLTIpIj48ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiBzdHlsZT0iaGVpZ2h0OjEwMCU7d2lkdGg6MTAwJTtiYWNrZ3JvdW5kOmNvbmljLWdyYWRpZW50KCNGRjQ2NDEsI0ZENTA2MSA0MGRlZywjRkQ1MDYxIDYwZGVnLCMzMTg2RkYgODVkZWcsIzMxODZGRiAxMTdkZWcsIzAwQTVCNyAxNDJkZWcsIzBFQkM1RiAxNjdkZWcsIzBFQkM1RiAyMDBkZWcsIzZDQzUwMCAyMjZkZWcsI0ZDMCAyNTNkZWcsI0ZGRDMxNCAyNjhkZWcsI0ZDMCAyOTJkZWcsI0ZGNDY0MSAzMjdkZWcpIi8+PC9mb3JlaWduT2JqZWN0PjxwYXRoIGZpbGw9IiMzMTg2RkYiIGQ9Ik0xMSA4aDE2djhIMTF6Ii8+PC9nPjwvc3ZnPg==';
}

Of course, editing core files directly is not ideal, as the change can be overwritten during upgrades. But hopefully, XF developers will not miss these small but important details in future updates.

 

[EDCrasher]

Of course, editing core files directly is not ideal, as the change can be overwritten during upgrades. But hopefully, XF developers will not miss these small but important details in future updates.

Thank you for your interest. I am adding the link below so that XenForo developers can find the SVG version of the gradient G icon in the future.

https://upload.wikimedia.org/wikipedia/commons/3/3c/Google_Favicon_2025.svg