[Icons] Updates social media icons

[heyjoethomas]

Updates social media icons by removing them from their containers so they are more identifiable. Also adds an icon for Twitch.

WHY are these changes introduced?

We received feedback that the current icons were hard to distinguish when next to each other.

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[stuartinstrell]

Thanks @heyjoethomas these look great to me! Will let @Saulki review before approving for merge.

[Saulki]

Instagram icon needs to be a little heavier.

[Saulki]

Instagram icon looks much more thin/smaller when placed next to other icons. Any way to add more weight to it?

[heyjoethomas]

Instagram icon needs to be a little heavier.

@Saulki We are using their branding directly. We can't edit or change their logo

[nattydodd]

Hey @heyjoethomas @Saulki! just curious when you expect this to be merged? We'd like to make use of these icons in Collective when ready. Thanks!

[Saulki]

Instagram icon needs to be a little heavier.

@Saulki We are using their branding directly. We can't edit or change their logo

@heyjoethomas I might be missing context on branding guidelines or Polaris icon guidelines, maybe even don't have context of future plans with micro icon size (my assumption why social icons being so small), so sorry if I miss on this one.

But I've played around just with the size of these icons and come to couple of ideas, let me know if there is reason they don't work and we can revert to original icons. Check it in my Figma: https://www.figma.com/file/BVJ1lEY2dEH7gEl0ypFWsP/Application-management?type=design&node-id=3749%3A49589&mode=design&t=EOsFQsre02hDZYF3-1

My rationale:

• I found out none of social icons fit to Polaris icon keylines and are much smaller than that;
• If we are restricted by branding, we can still play with the size and aim for similar visual weight, even when actual icon size is bigger than others. Just bumping it up to keylines might be enough, but we can go beyond that if it has thin strokes like Instagram.
• I've used few other minor icons that we commonly use in Collabs as a comparison, because they will be mostly used in this context, next to interactive icons (like print or message). That was my baseline for icon weight. Most common use case for social icons is having it interactive as icon button which links out to social platform. Do you have other use cases in mind maybe?

[heyjoethomas]

Instagram icon needs to be a little heavier.

@Saulki We are using their branding directly. We can't edit or change their logo

@heyjoethomas I might be missing context on branding guidelines or Polaris icon guidelines, maybe even don't have context of future plans with micro icon size (my assumption why social icons being so small), so sorry if I miss on this one.

But I've played around just with the size of these icons and come to couple of ideas, let me know if there is reason they don't work and we can revert to original icons. Check it in my Figma: https://www.figma.com/file/BVJ1lEY2dEH7gEl0ypFWsP/Application-management?type=design&node-id=3749%3A49589&mode=design&t=EOsFQsre02hDZYF3-1

My rationale:

• I found out none of social icons fit to Polaris icon keylines and are much smaller than that;
• If we are restricted by branding, we can still play with the size and aim for similar visual weight, even when actual icon size is bigger than others. Just bumping it up to keylines might be enough, but we can go beyond that if it has thin strokes like Instagram.
• I've used few other minor icons that we commonly use in Collabs as a comparison, because they will be mostly used in this context, next to interactive icons (like print or message). That was my baseline for icon weight. Most common use case for social icons is having it interactive as icon button which links out to social platform. Do you have other use cases in mind maybe?

@Saulki Gotcha. I don't expect these to perfectly line up with our guidelines because they are built for that. However, I will double check them all to make sure they are as close as possible.

[michellegerrarddoyle]

@heyjoethomas do we have an idea when this will be merged please?

[heyjoethomas]

@heyjoethomas do we have an idea when this will be merged please?

When someone approves the changes.

[michellegerrarddoyle]

@heyjoethomas look ok to me but I know you said the original request came from Saulius and Stu.

@Saulki please could you review since you gave the last round of feedback? Keen to see it merged asap as we have a dev task dependant on it.

[stuartinstrell]

Going to approve this PR so as to not block projects for Collabs and Collective. @Saulki is currently OOO - @heyjoethomas is there a way we can get this shipped asap and Saulius can raise any issues when he returns? cc @michellegerrarddoyle

He is OOO and this is blocked.