feat: use new icons library for billing products

frontend/src/mocks/fixtures/_billing_v2.json

@@ -455,6 +455,7 @@
             "price_description": null,
             "usage_key": "events",
             "image_url": "https://posthog.com/images/product/product-icons/product-analytics.svg",
+            "icon_key": "IconGraph",
             "docs_url": "https://posthog.com/docs/product-analytics",
             "subscribed": true,
             "plans": [
@@ -749,6 +750,7 @@
                     "description": "Understand how groups of users behave.",
                     "price_description": null,
                     "image_url": "https://posthog.com/images/product/product-icons/group-analytics.svg",
+                    "icon_key": "IconPeople",
                     "docs_url": "https://posthog.com/docs/product-analytics/group-analytics",
                     "type": "group_analytics",
                     "tiers": [

frontend/src/mocks/fixtures/_billing_v2_with_discount.json

@@ -382,6 +382,7 @@
             "description": "Trends, funnels, path analysis + more.",
             "price_description": null,
             "usage_key": "events",
+            "icon_key": "IconGraph",
             "image_url": "https://posthog.com/images/product/product-icons/product-analytics.svg",
             "docs_url": "https://posthog.com/docs/product-analytics",
             "subscribed": true,
@@ -677,6 +678,7 @@
                     "description": "Understand how groups of users behave.",
                     "price_description": null,
                     "image_url": "https://posthog.com/images/product/product-icons/group-analytics.svg",
+                    "icon_key": "IconPeople",
                     "docs_url": "https://posthog.com/docs/product-analytics/group-analytics",
                     "type": "group_analytics",
                     "tiers": [],

frontend/src/scenes/billing/BillingProduct.tsx

@@ -24,6 +24,7 @@ import { capitalizeFirstLetter, compactNumber } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { ProductPricingModal } from './ProductPricingModal'
 import { PlanComparisonModal } from './PlanComparison'
+import { getProductIcon } from 'scenes/products/Products'
 import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
 
 const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
@@ -60,9 +61,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
         <div className="bg-side rounded p-6 flex flex-col">
             <div className="flex justify-between gap-x-4">
                 <div className="flex gap-x-4">
-                    {addon.image_url ? (
-                        <img className="w-10 h-10" alt={`Logo for PostHog ${addon.name}`} src={addon.image_url} />
-                    ) : null}
+                    <div className="w-8">{getProductIcon(addon.icon_key, 'text-2xl')}</div>
                     <div>
                         <div className="flex gap-x-2 items-center mt-0 mb-2 ">
                             <h4 className="leading-5 mb-1 font-bold">{addon.name}</h4>
@@ -294,13 +293,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
             <div className="border border-border rounded w-full bg-bg-light">
                 <div className="border-b border-border bg-mid p-4">
                     <div className="flex gap-4 items-center justify-between">
-                        {product.image_url ? (
-                            <img
-                                className="w-10 h-10"
-                                alt={`Logo for PostHog ${product.name}`}
-                                src={product.image_url}
-                            />
-                        ) : null}
+                        {getProductIcon(product.icon_key, 'text-2xl')}
                         <div>
                             <h3 className="font-bold mb-0">{product.name}</h3>
                             <div>{product.description}</div>

frontend/src/scenes/billing/PlanComparison.tsx

@@ -8,6 +8,7 @@ import { useActions, useValues } from 'kea'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
 import { billingLogic } from './billingLogic'
+import { getProductIcon } from 'scenes/products/Products'
 
 export function PlanIcon({
     feature,
@@ -211,13 +212,7 @@ export const PlanComparison = ({
                 <tr>
                     <th colSpan={3} className="PlanTable__th__section bg-side justify-left rounded text-left mb-2">
                         <div className="flex items-center gap-x-2 my-2">
-                            {product.image_url && (
-                                <img
-                                    className="w-6 h-6"
-                                    alt={`Logo for PostHog ${product.name}`}
-                                    src={product.image_url}
-                                />
-                            )}
+                            {getProductIcon(product.icon_key, 'text-2xl')}
                             <Tooltip title={product.description}>
                                 <span className="font-bold">{product.name}</span>
                             </Tooltip>
@@ -275,13 +270,7 @@ export const PlanComparison = ({
                                             className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
                                         >
                                             <div className="flex items-center gap-x-2 my-2">
-                                                {includedProduct.image_url && (
-                                                    <img
-                                                        className="w-6 h-6"
-                                                        alt={`Logo for PostHog ${includedProduct.name}`}
-                                                        src={includedProduct.image_url}
-                                                    />
-                                                )}
+                                                {getProductIcon(includedProduct.icon_key, 'text-2xl')}
                                                 <Tooltip title={includedProduct.description}>
                                                     <span className="font-bold">{includedProduct.name}</span>
                                                 </Tooltip>

frontend/src/scenes/onboarding/OnboardingOtherProductsStep.tsx

@@ -2,6 +2,7 @@ import { LemonButton, LemonCard } from '@posthog/lemon-ui'
 import { OnboardingStep } from './OnboardingStep'
 import { OnboardingStepKey, onboardingLogic } from './onboardingLogic'
 import { useActions, useValues } from 'kea'
+import { getProductIcon } from 'scenes/products/Products'
 
 export const OnboardingOtherProductsStep = ({
     stepKey = OnboardingStepKey.OTHER_PRODUCTS,
@@ -27,13 +28,7 @@ export const OnboardingOtherProductsStep = ({
                         key={suggestedProduct.type}
                     >
                         <div className="flex items-center">
-                            <div className="mr-4">
-                                <img
-                                    src={suggestedProduct.image_url || ''}
-                                    alt={suggestedProduct.name}
-                                    className="w-8 h-8"
-                                />
-                            </div>
+                            <div className="mr-4">{getProductIcon(suggestedProduct.icon_key, 'text-2xl')}</div>
                             <div>
                                 <h3 className="font-bold mb-0">{suggestedProduct.name}</h3>
                                 <p className="m-0">{suggestedProduct.description}</p>

frontend/src/scenes/products/Products.tsx

@@ -1,5 +1,4 @@
 import { LemonButton } from '@posthog/lemon-ui'
-import { IconBarChart } from 'lib/lemon-ui/icons'
 import { SceneExport } from 'scenes/sceneTypes'
 import { BillingProductV2Type, ProductKey } from '~/types'
 import { useActions, useValues } from 'kea'
@@ -14,6 +13,7 @@ import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
 import { router } from 'kea-router'
 import { getProductUri } from 'scenes/onboarding/onboardingLogic'
 import { productsLogic } from './productsLogic'
+import * as Icons from '@posthog/icons'
 
 export const scene: SceneExport = {
     component: Products,
@@ -64,19 +64,17 @@ function OnboardingNotCompletedButton({ url, productKey }: { url: string; produc
     )
 }
 
+export function getProductIcon(iconKey?: string | null, className?: string): JSX.Element {
+    return Icons[iconKey || 'IconLogomark']({ className })
+}
+
 function ProductCard({ product }: { product: BillingProductV2Type }): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const onboardingCompleted = currentTeam?.has_completed_onboarding_for?.[product.type]
     return (
         <LemonCard className={`max-w-80 flex flex-col`} key={product.type}>
             <div className="flex mb-2">
-                <div className="bg-mid rounded p-2 flex">
-                    {product.image_url ? (
-                        <img className="w-6 h-6" alt={`Logo for PostHog ${product.name}`} src={product.image_url} />
-                    ) : (
-                        <IconBarChart className="w-6 h-6" />
-                    )}
-                </div>
+                <div className="bg-mid rounded p-2 flex">{getProductIcon(product.icon_key, 'text-2xl')}</div>
             </div>
             <div className="mb-2">
                 <h3 className="bold mb-0">{product.name}</h3>

frontend/src/types.ts

@@ -1174,6 +1174,7 @@ export interface BillingProductV2Type {
     name: string
     description: string
     price_description?: string | null
+    icon_key?: string | null
     image_url?: string | null
     docs_url: string | null
     free_allocation?: number
@@ -1210,6 +1211,7 @@ export interface BillingProductV2AddonType {
     description: string
     price_description: string | null
     image_url: string | null
+    icon_key?: string
     docs_url: string | null
     type: string
     tiers: BillingV2TierType[] | null