diff --git a/editor/resources/editor/icons/light/semantic/home-aqua-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-aqua-18x18@2x.png
new file mode 100644
index 000000000000..3146b098a78e
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-aqua-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-black-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-black-18x18@2x.png
new file mode 100644
index 000000000000..57ef9c884221
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-black-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-blue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-blue-18x18@2x.png
new file mode 100644
index 000000000000..faabe09ba931
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-blue-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-darkgray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-darkgray-18x18@2x.png
new file mode 100644
index 000000000000..f10271d179a3
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-darkgray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-gray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-gray-18x18@2x.png
new file mode 100644
index 000000000000..947e32b3bdf2
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-gray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-green-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-green-18x18@2x.png
new file mode 100644
index 000000000000..9ca3ecbf7529
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-green-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-lightaqua-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-lightaqua-18x18@2x.png
new file mode 100644
index 000000000000..39aa95f52439
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-lightaqua-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-lightblue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-lightblue-18x18@2x.png
new file mode 100644
index 000000000000..fd7084001d97
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-lightblue-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-lightgray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-lightgray-18x18@2x.png
new file mode 100644
index 000000000000..534a4283689b
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-lightgray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-lightgreen-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-lightgreen-18x18@2x.png
new file mode 100644
index 000000000000..0f6a87b7b5fc
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-lightgreen-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-lightpurple-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-lightpurple-18x18@2x.png
new file mode 100644
index 000000000000..5a6e4aa0ba0d
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-lightpurple-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-purple-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-purple-18x18@2x.png
new file mode 100644
index 000000000000..c8eceac5776c
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-purple-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-red-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-red-18x18@2x.png
new file mode 100644
index 000000000000..c9128af6c4d7
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-red-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-aqua-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-aqua-18x18@2x.png
new file mode 100644
index 000000000000..e13a354df583
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-aqua-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-black-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-black-18x18@2x.png
new file mode 100644
index 000000000000..1d833bd0b2f1
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-black-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-blue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-blue-18x18@2x.png
new file mode 100644
index 000000000000..2954102c7460
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-blue-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-darkgray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-darkgray-18x18@2x.png
new file mode 100644
index 000000000000..737c31a03a5b
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-darkgray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-gray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-gray-18x18@2x.png
new file mode 100644
index 000000000000..3ae511a3e5eb
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-gray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-green-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-green-18x18@2x.png
new file mode 100644
index 000000000000..711b9b6cf2ca
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-green-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-lightaqua-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-lightaqua-18x18@2x.png
new file mode 100644
index 000000000000..55ee4f6a8701
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-lightaqua-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-lightblue-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-lightblue-18x18@2x.png
new file mode 100644
index 000000000000..78dd8e0e10f0
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-lightblue-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-lightgray-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-lightgray-18x18@2x.png
new file mode 100644
index 000000000000..b04c69c37269
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-lightgray-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-lightgreen-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-lightgreen-18x18@2x.png
new file mode 100644
index 000000000000..00253e48b8a0
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-lightgreen-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-lightpurple-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-lightpurple-18x18@2x.png
new file mode 100644
index 000000000000..6ebb6614580b
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-lightpurple-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-purple-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-purple-18x18@2x.png
new file mode 100644
index 000000000000..84c30148b3e5
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-purple-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-red-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-red-18x18@2x.png
new file mode 100644
index 000000000000..a4498bb3fea1
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-red-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-solid-white-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-solid-white-18x18@2x.png
new file mode 100644
index 000000000000..1fbe0a16342d
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-solid-white-18x18@2x.png differ
diff --git a/editor/resources/editor/icons/light/semantic/home-white-18x18@2x.png b/editor/resources/editor/icons/light/semantic/home-white-18x18@2x.png
new file mode 100644
index 000000000000..d4a073b416d5
Binary files /dev/null and b/editor/resources/editor/icons/light/semantic/home-white-18x18@2x.png differ
diff --git a/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx b/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx
index a0ad6a1e8c54..0dd7b4d04323 100644
--- a/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx
+++ b/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx
@@ -361,21 +361,6 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
               〱
             </span>
           </Tooltip>
-          <Tooltip title={'Home'}>
-            <span
-              data-testid={RemixSceneLabelButtonTestId(props.target, 'home')}
-              style={{
-                cursor: 'pointer',
-                fontSize: 14 / scale,
-                display: isSelected ? 'block' : 'none',
-                position: 'relative',
-                bottom: 0 / scale,
-              }}
-              onClick={home}
-            >
-              ⛫
-            </span>
-          </Tooltip>
         </FlexRow>
 
         {unless(
diff --git a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
index d5b8ad652ea1..ad74cb4475ee 100644
--- a/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
+++ b/editor/src/components/canvas/remix/remix-rendering.spec.browser2.tsx
@@ -1353,10 +1353,6 @@ describe('Remix navigation', () => {
         renderResult.renderedDOM.queryAllByText(AboutTextContent).filter(filterOutMenuLabels),
       ).toHaveLength(1)
       expect(getPathInRemixSceneLabel(renderResult, pathToRemixScene)).toEqual('/about')
-
-      await navigateWithRemixSceneLabelButton(renderResult, pathToRemixScene, 'home')
-      expect(renderResult.renderedDOM.queryAllByText(RootTextContent)).toHaveLength(1)
-      expect(getPathInRemixSceneLabel(renderResult, pathToRemixScene)).toEqual(RemixIndexPathLabel)
     })
 
     it('can navigate with the scene label nav buttons, in edit mode', async () => {
@@ -1392,10 +1388,6 @@ describe('Remix navigation', () => {
         renderResult.renderedDOM.queryAllByText(AboutTextContent).filter(filterOutMenuLabels),
       ).toHaveLength(1)
       expect(getPathInRemixSceneLabel(renderResult, pathToRemixScene)).toEqual('/about')
-
-      await navigateWithRemixSceneLabelButton(renderResult, pathToRemixScene, 'home')
-      expect(renderResult.renderedDOM.queryAllByText(RootTextContent)).toHaveLength(1)
-      expect(getPathInRemixSceneLabel(renderResult, pathToRemixScene)).toEqual(RemixIndexPathLabel)
     })
 
     it('navigating in one Remix scene does not affect the navigation state in the other', async () => {
diff --git a/editor/src/components/editor/remix-navigation-bar.tsx b/editor/src/components/editor/remix-navigation-bar.tsx
index a92717f04e5e..51ec53b58993 100644
--- a/editor/src/components/editor/remix-navigation-bar.tsx
+++ b/editor/src/components/editor/remix-navigation-bar.tsx
@@ -2,13 +2,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
 import { useAtom } from 'jotai'
-import React from 'react'
+import React, { useState } from 'react'
 import {
   ActiveRemixSceneAtom,
   RemixNavigationAtom,
 } from '../canvas/remix/utopia-remix-root-component'
 import { Substores, useEditorState } from './store/store-hook'
-import { FlexRow, StringInput, Tooltip, colorTheme } from '../../uuiui'
+import { FlexRow, Icn, StringInput, Tooltip, colorTheme } from '../../uuiui'
 import { stopPropagation } from '../inspector/common/inspector-utils'
 import * as EP from '../../core/shared/element-path'
 import { getRemixLocationLabel, getRemixUrlFromLocation } from '../canvas/remix/remix-utils'
@@ -28,6 +28,15 @@ export const RemixNavigationBarButtonTestId = (button: RemixSceneLabelButtonType
   `remix-navigation-bar-button-${button}`
 
 export const RemixNavigationBar = React.memo(() => {
+  const [isHovered, setIsHovered] = useState(false)
+  const setIsHoveredTrue = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+
+  const setIsHoveredFalse = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   const [navigationControls] = useAtom(RemixNavigationAtom)
   const [activeRemixScene] = useAtom(ActiveRemixSceneAtom)
   const routes = useEditorState(
@@ -137,7 +146,7 @@ export const RemixNavigationBar = React.memo(() => {
       <Tooltip title={'Back'} placement='bottom'>
         <span
           data-testid={RemixNavigationBarButtonTestId('back')}
-          style={{ cursor: 'pointer', fontSize: 12 }}
+          style={{ cursor: 'pointer', fontSize: 10 }}
           css={{
             '&:hover': {
               color: colorTheme.dynamicBlue.value,
@@ -151,7 +160,7 @@ export const RemixNavigationBar = React.memo(() => {
       <Tooltip title={'Forward'} placement='bottom'>
         <span
           data-testid={RemixNavigationBarButtonTestId('forward')}
-          style={{ cursor: 'pointer', fontSize: 12, transform: 'scale(-1, 1)' }}
+          style={{ cursor: 'pointer', fontSize: 10, transform: 'scale(-1, 1)' }}
           css={{
             '&:hover': {
               color: colorTheme.dynamicBlue.value,
@@ -163,23 +172,26 @@ export const RemixNavigationBar = React.memo(() => {
         </span>
       </Tooltip>
       <Tooltip title={'Home'} placement='bottom'>
-        <span
-          data-testid={RemixNavigationBarButtonTestId('home')}
-          style={{ cursor: 'pointer', fontSize: 16 }}
-          css={{
-            '&:hover': {
-              color: colorTheme.dynamicBlue.value,
-            },
-          }}
+        <div
+          onMouseEnter={setIsHoveredTrue}
+          onMouseLeave={setIsHoveredFalse}
           onClick={home}
+          data-testid={RemixNavigationBarButtonTestId('home')}
+          style={{ cursor: 'pointer' }}
         >
-          ⛫
-        </span>
+          <Icn
+            category='semantic'
+            type='home'
+            width={18}
+            height={18}
+            color={isHovered ? 'dynamic' : 'main'}
+          />
+        </div>
       </Tooltip>
       <FlexRow
         data-testid={RemixNavigationBarPathTestId}
         style={{
-          backgroundColor: colorTheme.bg3.value,
+          backgroundColor: colorTheme.seperator.value,
           borderRadius: 20,
           padding: '2px 2px 2px 6px',
           fontSize: 11,