diff --git a/client/images/down-arrow-white.svg b/client/images/down-arrow-white.svg
new file mode 100644
index 00000000..34efd84b
--- /dev/null
+++ b/client/images/down-arrow-white.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-shape-copy-2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+        <g id="down-arrow" fill-rule="nonzero" fill="#FFFFFF">
+            <g id="IDEs">
+                <g id="p5js-IDE-styles-foundation-pt-2">
+                    <g id="Icons">
+                        <polygon id="arrow-shape-copy-2" transform="translate(7.000000, 4.198314) rotate(-180.000000) translate(-7.000000, -4.198314) " points="8.4 1.396628 14 6.996628 12.6 8.396628 7 2.796628 1.4 8.396628 0 6.996628 5.6 1.396628 6.996628 -2.84217094e-14"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/images/right-arrow-white.svg b/client/images/right-arrow-white.svg
new file mode 100644
index 00000000..b789f93d
--- /dev/null
+++ b/client/images/right-arrow-white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow-shape-copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
+        <g id="right-arrow" fill-rule="nonzero" fill="#FFFFFF">
+            <g id="IDEs">
+                <g id="p5js-IDE-styles-foundation-pt-2">
+                    <polygon id="arrow-shape-copy" transform="translate(4.999999, 7.198314) rotate(90.000000) translate(-4.999999, -7.198314) " points="6.399999 4.396629 11.999999 9.996629 10.599999 11.396629 4.999999 5.796629 -0.600001 11.396629 -2.000001 9.996629 3.599999 4.396629 4.996627 2.999999"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 69736822..d3a62a22 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -49,6 +49,8 @@ $themes: (
     dropdown-color: #414141,
     keyboard-shortcut-color: #757575,
     nav-hover-color: $p5js-pink,
+    codefold-icon-open: url(../images/down-arrow.svg),
+    codefold-icon-closed: url(../images/right-arrow.svg)
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -88,6 +90,8 @@ $themes: (
     dropdown-color: #dadada,
     keyboard-shortcut-color: #B5B5B5,
     nav-hover-color: $p5js-pink,
+    codefold-icon-open: url(../images/down-arrow-white.svg),
+    codefold-icon-closed: url(../images/right-arrow-white.svg)
   ),
   contrast: (
     logo-color: $yellow,
@@ -125,7 +129,9 @@ $themes: (
     search-background-color: $white,
     dropdown-color: #e1e1e1,
     keyboard-shortcut-color: #e1e1e1,
-    nav-hover-color: $yellow
+    nav-hover-color: $yellow,
+    codefold-icon-open: url(../images/down-arrow-white.svg),
+    codefold-icon-closed: url(../images/right-arrow-white.svg)
   )
 );
 
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 4aaabfe8..bf317fb0 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -244,11 +244,15 @@ pre.CodeMirror-line {
 }
 
 .CodeMirror-foldgutter-open:after {
-  background-image: url(../images/down-arrow.svg);
+  @include themify() {
+    background-image: getThemifyVariable('codefold-icon-open');
+  }
 }
 
 .CodeMirror-foldgutter-folded:after {
-  background-image: url(../images/right-arrow.svg);
+  @include themify() {
+    background-image: getThemifyVariable('codefold-icon-closed');
+  }
 }
 
 .CodeMirror-foldgutter-folded:after,