diff --git a/client/images/play.svg b/client/images/play.svg
index b28a6d330a..ede91aef6b 100644
--- a/client/images/play.svg
+++ b/client/images/play.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" fill="currentColor">
-        <polygon id="play" points="0 0 16 8 0 16"></polygon>
-    </g>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="0,16 0,0 16,8" fill="currentColor" transform="matrix(0.90816035,0,0,0.90816035,0.45408022,0.7347172)" />
 </svg>
diff --git a/client/images/stop.svg b/client/images/stop.svg
index 00479aec72..82ee97c390 100644
--- a/client/images/stop.svg
+++ b/client/images/stop.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" fill="currentColor">
-        <rect id="stop" x="0" y="0" width="16" height="16"></rect>
-    </g>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.47058821" y="0.47058821" width="15.058824" height="15.058824"
+        fill="currentColor" stroke="currentColor" stroke-width="0.941176" />
 </svg>
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index 16ed74ff3e..983b1b2c8c 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -36,12 +36,12 @@ const Toolbar = (props) => {
   const showVisibilityDropdown = project?.owner && userIsOwner;
 
   const playButtonClass = classNames({
-    'toolbar__play-button': true,
-    'toolbar__play-button--selected': isPlaying
+    'toolbar-start-stop-button play': true,
+    'toolbar-start-stop-button--selected play': isPlaying
   });
   const stopButtonClass = classNames({
-    'toolbar__stop-button': true,
-    'toolbar__stop-button--selected': !isPlaying
+    'toolbar-start-stop-button stop': true,
+    'toolbar-start-stop-button--selected stop': !isPlaying
   });
   const preferencesButtonClass = classNames({
     'toolbar__preferences-button': true,
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 8852d29c91..63fb34f678 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -181,7 +181,13 @@ $themes: (
     toast-background-color: $medium-dark,
     toast-text-color: $lightest,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark
+    toolbar-button-color: $dark,
+    toolbar-start-stop-button-background-color: #dbdbdb,
+    toolbar-start-stop-button-hover-background-color: #ed225e,
+    toolbar-start-stop-button-hover-outline-color: $p5js-pink,
+    toolbar-start-stop-button-outline-color: #dbdbdb,
+    toolbar-start-stop-icon-color: $p5-light-black,
+    toolbar-start-stop-active-icon-color: #ffffff
   ),
   dark: (
     activeline-background-color: $p5-dark-activeline,
@@ -299,7 +305,13 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $dark,
     toolbar-button-background-color: $medium-dark,
-    toolbar-button-color: $lightest
+    toolbar-button-color: $lightest,
+    toolbar-start-stop-button-background-color: #dedede,
+    toolbar-start-stop-button-hover-background-color: #ed225e,
+    toolbar-start-stop-button-hover-outline-color: $p5js-pink,
+    toolbar-start-stop-button-outline-color: #dedede,
+    toolbar-start-stop-icon-color: $p5-light-black,
+    toolbar-start-stop-active-icon-color: #ffffff
   ),
   contrast: (
     activeline-background-color: $p5-contrast-activeline,
@@ -414,6 +426,12 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $darker,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark
+    toolbar-button-color: $dark,
+    toolbar-start-stop-button-background-color: $darker,
+    toolbar-start-stop-button-hover-background-color: $p5-contrast-yellow,
+    toolbar-start-stop-button-hover-outline-color: $yellow,
+    toolbar-start-stop-button-outline-color: #ffffff,
+    toolbar-start-stop-icon-color: #ffffff,
+    toolbar-start-stop-active-icon-color: #000000
   )
 );
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index fb5de87900..52fb723b74 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -1,205 +1,218 @@
 @use "sass:math";
 
-.toolbar__play-button {
-	@include themify() {
-		@extend %toolbar-button;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 0 0 0 #{math.div(3, $base-font-size)}rem;
-
-		&--selected {
-			@extend %toolbar-button--selected;
-		}
-
-		&:disabled {
-			cursor: auto;
-
-			& g,
-			& path {
-				fill: getThemifyVariable('button-border-color');
-			}
-
-			&:hover {
-				background-color: getThemifyVariable('toolbar-button-background-color');
-
-				& g,
-				& path {
-					fill: getThemifyVariable('button-border-color');
-				}
-			}
-		}
-	}
-
-	margin-right: #{math.div(15, $base-font-size)}rem;
-
-	span {
-		padding-left: #{math.div(4, $base-font-size)}rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: #{math.div(20, $base-font-size)}rem;
-		height: #{math.div(20, $base-font-size)}rem;
-	}
+.toolbar-start-stop-button,
+.toolbar__preferences-button {
+  @include themify() {
+    @extend %toolbar-button;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: #{math.div(2, $base-font-size)}rem solid
+      getThemifyVariable('toolbar-start-stop-button-outline-color');
+    background-color: getThemifyVariable(
+      'toolbar-start-stop-button-background-color'
+    );
+
+    & rect,
+    & polygon,
+    & path {
+      stroke: none;
+      fill: getThemifyVariable('toolbar-start-stop-icon-color');
+    }
+
+    &--selected,
+    &:hover {
+      background-color: getThemifyVariable('button-background-hover-color');
+      border: none;
+      stroke: transparent;
+
+      & rect,
+      & polygon,
+      & path {
+        border: none;
+        stroke: transparent;
+        fill: getThemifyVariable('toolbar-start-stop-active-icon-color');
+      }
+    }
+
+    &:disabled {
+      cursor: auto;
+
+      & g,
+      & rect,
+      & polygon,
+      & path {
+        fill: getThemifyVariable('button-border-color');
+      }
+
+      &:hover {
+        background-color: getThemifyVariable('toolbar-button-background-color');
+
+        & g,
+        & rect,
+        & polygon,
+        & path {
+          fill: getThemifyVariable('button-border-color');
+        }
+      }
+    }
+
+    &.play {
+      padding: 0 0 0 #{math.div(3, $base-font-size)}rem;
+      margin-right: #{math.div(15, $base-font-size)}rem;
+      span {
+        padding-left: #{math.div(4, $base-font-size)}rem;
+      }
+    }
+
+    &.stop {
+      margin-right: #{math.div(15, $base-font-size)}rem;
+      padding: 0;
+    }
+  }
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{math.div(20, $base-font-size)}rem;
+    height: #{math.div(20, $base-font-size)}rem;
+  }
 }
 
 .toolbar__play-sketch-button {
-	@extend %hidden-element;
-}
-
-.toolbar__stop-button {
-	@include themify() {
-		@extend %toolbar-button;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-right: #{math.div(15, $base-font-size)}rem;
-		padding: 0;
-
-		&--selected {
-			@extend %toolbar-button--selected;
-		}
-	}
-
-	span {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: #{math.div(20, $base-font-size)}rem;
-		height: #{math.div(20, $base-font-size)}rem;
-	}
+  @extend %hidden-element;
 }
 
 .toolbar__preferences-button {
-	@include themify() {
-		@extend %toolbar-button;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 0;
-
-		&--selected {
-			@extend %toolbar-button--selected;
-		}
-	}
-
-	margin-left: auto;
-
-	& span {
-		padding-left: #{math.div(1, $base-font-size)}rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: #{math.div(20, $base-font-size)}rem;
-		height: #{math.div(20, $base-font-size)}rem;
-	}
+  @include themify() {
+    @extend %toolbar-button;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+
+    &--selected {
+      @extend %toolbar-button--selected;
+    }
+  }
+
+  margin-left: auto;
+
+  & span {
+    padding-left: #{math.div(1, $base-font-size)}rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: #{math.div(20, $base-font-size)}rem;
+    height: #{math.div(20, $base-font-size)}rem;
+  }
 }
 
 .toolbar__logo {
-	margin-right: #{math.div(30, $base-font-size)}rem;
+  margin-right: #{math.div(30, $base-font-size)}rem;
 
-	@include themify() {
-		& g,
-		& path {
-			fill: getThemifyVariable('logo-color');
-		}
-	}
+  @include themify() {
+    & g,
+    & path {
+      fill: getThemifyVariable('logo-color');
+    }
+  }
 }
 
 .toolbar {
-	padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
-	display: flex;
-	align-items: center;
+  padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
+  display: flex;
+  align-items: center;
 
-	@include themify() {
-		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
-	}
+  @include themify() {
+    border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
+  }
 }
 
 .lock-icon {
-	height: 60%;
-	width: 60%;
+  height: 60%;
+  width: 60%;
 }
 
 .unlock-icon {
-	height: 60%;
-	width: 60%;
+  height: 60%;
+  width: 60%;
 }
 
 .toolbar__project-name-container {
-	margin-left: #{math.div(10, $base-font-size)}rem;
-	padding-left: #{math.div(10, $base-font-size)}rem;
-	display: flex;
-	align-items: center;
+  margin-left: #{math.div(10, $base-font-size)}rem;
+  padding-left: #{math.div(10, $base-font-size)}rem;
+  display: flex;
+  align-items: center;
 
-	> section {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 30px;
-		width: 30px;
-	}
+  > section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+  }
 }
 
 .toolbar .editable-input__label {
-	@include themify() {
-		color: getThemifyVariable('secondary-text-color');
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
 
-		& path {
-			fill: getThemifyVariable('secondary-text-color');
-		}
-	}
+    & path {
+      fill: getThemifyVariable('secondary-text-color');
+    }
+  }
 }
 
 .toolbar .editable-input__input {
-	border: 0;
+  border: 0;
 }
 
 .toolbar__project-owner {
-	margin: 0 #{math.div(5, $base-font-size)}rem;
-	@include themify() {
-		color: getThemifyVariable('secondary-text-color');
-	}
+  margin: 0 #{math.div(5, $base-font-size)}rem;
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
+  }
 }
 
 .toolbar__autorefresh-label {
-	cursor: pointer;
+  cursor: pointer;
 
-	@include themify() {
-		color: getThemifyVariable('secondary-text-color');
+  @include themify() {
+    color: getThemifyVariable('secondary-text-color');
 
-		&:hover {
-			color: getThemifyVariable('logo-color');
-		}
-	}
+    &:hover {
+      color: getThemifyVariable('logo-color');
+    }
+  }
 
-	margin-left: #{math.div(5, $base-font-size)}rem;
-	font-size: #{math.div(12, $base-font-size)}rem;
+  margin-left: #{math.div(5, $base-font-size)}rem;
+  font-size: #{math.div(12, $base-font-size)}rem;
 }
 
 .toolbar__autorefresh {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .checkbox__autorefresh {
-	cursor: pointer;
+  cursor: pointer;
 
-	@include themify() {
-		accent-color: getThemifyVariable('logo-color');
-	}
+  @include themify() {
+    accent-color: getThemifyVariable('logo-color');
+  }
 }
 
 .toolbar__makeprivate {
-	display: flex;
-	align-items: center;
-	gap: #{math.div(4, $base-font-size)}rem;
+  display: flex;
+  align-items: center;
+  gap: #{math.div(4, $base-font-size)}rem;
 }
 
 .toolbar__togglevisibility {
-	cursor: pointer;
+  cursor: pointer;
 
-	@include themify() {
-		accent-color: getThemifyVariable('logo-color');
-	}
-}
\ No newline at end of file
+  @include themify() {
+    accent-color: getThemifyVariable('logo-color');
+  }
+}