diff --git a/src/components/color_picker/color_picker.ts b/src/components/color_picker/color_picker.ts
index 936d776b0..9e00108bf 100644
--- a/src/components/color_picker/color_picker.ts
+++ b/src/components/color_picker/color_picker.ts
@@ -49,6 +49,18 @@ css/* scss */ `
       grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
       grid-gap: ${ITEM_HORIZONTAL_MARGIN * 2}px;
     }
+    .o-color-picker-toggler {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
     .o-color-picker-line-item {
       width: ${ITEM_EDGE_LENGTH}px;
       height: ${ITEM_EDGE_LENGTH}px;
diff --git a/src/components/color_picker/color_picker.xml b/src/components/color_picker/color_picker.xml
index ca9a1cf03..0e2b07c7d 100644
--- a/src/components/color_picker/color_picker.xml
+++ b/src/components/color_picker/color_picker.xml
@@ -28,7 +28,9 @@
         </div>
         <div class="colors-grid o-color-picker-toggler" t-on-click.stop="toggleColorPicker">
           <div class="o-color-picker-line-item o-color-picker-toggler">
-            <div align="center">+</div>
+            <div class="o-color-picker-toggler-sign">
+              <t t-call="o-spreadsheet-Icon.PLUS"/>
+            </div>
           </div>
           <div
             t-foreach="env.model.getters.getCustomColors()"
diff --git a/src/components/icons/icons.xml b/src/components/icons/icons.xml
index 311137bfc..d059e40a1 100644
--- a/src/components/icons/icons.xml
+++ b/src/components/icons/icons.xml
@@ -537,7 +537,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Icon.PLUS" owl="1">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path fill="currentColor" d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"/>
     </svg>
   </t>
diff --git a/tests/components/__snapshots__/bottom_bar.test.ts.snap b/tests/components/__snapshots__/bottom_bar.test.ts.snap
index c3115da18..1cf1a476c 100644
--- a/tests/components/__snapshots__/bottom_bar.test.ts.snap
+++ b/tests/components/__snapshots__/bottom_bar.test.ts.snap
@@ -142,6 +142,7 @@ exports[`BottomBar component simple rendering 1`] = `
       >
         <svg
           class="o-icon"
+          viewBox="0 0 18 18"
         >
           <path
             d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"
diff --git a/tests/components/__snapshots__/color_picker.test.ts.snap b/tests/components/__snapshots__/color_picker.test.ts.snap
new file mode 100644
index 000000000..9e3946831
--- /dev/null
+++ b/tests/components/__snapshots__/color_picker.test.ts.snap
@@ -0,0 +1,503 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Color Picker buttons Full component rendering 1`] = `
+<div
+  class="o-color-picker"
+  style=""
+>
+  <div
+    class="o-color-picker-section-name"
+  >
+    Standard
+  </div>
+  <div
+    class="colors-grid"
+  >
+    <div
+      class="o-color-picker-line-item"
+      data-color="#000000"
+      style="background-color:#000000;"
+    >
+      <div
+        align="center"
+        style="color:#FFFFFF"
+      >
+         ✓ 
+      </div>
+    </div>
+    <div
+      class="o-color-picker-line-item"
+      data-color="#434343"
+      style="background-color:#434343;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#666666"
+      style="background-color:#666666;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#999999"
+      style="background-color:#999999;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#B7B7B7"
+      style="background-color:#B7B7B7;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#CCCCCC"
+      style="background-color:#CCCCCC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#D9D9D9"
+      style="background-color:#D9D9D9;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#EFEFEF"
+      style="background-color:#EFEFEF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#F3F3F3"
+      style="background-color:#F3F3F3;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FFFFFF"
+      style="background-color:#FFFFFF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#980000"
+      style="background-color:#980000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FF0000"
+      style="background-color:#FF0000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FF9900"
+      style="background-color:#FF9900;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FFFF00"
+      style="background-color:#FFFF00;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#00FF00"
+      style="background-color:#00FF00;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#00FFFF"
+      style="background-color:#00FFFF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#4A86E8"
+      style="background-color:#4A86E8;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#0000FF"
+      style="background-color:#0000FF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#9900FF"
+      style="background-color:#9900FF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FF00FF"
+      style="background-color:#FF00FF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#E6B8AF"
+      style="background-color:#E6B8AF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#F4CCCC"
+      style="background-color:#F4CCCC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FCE5CD"
+      style="background-color:#FCE5CD;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FFF2CC"
+      style="background-color:#FFF2CC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#D9EAD3"
+      style="background-color:#D9EAD3;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#D0E0E3"
+      style="background-color:#D0E0E3;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#C9DAF8"
+      style="background-color:#C9DAF8;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#CFE2F3"
+      style="background-color:#CFE2F3;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#D9D2E9"
+      style="background-color:#D9D2E9;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#EAD1DC"
+      style="background-color:#EAD1DC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#DD7E6B"
+      style="background-color:#DD7E6B;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#EA9999"
+      style="background-color:#EA9999;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#F9CB9C"
+      style="background-color:#F9CB9C;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FFE599"
+      style="background-color:#FFE599;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#B6D7A8"
+      style="background-color:#B6D7A8;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#A2C4C9"
+      style="background-color:#A2C4C9;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#A4C2F4"
+      style="background-color:#A4C2F4;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#9FC5E8"
+      style="background-color:#9FC5E8;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#B4A7D6"
+      style="background-color:#B4A7D6;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#D5A6BD"
+      style="background-color:#D5A6BD;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#CC4125"
+      style="background-color:#CC4125;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#E06666"
+      style="background-color:#E06666;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#F6B26B"
+      style="background-color:#F6B26B;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#FFD966"
+      style="background-color:#FFD966;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#93C47D"
+      style="background-color:#93C47D;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#76A5AF"
+      style="background-color:#76A5AF;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#6D9EEB"
+      style="background-color:#6D9EEB;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#6FA8DC"
+      style="background-color:#6FA8DC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#8E7CC3"
+      style="background-color:#8E7CC3;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#C27BA0"
+      style="background-color:#C27BA0;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#A61C00"
+      style="background-color:#A61C00;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#CC0000"
+      style="background-color:#CC0000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#E69138"
+      style="background-color:#E69138;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#F1C232"
+      style="background-color:#F1C232;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#6AA84F"
+      style="background-color:#6AA84F;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#45818E"
+      style="background-color:#45818E;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#3C78D8"
+      style="background-color:#3C78D8;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#3D85C6"
+      style="background-color:#3D85C6;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#674EA7"
+      style="background-color:#674EA7;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#A64D79"
+      style="background-color:#A64D79;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#85200C"
+      style="background-color:#85200C;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#990000"
+      style="background-color:#990000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#B45F06"
+      style="background-color:#B45F06;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#BF9000"
+      style="background-color:#BF9000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#38761D"
+      style="background-color:#38761D;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#134F5C"
+      style="background-color:#134F5C;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#1155CC"
+      style="background-color:#1155CC;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#0B5394"
+      style="background-color:#0B5394;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#351C75"
+      style="background-color:#351C75;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#741B47"
+      style="background-color:#741B47;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#5B0F00"
+      style="background-color:#5B0F00;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#660000"
+      style="background-color:#660000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#783F04"
+      style="background-color:#783F04;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#7F6000"
+      style="background-color:#7F6000;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#274E13"
+      style="background-color:#274E13;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#0C343D"
+      style="background-color:#0C343D;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#1C4587"
+      style="background-color:#1C4587;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#073763"
+      style="background-color:#073763;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#20124D"
+      style="background-color:#20124D;"
+    />
+    <div
+      class="o-color-picker-line-item"
+      data-color="#4C1130"
+      style="background-color:#4C1130;"
+    />
+    
+  </div>
+  <div
+    class="o-separator"
+  />
+  <div
+    class="o-color-picker-section-name o-color-picker-toggler"
+  >
+    <span>
+      Custom
+    </span>
+  </div>
+  <div
+    class="colors-grid o-color-picker-toggler"
+  >
+    <div
+      class="o-color-picker-line-item o-color-picker-toggler"
+    >
+      <div
+        class="o-color-picker-toggler-sign"
+      >
+        <svg
+          class="o-icon"
+          viewBox="0 0 18 18"
+        >
+          <path
+            d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+    
+    
+  </div>
+  <div
+    class="o-custom-selector"
+  >
+    <div
+      class="o-magnifier-glass"
+      style="display:none; left:0; top:0;"
+    />
+    <div
+      class="o-gradient"
+    />
+    <div
+      class="o-custom-input-preview"
+    >
+      <input
+        type="text"
+      />
+      <div
+        class="o-color-preview"
+        style="background-color:#000000"
+      />
+    </div>
+    <div
+      class="o-custom-input-buttons"
+    >
+      <button
+        class="o-add-button"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+  
+  <div
+    class="o-separator"
+  />
+  <div
+    class="o-buttons"
+  >
+    <button
+      class="o-cancel"
+    >
+      Reset
+    </button>
+  </div>
+</div>
+`;
diff --git a/tests/components/__snapshots__/spreadsheet.test.ts.snap b/tests/components/__snapshots__/spreadsheet.test.ts.snap
index 7db693a77..0d3c6bfc7 100644
--- a/tests/components/__snapshots__/spreadsheet.test.ts.snap
+++ b/tests/components/__snapshots__/spreadsheet.test.ts.snap
@@ -685,6 +685,7 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
         >
           <svg
             class="o-icon"
+            viewBox="0 0 18 18"
           >
             <path
               d="M8 0h2v8h8v2h-8v8H8v-8H0V8h8"
diff --git a/tests/components/color_picker.test.ts b/tests/components/color_picker.test.ts
index f7afa7fe2..4aea67ea8 100644
--- a/tests/components/color_picker.test.ts
+++ b/tests/components/color_picker.test.ts
@@ -62,6 +62,12 @@ describe("Color Picker buttons", () => {
     }
   });
 
+  test("Full component rendering", async () => {
+    await mountColorPicker();
+    await simulateClick(".o-color-picker-toggler-sign");
+    expect(fixture.querySelector(".o-color-picker")).toMatchSnapshot();
+  });
+
   test("Can pick a standard color", async () => {
     const onColorPicked = jest.fn();
     await mountColorPicker({ onColorPicked });