Streamlined icons and improved echarts trends (#2920)

* Various improvements Cards, OmniSearch and Cards Listing * Improved cards listing page * Various improvements in product analytics * Charts UI improvements * ui crash * Chart improvements and layout toggling * Various improvements * Tooltips * Improved icons in cards listing page * Update WidgetFormNew.tsx * Sankey improvements * Icon and text updates Text alignment and color changes in x-ray Icon Mapping with appropriate names and shapes * Colors and Trend Chart Interaction updates * ui --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
2025-01-07 04:34:20 -05:00 · 2025-01-07 04:34:20 -05:00 · c229125055
commit c229125055
parent 3dd50df715
37 changed files with 227 additions and 171 deletions
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@ -1,6 +1,7 @@
 import { formatTimeOrDate } from "App/date";

-export const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
+export const colors = ['#394EFF', '#3EAAAF', '#9276da', '#ceba64', "#bc6f9d", '#966fbc', '#64ce86', '#e06da3', '#6dabe0'];
+//export const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'];
 // const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
 // const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
 // const compareColors = ['#192EDB', '#6272FF', '#808DFF', '#B3BBFF', '#C9CFFF'];
@ -204,11 +205,19 @@ export function createSeries(
      datasetId,
      encode: { x: 'idx', y: fullName },
      lineStyle: dashed ? { type: 'dashed' } : undefined,
-      showSymbol: true,
-      symbolSize: 9,
-      symbol: 'circle',
+      showSymbol: false,
      // custom flag to hide prev data from legend
      _hideInLegend: hideFromLegend,
+      itemStyle: { opacity: 1 },
+      emphasis: {
+        focus: 'series', 
+        itemStyle: { opacity: 1 }, 
+        lineStyle: { opacity: 1 }, 
+      },
+      blur: {
+        itemStyle: { opacity: 0.2 },
+        lineStyle: { opacity: 0.2 },
+      },
    };
  });
 }
--- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
@ -3,7 +3,7 @@ import { FolderOutlined } from '@ant-design/icons';
 import { Segmented, Button } from 'antd';
 import {
  LineChart,
-  AlignStartVertical,
+  Filter,
  ArrowUpDown,
  WifiOff,
  Turtle,
@ -50,7 +50,7 @@ export const tabItems: Record<string, TabItem[]> = {
      description: 'Track session trends over time.',
    },
    {
-      icon: <AlignStartVertical width={16} />,
+      icon: <Filter width={16} />,
      title: 'Funnels',
      type: FUNNEL,
      description: 'Visualize user progression through critical steps.',
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@ -23,7 +23,7 @@ interface Props extends RouteComponentProps {
 function MetricTypeIcon({ type }: any) {
  return (
    <Tooltip title={<div className="capitalize">{TYPE_NAMES[type]}</div>}>
-      <Avatar src={<Icon name={TYPE_ICONS[type]} size="16" color="tealx" />}  size="default" className="bg-tealx-lightest mr-2 cursor-default avatar-card-list-item" />
+      <Avatar src={<Icon name={TYPE_ICONS[type]} size="16" color="tealx" strokeColor="tealx" />}  size="default" className="bg-tealx-lightest text-tealx mr-2 cursor-default avatar-card-list-item" />
    </Tooltip>
  );
 }
--- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
@ -100,7 +100,7 @@ const ListView: React.FC<Props> = (props: Props) => {
              onClick={toggleAll}
            />
          )}
-          <span>Title</span>
+            <span>Title</span>
        </div>
      ),
      dataIndex: 'name',
@ -154,52 +154,8 @@ const ListView: React.FC<Props> = (props: Props) => {
        />
      )
    },
-    // {
-    //   title: 'Visibility',
-    //   dataIndex: 'visibility',
-    //   key: 'visibility',
-    //   width: '10%',
-    //   render: (text: string, metric: Metric) => (
-    //     <MetricListItem
-    //       key={metric.metricId}
-    //       metric={metric}
-    //       siteId={siteId}
-    //       renderColumn="visibility"
-    //     />
-    //   )
-    // },
    {
-      title: (
-        <div className={'flex items-center justify-start gap-2'}>
-          <div>Visibility</div>
-          <Tooltip
-            title="Toggle to view your or team's cards."
-            placement="topRight"
-          >
-            <Switch
-              checked={!showOwn}
-              onChange={() => toggleOwn()}
-              checkedChildren={'Team'}
-              unCheckedChildren={'Private'}
-              className={classNames( '!bg-tealx')}
-            />
-          </Tooltip>
-        </div>
-      ),
-      width: '16.67%',
-      dataIndex: 'isPublic',
-      render: (isPublic: boolean) => (
-        <Tag
-          icon={isPublic ? <TeamOutlined /> : <LockOutlined />}
-          bordered={false}
-          className="rounded-lg"
-        >
-          {isPublic ? 'Team' : 'Private'}
-        </Tag>
-      ),
-    },
-    {
-      title: 'Options',
+      title: '',
      key: 'options',
      className: 'text-right',
      width: '5%',
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@ -1,6 +1,5 @@
 import React from 'react';
-import { Card, Space, Button, Alert, Form } from 'antd';
-
+import { Card, Space, Button, Alert, Form, Select } from 'antd';
 import { useStore } from 'App/mstore';
 import { eventKeys } from 'Types/filter/newFilter';
 import {
@ -10,7 +9,7 @@ import {
  INSIGHTS,
  RETENTION,
  TABLE,
-  USER_PATH
+  USER_PATH,
 } from 'App/constants/card';
 import FilterSeries from 'Components/Dashboard/components/FilterSeries/FilterSeries';
 import { issueCategories } from 'App/constants/filterOptions';
@ -18,7 +17,6 @@ import { PlusIcon } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import FilterItem from 'Shared/Filters/FilterItem';
 import { FilterKey } from 'Types/filter/filterType';
-import Select from 'Shared/Select';

 function WidgetFormNew() {
  const { metricStore } = useStore();
@ -27,9 +25,11 @@ function WidgetFormNew() {
  const isHeatMap = metric.metricType === HEATMAP;
  const isPathAnalysis = metric.metricType === USER_PATH;
  const excludeFilterKeys = isHeatMap || isPathAnalysis ? eventKeys : [];
-  const isPredefined = metric.metricType === ERRORS
+  const isPredefined = metric.metricType === ERRORS;

-  return isPredefined ? <PredefinedMessage /> : (
+  return isPredefined ? (
+    <PredefinedMessage />
+  ) : (
    <Space direction="vertical" className="w-full">
      <AdditionalFilters />
      <FilterSection metric={metric} excludeFilterKeys={excludeFilterKeys} />
@ -40,8 +40,8 @@ function WidgetFormNew() {
 export default observer(WidgetFormNew);

 const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
-  const defaultClosed = React.useRef(metric.exists())
-  const defaultSeries = React.useRef(metric.series.map(s => s.name))
+  const defaultClosed = React.useRef(metric.exists());
+  const defaultSeries = React.useRef(metric.series.map((s) => s.name));
  const isTable = metric.metricType === TABLE;
  const isHeatMap = metric.metricType === HEATMAP;
  const isFunnel = metric.metricType === FUNNEL;
@ -50,7 +50,13 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
  const isRetention = metric.metricType === RETENTION;
  const canAddSeries = metric.series.length < 3;

-  const isSingleSeries = isTable || isFunnel || isHeatMap || isInsights || isRetention || isPathAnalysis;
+  const isSingleSeries =
+    isTable ||
+    isFunnel ||
+    isHeatMap ||
+    isInsights ||
+    isRetention ||
+    isPathAnalysis;
  return (
    <>
      {metric.series.length > 0 &&
@ -76,7 +82,11 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
                series={series}
                onRemoveSeries={() => metric.removeSeries(index)}
                canDelete={metric.series.length > 1}
-                defaultClosed={metric.hasChanged ? defaultSeries.current.includes(series.name) : defaultClosed.current}
+                defaultClosed={
+                  metric.hasChanged
+                    ? defaultSeries.current.includes(series.name)
+                    : defaultClosed.current
+                }
                emptyMessage={
                  isTable
                    ? 'Filter data using any event or attribute. Use Add Step button below to do so.'
@ -88,66 +98,91 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
          ))}

      {!isSingleSeries && canAddSeries && (
-       <Button
-       onClick={() => {
-         if (!canAddSeries) return;
-         metric.addSeries();
-       }}
-       size='small'
-       type='text'
-       className="w-full cursor-pointer flex items-center py-2 justify-center gap-2 font-medium hover:text-teal btn-add-series"
-     >
-         <PlusIcon size={16} />
-         Add Series
-     </Button>
+        <Button
+          onClick={() => {
+            if (!canAddSeries) return;
+            metric.addSeries();
+          }}
+          size="small"
+          type="text"
+          className="w-full cursor-pointer flex items-center py-2 justify-center gap-2 font-medium hover:text-teal btn-add-series"
+        >
+          <PlusIcon size={16} />
+          Add Series
+        </Button>
      )}
    </>
  );
 });

-
 const PathAnalysisFilter = observer(({ metric, writeOption }: any) => {
  const metricValueOptions = [
    { value: 'location', label: 'Pages' },
    { value: 'click', label: 'Clicks' },
    { value: 'input', label: 'Input' },
-    { value: 'custom', label: 'Custom' }
+    { value: 'custom', label: 'Custom' },
  ];
  return (
-    <Card styles={{ body: { padding: '20px 20px' } }}>
+    <Card styles={{ body: { padding: '20px 20px' } }} className="rounded-lg">
      <Form.Item>
-        <Space>
-          <Select
-            name="startType"
-            options={[
-              { value: 'start', label: 'With Start Point' },
-              { value: 'end', label: 'With End Point' }
-            ]}
-            defaultValue={metric.startType}
-            onChange={writeOption}
-            placeholder="All Issues"
-          />
-          <span className="mx-3">showing</span>
-          <Select
-            name="metricValue"
-            options={metricValueOptions}
-            value={metric.metricValue}
-            isMulti={true}
-            onChange={writeOption}
-            placeholder="All Issues"
-          />
-        </Space>
-      </Form.Item>
-      <Form.Item label={metric.startType === 'start' ? 'Start Point' : 'End Point'} className="mb-0">
-        <FilterItem
-          hideDelete
-          filter={metric.startPoint}
-          allowedFilterKeys={[FilterKey.LOCATION, FilterKey.CLICK, FilterKey.INPUT, FilterKey.CUSTOM]}
-          onUpdate={val => metric.updateStartPoint(val)}
-          onRemoveFilter={() => {
-          }}
-        />
+        <div className="flex flex-wrap gap-2 items-center justify-start">
+          <span className="font-medium">User journeys with: </span>
+
+          <div className="flex sm:flex-wrap lg:flex-nowrap gap-2 items-start">
+            <Select
+              className="w-36 rounded-xl"
+              name="startType"
+              options={[
+                { value: 'start', label: 'Start Point' },
+                { value: 'end', label: 'End Point' },
+              ]}
+              defaultValue={metric.startType || 'start'}
+              onChange={(value) => writeOption({ name: 'startType', value })}
+              placeholder="Select Start Type"
+              size="small"
+            />
+
+            <span className="text-neutral-400 mt-.5">showing</span>
+
+            <Select
+              mode="multiple"
+              className="min-w-36 rounded-xl"
+              allowClear
+              name="metricValue"
+              options={metricValueOptions}
+              value={metric.metricValue || []}
+              onChange={(value) => writeOption({ name: 'metricValue', value })}
+              placeholder="Select Metrics"
+              size="small"
+            />
+          </div>
+        </div>
      </Form.Item>
+      <div className="flex items-center">
+        <Form.Item
+          label={
+            metric.startType === 'start'
+              ? 'Specify Start Point'
+              : 'Specify End Point'
+          }
+          className="m0-0 font-medium p-0 h-fit"
+        >
+          <span className="font-normal">
+            <FilterItem
+              hideDelete
+              filter={metric.startPoint}
+              allowedFilterKeys={[
+                FilterKey.LOCATION,
+                FilterKey.CLICK,
+                FilterKey.INPUT,
+                FilterKey.CUSTOM,
+              ]}
+              onUpdate={(val) => metric.updateStartPoint(val)}
+              onRemoveFilter={() => {}}
+            />
+          </span>
+        </Form.Item>
+      </div>
    </Card>
  );
 });
@ -164,6 +199,7 @@ const InsightsFilter = observer(({ metric, writeOption }: any) => {
            onChange={writeOption}
            isMulti
            placeholder="All Categories"
+            allowClear
          />
        </Space>
      </Form.Item>
@ -183,14 +219,22 @@ const AdditionalFilters = observer(() => {

  return (
    <>
-      {metric.metricType === USER_PATH && <PathAnalysisFilter metric={metric} writeOption={writeOption} />}
-      {metric.metricType === INSIGHTS && <InsightsFilter metric={metric} writeOption={writeOption} />}
+      {metric.metricType === USER_PATH && (
+        <PathAnalysisFilter metric={metric} writeOption={writeOption} />
+      )}
+      {metric.metricType === INSIGHTS && (
+        <InsightsFilter metric={metric} writeOption={writeOption} />
+      )}
    </>
  );
 });

-
 const PredefinedMessage = () => (
-  <Alert message="Drilldown or filtering isn't supported on this legacy card." type="warning" showIcon closable
-         className="border-transparent rounded-lg" />
+  <Alert
+    message="Drilldown or filtering isn't supported on this legacy card."
+    type="warning"
+    showIcon
+    closable
+    className="border-transparent rounded-lg"
+  />
 );
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@ -315,6 +315,7 @@ function PanelComponent({
                />
                {summaryChecked ? (
                  <Segmented
+                    size='small'
                    value={zoomTab}
                    onChange={(val) => setZoomTab(val)}
                    options={[
--- a/frontend/app/components/Session_/OverviewPanel/components/PerformanceGraph/PerformanceGraph.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/PerformanceGraph/PerformanceGraph.tsx
@ -58,7 +58,7 @@ const PerformanceGraph = React.memo((props: Props) => {
      {disabled ? (
        <div
          className={
-            'flex justify-center'
+            'flex justify-start'
          }
        >
          <div className={'text-xs text-neutral-400 ps-2'}>
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
@ -158,7 +158,7 @@ function GroupedIssue({
              onClick={createEventClickHandler(pointer, type)}
              className={'flex items-center gap-2 mb-1 cursor-pointer border-b border-transparent hover:border-gray-lightest'}
            >
-              <div className={'text-disabled-text'}>@{shortDurationFromMs(pointer.time)}</div>
+              <div className={'text-secondary'}>@{shortDurationFromMs(pointer.time)}</div>
              <RenderLineData type={type} item={pointer} />
            </div>
          ))}
--- a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
+++ b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
@ -17,10 +17,18 @@ const CustomNode: React.FC<CustomNodeProps> = (props) => {
    const {x, y, width, height, index, payload, containerWidth} = props;
    const isOut = x + width + 6 > containerWidth;
    const isDemo = payload.isDemo;
+    const isDropoff = payload.name === 'Dropoff';

    return (
        <Layer key={`CustomNode${index}`} style={{cursor: 'pointer'}}>
-            <Rectangle x={x} y={y} width={width} height={height} fill='#394EFF' fillOpacity='1'/>
+            <Rectangle 
+                x={x} 
+                y={y} 
+                width={width} 
+                height={height} 
+                fill={isDropoff ? '#454545' : '#394EFF'} 
+                fillOpacity='1'
+            />
            {!isDemo ? (
                <foreignObject
                    x={isOut ? x - 6 : x + width + 5}
@ -44,4 +52,4 @@ const CustomNode: React.FC<CustomNodeProps> = (props) => {
    );
 }

-export default CustomNode;
+export default CustomNode;
--- a/frontend/app/components/ui/Icon/Icon.tsx
+++ b/frontend/app/components/ui/Icon/Icon.tsx
@ -9,6 +9,7 @@ interface IProps {
  height?: number
  width?: number
  color?: string
+  strokeColor?: string
  className?: string
  style?: object
  marginRight?: number
@ -22,6 +23,7 @@ const Icon: React.FunctionComponent<IProps> = ({
  height = size,
  width = size,
  color = 'gray-medium',
+  strokeColor,
  className = '',
  style={},
  marginRight = 0,
@ -38,7 +40,10 @@ const Icon: React.FunctionComponent<IProps> = ({
    _style.marginRight = `${ marginRight }px`;
  }

-  const additionalStyles = color === 'inherit' ? { fill: 'currentColor' } : {}
+  const additionalStyles = {
+    ...(color === 'inherit' ? { fill: 'currentColor' } : {}),
+    ...(strokeColor ? { stroke: strokeColor } : {}), 
+  };

  return (
    <span
@ -47,7 +52,7 @@ const Icon: React.FunctionComponent<IProps> = ({
      className={ cn(className, styles.wrapper, `fill-${ color }`) }
      data-inline={ inline }
    >
-      <SVG name={ name } height={ height } width={ width } />
+      <SVG name={ name } height={ height } width={ width }  style={strokeColor ? { stroke: strokeColor } : undefined}  />
    </span>
  );
 }
--- a/frontend/app/components/ui/Icons/console_error.tsx
+++ b/frontend/app/components/ui/Icons/console_error.tsx
@ -12,7 +12,7 @@ interface Props {
 function Console_error(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/exclamation_circle.tsx
+++ b/frontend/app/components/ui/Icons/exclamation_circle.tsx
@ -12,7 +12,7 @@ interface Props {
 function Exclamation_circle(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/exclamation_triangle.tsx
+++ b/frontend/app/components/ui/Icons/exclamation_triangle.tsx
@ -12,7 +12,7 @@ interface Props {
 function Exclamation_triangle(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/filter.tsx
+++ b/frontend/app/components/ui/Icons/filter.tsx
@ -12,7 +12,7 @@ interface Props {
 function Filter(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/filters_error.tsx
+++ b/frontend/app/components/ui/Icons/filters_error.tsx
@ -12,7 +12,7 @@ interface Props {
 function Filters_error(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/funnel.tsx
+++ b/frontend/app/components/ui/Icons/funnel.tsx
@ -12,7 +12,7 @@ interface Props {
 function Funnel(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/funnel_exclamation_circle.tsx
+++ b/frontend/app/components/ui/Icons/funnel_exclamation_circle.tsx
@ -12,7 +12,7 @@ interface Props {
 function Funnel_exclamation_circle(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/graph_up.tsx
+++ b/frontend/app/components/ui/Icons/graph_up.tsx
@ -12,7 +12,7 @@ interface Props {
 function Graph_up(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/ic_errors.tsx
+++ b/frontend/app/components/ui/Icons/ic_errors.tsx
@ -12,7 +12,7 @@ interface Props {
 function Ic_errors(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/index.ts
+++ b/frontend/app/components/ui/Icons/index.ts
@ -467,6 +467,7 @@ export { default as Turtle } from './turtle';
 export { default as User_alt } from './user_alt';
 export { default as User_circle } from './user_circle';
 export { default as User_friends } from './user_friends';
+export { default as User_journey } from './user_journey';
 export { default as User_switch } from './user_switch';
 export { default as Users } from './users';
 export { default as Vendors_graphql } from './vendors_graphql';
--- a/frontend/app/components/ui/Icons/list_alt.tsx
+++ b/frontend/app/components/ui/Icons/list_alt.tsx
@ -12,7 +12,7 @@ interface Props {
 function List_alt(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M464 64c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.823 0-16-7.178-16-16V80c0-8.822 7.177-16 16-16h416m0-32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-336 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm288-148v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6z"/></svg>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/signpost_split.tsx
+++ b/frontend/app/components/ui/Icons/signpost_split.tsx
@ -12,7 +12,7 @@ interface Props {
 function Signpost_split(props: Props) {
    const { size = 14, width = size, height = size, fill = '' } = props;
    return (
-      <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7 7V1.414a1 1 0 0 1 2 0V2h5a1 1 0 0 1 .8.4l.975 1.3a.5.5 0 0 1 0 .6L14.8 5.6a1 1 0 0 1-.8.4H9v10H7v-5H2a1 1 0 0 1-.8-.4L.225 9.3a.5.5 0 0 1 0-.6L1.2 7.4A1 1 0 0 1 2 7h5zm1 3V8H2l-.75 1L2 10h6zm0-5h6l.75-1L14 3H8v2z"/></svg>
+      <svg viewBox="0 0 16 16" fill="currentColor" stroke="transparent" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 2.667a.667.667 0 0 0-.667.666V4H2.667v-.667a.667.667 0 0 0-1.334 0v4a.667.667 0 0 0 1.334 0v-.666c2.773 0 3.946 1.406 5.18 2.893 1.233 1.487 2.586 3.107 5.486 3.107v.666a.667.667 0 1 0 1.334 0v-2.666a.667.667 0 0 0-1.334 0v.666c-2.273 0-3.286-1.22-4.46-2.626-1.313-1.58-2.806-3.374-6.206-3.374h10.666V6a.667.667 0 0 0 1.334 0V3.333A.667.667 0 0 0 14 2.667Z"/></svg>
  );
 }

--- a/frontend/app/components/ui/Icons/user_journey.tsx
+++ b/frontend/app/components/ui/Icons/user_journey.tsx
@ -0,0 +1,19 @@
+
+/* Auto-generated, do not edit */
+import React from 'react';
+
+interface Props {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    fill?: string;
+}
+
+function User_journey(props: Props) {
+    const { size = 14, width = size, height = size, fill = '' } = props;
+    return (
+      <svg viewBox="0 0 16 16" fill="currentColor" stroke="transparent" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 2.667a.667.667 0 0 0-.667.666V4H2.667v-.667a.667.667 0 0 0-1.334 0v4a.667.667 0 0 0 1.334 0v-.666c2.773 0 3.946 1.406 5.18 2.893 1.233 1.487 2.586 3.107 5.486 3.107v.666a.667.667 0 1 0 1.334 0v-2.666a.667.667 0 0 0-1.334 0v.666c-2.273 0-3.286-1.22-4.46-2.626-1.313-1.58-2.806-3.374-6.206-3.374h10.666V6a.667.667 0 0 0 1.334 0V3.333A.667.667 0 0 0 14 2.667Z"/></svg>
+  );
+}
+
+export default User_journey;
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@ -41,10 +41,10 @@ export const TYPE_ICONS = {
  [LIBRARY]: 'grid',
  [TIMESERIES]: 'graph-up',
  [TABLE]: 'list-alt',
-  [HEATMAP]: 'puzzle-piece',
+  [HEATMAP]: 'dashboards/heatmap-2',
  [FUNNEL]: 'funnel',
-  [ERRORS]: 'exclamation-triangle',
-  [USER_PATH]: 'signpost-split',
+  [ERRORS]: 'exclamation-circle',
+  [USER_PATH]: 'user-journey',
  [TABLE]: 'list-alt',
 } as const
 export const TYPE_NAMES = {
--- a/frontend/app/svg/icons/console/error.svg
+++ b/frontend/app/svg/icons/console/error.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-exclamation-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
--- a/frontend/app/svg/icons/exclamation-circle.svg
+++ b/frontend/app/svg/icons/exclamation-circle.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-exclamation-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
--- a/frontend/app/svg/icons/exclamation-triangle.svg
+++ b/frontend/app/svg/icons/exclamation-triangle.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
-  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
-  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
--- a/frontend/app/svg/icons/filter.svg
+++ b/frontend/app/svg/icons/filter.svg
@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-funnel" viewBox="0 0 16 16">
-  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
--- a/frontend/app/svg/icons/filters/error.svg
+++ b/frontend/app/svg/icons/filters/error.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-exclamation-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
--- a/frontend/app/svg/icons/funnel.svg
+++ b/frontend/app/svg/icons/funnel.svg
@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-funnel" viewBox="0 0 16 16">
-  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
--- a/frontend/app/svg/icons/funnel/exclamation-circle.svg
+++ b/frontend/app/svg/icons/funnel/exclamation-circle.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
--- a/frontend/app/svg/icons/graph-up.svg
+++ b/frontend/app/svg/icons/graph-up.svg
@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-graph-up" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-line"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/></svg>
--- a/frontend/app/svg/icons/ic-errors.svg
+++ b/frontend/app/svg/icons/ic-errors.svg
@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
-  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
--- a/frontend/app/svg/icons/list-alt.svg
+++ b/frontend/app/svg/icons/list-alt.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.823 0-16-7.178-16-16V80c0-8.822 7.177-16 16-16h416m0-32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-336 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm0 96c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32zm288-148v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6zm0 96v-24a6 6 0 0 0-6-6H198a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h212a6 6 0 0 0 6-6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-down"><path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/></svg>
--- a/frontend/app/svg/icons/signpost-split.svg
+++ b/frontend/app/svg/icons/signpost-split.svg
@ -1,3 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-signpost-split" viewBox="0 0 16 16">
-  <path d="M7 7V1.414a1 1 0 0 1 2 0V2h5a1 1 0 0 1 .8.4l.975 1.3a.5.5 0 0 1 0 .6L14.8 5.6a1 1 0 0 1-.8.4H9v10H7v-5H2a1 1 0 0 1-.8-.4L.225 9.3a.5.5 0 0 1 0-.6L1.2 7.4A1 1 0 0 1 2 7h5zm1 3V8H2l-.75 1L2 10h6zm0-5h6l.75-1L14 3H8v2z"/>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  stroke="transparent"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="icon-class"
+>
+  <g>
+    <path
+      d="M14 2.667a.667.667 0 0 0-.667.666V4H2.667v-.667a.667.667 0 0 0-1.334 0v4a.667.667 0 0 0 1.334 0v-.666c2.773 0 3.946 1.406 5.18 2.893 1.233 1.487 2.586 3.107 5.486 3.107v.666a.667.667 0 1 0 1.334 0v-2.666a.667.667 0 0 0-1.334 0v.666c-2.273 0-3.286-1.22-4.46-2.626-1.313-1.58-2.806-3.374-6.206-3.374h10.666V6a.667.667 0 0 0 1.334 0V3.333A.667.667 0 0 0 14 2.667Z"
+    />
+  </g>
 </svg>
--- a/frontend/app/svg/icons/user-journey.svg
+++ b/frontend/app/svg/icons/user-journey.svg
@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  stroke="transparent"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="icon-class"
+>
+  <g>
+    <path
+      d="M14 2.667a.667.667 0 0 0-.667.666V4H2.667v-.667a.667.667 0 0 0-1.334 0v4a.667.667 0 0 0 1.334 0v-.666c2.773 0 3.946 1.406 5.18 2.893 1.233 1.487 2.586 3.107 5.486 3.107v.666a.667.667 0 1 0 1.334 0v-2.666a.667.667 0 0 0-1.334 0v.666c-2.273 0-3.286-1.22-4.46-2.626-1.313-1.58-2.806-3.374-6.206-3.374h10.666V6a.667.667 0 0 0 1.334 0V3.333A.667.667 0 0 0 14 2.667Z"
+    />
+  </g>
+</svg>