From f52d0ac4804047f9d2cba86069d4f2fb5a068270 Mon Sep 17 00:00:00 2001
From: Bogdan Nikolic <bogdan.nikolic87@gmail.com>
Date: Thu, 28 Nov 2024 12:51:08 +0100
Subject: [PATCH] Photos picker: Media library: Update Google photos icon
 (#96870)

---
 client/my-sites/media-library/data-source.jsx |  3 +-
 .../media-library/google-photos-icon.jsx      | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 client/my-sites/media-library/google-photos-icon.jsx

diff --git a/client/my-sites/media-library/data-source.jsx b/client/my-sites/media-library/data-source.jsx
index 6418258bbe14b..3aeda57489863 100644
--- a/client/my-sites/media-library/data-source.jsx
+++ b/client/my-sites/media-library/data-source.jsx
@@ -10,6 +10,7 @@ import PopoverMenu from 'calypso/components/popover-menu';
 import PopoverMenuItem from 'calypso/components/popover-menu/item';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import GooglePhotosIcon from './google-photos-icon';
 import OpenverseIcon from './openverse-icon';
 import PexelsIcon from './pexels-icon';
 
@@ -54,7 +55,7 @@ export class MediaLibraryDataSource extends Component {
 			sources.push( {
 				value: 'google_photos',
 				label: translate( 'Google Photos' ),
-				icon: <Gridicon icon="image-multiple" size={ 24 } />,
+				icon: <GooglePhotosIcon className="gridicon" />,
 			} );
 		}
 		if ( config.isEnabled( 'external-media/free-photo-library' ) && includeExternalMedia ) {
diff --git a/client/my-sites/media-library/google-photos-icon.jsx b/client/my-sites/media-library/google-photos-icon.jsx
new file mode 100644
index 0000000000000..ecdfc218b8ec9
--- /dev/null
+++ b/client/my-sites/media-library/google-photos-icon.jsx
@@ -0,0 +1,36 @@
+const GooglePhotosIcon = ( props ) => (
+	<svg
+		style={ {
+			padding: '2px',
+			width: '20px',
+			height: '18px',
+		} }
+		width="46"
+		height="46"
+		viewBox="0 0 46 46"
+		xmlns="http://www.w3.org/2000/svg"
+		{ ...props }
+	>
+		<g clip-path="url(#clip0_3_5000)">
+			<path
+				opacity="0.4"
+				d="M11.5 10.4553C17.8511 10.4553 23 15.6034 23 21.9553V23.0001H1.04475C0.467797 23.0001 0 22.5323 0 21.9553C0 15.6034 5.14888 10.4553 11.5 10.4553Z"
+			/>
+			<path d="M35.5447 11.5C35.5447 17.8511 30.3966 23 24.0447 23H23V1.04475C23 0.467797 23.4678 0 24.0447 0C30.3966 0 35.5447 5.14888 35.5447 11.5Z" />
+			<path
+				opacity="0.8"
+				d="M34.5 35.5447C28.1489 35.5447 23 30.3966 23 24.0447V23H44.9553C45.5322 23 46 23.4678 46 24.0447C46 30.3966 40.8511 35.5447 34.5 35.5447Z"
+			/>
+			<path
+				opacity="0.6"
+				d="M10.4553 34.5C10.4553 28.1489 15.6034 23 21.9553 23H23V44.9553C23 45.5322 22.5322 46 21.9553 46C15.6034 46 10.4553 40.8511 10.4553 34.5Z"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_3_5000">
+				<rect width="46" height="46" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+export default GooglePhotosIcon;