diff --git a/examples/markers-and-infowindows/assets/info-circle.svg b/examples/markers-and-infowindows/assets/info-circle.svg
new file mode 100644
index 00000000..8728591d
--- /dev/null
+++ b/examples/markers-and-infowindows/assets/info-circle.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z" fill="#1C274C"/>
+<path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="#1C274C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" fill="#1C274C"/>
+</svg>
diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx
index 01c4192e..5b426b67 100644
--- a/examples/markers-and-infowindows/src/app.tsx
+++ b/examples/markers-and-infowindows/src/app.tsx
@@ -43,6 +43,19 @@ const App = () => {
             glyphColor={'#0f677a'}></Pin>
         </AdvancedMarker>
 
+        {/* advanced marker with html pin glyph */}
+        <AdvancedMarker
+          position={{lat: 15, lng: 20}}
+          title={'AdvancedMarker with customized pin.'}>
+          <Pin background={'#22ccff'} borderColor={'#1e89a1'} scale={1.4}>
+            {/* child gets rendered as 'glyph' element of pin */}
+            <img
+              src="../assets/info-circle.svg"
+              style={{height: '24px', width: '24px'}}
+            />
+          </Pin>
+        </AdvancedMarker>
+
         {/* advanced marker with html-content */}
         <AdvancedMarker
           position={{lat: 30, lng: 10}}
diff --git a/src/components/pin.tsx b/src/components/pin.tsx
index cd510d95..a553dbe9 100644
--- a/src/components/pin.tsx
+++ b/src/components/pin.tsx
@@ -1,5 +1,13 @@
-import {useContext, useEffect} from 'react';
+import {
+  Children,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo
+} from 'react';
 import {AdvancedMarkerContext} from './advanced-marker';
+import {createPortal} from 'react-dom';
+import {logErrorOnce} from '../libraries/errors';
 
 /**
  * Props for the Pin component
@@ -9,8 +17,9 @@ export type PinProps = google.maps.marker.PinElementOptions;
 /**
  * Component to render a google maps marker Pin View
  */
-export const Pin = (props: PinProps) => {
+export const Pin = (props: PropsWithChildren<PinProps>) => {
   const advancedMarker = useContext(AdvancedMarkerContext)?.marker;
+  const glyphContainer = useMemo(() => document.createElement('div'), []);
 
   // Create Pin View instance
   useEffect(() => {
@@ -24,15 +33,33 @@ export const Pin = (props: PinProps) => {
       return;
     }
 
+    if (props.glyph && props.children) {
+      logErrorOnce(
+        'The <Pin> component only uses children to render the glyph if both the glyph property and children are present.'
+      );
+    }
+
+    if (Children.count(props.children) > 1) {
+      logErrorOnce(
+        'Passing multiple children to the <Pin> component might lead to unexpected results.'
+      );
+    }
+
     const pinViewOptions: google.maps.marker.PinElementOptions = {
       ...props
     };
 
     const pinElement = new google.maps.marker.PinElement(pinViewOptions);
 
+    // Set glyph to glyph container if children are present (rendered via portal).
+    // If both props.glyph and props.children are present, props.children takes priority.
+    if (props.children) {
+      pinElement.glyph = glyphContainer;
+    }
+
     // Set content of Advanced Marker View to the Pin View element
     advancedMarker.content = pinElement.element;
   }, [advancedMarker, props]);
 
-  return null;
+  return createPortal(props.children, glyphContainer);
 };