Design request: Events & props icons

[paolodamico]

As part of a whole querying experience UI/UX overhaul, one thing we'd like to improve is how we display events and properties. As also suggested by @corywatilo, we'd like to try showing a specific icon for each type of event/property.

Context

Properties

Currently we have two general categories of properties: PostHog (i.e. properties that we register/capture by default, e.g. browser, IP address, screen resolution, ...) and custom (properties that users manually capture), and we display them like this:

Ideally, we would also communicate the type of property to the user using an icon too (this could help suggest which types of filters/breakdowns) can be applied on those properties. The general types of data we use: text, number, boolean/null/undefined, datetime, mixed.

Events

Currently we don't show any icons when displaying events, but they could be quite helpful to quickly identify the type of event. General types of events we have today:

• Pageview / pageleave: User visited or navigated away from a page.
• Autocapture: User triggered an action in a page that was automatically captured (e.g. button clicks, form submissions, ...)
• Custom events: Events manually sent by users via code.
• Exceptions: Error ocurred in the page.
• Identify: End user was identified.
• Rageclick: User clicked 3+ times in a spot in a very short span of time (likely suggesting frustration).
• Other PostHog events: Some default events that do not fit the categories above.

This is where we would mainly show the event icons (later to be used in more places),

Specific asks

Create custom icons or identify icons to use from a FOSS library, each with a specific color.

1. Properties icons. Pick either 1a or 1b (depending on your workload/priorities),
   1a. Basic version. The basic version would be an icon for PostHog properties and an icon for custom properties.
   1b. Advanced version. The advanced version would be do have an icon (or combinations of icons) that communicate whether a property is I) PostHog/custom and II) type of data (see above for types).
2. Events icons. Icons for each of the types of events defined above.

[paolodamico]

@clarkus has now worked in a lot of different icons based on more recent needs, so closing