diff --git a/public/icons/hide-table-of-contents-2.svg b/public/icons/hide-table-of-contents-2.svg
new file mode 100644
index 00000000..f51dbe12
--- /dev/null
+++ b/public/icons/hide-table-of-contents-2.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+  <rect fill="#fff" x="0.999512" y="27" width="26" height="26" transform="rotate(-90 0.999512 27)"/>
+<path fill-rule="evenodd" clip-rule="evenodd"
+			d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0024 20.0283H9.89648V18.3691H22.0024V20.0283ZM9.89648 15.0517H22.0024V13.3926H9.89648V15.0517ZM9.89648 10.0742V8.41504H22.0024V10.0742H9.89648Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/TableOfContents/TableOfContents.module.scss b/src/components/TableOfContents/TableOfContents.module.scss
index 858776da..501bae9f 100644
--- a/src/components/TableOfContents/TableOfContents.module.scss
+++ b/src/components/TableOfContents/TableOfContents.module.scss
@@ -19,6 +19,10 @@
   .TableOfContentsPrimaryButton {
     left: auto;
     right: 40px;
+
+    &:hover {
+      filter: invert(1);
+    }
   }
 
   .TableOfContentsPrimaryButtonLefted {
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index b4f354e6..97807d14 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -104,7 +104,11 @@ export const TableOfContents = (props: Props) => {
             title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
           >
             <Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}>
-              <Icon name="hide-table-of-contents" class="icon" />
+              {props.variant === 'editor' ? (
+                <Icon name="hide-table-of-contents" class="icon" />
+              ) : (
+                <Icon name="hide-table-of-contents-2" class="icon" />
+              )}
             </Show>
           </button>
         </div>