diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
index bd5542d9b..16405d2b6 100644
--- a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
+++ b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx
@@ -84,7 +84,7 @@ export const DashboardCard = ({
             ) : external ? (
               <ShareRounded
                 a11yTitle={`Go to ${title}`}
-                color="foreground-brand-default"
+                color="icon-primary"
                 data-icon={
                   !inline && workspace === 'Acme Next' ? 'dashboard' : ''
                 }
@@ -92,7 +92,7 @@ export const DashboardCard = ({
             ) : (
               <LinkNext
                 a11yTitle={`Go to ${title}`}
-                color="foreground-brand-default"
+                color="icon-primary"
                 data-icon={
                   !inline && workspace === 'Acme Next' ? 'dashboard' : ''
                 }
diff --git a/sandbox/grommet-app/src/pages/next/QuickActions.jsx b/sandbox/grommet-app/src/pages/next/QuickActions.jsx
index 3fd6ab9bc..426fae6f9 100644
--- a/sandbox/grommet-app/src/pages/next/QuickActions.jsx
+++ b/sandbox/grommet-app/src/pages/next/QuickActions.jsx
@@ -27,17 +27,13 @@ export const QuickActions = ({ edit = true, icons }) => {
         {skeleton ? (
           <Skeleton height={theme.text.medium.size} />
         ) : (
-          <Anchor
-            icon={icons && <ChapterAdd color="foreground-brand-default" />}
-            label="Add devices"
-            href="#"
-          />
+          <Anchor icon={icons && <ChapterAdd />} label="Add devices" href="#" />
         )}
         {skeleton ? (
           <Skeleton height={theme.text.medium.size} />
         ) : (
           <Anchor
-            icon={icons && <Cloud color="foreground-brand-default" />}
+            icon={icons && <Cloud />}
             label="Add service subscriptions"
             href="#"
           />
@@ -45,17 +41,13 @@ export const QuickActions = ({ edit = true, icons }) => {
         {skeleton ? (
           <Skeleton height={theme.text.medium.size} />
         ) : (
-          <Anchor
-            icon={icons && <UserAdd color="foreground-brand-default" />}
-            label="Add users"
-            href="#"
-          />
+          <Anchor icon={icons && <UserAdd />} label="Add users" href="#" />
         )}
         {skeleton ? (
           <Skeleton height={theme.text.medium.size} />
         ) : (
           <Anchor
-            icon={icons && <Stakeholder color="foreground-brand-default" />}
+            icon={icons && <Stakeholder />}
             label="Assign roles"
             href="#"
           />
@@ -64,7 +56,7 @@ export const QuickActions = ({ edit = true, icons }) => {
           <Skeleton height={theme.text.medium.size} />
         ) : (
           <Anchor
-            icon={icons && <MapLocation color="foreground-brand-default" />}
+            icon={icons && <MapLocation />}
             label="Create location"
             href="#"
           />