From aab3a49f2cef632e265e161e66cf1b635f44162c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sat, 8 Apr 2023 11:16:05 -0400
Subject: [PATCH] chore: Bump `outline-icons` (#5170

* Bump outline-icons to default use currentColor

* wip
---
 app/actions/index.ts                          |  4 +---
 app/components/Arrow.tsx                      | 12 +++-------
 app/components/Button.tsx                     | 23 +------------------
 app/components/CommandBarItem.tsx             |  3 +--
 app/components/ContextMenu/MenuItem.tsx       |  8 ++-----
 .../ContextMenu/OverflowMenuButton.tsx        |  9 ++------
 .../DefaultCollectionInputSelect.tsx          |  2 +-
 app/components/DocumentBreadcrumb.tsx         |  6 ++---
 app/components/DocumentCard.tsx               |  4 ++--
 app/components/DocumentListItem.tsx           |  1 +
 app/components/EventListItem.tsx              | 14 +++++------
 app/components/Header.tsx                     |  1 -
 app/components/List/Error.tsx                 |  4 ++--
 app/components/Modal.tsx                      |  6 ++---
 app/components/Sidebar/App.tsx                |  8 +++----
 app/components/Sidebar/Settings.tsx           |  4 ++--
 .../Sidebar/components/ArchiveLink.tsx        |  2 +-
 .../Sidebar/components/Disclosure.tsx         |  2 +-
 app/components/Sidebar/components/Header.tsx  |  4 +---
 .../Sidebar/components/HeaderButton.tsx       |  4 ++--
 .../Sidebar/components/HistoryNavigation.tsx  |  4 ++--
 .../Sidebar/components/TrashLink.tsx          |  2 +-
 app/components/Toast.tsx                      | 10 ++++----
 app/editor/components/LinkEditor.tsx          | 12 ++++------
 app/editor/components/ToolbarMenu.tsx         |  2 +-
 app/hooks/useSettingsActions.tsx              |  2 +-
 app/menus/CollectionMenu.tsx                  |  6 +----
 app/menus/RevisionMenu.tsx                    |  1 -
 app/menus/TableOfContentsMenu.tsx             |  1 -
 app/scenes/Archive.tsx                        |  2 +-
 app/scenes/Collection/Empty.tsx               |  2 +-
 .../Document/components/CommentThreadItem.tsx |  1 +
 .../Document/components/DocumentMeta.tsx      |  2 +-
 app/scenes/Document/components/Header.tsx     |  2 --
 app/scenes/Document/components/Notices.tsx    |  3 +--
 .../Document/components/ReferenceListItem.tsx |  6 +----
 .../Document/components/SharePopover.tsx      |  8 ++-----
 app/scenes/Drafts.tsx                         |  2 +-
 app/scenes/Home.tsx                           |  2 +-
 app/scenes/Login/index.tsx                    |  4 ++--
 .../Search/components/RecentSearches.tsx      |  2 +-
 app/scenes/Settings/Details.tsx               |  2 +-
 app/scenes/Settings/Export.tsx                |  2 +-
 app/scenes/Settings/Features.tsx              |  2 +-
 app/scenes/Settings/GoogleAnalytics.tsx       |  5 +---
 app/scenes/Settings/Groups.tsx                |  2 +-
 app/scenes/Settings/Import.tsx                |  2 +-
 app/scenes/Settings/Members.tsx               |  2 +-
 app/scenes/Settings/Notifications.tsx         | 20 ++++++++--------
 app/scenes/Settings/Preferences.tsx           |  5 +---
 app/scenes/Settings/Profile.tsx               |  2 +-
 app/scenes/Settings/Security.tsx              |  7 +++---
 app/scenes/Settings/SelfHosted.tsx            |  5 +---
 app/scenes/Settings/Shares.tsx                |  4 ++--
 app/scenes/Settings/Tokens.tsx                |  2 +-
 app/scenes/Settings/Zapier.tsx                |  2 +-
 app/scenes/Templates.tsx                      |  2 +-
 app/scenes/Trash.tsx                          |  2 +-
 package.json                                  |  2 +-
 plugins/webhooks/client/Settings.tsx          |  2 +-
 shared/editor/components/DisabledEmbed.tsx    |  2 +-
 shared/editor/components/FileExtension.tsx    |  6 +----
 shared/editor/components/Frame.tsx            |  2 +-
 shared/editor/components/Image.tsx            |  2 +-
 shared/editor/marks/Link.tsx                  |  2 +-
 shared/editor/nodes/Attachment.tsx            |  2 +-
 shared/editor/nodes/Notice.tsx                |  6 ++---
 shared/editor/plugins/BlockMenuTrigger.tsx    |  2 +-
 shared/i18n/locales/en_US/translation.json    |  2 +-
 yarn.lock                                     |  8 +++----
 70 files changed, 113 insertions(+), 190 deletions(-)

diff --git a/app/actions/index.ts b/app/actions/index.ts
index ed2218aca..e088c0026 100644
--- a/app/actions/index.ts
+++ b/app/actions/index.ts
@@ -49,9 +49,7 @@ export function actionToMenuItem(
   const title = resolve<string>(action.name, context);
   const icon =
     resolvedIcon && action.iconInContextMenu !== false
-      ? React.cloneElement(resolvedIcon, {
-          color: "currentColor",
-        })
+      ? resolvedIcon
       : undefined;
 
   if (resolvedChildren) {
diff --git a/app/components/Arrow.tsx b/app/components/Arrow.tsx
index ba462d577..149feb457 100644
--- a/app/components/Arrow.tsx
+++ b/app/components/Arrow.tsx
@@ -6,17 +6,11 @@ export default function Arrow() {
       width="13"
       height="30"
       viewBox="0 0 13 30"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        fill="currentColor"
-        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
-      />
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
     </svg>
   );
 }
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index e374ea564..551ce6529 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -14,7 +14,6 @@ type RealProps = {
   $borderOnHover?: boolean;
   $neutral?: boolean;
   $danger?: boolean;
-  $iconColor?: string;
 };
 
 const RealButton = styled(ActionButton)<RealProps>`
@@ -37,14 +36,6 @@ const RealButton = styled(ActionButton)<RealProps>`
   appearance: none !important;
   ${undraggableOnDesktop()}
 
-  ${(props) =>
-    !props.$borderOnHover &&
-    `
-      svg {
-        fill: ${props.$iconColor || "currentColor"};
-      }
-    `}
-
   &::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -77,15 +68,6 @@ const RealButton = styled(ActionButton)<RealProps>`
         : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
     };
 
-    ${
-      props.$borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.$iconColor || "currentColor"};
-    }`
-    }
-
-
     &:hover:not(:disabled),
     &[aria-expanded="true"] {
       background: ${
@@ -156,7 +138,6 @@ export const Inner = styled.span<{
 
 export type Props<T> = ActionButtonProps & {
   icon?: React.ReactNode;
-  iconColor?: string;
   children?: React.ReactNode;
   disclosure?: boolean;
   neutral?: boolean;
@@ -184,7 +165,6 @@ const Button = <T extends React.ElementType = "button">(
     neutral,
     action,
     icon,
-    iconColor,
     borderOnHover,
     hideIcon,
     fullwidth,
@@ -204,13 +184,12 @@ const Button = <T extends React.ElementType = "button">(
       $danger={danger}
       $fullwidth={fullwidth}
       $borderOnHover={borderOnHover}
-      $iconColor={iconColor}
       {...rest}
     >
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && ic}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon color="currentColor" />}
+        {disclosure && <ExpandedIcon />}
       </Inner>
     </RealButton>
   );
diff --git a/app/components/CommandBarItem.tsx b/app/components/CommandBarItem.tsx
index 7d578e784..c99b4a0eb 100644
--- a/app/components/CommandBarItem.tsx
+++ b/app/components/CommandBarItem.tsx
@@ -39,10 +39,9 @@ function CommandBarItem(
             // @ts-expect-error no icon on ActionImpl
             React.cloneElement(action.icon, {
               size: 22,
-              color: "currentColor",
             })
           ) : (
-            <ArrowIcon color="currentColor" />
+            <ArrowIcon />
           )}
         </Icon>
 
diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx
index 79fdf459c..b58d33c8f 100644
--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -78,15 +78,11 @@ const MenuItem = (
         >
           {selected !== undefined && (
             <>
-              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              {selected ? <CheckmarkIcon /> : <Spacer />}
               &nbsp;
             </>
           )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
       )}
diff --git a/app/components/ContextMenu/OverflowMenuButton.tsx b/app/components/ContextMenu/OverflowMenuButton.tsx
index 1f25baf96..f72fd93e9 100644
--- a/app/components/ContextMenu/OverflowMenuButton.tsx
+++ b/app/components/ContextMenu/OverflowMenuButton.tsx
@@ -5,19 +5,14 @@ import NudeButton from "~/components/NudeButton";
 
 type Props = React.ComponentProps<typeof MenuButton> & {
   className?: string;
-  iconColor?: string;
 };
 
-export default function OverflowMenuButton({
-  iconColor,
-  className,
-  ...rest
-}: Props) {
+export default function OverflowMenuButton({ className, ...rest }: Props) {
   return (
     <MenuButton {...rest}>
       {(props) => (
         <NudeButton className={className} {...props}>
-          <MoreIcon color={iconColor} />
+          <MoreIcon />
         </NudeButton>
       )}
     </MenuButton>
diff --git a/app/components/DefaultCollectionInputSelect.tsx b/app/components/DefaultCollectionInputSelect.tsx
index c811dc0c9..9a9637eef 100644
--- a/app/components/DefaultCollectionInputSelect.tsx
+++ b/app/components/DefaultCollectionInputSelect.tsx
@@ -73,7 +73,7 @@ const DefaultCollectionInputSelect = ({
             label: (
               <Flex align="center">
                 <IconWrapper>
-                  <HomeIcon color="currentColor" />
+                  <HomeIcon />
                 </IconWrapper>
                 {t("Home")}
               </Flex>
diff --git a/app/components/DocumentBreadcrumb.tsx b/app/components/DocumentBreadcrumb.tsx
index 89fc5e3a4..952ef2c1b 100644
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -22,7 +22,7 @@ function useCategory(document: Document): MenuInternalLink | null {
   if (document.isDeleted) {
     return {
       type: "route",
-      icon: <TrashIcon color="currentColor" />,
+      icon: <TrashIcon />,
       title: t("Trash"),
       to: "/trash",
     };
@@ -31,7 +31,7 @@ function useCategory(document: Document): MenuInternalLink | null {
   if (document.isArchived) {
     return {
       type: "route",
-      icon: <ArchiveIcon color="currentColor" />,
+      icon: <ArchiveIcon />,
       title: t("Archive"),
       to: "/archive",
     };
@@ -40,7 +40,7 @@ function useCategory(document: Document): MenuInternalLink | null {
   if (document.isTemplate) {
     return {
       type: "route",
-      icon: <ShapesIcon color="currentColor" />,
+      icon: <ShapesIcon />,
       title: t("Templates"),
       to: "/templates",
     };
diff --git a/app/components/DocumentCard.tsx b/app/components/DocumentCard.tsx
index 14a2df413..81a74aa22 100644
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -128,7 +128,7 @@ function DocumentCard(props: Props) {
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
-                <Clock color="currentColor" size={18} />
+                <Clock size={18} />
                 <Time
                   dateTime={document.updatedAt}
                   tooltipDelay={500}
@@ -143,7 +143,7 @@ function DocumentCard(props: Props) {
               {!isDragging && pin && (
                 <Tooltip tooltip={t("Unpin")}>
                   <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon color="currentColor" />
+                    <CloseIcon />
                   </PinButton>
                 </Tooltip>
               )}
diff --git a/app/components/DocumentListItem.tsx b/app/components/DocumentListItem.tsx
index 081d29363..775b67d14 100644
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -178,6 +178,7 @@ const Actions = styled(EventBoundary)`
   margin: 8px;
   flex-shrink: 0;
   flex-grow: 0;
+  color: ${s("textSecondary")};
 
   ${NudeButton} {
     &:hover,
diff --git a/app/components/EventListItem.tsx b/app/components/EventListItem.tsx
index 7354bd7fe..aeb27de61 100644
--- a/app/components/EventListItem.tsx
+++ b/app/components/EventListItem.tsx
@@ -58,7 +58,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
 
   switch (event.name) {
     case "revisions.create":
-      icon = <EditIcon color="currentColor" size={16} />;
+      icon = <EditIcon size={16} />;
       meta = t("{{userName}} edited", opts);
       to = {
         pathname: documentHistoryUrl(document, event.modelId || ""),
@@ -67,7 +67,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.live_editing":
-      icon = <LightningIcon color="currentColor" size={16} />;
+      icon = <LightningIcon size={16} />;
       meta = t("Latest");
       to = {
         pathname: documentHistoryUrl(document),
@@ -76,7 +76,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.archive":
-      icon = <ArchiveIcon color="currentColor" size={16} />;
+      icon = <ArchiveIcon size={16} />;
       meta = t("{{userName}} archived", opts);
       break;
 
@@ -85,7 +85,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.delete":
-      icon = <TrashIcon color="currentColor" size={16} />;
+      icon = <TrashIcon size={16} />;
       meta = t("{{userName}} deleted", opts);
       break;
 
@@ -94,17 +94,17 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.publish":
-      icon = <PublishIcon color="currentColor" size={16} />;
+      icon = <PublishIcon size={16} />;
       meta = t("{{userName}} published", opts);
       break;
 
     case "documents.unpublish":
-      icon = <UnpublishIcon color="currentColor" size={16} />;
+      icon = <UnpublishIcon size={16} />;
       meta = t("{{userName}} unpublished", opts);
       break;
 
     case "documents.move":
-      icon = <MoveIcon color="currentColor" size={16} />;
+      icon = <MoveIcon size={16} />;
       meta = t("{{userName}} moved", opts);
       break;
 
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 85c7e283e..330f0000a 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -63,7 +63,6 @@ function Header({ left, title, actions, hasSidebar }: Props) {
             <MobileMenuButton
               onClick={ui.toggleMobileSidebar}
               icon={<MenuIcon />}
-              iconColor="currentColor"
               neutral
             />
           )}
diff --git a/app/components/List/Error.tsx b/app/components/List/Error.tsx
index 0998c2d24..7cb0f7ec5 100644
--- a/app/components/List/Error.tsx
+++ b/app/components/List/Error.tsx
@@ -21,11 +21,11 @@ export default function LoadingError({ error, retry, ...rest }: Props) {
   const message =
     error instanceof OfflineError ? (
       <>
-        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+        <DisconnectedIcon /> {t("You’re offline.")}
       </>
     ) : (
       <>
-        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+        <WarningIcon /> {t("Sorry, an error occurred.")}
       </>
     );
 
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index ed282b9a2..f5148f665 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -94,7 +94,7 @@ const Modal: React.FC<Props> = ({
                       )}
                       <Text as="span" size="large">
                         <NudeButton onClick={onRequestClose}>
-                          <CloseIcon color="currentColor" />
+                          <CloseIcon />
                         </NudeButton>
                       </Text>
                     </Header>
@@ -119,10 +119,10 @@ const Modal: React.FC<Props> = ({
                     </Centered>
                   </Content>
                   <Close onClick={onRequestClose}>
-                    <CloseIcon size={32} color="currentColor" />
+                    <CloseIcon size={32} />
                   </Close>
                   <Back onClick={onRequestClose}>
-                    <BackIcon size={32} color="currentColor" />
+                    <BackIcon size={32} />
                     <Text as="span">{t("Back")} </Text>
                   </Back>
                 </Fullscreen>
diff --git a/app/components/Sidebar/App.tsx b/app/components/Sidebar/App.tsx
index 887b079a8..a2a276969 100644
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -88,20 +88,20 @@ function AppSidebar() {
             <Section>
               <SidebarLink
                 to={homePath()}
-                icon={<HomeIcon color="currentColor" />}
+                icon={<HomeIcon />}
                 exact={false}
                 label={t("Home")}
               />
               <SidebarLink
                 to={searchPath()}
-                icon={<SearchIcon color="currentColor" />}
+                icon={<SearchIcon />}
                 label={t("Search")}
                 exact={false}
               />
               {can.createDocument && (
                 <SidebarLink
                   to={draftsPath()}
-                  icon={<EditIcon color="currentColor" />}
+                  icon={<EditIcon />}
                   label={
                     <Flex align="center" justify="space-between">
                       {t("Drafts")}
@@ -124,7 +124,7 @@ function AppSidebar() {
                 <>
                   <SidebarLink
                     to={templatesPath()}
-                    icon={<ShapesIcon color="currentColor" />}
+                    icon={<ShapesIcon />}
                     exact={false}
                     label={t("Templates")}
                     active={
diff --git a/app/components/Sidebar/Settings.tsx b/app/components/Sidebar/Settings.tsx
index 8bd030c23..71c33d9d7 100644
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -33,7 +33,7 @@ function SettingsSidebar() {
       <HistoryNavigation />
       <HeaderButton
         title={t("Return to App")}
-        image={<StyledBackIcon color="currentColor" />}
+        image={<StyledBackIcon />}
         onClick={returnToApp}
         minHeight={Desktop.hasInsetTitlebar() ? undefined : 48}
       />
@@ -47,7 +47,7 @@ function SettingsSidebar() {
                   <SidebarLink
                     key={item.path}
                     to={item.path}
-                    icon={<item.icon color="currentColor" />}
+                    icon={<item.icon />}
                     label={item.name}
                   />
                 ))}
diff --git a/app/components/Sidebar/components/ArchiveLink.tsx b/app/components/Sidebar/components/ArchiveLink.tsx
index 47c96a4a8..17f6b0494 100644
--- a/app/components/Sidebar/components/ArchiveLink.tsx
+++ b/app/components/Sidebar/components/ArchiveLink.tsx
@@ -32,7 +32,7 @@ function ArchiveLink() {
     <div ref={dropToArchiveDocument}>
       <SidebarLink
         to={archivePath()}
-        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
+        icon={<ArchiveIcon open={isDocumentDropping} />}
         exact={false}
         label={t("Archive")}
         active={documents.active?.isArchived && !documents.active?.isDeleted}
diff --git a/app/components/Sidebar/components/Disclosure.tsx b/app/components/Sidebar/components/Disclosure.tsx
index 9e538a7f8..8cccfa33d 100644
--- a/app/components/Sidebar/components/Disclosure.tsx
+++ b/app/components/Sidebar/components/Disclosure.tsx
@@ -22,7 +22,7 @@ function Disclosure({ onClick, root, expanded, ...rest }: Props) {
       aria-label={expanded ? t("Collapse") : t("Expand")}
       {...rest}
     >
-      <StyledCollapsedIcon expanded={expanded} size={20} color="currentColor" />
+      <StyledCollapsedIcon expanded={expanded} size={20} />
     </Button>
   );
 }
diff --git a/app/components/Sidebar/components/Header.tsx b/app/components/Sidebar/components/Header.tsx
index fa8d2de7b..d3b266010 100644
--- a/app/components/Sidebar/components/Header.tsx
+++ b/app/components/Sidebar/components/Header.tsx
@@ -36,9 +36,7 @@ export const Header: React.FC<Props> = ({ id, title, children }) => {
       <H3>
         <Button onClick={handleClick} disabled={!id}>
           {title}
-          {id && (
-            <Disclosure expanded={expanded} color="currentColor" size={20} />
-          )}
+          {id && <Disclosure expanded={expanded} size={20} />}
         </Button>
       </H3>
       {expanded && (firstRender ? children : <Fade>{children}</Fade>)}
diff --git a/app/components/Sidebar/components/HeaderButton.tsx b/app/components/Sidebar/components/HeaderButton.tsx
index fc6758241..fcbd056e7 100644
--- a/app/components/Sidebar/components/HeaderButton.tsx
+++ b/app/components/Sidebar/components/HeaderButton.tsx
@@ -40,8 +40,8 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
         {image}
         {title}
       </Title>
-      {showDisclosure && <ExpandedIcon color="currentColor" />}
-      {showMoreMenu && <MoreIcon color="currentColor" />}
+      {showDisclosure && <ExpandedIcon />}
+      {showMoreMenu && <MoreIcon />}
     </Wrapper>
   )
 );
diff --git a/app/components/Sidebar/components/HistoryNavigation.tsx b/app/components/Sidebar/components/HistoryNavigation.tsx
index 3b43ef775..1bd8640cf 100644
--- a/app/components/Sidebar/components/HistoryNavigation.tsx
+++ b/app/components/Sidebar/components/HistoryNavigation.tsx
@@ -45,12 +45,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
     <Navigation gap={4} {...props}>
       <Tooltip tooltip={t("Go back")} delay={500}>
         <NudeButton onClick={() => Desktop.bridge.goBack()}>
-          <Back color="currentColor" $active={back} />
+          <Back $active={back} />
         </NudeButton>
       </Tooltip>
       <Tooltip tooltip={t("Go forward")} delay={500}>
         <NudeButton onClick={() => Desktop.bridge.goForward()}>
-          <Forward color="currentColor" $active={forward} />
+          <Forward $active={forward} />
         </NudeButton>
       </Tooltip>
     </Navigation>
diff --git a/app/components/Sidebar/components/TrashLink.tsx b/app/components/Sidebar/components/TrashLink.tsx
index 5ba9bee61..547fdd4bb 100644
--- a/app/components/Sidebar/components/TrashLink.tsx
+++ b/app/components/Sidebar/components/TrashLink.tsx
@@ -36,7 +36,7 @@ function TrashLink() {
       <div ref={dropToTrashDocument}>
         <SidebarLink
           to={trashPath()}
-          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
+          icon={<TrashIcon open={isDocumentDropping} />}
           exact={false}
           label={t("Trash")}
           active={documents.active?.isDeleted}
diff --git a/app/components/Toast.tsx b/app/components/Toast.tsx
index 6e6dfca4e..42f940c53 100644
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -58,12 +58,10 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
       onMouseLeave={handleResume}
     >
       <Container onClick={action ? undefined : onRequestClose}>
-        {type === "loading" && <Spinner color="currentColor" />}
-        {type === "info" && <InfoIcon color="currentColor" />}
-        {type === "success" && <CheckboxIcon checked color="currentColor" />}
-        {(type === "warning" || type === "error") && (
-          <WarningIcon color="currentColor" />
-        )}
+        {type === "loading" && <Spinner />}
+        {type === "info" && <InfoIcon />}
+        {type === "success" && <CheckboxIcon checked />}
+        {(type === "warning" || type === "error") && <WarningIcon />}
         <Message>{toast.message}</Message>
         {action && <Action onClick={action.onClick}>{action.text}</Action>}
       </Container>
diff --git a/app/editor/components/LinkEditor.tsx b/app/editor/components/LinkEditor.tsx
index 0aa87c48e..1c9a24d88 100644
--- a/app/editor/components/LinkEditor.tsx
+++ b/app/editor/components/LinkEditor.tsx
@@ -335,16 +335,12 @@ class LinkEditor extends React.Component<Props, State> {
           tooltip={isInternal ? dictionary.goToLink : dictionary.openLink}
         >
           <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
-            {isInternal ? (
-              <ArrowIcon color="currentColor" />
-            ) : (
-              <OpenIcon color="currentColor" />
-            )}
+            {isInternal ? <ArrowIcon /> : <OpenIcon />}
           </ToolbarButton>
         </Tooltip>
         <Tooltip tooltip={dictionary.removeLink}>
           <ToolbarButton onClick={this.handleRemoveLink}>
-            <CloseIcon color="currentColor" />
+            <CloseIcon />
           </ToolbarButton>
         </Tooltip>
 
@@ -361,7 +357,7 @@ class LinkEditor extends React.Component<Props, State> {
                     key={result.url}
                     title={result.title}
                     subtitle={result.subtitle}
-                    icon={<DocumentIcon color="currentColor" />}
+                    icon={<DocumentIcon />}
                     onPointerMove={() => this.handleFocusLink(index)}
                     onClick={this.handleSelectLink(result.url, result.title)}
                     selected={index === selectedIndex}
@@ -375,7 +371,7 @@ class LinkEditor extends React.Component<Props, State> {
                     containerRef={this.resultsRef}
                     title={suggestedLinkTitle}
                     subtitle={dictionary.createNewDoc}
-                    icon={<PlusIcon color="currentColor" />}
+                    icon={<PlusIcon />}
                     onPointerMove={() => this.handleFocusLink(results.length)}
                     onClick={() => {
                       this.handleCreateLink(suggestedLinkTitle);
diff --git a/app/editor/components/ToolbarMenu.tsx b/app/editor/components/ToolbarMenu.tsx
index 7d50edf9b..1f69b91d6 100644
--- a/app/editor/components/ToolbarMenu.tsx
+++ b/app/editor/components/ToolbarMenu.tsx
@@ -47,7 +47,7 @@ function ToolbarMenu(props: Props) {
         return (
           <Tooltip tooltip={item.tooltip} key={index}>
             <ToolbarButton onClick={handleClick(item)} active={isActive}>
-              {React.cloneElement(item.icon, { color: "currentColor" })}
+              {item.icon}
             </ToolbarButton>
           </Tooltip>
         );
diff --git a/app/hooks/useSettingsActions.tsx b/app/hooks/useSettingsActions.tsx
index 2359cd3c7..75ef19c15 100644
--- a/app/hooks/useSettingsActions.tsx
+++ b/app/hooks/useSettingsActions.tsx
@@ -14,7 +14,7 @@ const useSettingsActions = () => {
         return {
           id: item.path,
           name: item.name,
-          icon: <Icon color="currentColor" />,
+          icon: <Icon />,
           section: NavigationSection,
           perform: () => history.push(item.path),
         };
diff --git a/app/menus/CollectionMenu.tsx b/app/menus/CollectionMenu.tsx
index 31b72d11f..75a7a6bf7 100644
--- a/app/menus/CollectionMenu.tsx
+++ b/app/menus/CollectionMenu.tsx
@@ -220,11 +220,7 @@ function CollectionMenu({
         type: "submenu",
         title: t("Sort in sidebar"),
         visible: can.update,
-        icon: alphabeticalSort ? (
-          <AlphabeticalSortIcon color="currentColor" />
-        ) : (
-          <ManualSortIcon color="currentColor" />
-        ),
+        icon: alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />,
         items: [
           {
             type: "button",
diff --git a/app/menus/RevisionMenu.tsx b/app/menus/RevisionMenu.tsx
index f2df429aa..89a949f22 100644
--- a/app/menus/RevisionMenu.tsx
+++ b/app/menus/RevisionMenu.tsx
@@ -33,7 +33,6 @@ function RevisionMenu({ document, className }: Props) {
     <>
       <OverflowMenuButton
         className={className}
-        iconColor="currentColor"
         aria-label={t("Show menu")}
         {...menu}
       />
diff --git a/app/menus/TableOfContentsMenu.tsx b/app/menus/TableOfContentsMenu.tsx
index bb2c8f62d..85b08ae8b 100644
--- a/app/menus/TableOfContentsMenu.tsx
+++ b/app/menus/TableOfContentsMenu.tsx
@@ -65,7 +65,6 @@ function TableOfContentsMenu({ headings }: Props) {
           <Button
             {...props}
             icon={<TableOfContentsIcon />}
-            iconColor="currentColor"
             borderOnHover
             neutral
           />
diff --git a/app/scenes/Archive.tsx b/app/scenes/Archive.tsx
index 8dd8315fb..4825fcf03 100644
--- a/app/scenes/Archive.tsx
+++ b/app/scenes/Archive.tsx
@@ -13,7 +13,7 @@ function Archive() {
   const { t } = useTranslation();
   const { documents } = useStores();
   return (
-    <Scene icon={<ArchiveIcon color="currentColor" />} title={t("Archive")}>
+    <Scene icon={<ArchiveIcon />} title={t("Archive")}>
       <Heading>{t("Archive")}</Heading>
       <PaginatedDocumentList
         documents={documents.archived}
diff --git a/app/scenes/Collection/Empty.tsx b/app/scenes/Collection/Empty.tsx
index 37db958e2..5e67235c7 100644
--- a/app/scenes/Collection/Empty.tsx
+++ b/app/scenes/Collection/Empty.tsx
@@ -42,7 +42,7 @@ function EmptyCollection({ collection }: Props) {
       {can.update && (
         <Empty>
           <Link to={newDocumentPath(collection.id)}>
-            <Button icon={<NewDocumentIcon color="currentColor" />} neutral>
+            <Button icon={<NewDocumentIcon />} neutral>
               {t("Create a document")}
             </Button>
           </Link>
diff --git a/app/scenes/Document/components/CommentThreadItem.tsx b/app/scenes/Document/components/CommentThreadItem.tsx
index 92d286c8b..88751c7b7 100644
--- a/app/scenes/Document/components/CommentThreadItem.tsx
+++ b/app/scenes/Document/components/CommentThreadItem.tsx
@@ -220,6 +220,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
   top: 4px;
   opacity: 0;
   transition: opacity 100ms ease-in-out;
+  color: ${s("textSecondary")};
 
   &:hover,
   &[aria-expanded="true"] {
diff --git a/app/scenes/Document/components/DocumentMeta.tsx b/app/scenes/Document/components/DocumentMeta.tsx
index 93c339a67..71e4e282b 100644
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/app/scenes/Document/components/DocumentMeta.tsx
@@ -59,7 +59,7 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
             to={documentUrl(document)}
             onClick={() => ui.toggleComments(document.id)}
           >
-            <CommentIcon color="currentColor" size={18} />
+            <CommentIcon size={18} />
             {commentsCount
               ? t("{{ count }} comment", { count: commentsCount })
               : t("Comment")}
diff --git a/app/scenes/Document/components/Header.tsx b/app/scenes/Document/components/Header.tsx
index 8af338b01..e5ef1d9d2 100644
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -115,7 +115,6 @@ function DocumentHeader({
           ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents
         }
         icon={<TableOfContentsIcon />}
-        iconColor="currentColor"
         borderOnHover
         neutral
       />
@@ -327,7 +326,6 @@ function DocumentHeader({
                     label={(props) => (
                       <Button
                         icon={<MoreIcon />}
-                        iconColor="currentColor"
                         {...props}
                         borderOnHover
                         neutral
diff --git a/app/scenes/Document/components/Notices.tsx b/app/scenes/Document/components/Notices.tsx
index 868a373fb..c4089f32d 100644
--- a/app/scenes/Document/components/Notices.tsx
+++ b/app/scenes/Document/components/Notices.tsx
@@ -39,8 +39,7 @@ export default function Notices({ document, readOnly }: Props) {
           icon={<ShapesIcon />}
           description={
             <Trans>
-              Highlight some text and use the{" "}
-              <PlaceholderIcon color="currentColor" /> control to add
+              Highlight some text and use the <PlaceholderIcon /> control to add
               placeholders that can be filled out when creating new documents
             </Trans>
           }
diff --git a/app/scenes/Document/components/ReferenceListItem.tsx b/app/scenes/Document/components/ReferenceListItem.tsx
index e183c9c02..9aa087b7d 100644
--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -76,11 +76,7 @@ function ReferenceListItem({
       {...rest}
     >
       <Content gap={4} dir="auto">
-        {emoji ? (
-          <EmojiIcon emoji={emoji} />
-        ) : (
-          <DocumentIcon color="currentColor" />
-        )}
+        {emoji ? <EmojiIcon emoji={emoji} /> : <DocumentIcon />}
         <Title>
           {emoji ? document.title.replace(emoji, "") : document.title}
         </Title>
diff --git a/app/scenes/Document/components/SharePopover.tsx b/app/scenes/Document/components/SharePopover.tsx
index 2b3c0972d..480f12a9a 100644
--- a/app/scenes/Document/components/SharePopover.tsx
+++ b/app/scenes/Document/components/SharePopover.tsx
@@ -222,11 +222,7 @@ function SharePopover({
   return (
     <>
       <Heading>
-        {isPubliclyShared ? (
-          <GlobeIcon size={28} color="currentColor" />
-        ) : (
-          <PadlockIcon size={28} color="currentColor" />
-        )}
+        {isPubliclyShared ? <GlobeIcon size={28} /> : <PadlockIcon size={28} />}
         <span>{t("Share this document")}</span>
       </Heading>
 
@@ -327,7 +323,7 @@ function SharePopover({
           <span />
         ) : (
           <MoreOptionsButton
-            icon={<ExpandedIcon color="currentColor" />}
+            icon={<ExpandedIcon />}
             onClick={() => setExpandedOptions(true)}
             neutral
             borderOnHover
diff --git a/app/scenes/Drafts.tsx b/app/scenes/Drafts.tsx
index 767fd5562..89b3f506d 100644
--- a/app/scenes/Drafts.tsx
+++ b/app/scenes/Drafts.tsx
@@ -51,7 +51,7 @@ function Drafts() {
 
   return (
     <Scene
-      icon={<EditIcon color="currentColor" />}
+      icon={<EditIcon />}
       title={t("Drafts")}
       actions={
         <>
diff --git a/app/scenes/Home.tsx b/app/scenes/Home.tsx
index bccf3cb3e..bf8f95b6c 100644
--- a/app/scenes/Home.tsx
+++ b/app/scenes/Home.tsx
@@ -34,7 +34,7 @@ function Home() {
 
   return (
     <Scene
-      icon={<HomeIcon color="currentColor" />}
+      icon={<HomeIcon />}
       title={t("Home")}
       left={
         <InputSearchPage source="dashboard" label={t("Search documents")} />
diff --git a/app/scenes/Login/index.tsx b/app/scenes/Login/index.tsx
index d187c2876..7eea4ded6 100644
--- a/app/scenes/Login/index.tsx
+++ b/app/scenes/Login/index.tsx
@@ -43,7 +43,7 @@ function Header({ config }: { config?: Config | undefined }) {
 
   return (
     <Back href={isSubdomain ? env.URL : "https://www.getoutline.com"}>
-      <BackIcon color="currentColor" /> {t("Back to home")}
+      <BackIcon /> {t("Back to home")}
     </Back>
   );
 }
@@ -169,7 +169,7 @@ function Login({ children }: Props) {
         <Header config={config} />
         <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Check your email")} />
-          <CheckEmailIcon size={38} color="currentColor" />
+          <CheckEmailIcon size={38} />
           <Heading centered>{t("Check your email")}</Heading>
           <Note>
             <Trans
diff --git a/app/scenes/Search/components/RecentSearches.tsx b/app/scenes/Search/components/RecentSearches.tsx
index f841d1da7..22d01afba 100644
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -37,7 +37,7 @@ function RecentSearches() {
                     searchQuery.delete();
                   }}
                 >
-                  <CloseIcon color="currentColor" />
+                  <CloseIcon />
                 </RemoveButton>
               </Tooltip>
             </RecentSearch>
diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx
index e215d78f9..f3cbb3cf3 100644
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -133,7 +133,7 @@ function Details() {
 
   return (
     <ThemeProvider theme={newTheme}>
-      <Scene title={t("Details")} icon={<TeamIcon color="currentColor" />}>
+      <Scene title={t("Details")} icon={<TeamIcon />}>
         <Heading>{t("Details")}</Heading>
         <Text type="secondary">
           <Trans>
diff --git a/app/scenes/Settings/Export.tsx b/app/scenes/Settings/Export.tsx
index 72b6efb69..fc92c22f9 100644
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -48,7 +48,7 @@ function Export() {
   );
 
   return (
-    <Scene title={t("Export")} icon={<DownloadIcon color="currentColor" />}>
+    <Scene title={t("Export")} icon={<DownloadIcon />}>
       <Heading>{t("Export")}</Heading>
       <Text type="secondary">
         <Trans
diff --git a/app/scenes/Settings/Features.tsx b/app/scenes/Settings/Features.tsx
index 10b173d31..612a2a41a 100644
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -35,7 +35,7 @@ function Features() {
   };
 
   return (
-    <Scene title={t("Features")} icon={<BeakerIcon color="currentColor" />}>
+    <Scene title={t("Features")} icon={<BeakerIcon />}>
       <Heading>{t("Features")}</Heading>
       <Text type="secondary">
         <Trans>
diff --git a/app/scenes/Settings/GoogleAnalytics.tsx b/app/scenes/Settings/GoogleAnalytics.tsx
index 177fee588..d99bee7f4 100644
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -80,10 +80,7 @@ function GoogleAnalytics() {
   );
 
   return (
-    <Scene
-      title={t("Google Analytics")}
-      icon={<GoogleIcon color="currentColor" />}
-    >
+    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
       <Heading>{t("Google Analytics")}</Heading>
 
       <Text type="secondary">
diff --git a/app/scenes/Settings/Groups.tsx b/app/scenes/Settings/Groups.tsx
index e77cc7f0d..86c1f51fd 100644
--- a/app/scenes/Settings/Groups.tsx
+++ b/app/scenes/Settings/Groups.tsx
@@ -33,7 +33,7 @@ function Groups() {
   return (
     <Scene
       title={t("Groups")}
-      icon={<GroupIcon color="currentColor" />}
+      icon={<GroupIcon />}
       actions={
         <>
           {can.createGroup && (
diff --git a/app/scenes/Settings/Import.tsx b/app/scenes/Settings/Import.tsx
index 86e0e85ec..4ce741b4c 100644
--- a/app/scenes/Settings/Import.tsx
+++ b/app/scenes/Settings/Import.tsx
@@ -26,7 +26,7 @@ function Import() {
   const appName = env.APP_NAME;
 
   return (
-    <Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
+    <Scene title={t("Import")} icon={<NewDocumentIcon />}>
       <Heading>{t("Import")}</Heading>
       <Text type="secondary">
         <Trans>
diff --git a/app/scenes/Settings/Members.tsx b/app/scenes/Settings/Members.tsx
index 4b0cf3c93..3027da86a 100644
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -148,7 +148,7 @@ function Members() {
   return (
     <Scene
       title={t("Members")}
-      icon={<UserIcon color="currentColor" />}
+      icon={<UserIcon />}
       actions={
         <>
           {can.inviteUser && (
diff --git a/app/scenes/Settings/Notifications.tsx b/app/scenes/Settings/Notifications.tsx
index 7e5eb88f8..bb540750c 100644
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -35,7 +35,7 @@ function Notifications() {
   const options = [
     {
       event: NotificationEventType.PublishDocument,
-      icon: <PublishIcon color="currentColor" />,
+      icon: <PublishIcon />,
       title: t("Document published"),
       description: t(
         "Receive a notification whenever a new document is published"
@@ -43,7 +43,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.UpdateDocument,
-      icon: <EditIcon color="currentColor" />,
+      icon: <EditIcon />,
       title: t("Document updated"),
       description: t(
         "Receive a notification when a document you are subscribed to is edited"
@@ -51,7 +51,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateComment,
-      icon: <CommentIcon color="currentColor" />,
+      icon: <CommentIcon />,
       title: t("Comment posted"),
       description: t(
         "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
@@ -59,7 +59,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.MentionedInComment,
-      icon: <EmailIcon color="currentColor" />,
+      icon: <EmailIcon />,
       title: t("Mentioned"),
       description: t(
         "Receive a notification when someone mentions you in a document or comment"
@@ -67,7 +67,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateCollection,
-      icon: <CollectionIcon color="currentColor" />,
+      icon: <CollectionIcon />,
       title: t("Collection created"),
       description: t(
         "Receive a notification whenever a new collection is created"
@@ -75,7 +75,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.InviteAccepted,
-      icon: <UserIcon color="currentColor" />,
+      icon: <UserIcon />,
       title: t("Invite accepted"),
       description: t(
         "Receive a notification when someone you invited creates an account"
@@ -83,7 +83,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.ExportCompleted,
-      icon: <CheckboxIcon checked color="currentColor" />,
+      icon: <CheckboxIcon checked />,
       title: t("Export completed"),
       description: t(
         "Receive a notification when an export you requested has been completed"
@@ -91,14 +91,14 @@ function Notifications() {
     },
     {
       visible: isCloudHosted,
-      icon: <AcademicCapIcon color="currentColor" />,
+      icon: <AcademicCapIcon />,
       event: NotificationEventType.Onboarding,
       title: t("Getting started"),
       description: t("Tips on getting started with features and functionality"),
     },
     {
       visible: isCloudHosted,
-      icon: <StarredIcon color="currentColor" />,
+      icon: <StarredIcon />,
       event: NotificationEventType.Features,
       title: t("New features"),
       description: t("Receive an email when new features of note are added"),
@@ -124,7 +124,7 @@ function Notifications() {
   const showSuccessNotice = window.location.search === "?success";
 
   return (
-    <Scene title={t("Notifications")} icon={<EmailIcon color="currentColor" />}>
+    <Scene title={t("Notifications")} icon={<EmailIcon />}>
       <Heading>{t("Notifications")}</Heading>
 
       {showSuccessNotice && (
diff --git a/app/scenes/Settings/Preferences.tsx b/app/scenes/Settings/Preferences.tsx
index 5aeaf7c1a..99a8e495f 100644
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -51,10 +51,7 @@ function Preferences() {
   };
 
   return (
-    <Scene
-      title={t("Preferences")}
-      icon={<SettingsIcon color="currentColor" />}
-    >
+    <Scene title={t("Preferences")} icon={<SettingsIcon />}>
       <Heading>{t("Preferences")}</Heading>
       <Text type="secondary">
         <Trans>Manage settings that affect your personal experience.</Trans>
diff --git a/app/scenes/Settings/Profile.tsx b/app/scenes/Settings/Profile.tsx
index bc804be06..999b6c827 100644
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -61,7 +61,7 @@ const Profile = () => {
   const { isSaving } = auth;
 
   return (
-    <Scene title={t("Profile")} icon={<ProfileIcon color="currentColor" />}>
+    <Scene title={t("Profile")} icon={<ProfileIcon />}>
       <Heading>{t("Profile")}</Heading>
       <Text type="secondary">
         <Trans>Manage how you appear to other members of the workspace.</Trans>
diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx
index d1ad8eeff..79e7e941f 100644
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -137,7 +137,7 @@ function Security() {
   );
 
   return (
-    <Scene title={t("Security")} icon={<PadlockIcon color="currentColor" />}>
+    <Scene title={t("Security")} icon={<PadlockIcon />}>
       <Heading>{t("Security")}</Heading>
       <Text type="secondary">
         <Trans>
@@ -155,8 +155,7 @@ function Security() {
             key={provider.name}
             label={
               <Flex gap={8} align="center">
-                <PluginIcon id={provider.name} color="currentColor" />{" "}
-                {provider.displayName}
+                <PluginIcon id={provider.name} /> {provider.displayName}
               </Flex>
             }
             name={provider.name}
@@ -178,7 +177,7 @@ function Security() {
       <SettingRow
         label={
           <Flex gap={8} align="center">
-            <EmailIcon color="currentColor" /> {t("Email")}
+            <EmailIcon /> {t("Email")}
           </Flex>
         }
         name="guestSignin"
diff --git a/app/scenes/Settings/SelfHosted.tsx b/app/scenes/Settings/SelfHosted.tsx
index 691f0429f..cd6bd544a 100644
--- a/app/scenes/Settings/SelfHosted.tsx
+++ b/app/scenes/Settings/SelfHosted.tsx
@@ -79,10 +79,7 @@ function SelfHosted() {
   );
 
   return (
-    <Scene
-      title={t("Self Hosted")}
-      icon={<BuildingBlocksIcon color="currentColor" />}
-    >
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
       <Heading>{t("Self Hosted")}</Heading>
 
       <form onSubmit={formHandleSubmit(handleSubmit)}>
diff --git a/app/scenes/Settings/Shares.tsx b/app/scenes/Settings/Shares.tsx
index 1b89a16fd..e450f1326 100644
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -67,12 +67,12 @@ function Shares() {
   }, [shares.orderedData, shareIds]);
 
   return (
-    <Scene title={t("Shared Links")} icon={<LinkIcon color="currentColor" />}>
+    <Scene title={t("Shared Links")} icon={<LinkIcon />}>
       <Heading>{t("Shared Links")}</Heading>
 
       {can.manage && !canShareDocuments && (
         <>
-          <Notice icon={<WarningIcon color="currentColor" />}>
+          <Notice icon={<WarningIcon />}>
             {t("Sharing is currently disabled.")}{" "}
             <Trans
               defaults="You can globally enable and disable public document sharing in the <em>security settings</em>."
diff --git a/app/scenes/Settings/Tokens.tsx b/app/scenes/Settings/Tokens.tsx
index 8d9195e56..b0e3ca4e5 100644
--- a/app/scenes/Settings/Tokens.tsx
+++ b/app/scenes/Settings/Tokens.tsx
@@ -27,7 +27,7 @@ function Tokens() {
   return (
     <Scene
       title={t("API Tokens")}
-      icon={<CodeIcon color="currentColor" />}
+      icon={<CodeIcon />}
       actions={
         <>
           {can.createApiKey && (
diff --git a/app/scenes/Settings/Zapier.tsx b/app/scenes/Settings/Zapier.tsx
index 572098ca0..251c744a0 100644
--- a/app/scenes/Settings/Zapier.tsx
+++ b/app/scenes/Settings/Zapier.tsx
@@ -14,7 +14,7 @@ function Zapier() {
   const appName = env.APP_NAME;
 
   return (
-    <Scene title="Zapier" icon={<ZapierIcon color="currentColor" />}>
+    <Scene title="Zapier" icon={<ZapierIcon />}>
       <Heading>Zapier</Heading>
       <Helmet>
         <script
diff --git a/app/scenes/Templates.tsx b/app/scenes/Templates.tsx
index 7da8db11e..27586454d 100644
--- a/app/scenes/Templates.tsx
+++ b/app/scenes/Templates.tsx
@@ -25,7 +25,7 @@ function Templates(props: RouteComponentProps<{ sort: string }>) {
 
   return (
     <Scene
-      icon={<ShapesIcon color="currentColor" />}
+      icon={<ShapesIcon />}
       title={t("Templates")}
       actions={
         <Action>
diff --git a/app/scenes/Trash.tsx b/app/scenes/Trash.tsx
index 504c79d1d..c3b0ce8e0 100644
--- a/app/scenes/Trash.tsx
+++ b/app/scenes/Trash.tsx
@@ -13,7 +13,7 @@ function Trash() {
   const { t } = useTranslation();
   const { documents } = useStores();
   return (
-    <Scene icon={<TrashIcon color="currentColor" />} title={t("Trash")}>
+    <Scene icon={<TrashIcon />} title={t("Trash")}>
       <Heading>{t("Trash")}</Heading>
       <PaginatedDocumentList
         documents={documents.deleted}
diff --git a/package.json b/package.json
index d36ac120f..67c65735d 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     "natural-sort": "^1.0.0",
     "node-fetch": "2.6.7",
     "nodemailer": "^6.9.1",
-    "outline-icons": "^1.46.0",
+    "outline-icons": "^2.0.1",
     "oy-vey": "^0.12.0",
     "passport": "^0.6.0",
     "passport-google-oauth2": "^0.2.0",
diff --git a/plugins/webhooks/client/Settings.tsx b/plugins/webhooks/client/Settings.tsx
index ce93d6adc..e274429a7 100644
--- a/plugins/webhooks/client/Settings.tsx
+++ b/plugins/webhooks/client/Settings.tsx
@@ -29,7 +29,7 @@ function Webhooks() {
   return (
     <Scene
       title={t("Webhooks")}
-      icon={<WebhooksIcon color="currentColor" />}
+      icon={<WebhooksIcon />}
       actions={
         <>
           {can.createWebhookSubscription && (
diff --git a/shared/editor/components/DisabledEmbed.tsx b/shared/editor/components/DisabledEmbed.tsx
index 409667b75..4566b5818 100644
--- a/shared/editor/components/DisabledEmbed.tsx
+++ b/shared/editor/components/DisabledEmbed.tsx
@@ -14,7 +14,7 @@ export default function DisabledEmbed(props: Props & ThemeProps<DefaultTheme>) {
       isSelected={props.isSelected}
       theme={props.theme}
     >
-      <OpenIcon color="currentColor" size={20} />
+      <OpenIcon size={20} />
     </Widget>
   );
 }
diff --git a/shared/editor/components/FileExtension.tsx b/shared/editor/components/FileExtension.tsx
index 700e48c59..4231c1f09 100644
--- a/shared/editor/components/FileExtension.tsx
+++ b/shared/editor/components/FileExtension.tsx
@@ -18,11 +18,7 @@ export default function FileExtension(props: Props) {
       style={{ background: stringToColor(extension || "") }}
       $size={props.size || 28}
     >
-      {extension ? (
-        <span>{extension?.slice(0, 4)}</span>
-      ) : (
-        <AttachmentIcon color="currentColor" />
-      )}
+      {extension ? <span>{extension?.slice(0, 4)}</span> : <AttachmentIcon />}
     </Icon>
   );
 }
diff --git a/shared/editor/components/Frame.tsx b/shared/editor/components/Frame.tsx
index 75f5110a1..5a9e3c8bb 100644
--- a/shared/editor/components/Frame.tsx
+++ b/shared/editor/components/Frame.tsx
@@ -92,7 +92,7 @@ class Frame extends React.Component<PropsWithRef> {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <OpenIcon color="currentColor" size={18} /> Open
+                <OpenIcon size={18} /> Open
               </Open>
             )}
           </Bar>
diff --git a/shared/editor/components/Image.tsx b/shared/editor/components/Image.tsx
index 0965a1796..5c8225dd7 100644
--- a/shared/editor/components/Image.tsx
+++ b/shared/editor/components/Image.tsx
@@ -172,7 +172,7 @@ const Image = (
       >
         {!dragging && size.width > 60 && size.height > 60 && props.onDownload && (
           <Button onClick={props.onDownload}>
-            <DownloadIcon color="currentColor" />
+            <DownloadIcon />
           </Button>
         )}
         <ImageZoom zoomMargin={24}>
diff --git a/shared/editor/marks/Link.tsx b/shared/editor/marks/Link.tsx
index af1dee35c..bcd423b93 100644
--- a/shared/editor/marks/Link.tsx
+++ b/shared/editor/marks/Link.tsx
@@ -24,7 +24,7 @@ const LINK_INPUT_REGEX = /\[([^[]+)]\((\S+)\)$/;
 let icon: HTMLSpanElement;
 
 if (typeof window !== "undefined") {
-  const component = <OpenIcon color="currentColor" size={16} />;
+  const component = <OpenIcon size={16} />;
   icon = document.createElement("span");
   icon.className = "external-link";
   ReactDOM.render(component, icon);
diff --git a/shared/editor/nodes/Attachment.tsx b/shared/editor/nodes/Attachment.tsx
index f0cc1a2a8..b96c29f8a 100644
--- a/shared/editor/nodes/Attachment.tsx
+++ b/shared/editor/nodes/Attachment.tsx
@@ -84,7 +84,7 @@ export default class Attachment extends Node {
         isSelected={isSelected}
         theme={theme}
       >
-        {node.attrs.href && <DownloadIcon color="currentColor" size={20} />}
+        {node.attrs.href && <DownloadIcon size={20} />}
       </Widget>
     );
   }
diff --git a/shared/editor/nodes/Notice.tsx b/shared/editor/nodes/Notice.tsx
index 158a0dfb9..5c315c8d4 100644
--- a/shared/editor/nodes/Notice.tsx
+++ b/shared/editor/nodes/Notice.tsx
@@ -72,11 +72,11 @@ export default class Notice extends Node {
           let component;
 
           if (node.attrs.style === "tip") {
-            component = <StarredIcon color="currentColor" />;
+            component = <StarredIcon />;
           } else if (node.attrs.style === "warning") {
-            component = <WarningIcon color="currentColor" />;
+            component = <WarningIcon />;
           } else {
-            component = <InfoIcon color="currentColor" />;
+            component = <InfoIcon />;
           }
 
           icon = document.createElement("div");
diff --git a/shared/editor/plugins/BlockMenuTrigger.tsx b/shared/editor/plugins/BlockMenuTrigger.tsx
index 36926821d..65355cd6a 100644
--- a/shared/editor/plugins/BlockMenuTrigger.tsx
+++ b/shared/editor/plugins/BlockMenuTrigger.tsx
@@ -60,7 +60,7 @@ export default class BlockMenuTrigger extends Extension {
     const button = document.createElement("button");
     button.className = "block-menu-trigger";
     button.type = "button";
-    ReactDOM.render(<PlusIcon color="currentColor" />, button);
+    ReactDOM.render(<PlusIcon />, button);
 
     return [
       new Plugin({
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 58e554fe0..e9c61c9d3 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -489,7 +489,7 @@
   "Sorry, the last change could not be persisted – please reload the page": "Sorry, the last change could not be persisted – please reload the page",
   "This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
   "This document will be permanently deleted in <2></2> unless restored.": "This document will be permanently deleted in <2></2> unless restored.",
-  "Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents": "Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents",
+  "Highlight some text and use the <1></1> control to add placeholders that can be filled out when creating new documents": "Highlight some text and use the <1></1> control to add placeholders that can be filled out when creating new documents",
   "You’re editing a template": "You’re editing a template",
   "Archived by {{userName}}": "Archived by {{userName}}",
   "Deleted by {{userName}}": "Deleted by {{userName}}",
diff --git a/yarn.lock b/yarn.lock
index 8041df3bc..21d524280 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10119,10 +10119,10 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
-outline-icons@^1.46.0:
-  version "1.46.0"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.46.0.tgz#04b8f3b1f3b33b0396ebecf30a70d05c90f1f136"
-  integrity sha512-zC69rYqIHW/vr4IC+2ceAGFYV7artcOTewgduGlNl5Sn+xw8sMdmB1RvIc2ctxd6lxtJRRF5jJ6CRqpo/tM2cg==
+outline-icons@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-2.0.1.tgz#8e7106863edb3d52a54a142aa596a6c5a541f9d2"
+  integrity sha512-ia1D2hCon7pAhfEK39HAww6Z0EnA2rhBJ82TOwQfwB/svN1m/j//9uQZLAb9a7qQWO0bR1DuSRGTXwkU+1Nl7A==
 
 oy-vey@^0.12.0:
   version "0.12.0"