feat: new icons for replay settings

frontend/src/lib/lemon-ui/icons/categories.ts

@@ -55,6 +55,9 @@ export const OBJECTS = {
         'IconPlug',
         'IconPuzzle',
         'IconActivity',
+        'IconRabbit',
+        'IconTortoise',
+        'IconStethoscope',
     ],
     People: [
         'IconPeople',
@@ -72,7 +75,15 @@ export const OBJECTS = {
 }
 
 export const TECHNOLOGY = {
-    Messaging: ['IconSend', 'IconHeadset', 'IconMessage', 'IconNotification', 'IconChat', 'IconThoughtBubble'],
+    Messaging: [
+        'IconSend',
+        'IconHeadset',
+        'IconMessage',
+        'IconNotification',
+        'IconChat',
+        'IconThoughtBubble',
+        'IconChatHelp',
+    ],
     Hardware: [
         'IconLaptop',
         'IconPhone',
@@ -104,6 +115,7 @@ export const TECHNOLOGY = {
         'IconSidePanel',
         'IconMouseScrollDown',
         'IconDrag',
+        'IconPointer',
     ],
 }
 

frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx

@@ -1,4 +1,15 @@
-import { IconClock, IconCollapse45, IconExpand45, IconPause, IconPlay, IconSearch } from '@posthog/icons'
+import {
+    IconClock,
+    IconCollapse45,
+    IconExpand45,
+    IconHourglass,
+    IconMouse,
+    IconPause,
+    IconPlay,
+    IconRabbit,
+    IconSearch,
+    IconTortoise,
+} from '@posthog/icons'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys'
@@ -30,6 +41,13 @@ function SetPlaybackSpeed(): JSX.Element {
     const { setSpeed } = useActions(sessionRecordingPlayerLogic)
     return (
         <SettingsMenu
+            icon={
+                speed === 0.5 ? (
+                    <IconTortoise className="text-2xl" style={{ stroke: 'currentColor', strokeWidth: '0.5' }} />
+                ) : (
+                    <IconRabbit className="text-2xl" style={{ stroke: 'currentColor', strokeWidth: '0.5' }} />
+                )
+            }
             data-attr="session-recording-speed-select"
             items={PLAYBACK_SPEEDS.map((speedToggle) => ({
                 label: (
@@ -87,6 +105,7 @@ function ShowMouseTail(): JSX.Element {
             active={showMouseTail}
             data-attr="show-mouse-tail"
             onClick={() => setShowMouseTail(!showMouseTail)}
+            icon={<IconMouse className="text-lg" />}
         />
     )
 }
@@ -102,6 +121,7 @@ function SkipInactivity(): JSX.Element {
             active={skipInactivitySetting}
             data-attr="skip-inactivity"
             onClick={() => setSkipInactivitySetting(!skipInactivitySetting)}
+            icon={<IconHourglass />}
         />
     )
 }

frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx

@@ -1,11 +1,11 @@
 import {
     BaseIcon,
-    IconBug,
     IconCheck,
     IconDashboard,
     IconGear,
     IconInfo,
     IconSearch,
+    IconStethoscope,
     IconTerminal,
 } from '@posthog/icons'
 import { LemonButton, LemonInput, LemonMenuItem, Tooltip } from '@posthog/lemon-ui'
@@ -30,7 +30,7 @@ export const TabToIcon = {
     [FilterableInspectorListItemTypes.EVENTS]: IconUnverifiedEvent,
     [FilterableInspectorListItemTypes.CONSOLE]: IconTerminal,
     [FilterableInspectorListItemTypes.NETWORK]: IconDashboard,
-    [FilterableInspectorListItemTypes.DOCTOR]: IconBug,
+    [FilterableInspectorListItemTypes.DOCTOR]: IconStethoscope,
 }
 
 export function PlayerInspectorControls(): JSX.Element {
@@ -129,7 +129,7 @@ export function PlayerInspectorControls(): JSX.Element {
                     mode !== SessionRecordingPlayerMode.Sharing && (
                         <SettingsToggle
                             title="Doctor events help diagnose the health of a recording, and are used by PostHog support"
-                            icon={<IconBug />}
+                            icon={<IconStethoscope />}
                             label="Doctor"
                             active={!!miniFiltersByKey['doctor']?.enabled}
                             onClick={() => setMiniFilter('doctor', !miniFiltersByKey['doctor']?.enabled)}

package.json

@@ -78,7 +78,7 @@
         "@microsoft/fetch-event-source": "^2.0.1",
         "@monaco-editor/react": "4.6.0",
         "@posthog/hogvm": "^1.0.66",
-        "@posthog/icons": "0.9.2",
+        "@posthog/icons": "0.9.3",
         "@posthog/plugin-scaffold": "^1.4.4",
         "@react-hook/size": "^2.1.2",
         "@rrweb/types": "2.0.0-alpha.13",