diff --git a/examples/example_pro/src/FirestoreApp/App.tsx b/examples/example_pro/src/FirestoreApp/App.tsx
index 6ea3f974e..c4afd9cc3 100644
--- a/examples/example_pro/src/FirestoreApp/App.tsx
+++ b/examples/example_pro/src/FirestoreApp/App.tsx
@@ -67,6 +67,7 @@ import { DemoImportAction } from "./DemoImportAction";
 import { algoliaSearchControllerBuilder } from "./text_search";
 import { carsCollection } from "./collections/cars_collection";
 import ClientUIComponentsShowcase from "./views/ClientUIComponentsShowcase";
+import { TypographyDemo } from "./views/TypographyDemo";
 
 const signInOptions: FirebaseSignInProvider[] = ["google.com", "password"];
 
@@ -247,6 +248,13 @@ export function App() {
             view: <ExampleCMSView/>
         },
         // {
+        //     path: "typography",
+        //     name: "Typography demo",
+        //     group: "Custom views",
+        //     description: "This is an example of an additional view that is defined by the user",
+        //     view: <TypographyDemo/>
+        // },
+        // {
         //     path: "board_test",
         //     name: "Board test",
         //     group: "Content",
diff --git a/examples/example_pro/src/FirestoreApp/views/TypographyDemo.tsx b/examples/example_pro/src/FirestoreApp/views/TypographyDemo.tsx
new file mode 100644
index 000000000..1a6cecf7e
--- /dev/null
+++ b/examples/example_pro/src/FirestoreApp/views/TypographyDemo.tsx
@@ -0,0 +1,20 @@
+import { CenteredView, Typography } from "@firecms/ui";
+
+export function TypographyDemo() {
+
+    return <CenteredView>
+        <Typography variant="h1" gutterBottom>H1. Heading</Typography>
+        <Typography variant="h2" gutterBottom>H2. Heading</Typography>
+        <Typography variant="h3" gutterBottom>H3. Heading</Typography>
+        <Typography variant="h4" gutterBottom>H4. Heading</Typography>
+        <Typography variant="h5" gutterBottom>H5. Heading</Typography>
+        <Typography variant="h6" gutterBottom>H6. Heading</Typography>
+        <Typography variant="subtitle1" gutterBottom>Subtitle 1</Typography>
+        <Typography variant="subtitle2" gutterBottom>Subtitle 2</Typography>
+        <Typography variant="body1" gutterBottom>Body 1</Typography>
+        <Typography variant="body2" gutterBottom>Body 2</Typography>
+        <Typography variant="caption" gutterBottom>Caption</Typography>
+        <Typography variant="label" gutterBottom>Label</Typography>
+        <Typography variant="button" gutterBottom className={"block"}>Button</Typography>
+    </CenteredView>
+}
diff --git a/packages/firecms_cloud/src/components/subscriptions/ProjectSubscriptionPlans.tsx b/packages/firecms_cloud/src/components/subscriptions/ProjectSubscriptionPlans.tsx
index ab2eae245..55c1ae925 100644
--- a/packages/firecms_cloud/src/components/subscriptions/ProjectSubscriptionPlans.tsx
+++ b/packages/firecms_cloud/src/components/subscriptions/ProjectSubscriptionPlans.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useBrowserTitleAndIcon } from "@firecms/core";
-import { Card, Chip, CircularProgress, cls, StarIcon, Typography, } from "@firecms/ui";
+import { Card, Chip, CircularProgress, cls, AutoAwesomeIcon, Typography, } from "@firecms/ui";
 import { useSubscriptionsForUserController } from "../../hooks/useSubscriptionsForUserController";
 import { ProductUpgradeSmallView } from "./ProductUpgradeSmallView";
 import { getPriceString, getSubscriptionStatusText } from "../settings/common";
@@ -80,28 +80,28 @@ export function ProjectSubscriptionPlans({ uid }: {
                             following features:</div>}
 
                         <ul className={"px-2 text-base"}>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>
                                 Local text search
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>Unlimited
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>Unlimited
                                 users and roles
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>Theme and
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>Theme and
                                 logo customization
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>
                                 Custom form fields and custom views
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>
                                 Secondary databases
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>GPT-4
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>GPT-4
                                 content generation
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>
                                 Unlimited data export
                             </li>
-                            <li className={"flex gap-4 items-center py-0.5"}><StarIcon size={"small"}/>
+                            <li className={"flex gap-4 items-center py-0.5"}><AutoAwesomeIcon size={"small"}/>
                                 AppCheck
                             </li>
                         </ul>