diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
index a333d76178e6a..e4446100ae281 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
@@ -4,7 +4,6 @@ import { Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
-import { PropertyIcon } from 'lib/components/PropertyIcon'
 import { TZLabel } from 'lib/components/TZLabel'
 import { dayjs } from 'lib/dayjs'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
@@ -17,6 +16,7 @@ import { asDisplay } from 'scenes/persons/person-utils'
 import { PersonDisplay } from 'scenes/persons/PersonDisplay'
 import { IconWindow } from 'scenes/session-recordings/player/icons'
 import { playerMetaLogic } from 'scenes/session-recordings/player/playerMetaLogic'
+import { gatherIconProperties, PropertyIcons } from 'scenes/session-recordings/playlist/SessionRecordingPreview'
 import { urls } from 'scenes/urls'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
@@ -30,49 +30,55 @@ function SessionPropertyMeta(props: {
     iconProperties: Record<string, any>
     predicate: (x: string) => boolean
 }): JSX.Element {
+    const gatheredProperties = gatherIconProperties(props.iconProperties)
+
     return (
-        <div className="flex flex-row flex-nowrap shrink-0 gap-2 text-muted-alt">
-            <span className="flex items-center gap-1 whitespace-nowrap">
-                <PropertyIcon
-                    noTooltip={!props.fullScreen}
-                    property="$browser"
-                    value={props.iconProperties['$browser']}
-                />
-                {!props.fullScreen ? props.iconProperties['$browser'] : null}
-            </span>
-            <span className="flex items-center gap-1 whitespace-nowrap">
-                <PropertyIcon
-                    noTooltip={!props.fullScreen}
-                    property="$device_type"
-                    value={props.iconProperties['$device_type'] || props.iconProperties['$initial_device_type']}
-                />
-                {!props.fullScreen
-                    ? props.iconProperties['$device_type'] || props.iconProperties['$initial_device_type']
-                    : null}
-            </span>
-            <span className="flex items-center gap-1 whitespace-nowrap">
-                <PropertyIcon noTooltip={!props.fullScreen} property="$os" value={props.iconProperties['$os']} />
-                {!props.fullScreen ? props.iconProperties['$os'] : null}
-            </span>
-            {props.iconProperties['$geoip_country_code'] && (
-                <span className="flex items-center gap-1 whitespace-nowrap">
-                    <PropertyIcon
-                        noTooltip={!props.fullScreen}
-                        property="$geoip_country_code"
-                        value={props.iconProperties['$geoip_country_code']}
+        <PropertyIcons
+            recordingProperties={gatheredProperties}
+            iconClassnames={'text-muted-alt'}
+            showTooltip={false}
+            showLabel={(key) => (props.fullScreen ? key === '$geoip_country_code' : key !== '$geoip_country_code')}
+        />
+    )
+}
+
+function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element | null {
+    if (!lastUrl) {
+        return null
+    }
+
+    // re-using the rrweb web schema means that this might be a mobile replay screen name
+    let isValidUrl = false
+    try {
+        new URL(lastUrl || '')
+        isValidUrl = true
+    } catch (_e) {
+        // no valid url
+    }
+
+    return (
+        <span className="flex items-center gap-2 truncate">
+            <span>·</span>
+            <span className="flex items-center gap-1 truncate">
+                {isValidUrl ? (
+                    <Tooltip title="Click to open url">
+                        <Link to={lastUrl} target="_blank" className="truncate">
+                            {lastUrl}
+                        </Link>
+                    </Tooltip>
+                ) : (
+                    lastUrl
+                )}
+                <span className="flex items-center">
+                    <CopyToClipboardInline
+                        description={lastUrl}
+                        explicitValue={lastUrl}
+                        iconStyle={{ color: 'var(--muted-alt)' }}
+                        selectable={true}
                     />
-                    {
-                        props.fullScreen &&
-                            [
-                                props.iconProperties['$geoip_city_name'],
-                                props.iconProperties['$geoip_subdivision_1_code'],
-                            ]
-                                .filter(props.predicate)
-                                .join(', ') /* [city, state] */
-                    }
                 </span>
-            )}
-        </div>
+            </span>
+        </span>
     )
 }
 
@@ -224,25 +230,7 @@ export function PlayerMeta(): JSX.Element {
                                 <IconWindow value={currentWindowIndex + 1} className="text-muted-alt" />
                             </Tooltip>
 
-                            {lastUrl && (
-                                <span className="flex items-center gap-2 truncate">
-                                    <span>·</span>
-                                    <span className="flex items-center gap-1 truncate">
-                                        <Tooltip title="Click to open url">
-                                            <Link to={lastUrl} target="_blank" className="truncate">
-                                                {lastUrl}
-                                            </Link>
-                                        </Tooltip>
-                                        <span className="flex items-center">
-                                            <CopyToClipboardInline
-                                                description="current url"
-                                                explicitValue={lastUrl}
-                                                iconStyle={{ color: 'var(--muted-alt)' }}
-                                            />
-                                        </span>
-                                    </span>
-                                </span>
-                            )}
+                            <URLOrScreen lastUrl={lastUrl} />
                             {lastPageviewEvent?.properties?.['$screen_name'] && (
                                 <span className="flex items-center gap-2 truncate">
                                     <span>·</span>
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
index 29729ea29d6bd..7c74657f483ba 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingPreview.tsx
@@ -58,26 +58,28 @@ function RecordingDuration({
 interface GatheredProperty {
     property: string
     value: string | undefined
+    label: string | undefined
     tooltipValue: string
 }
 
 const browserIconPropertyKeys = ['$geoip_country_code', '$browser', '$device_type', '$os']
 const mobileIconPropertyKeys = ['$geoip_country_code', '$device_type', '$os_name']
 
-function gatherIconProperties(
+export function gatherIconProperties(
     recordingProperties: Record<string, any> | undefined,
-    recording: SessionRecordingType
+    recording?: SessionRecordingType
 ): GatheredProperty[] {
     const iconProperties =
         recordingProperties && Object.keys(recordingProperties).length > 0
             ? recordingProperties
-            : recording.person?.properties || {}
+            : recording?.person?.properties || {}
 
     const deviceType = iconProperties['$device_type'] || iconProperties['$initial_device_type']
     const iconPropertyKeys = deviceType === 'Mobile' ? mobileIconPropertyKeys : browserIconPropertyKeys
 
-    return iconPropertyKeys.map((property) => {
+    return iconPropertyKeys.flatMap((property) => {
         let value = iconProperties?.[property]
+        let label = value
         if (property === '$device_type') {
             value = iconProperties?.['$device_type'] || iconProperties?.['$initial_device_type']
         }
@@ -85,16 +87,21 @@ function gatherIconProperties(
         let tooltipValue = value
         if (property === '$geoip_country_code') {
             tooltipValue = `${iconProperties?.['$geoip_country_name']} (${value})`
+            label = [iconProperties?.['$geoip_city_name'], iconProperties?.['$geoip_subdivision_1_code']]
+                .filter(Boolean)
+                .join(', ')
         }
-        return { property, value, tooltipValue }
+        return { property, value, tooltipValue, label }
     })
 }
 
 export interface PropertyIconsProps {
     recordingProperties: GatheredProperty[]
-    loading: boolean
+    loading?: boolean
     onPropertyClick?: (property: string, value?: string) => void
-    iconClassnames: string
+    iconClassnames?: string
+    showTooltip?: boolean
+    showLabel?: (key: string) => boolean
 }
 
 export function PropertyIcons({
@@ -102,35 +109,41 @@ export function PropertyIcons({
     loading,
     onPropertyClick,
     iconClassnames,
+    showTooltip = true,
+    showLabel = undefined,
 }: PropertyIconsProps): JSX.Element {
     return (
-        <div className="flex flex-row flex-nowrap shrink-0 gap-1 h-6 ph-no-capture">
-            {!loading ? (
-                recordingProperties.map(({ property, value, tooltipValue }) => {
+        <div className="flex flex-row flex-nowrap shrink-0 gap-1 h-6 ph-no-capture items-center">
+            {loading ? (
+                <LemonSkeleton className="w-18 h-4 my-1" />
+            ) : (
+                recordingProperties.map(({ property, value, tooltipValue, label }) => {
                     return (
-                        <PropertyIcon
-                            key={property}
-                            onClick={(e) => {
-                                if (e.altKey) {
-                                    e.stopPropagation()
-                                    onPropertyClick?.(property, value)
-                                }
-                            }}
-                            className={iconClassnames}
-                            property={property}
-                            value={value}
-                            tooltipTitle={() => (
-                                <div className="text-center">
-                                    <code>Alt + Click</code> to filter for
-                                    <br />
-                                    <span className="font-medium">{tooltipValue ?? 'N/A'}</span>
-                                </div>
-                            )}
-                        />
+                        <>
+                            <PropertyIcon
+                                key={property}
+                                onClick={(e) => {
+                                    if (e.altKey) {
+                                        e.stopPropagation()
+                                        onPropertyClick?.(property, value)
+                                    }
+                                }}
+                                className={iconClassnames}
+                                property={property}
+                                value={value}
+                                noTooltip={!showTooltip}
+                                tooltipTitle={() => (
+                                    <div className="text-center">
+                                        <code>Alt + Click</code> to filter for
+                                        <br />
+                                        <span className="font-medium">{tooltipValue ?? 'N/A'}</span>
+                                    </div>
+                                )}
+                            />
+                            {showLabel?.(property) && <span className="text-xs text-muted-alt">{label || value}</span>}
+                        </>
                     )
                 })
-            ) : (
-                <LemonSkeleton className="w-18 h-4 my-1" />
             )}
         </div>
     )