chore(3000): Updated more icons (#18762)

* updated icon package

* updated side panel, info icons

* added pin filled icon

* updated icons, some text, keywords

* updated star

* swapped backwards label

* latest icon package

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: Michael Matloka <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/dashboard/dashboards/DashboardsTable.tsx

@@ -13,7 +13,8 @@ import { DashboardPrivilegeLevel } from 'lib/constants'
 import { Link } from 'lib/lemon-ui/Link'
 import { urls } from 'scenes/urls'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { IconCottage, IconLock, IconPinOutline, IconPinFilled, IconShare } from 'lib/lemon-ui/icons'
+import { IconCottage, IconLock } from 'lib/lemon-ui/icons'
+import { IconPin, IconPinFilled, IconShare } from '@posthog/icons'
 import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { More } from 'lib/lemon-ui/LemonButton/More'
@@ -70,7 +71,7 @@ export function DashboardsTable({
                                 : () => pinDashboard(id, DashboardEventSource.DashboardsList)
                         }
                         tooltip={pinned ? 'Unpin dashboard' : 'Pin dashboard'}
-                        icon={pinned ? <IconPinFilled /> : <IconPinOutline />}
+                        icon={pinned ? <IconPinFilled /> : <IconPin />}
                     />
                 )
             },
@@ -215,28 +216,31 @@ export function DashboardsTable({
                 />
                 <div className="flex items-center gap-4 flex-wrap">
                     <div className="flex items-center gap-2">
-                        <LemonButton
-                            active={filters.pinned}
-                            type="secondary"
-                            status="stealth"
-                            size="small"
-                            onClick={() => setFilters({ pinned: !filters.pinned })}
-                            icon={<IconPinOutline />}
-                        >
-                            Pinned
-                        </LemonButton>
-                    </div>
-                    <div className="flex items-center gap-2">
-                        <LemonButton
-                            active={filters.shared}
-                            type="secondary"
-                            status="stealth"
-                            size="small"
-                            onClick={() => setFilters({ shared: !filters.shared })}
-                            icon={<IconShare />}
-                        >
-                            Shared
-                        </LemonButton>
+                        <span>Filter to:</span>
+                        <div className="flex items-center gap-2">
+                            <LemonButton
+                                active={filters.pinned}
+                                type="secondary"
+                                status="stealth"
+                                size="small"
+                                onClick={() => setFilters({ pinned: !filters.pinned })}
+                                icon={<IconPin />}
+                            >
+                                Pinned
+                            </LemonButton>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <LemonButton
+                                active={filters.shared}
+                                type="secondary"
+                                status="stealth"
+                                size="small"
+                                onClick={() => setFilters({ shared: !filters.shared })}
+                                icon={<IconShare />}
+                            >
+                                Shared
+                            </LemonButton>
+                        </div>
                     </div>
                     <div className="flex items-center gap-2">
                         <span>Created by:</span>

frontend/src/scenes/notebooks/Notebook/SlashCommands.tsx

@@ -1,14 +1,14 @@
 import { Extension } from '@tiptap/core'
 import Suggestion from '@tiptap/suggestion'
-
 import { ReactRenderer } from '@tiptap/react'
 import { LemonButton, LemonDivider, lemonToast } from '@posthog/lemon-ui'
-import { IconBold, IconCohort, IconItalic } from 'lib/lemon-ui/icons'
+import { IconBold, IconItalic } from 'lib/lemon-ui/icons'
 import {
     IconCursor,
     IconFunnels,
     IconHogQL,
     IconLifecycle,
+    IconPeople,
     IconRetention,
     IconRewindPlay,
     IconStickiness,
@@ -97,7 +97,7 @@ const TEXT_CONTROLS: SlashCommandsItem[] = [
 const SLASH_COMMANDS: SlashCommandsItem[] = [
     {
         title: 'Trend',
-        search: 'trend insight',
+        search: 'graph trend insight',
         icon: <IconTrends color="currentColor" />,
         command: (chain, pos) =>
             chain.insertContentAt(
@@ -176,7 +176,7 @@ const SLASH_COMMANDS: SlashCommandsItem[] = [
     },
     {
         title: 'Paths',
-        search: 'paths insight',
+        search: 'user paths insight',
         icon: <IconUserPaths color="currentColor" />,
         command: (chain, pos) =>
             chain.insertContentAt(
@@ -282,9 +282,9 @@ order by count() desc
             ),
     },
     {
-        title: 'Persons',
-        search: 'people users',
-        icon: <IconCohort />,
+        title: 'People',
+        search: 'persons users',
+        icon: <IconPeople />,
         command: (chain, pos) =>
             chain.insertContentAt(
                 pos,
@@ -299,14 +299,14 @@ order by count() desc
             ),
     },
     {
-        title: 'Session Replays',
-        search: 'recordings video',
+        title: 'Session recordings',
+        search: 'video replay',
         icon: <IconRewindPlay />,
         command: (chain, pos) => chain.insertContentAt(pos, { type: NotebookNodeType.RecordingPlaylist, attrs: {} }),
     },
     {
         title: 'Image',
-        search: 'picture',
+        search: 'picture gif',
         icon: <IconUpload />,
         command: async (chain, pos) => {
             // Trigger upload followed by insert

frontend/src/scenes/notebooks/NotebookScene.tsx

@@ -7,7 +7,7 @@ import { NotebookSceneLogicProps, notebookSceneLogic } from './notebookSceneLogi
 import { LemonButton, LemonTag } from '@posthog/lemon-ui'
 import { NotebookExpandButton, NotebookSyncInfo } from './Notebook/NotebookMeta'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
-import { IconArrowRight, IconHelpOutline } from 'lib/lemon-ui/icons'
+import { IconOpenSidebar, IconInfo } from '@posthog/icons'
 import { LOCAL_NOTEBOOK_TEMPLATES } from './NotebookTemplates/notebookTemplates'
 import './NotebookScene.scss'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -48,7 +48,7 @@ export function NotebookScene(): JSX.Element {
         return (
             <div className="flex flex-col justify-center items-center h-full text-muted-alt mx-10 flex-1">
                 <h2 className="text-muted-alt">
-                    This Notebook is open in the side panel <IconArrowRight />
+                    This Notebook is open in the side panel <IconOpenSidebar />
                 </h2>
 
                 <p>
@@ -84,7 +84,7 @@ export function NotebookScene(): JSX.Element {
 
                     <LemonButton
                         type="secondary"
-                        icon={<IconHelpOutline />}
+                        icon={<IconInfo />}
                         size={buttonSize}
                         onClick={() => {
                             if (selectedNotebook === LOCAL_NOTEBOOK_TEMPLATES[0].short_id && visibility === 'visible') {
@@ -109,11 +109,11 @@ export function NotebookScene(): JSX.Element {
                         tooltip={
                             <>
                                 Opens the notebook in a side panel, that can be accessed from anywhere in the PostHog
-                                app. This is great for dragging and dropping elements like Insights, Recordings or even
-                                Feature Flags into your active Notebook.
+                                app. This is great for dragging and dropping elements like insights, recordings or even
+                                feature flags into your active notebook.
                             </>
                         }
-                        sideIcon={<IconArrowRight />}
+                        sideIcon={<IconOpenSidebar />}
                     >
                         Open in side panel
                     </LemonButton>

frontend/src/scenes/saved-insights/SavedInsights.tsx

@@ -15,6 +15,8 @@ import {
     IconHogQL,
     IconLifecycle,
     IconRetention,
+    IconStar,
+    IconStarFilled,
     IconStickiness,
     IconTrends,
     IconUserPaths,
@@ -29,8 +31,6 @@ import {
     IconPerson,
     IconPlusMini,
     IconSelectEvents,
-    IconStarFilled,
-    IconStarOutline,
     IconTableChart,
 } from 'lib/lemon-ui/icons'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -429,10 +429,10 @@ export function SavedInsights(): JSX.Element {
                                     insight.favorited ? (
                                         <IconStarFilled className="text-warning" />
                                     ) : (
-                                        <IconStarOutline className="text-muted" />
+                                        <IconStar className="text-muted" />
                                     )
                                 }
-                                tooltip={`${insight.favorited ? 'Add to' : 'Remove from'} favorite insights`}
+                                tooltip={`${insight.favorited ? 'Remove from' : 'Add to'} favorite insights`}
                             />
                         </span>
                         {hasDashboardCollaboration && insight.description && (