diff --git a/public/res/ic/filled/pin.svg b/public/res/ic/filled/pin.svg
new file mode 100644
index 00000000..6a701474
--- /dev/null
+++ b/public/res/ic/filled/pin.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
+</svg>
diff --git a/public/res/ic/outlined/pin.svg b/public/res/ic/outlined/pin.svg
new file mode 100644
index 00000000..211242cd
--- /dev/null
+++ b/public/res/ic/outlined/pin.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
+</svg>
diff --git a/src/app/organisms/navigation/DrawerHeader.jsx b/src/app/organisms/navigation/DrawerHeader.jsx
index 220633c0..5d705252 100644
--- a/src/app/organisms/navigation/DrawerHeader.jsx
+++ b/src/app/organisms/navigation/DrawerHeader.jsx
@@ -16,8 +16,8 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import StarIC from '../../../../public/res/ic/outlined/star.svg';
-import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
+import PinIC from '../../../../public/res/ic/outlined/pin.svg';
+import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 
 function DrawerHeader({ selectedTab, spaceId }) {
   const [, forceUpdate] = useState({});
@@ -35,9 +35,9 @@ function DrawerHeader({ selectedTab, spaceId }) {
       {spaceName && (
         <IconButton
           size="extra-small"
-          variant={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'positive' : 'surface'}
-          tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Remove favourite' : 'Favourite'}
-          src={initMatrix.roomList.spaceShortcut.has(spaceId) ? FilledStarIC : StarIC}
+          variant="surface"
+          tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
+          src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
           onClick={() => {
             if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
             else createSpaceShortcut(spaceId);
diff --git a/src/app/organisms/navigation/Selector.jsx b/src/app/organisms/navigation/Selector.jsx
index 7ec7c0b0..a60422df 100644
--- a/src/app/organisms/navigation/Selector.jsx
+++ b/src/app/organisms/navigation/Selector.jsx
@@ -15,8 +15,8 @@ import HashIC from '../../../../public/res/ic/outlined/hash.svg';
 import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
 import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-import StarIC from '../../../../public/res/ic/outlined/star.svg';
-import FilledStarIC from '../../../../public/res/ic/filled/star.svg';
+import PinIC from '../../../../public/res/ic/outlined/pin.svg';
+import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 function Selector({
@@ -61,10 +61,10 @@ function Selector({
         options={(
           <IconButton
             size="extra-small"
-            variant={initMatrix.roomList.spaceShortcut.has(roomId) ? 'positive' : 'surface'}
-            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Remove favourite' : 'Favourite'}
+            variant="surface"
+            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Unpin' : 'Pin to sidebar'}
             tooltipPlacement="right"
-            src={initMatrix.roomList.spaceShortcut.has(roomId) ? FilledStarIC : StarIC}
+            src={initMatrix.roomList.spaceShortcut.has(roomId) ? PinFilledIC : PinIC}
             onClick={() => {
               if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
               else createSpaceShortcut(roomId);