diff --git a/app/actions/definitions/collections.tsx b/app/actions/definitions/collections.tsx
index dae75f5a4..2d3288894 100644
--- a/app/actions/definitions/collections.tsx
+++ b/app/actions/definitions/collections.tsx
@@ -1,6 +1,7 @@
 import { CollectionIcon, EditIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
+import Collection from "~/models/Collection";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionNew from "~/scenes/CollectionNew";
 import DynamicCollectionIcon from "~/components/CollectionIcon";
@@ -8,6 +9,10 @@ import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";
 
+const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
+  return <DynamicCollectionIcon collection={collection} />;
+};
+
 export const openCollection = createAction({
   name: ({ t }) => t("Open collection"),
   section: CollectionSection,
@@ -20,7 +25,7 @@ export const openCollection = createAction({
       // cache if the collection is renamed
       id: collection.url,
       name: collection.name,
-      icon: <DynamicCollectionIcon collection={collection} />,
+      icon: <ColorCollectionIcon collection={collection} />,
       section: CollectionSection,
       perform: () => history.push(collection.url),
     }));
diff --git a/app/menus/NewDocumentMenu.tsx b/app/menus/NewDocumentMenu.tsx
index 28a25d821..901531280 100644
--- a/app/menus/NewDocumentMenu.tsx
+++ b/app/menus/NewDocumentMenu.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
+import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import CollectionIcon from "~/components/CollectionIcon";
 import ContextMenu from "~/components/ContextMenu";
@@ -15,6 +16,10 @@ import useStores from "~/hooks/useStores";
 import { MenuItem } from "~/types";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
+const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
+  return <CollectionIcon collection={collection} />;
+};
+
 function NewDocumentMenu() {
   const menu = useMenuState({
     modal: true,
@@ -33,7 +38,7 @@ function NewDocumentMenu() {
             type: "route",
             to: newDocumentPath(collection.id),
             title: <CollectionName>{collection.name}</CollectionName>,
-            icon: <CollectionIcon collection={collection} />,
+            icon: <ColorCollectionIcon collection={collection} />,
           });
         }