diff --git a/apps/common/main/resources/img/doc-formats/blank.svg b/apps/common/main/resources/img/doc-formats/blank.svg
new file mode 100644
index 000000000..dd8b5c54c
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/blank.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2-1{opacity:0.2;}</style></defs><symbol id="svg-format-blank"><path fill="#fff" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2-1" d="M77,5H8A3,3,0,0,0,5,8V119a3,3,0,0,0,3,3H92a3,3,0,0,0,3-3V23ZM94,119a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2V8A2,2,0,0,1,8,6H76.59l.41.41V20a3,3,0,0,0,3,3H93.59l.41.41Z"/><g class="cls-2-1"><rect x="50" y="86" width="25" height="2"/><rect x="25" y="80" width="50" height="2"/><rect x="25" y="74" width="50" height="2"/><rect x="25" y="68" width="50" height="2"/><rect x="25" y="62" width="50" height="2"/><rect x="25" y="43" width="24" height="2"/><rect x="25" y="37" width="19" height="2"/></g></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/csv.svg b/apps/common/main/resources/img/doc-formats/csv.svg
new file mode 100644
index 000000000..028d64748
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/csv.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-csv"><path fill="#646464" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(38.97 113)">CSV</text><rect class="cls-4" x="21" y="90" width="17" height="2"/><rect class="cls-4" x="21" y="83" width="17" height="2"/><rect class="cls-4" x="21" y="76" width="17" height="2"/><rect class="cls-4" x="21" y="69" width="17" height="2"/><rect class="cls-4" x="21" y="62" width="17" height="2"/><rect class="cls-4" x="21" y="55" width="17" height="2"/><rect class="cls-4" x="21" y="48" width="17" height="2"/><rect class="cls-4" x="21" y="41" width="17" height="2"/><rect class="cls-4" x="21" y="34" width="17" height="2"/><rect class="cls-4" x="42" y="90" width="17" height="2"/><rect class="cls-4" x="42" y="83" width="17" height="2"/><rect class="cls-4" x="42" y="76" width="17" height="2"/><rect class="cls-4" x="42" y="69" width="17" height="2"/><rect class="cls-4" x="42" y="62" width="17" height="2"/><rect class="cls-4" x="42" y="55" width="17" height="2"/><rect class="cls-4" x="42" y="48" width="17" height="2"/><rect class="cls-4" x="42" y="41" width="17" height="2"/><rect class="cls-4" x="42" y="34" width="17" height="2"/><rect class="cls-4" x="63" y="90" width="17" height="2"/><rect class="cls-4" x="63" y="83" width="17" height="2"/><rect class="cls-4" x="63" y="76" width="17" height="2"/><rect class="cls-4" x="63" y="69" width="17" height="2"/><rect class="cls-4" x="63" y="62" width="17" height="2"/><rect class="cls-4" x="63" y="55" width="17" height="2"/><rect class="cls-4" x="63" y="48" width="17" height="2"/><rect class="cls-4" x="63" y="41" width="17" height="2"/><rect class="cls-4" x="63" y="34" width="17" height="2"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/docx.svg b/apps/common/main/resources/img/doc-formats/docx.svg
new file mode 100644
index 000000000..0dd73dd24
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/docx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-docx"><path fill="#214479" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(32.96 113)">DOCX</text><polygon class="cls-4" points="67.8 48 61.5 75 54.5 48 51.5 48 48.5 48 41.5 75 35.2 48 29.4 48 37.9 82 44.3 82 51.5 54.1 58.7 82 65.1 82 73.6 48 67.8 48"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/epub.svg b/apps/common/main/resources/img/doc-formats/epub.svg
new file mode 100644
index 000000000..5a1e5fa2e
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/epub.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-epub"><path fill="#5892b6" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(34.31 113)">EPUB</text><path class="cls-4" d="M49,84V49s-9-6-24-7V75S42,76,49,84Z"/><path class="cls-4" d="M75,75V42c-15,1-24,7-24,7V84C58,76,75,75,75,75Z"/><path class="cls-4" d="M77,47V79s-15,0-27,8.3C38,79,23,79,23,79V47H20V82s13-2,30,6c17-8,30-6,30-6V47Z"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/html.svg b/apps/common/main/resources/img/doc-formats/html.svg
new file mode 100644
index 000000000..baff21feb
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/html.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-html"><path fill="#7c9a34" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(32.89 113)">HTML</text><polygon class="cls-4" points="62 53 62 57.8 75.5 62.5 62 67.2 62 72 80 64.2 80 60.8 62 53"/><polygon class="cls-4" points="40 75 45.5 75 59.5 50 54 50 40 75"/><polygon class="cls-4" points="19 64.2 37 72 37 67.2 23.5 62.5 37 57.8 37 53 19 60.8 19 64.2"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/odp.svg b/apps/common/main/resources/img/doc-formats/odp.svg
new file mode 100644
index 000000000..03c009089
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/odp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-odp"><path fill="#dd9426" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(37.02 113)">ODP</text><path class="cls-4" d="M78,52.74h0l-.29-.15a15,15,0,0,0-14,.53,14.93,14.93,0,0,0-14.3-.24l-.08,0a.25.25,0,0,0-.1.2.26.26,0,0,0,.26.26h.06a14.62,14.62,0,0,1,4.14-.18c4,.37,7.43,1.6,9.86,4.36.13.13.24.12.37,0C67,54,71.68,52.6,76.72,53.07c.28,0,.56.06.83.11l.33,0a.23.23,0,0,0,.26-.25A.25.25,0,0,0,78,52.74Z"/><path class="cls-4" d="M72.16,65.21l0,0A26,26,0,0,0,47.19,68,26,26,0,0,0,22.1,70.19l-.05,0a.41.41,0,0,0-.14.3.39.39,0,0,0,.38.39h.08l0,0a26.09,26.09,0,0,1,7.49-1.1c6.93,0,13.1,1.64,17.74,6l0,0a.38.38,0,0,0,.25.09.37.37,0,0,0,.3-.14l.22-.31c4.72-6.45,12.5-9.63,21.16-9.63.62,0,1.23,0,1.84.06l.55,0a.4.4,0,0,0,.39-.39A.38.38,0,0,0,72.16,65.21Z"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/ods.svg b/apps/common/main/resources/img/doc-formats/ods.svg
new file mode 100644
index 000000000..f22a21537
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/ods.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-ods"><path fill="#237453" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(37.48 113)">ODS</text><path class="cls-4" d="M78,52.74h0l-.29-.15a15,15,0,0,0-14,.53,14.93,14.93,0,0,0-14.3-.24l-.08,0a.25.25,0,0,0-.1.2.26.26,0,0,0,.26.26h.06a14.62,14.62,0,0,1,4.14-.18c4,.37,7.43,1.6,9.86,4.36.13.13.24.12.37,0C67,54,71.68,52.6,76.72,53.07c.28,0,.56.06.83.11l.33,0a.23.23,0,0,0,.26-.25A.25.25,0,0,0,78,52.74Z"/><path class="cls-4" d="M72.16,65.21l0,0A26,26,0,0,0,47.19,68,26,26,0,0,0,22.1,70.19l-.05,0a.41.41,0,0,0-.14.3.39.39,0,0,0,.38.39h.08l0,0a26.09,26.09,0,0,1,7.49-1.1c6.93,0,13.1,1.64,17.74,6l0,0a.38.38,0,0,0,.25.09.37.37,0,0,0,.3-.14l.22-.31c4.72-6.45,12.5-9.63,21.16-9.63.62,0,1.23,0,1.84.06l.55,0a.4.4,0,0,0,.39-.39A.38.38,0,0,0,72.16,65.21Z"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/odt.svg b/apps/common/main/resources/img/doc-formats/odt.svg
new file mode 100644
index 000000000..4495dfebd
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/odt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-odt"><path fill="#3c6d88" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(37.31 113)">ODT</text><path class="cls-4" d="M78,52.74h0l-.29-.15a15,15,0,0,0-14,.53,14.93,14.93,0,0,0-14.3-.24l-.08,0a.25.25,0,0,0-.1.2.26.26,0,0,0,.26.26h.06a14.62,14.62,0,0,1,4.14-.18c4,.37,7.43,1.6,9.86,4.36.13.13.24.12.37,0C67,54,71.68,52.6,76.72,53.07c.28,0,.56.06.83.11l.33,0a.23.23,0,0,0,.26-.25A.25.25,0,0,0,78,52.74Z"/><path class="cls-4" d="M72.16,65.21l0,0A26,26,0,0,0,47.19,68,26,26,0,0,0,22.1,70.19l-.05,0a.41.41,0,0,0-.14.3.39.39,0,0,0,.38.39h.08l0,0a26.09,26.09,0,0,1,7.49-1.1c6.93,0,13.1,1.64,17.74,6l0,0a.38.38,0,0,0,.25.09.37.37,0,0,0,.3-.14l.22-.31c4.72-6.45,12.5-9.63,21.16-9.63.62,0,1.23,0,1.84.06l.55,0a.4.4,0,0,0,.39-.39A.38.38,0,0,0,72.16,65.21Z"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/pdf.svg b/apps/common/main/resources/img/doc-formats/pdf.svg
new file mode 100644
index 000000000..b2d3e9ae5
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/pdf.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-pdf"><path fill="#ba4c3f" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(38.5 113)">PDF</text><path id="path4463" class="cls-4" d="M40.42,66.69C42,63.55,43.84,60,45.3,56.46h0l.58-1.4c-1.9-7.25-3.05-13.07-2-16.83h0a2.59,2.59,0,0,1,2.62-1.57h.88c1.66,0,2.44,2.09,2.53,2.91h0a13.12,13.12,0,0,1-.48,3.68h0a9.11,9.11,0,0,0-.56-3.75h0C48.16,38,47.5,37.1,46.91,37h0a1.82,1.82,0,0,0-.68,1.4h0A19.67,19.67,0,0,0,46,41.59h0A36,36,0,0,0,47.45,51h0c.18-.54.34-1,.48-1.54h0c.2-.76,1.49-5.81,1.49-5.81h0s-.33,6.72-.78,8.76h0c-.1.43-.21.86-.32,1.29h0a29.59,29.59,0,0,0,7.37,11.52h0A23.75,23.75,0,0,0,60,68.12h0a57.72,57.72,0,0,1,8.65-.65h0c3.28,0,5.69.53,6.66,1.49h0A2.55,2.55,0,0,1,76,70.62h0a5.92,5.92,0,0,1-.14,1h0c0-.18,0-1-2.6-1.88h0c-2.07-.66-6-.64-10.61-.15h0c5.39,2.64,10.64,4,12.3,3.16h0a3.48,3.48,0,0,0,.9-.87h0a9.45,9.45,0,0,1-.51,1.66h0a2.54,2.54,0,0,1-1.29.88h0c-2.63.71-9.46-.92-15.42-4.32h0A125,125,0,0,0,38.8,74.79h0C33,84.88,28.71,89.51,25.19,87.75h0L23.9,87.1a1.5,1.5,0,0,1-.49-1.63h0c.41-2,2.93-5,8-8.06h0c.55-.33,3-1.61,3-1.61h0s-1.79,1.74-2.21,2.08h0c-4,3.31-7,7.47-6.95,9.09h0l0,.14c3.43-.49,8.57-7.48,15.19-20.42m2.1,1.07c-1.11,2.08-2.19,4-3.19,5.79h0a84.6,84.6,0,0,1,17.1-4.84h0c-.76-.53-1.49-1.08-2.19-1.67h0A29.28,29.28,0,0,1,47,57.66h0a81,81,0,0,1-4.52,10.1"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/pptx.svg b/apps/common/main/resources/img/doc-formats/pptx.svg
new file mode 100644
index 000000000..15f4f6f77
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/pptx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-pptx"><path fill="#dd682b" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(34.99 113)">PPTX</text><path class="cls-4" d="M50,69A16,16,0,0,0,66,53H50V37a16,16,0,0,0,0,32Z"/><path class="cls-4" d="M53,34V50H69A16,16,0,0,0,53,34Z"/><rect class="cls-4" x="25" y="89" width="50" height="2"/><rect class="cls-4" x="25" y="83" width="50" height="2"/><rect class="cls-4" x="25" y="77" width="50" height="2"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/rtf.svg b/apps/common/main/resources/img/doc-formats/rtf.svg
new file mode 100644
index 000000000..cd8665cbe
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/rtf.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-rtf"><path fill="#7c7c7d" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(39.27 113)">RTF</text><rect class="cls-4" x="49" y="38" width="25" height="2"/><rect class="cls-4" x="49" y="44" width="25" height="2"/><rect class="cls-4" x="49" y="50" width="25" height="2"/><rect class="cls-4" x="49" y="56" width="25" height="2"/><rect class="cls-4" x="25" y="62" width="49" height="2"/><rect class="cls-4" x="25" y="68" width="49" height="2"/><rect class="cls-4" x="25" y="74" width="49" height="2"/><rect class="cls-4" x="25" y="80" width="49" height="2"/><rect class="cls-4" x="25" y="86" width="49" height="2"/><rect class="cls-4" x="25" y="38" width="20" height="20"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/txt.svg b/apps/common/main/resources/img/doc-formats/txt.svg
new file mode 100644
index 000000000..616c8a96d
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/txt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-txt"><path fill="#7c7c7d" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(39.05 113)">TXT</text><rect class="cls-4" x="25" y="38" width="49" height="2"/><rect class="cls-4" x="25" y="44" width="49" height="2"/><rect class="cls-4" x="25" y="50" width="49" height="2"/><rect class="cls-4" x="25" y="56" width="49" height="2"/><rect class="cls-4" x="25" y="62" width="49" height="2"/><rect class="cls-4" x="25" y="68" width="49" height="2"/><rect class="cls-4" x="25" y="74" width="49" height="2"/><rect class="cls-4" x="25" y="80" width="49" height="2"/><rect class="cls-4" x="25" y="86" width="49" height="2"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/common/main/resources/img/doc-formats/xlsx.svg b/apps/common/main/resources/img/doc-formats/xlsx.svg
new file mode 100644
index 000000000..45558c4eb
--- /dev/null
+++ b/apps/common/main/resources/img/doc-formats/xlsx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 127" version="1.1" width="100" height="127"><defs><style>.cls-2{opacity:0.2;}.cls-3{font-size:12px;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3,.cls-4{fill:#fff;}</style></defs><symbol id="svg-format-xlsx"><path fill="#1f7244" d="M95,23v96a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H77Z"/><path class="cls-2" d="M95,23H80a3,3,0,0,1-3-3V5Z"/><text class="cls-3" transform="translate(35.3 113)">XLSX</text><polygon class="cls-4" points="52.75 61.63 64 45 58.5 45 50 57.56 41.5 45 36 45 47.25 61.63 35.5 79 41 79 50 65.7 59 79 64.5 79 52.75 61.63"/></symbol></svg>
\ No newline at end of file
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 7da717107..d6f6df2b1 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -69,7 +69,9 @@ define([
                 '<% _.each(rows, function(row) { %>',
                     '<tr>',
                         '<% _.each(row, function(item) { %>',
-                            '<td><span class="btn-doc-format img-doc-format <%= item.imgCls %>" format="<%= item.type %>"/></td>',
+                            '<td><div><svg class="btn-doc-format" format="<%= item.type %>">',
+                                '<use xlink:href="#svg-format-<%= item.imgCls %>"></use>',
+                            '</svg></div></td>',
                         '<% }) %>',
                     '</tr>',
                 '<% }) %>',
@@ -530,7 +532,11 @@ define([
         template: _.template([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
-                '<div class="blank-document-btn img-doc-format"></div>',
+                '<div class="blank-document-btn">',
+                    '<svg class="btn-doc-format">',
+                        '<use xlink:href="#svg-format-docx"></use>',
+                    '</svg>',
+                '</div>',
                 '<div class="blank-document-info">',
                     '<h3><%= scope.newDocumentText %></h3>',
                     '<%= scope.newDescriptionText %>',
@@ -540,7 +546,13 @@ define([
             '<div class="thumb-list">',
                 '<% _.each(docs, function(item) { %>',
                     '<div class="thumb-wrap" template="<%= item.url %>">',
-                        '<div class="thumb"<% if (!_.isEmpty(item.icon)) { %> style="background-image: url(<%= item.icon %>);" <% } %> />',
+                        '<div class="thumb"',
+                        '<% if (!_.isEmpty(item.icon)) { ' +
+                            'print(\" style=\'background-image: url(item.icon);\'>\")' +
+                        ' } else { ' +
+                            'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                        ' } %>',
+                        '</div>',
                         '<div class="title"><%= item.name %></div>',
                     '</div>',
                 '<% }) %>',
diff --git a/apps/documenteditor/main/index.html b/apps/documenteditor/main/index.html
index 81bbd980d..ffaf58340 100644
--- a/apps/documenteditor/main/index.html
+++ b/apps/documenteditor/main/index.html
@@ -262,6 +262,13 @@
 
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/docx.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/txt.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/odt.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/rtf.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/html.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/documenteditor/main/index.html.deploy b/apps/documenteditor/main/index.html.deploy
index 9c673db2f..c505b375c 100644
--- a/apps/documenteditor/main/index.html.deploy
+++ b/apps/documenteditor/main/index.html.deploy
@@ -283,6 +283,13 @@
     </script>
 
     <inline src="resources/img/header/buttons.svg" />
+    <inline src="resources/img/doc-formats/docx.svg" />
+    <inline src="resources/img/doc-formats/pdf.svg" />
+    <inline src="resources/img/doc-formats/txt.svg" />
+    <inline src="resources/img/doc-formats/odt.svg" />
+    <inline src="resources/img/doc-formats/rtf.svg" />
+    <inline src="resources/img/doc-formats/html.svg" />
+    <inline src="resources/img/doc-formats/blank.svg" />
 
     <div id="viewport"></div>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
diff --git a/apps/documenteditor/main/resources/img/docformat.png b/apps/documenteditor/main/resources/img/docformat.png
deleted file mode 100644
index e8a3f98bd..000000000
Binary files a/apps/documenteditor/main/resources/img/docformat.png and /dev/null differ
diff --git a/apps/documenteditor/main/resources/img/docformat@2x.png b/apps/documenteditor/main/resources/img/docformat@2x.png
deleted file mode 100644
index 6b638d576..000000000
Binary files a/apps/documenteditor/main/resources/img/docformat@2x.png and /dev/null differ
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index a37fdee1a..d160d1bfb 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -98,32 +98,15 @@
   }
 }
 
-.img-doc-format {
-  .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 1020px);
-}
-
 .btn-doc-format {
   display: block;
   width: 98px;
   height: 125px;
   cursor: pointer;
 
-  .icon-document-format(@shift-x, @shift-y: 0) {
-    background-position: @shift-x @shift-y;
-
-    &:hover {
-      background-position: @shift-x+102 @shift-y;
-    }
+  svg&:hover {
+    opacity:0.85;
   }
-
-  &.docx  {.icon-document-format(-306px);}
-  &.doc   {.icon-document-format(-102px);}
-  &.odt   {.icon-document-format(-102px,-128px);}
-  &.rtf   {.icon-document-format(-510px,-128px);}
-  &.txt   {.icon-document-format(-714px,-128px);}
-  &.html  {.icon-document-format(-714px);}
-  &.epub  {.icon-document-format(-510px);}
-  &.pdf   {.icon-document-format(-306px,-128px);}
 }
 
 #panel-settings {
@@ -190,15 +173,10 @@
   .blank-document-btn {
     display: inline-block;
     margin: 25px 20px 65px;
-    background-position: -816px 0;
 
     width: 102px;
     height: 128px;
     cursor: pointer;
-
-    &:hover {
-      background-position: -918px 0;
-    }
   }
 
   hr {
@@ -218,9 +196,6 @@
       .thumb {
         width: 102px;
         height: 128px;
-        //                .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 1020px);
-        //                background-repeat: no-repeat;
-        //                background-position: -816px -129px;
       }
 
       .title {
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index a9472caf9..b10be3f6b 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -64,7 +64,9 @@ define([
                 '<% _.each(rows, function(row) { %>',
                     '<tr>',
                         '<% _.each(row, function(item) { %>',
-                            '<td><span class="btn-doc-format <%= item.imgCls %>" /></td>',
+                            '<td><div><svg class="btn-doc-format" format="<%= item.type %>">',
+                                '<use xlink:href="#svg-format-<%= item.imgCls %>"></use>',
+                            '</svg></div></td>',
                         '<% }) %>',
                     '</tr>',
                 '<% }) %>',
@@ -436,7 +438,11 @@ define([
         template: _.template([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
-                '<div class="blank-document-btn"></div>',
+                '<div class="blank-document-btn">',
+                    '<svg class="btn-doc-format">',
+                        '<use xlink:href="#svg-format-pptx"></use>',
+                    '</svg>',
+                '</div>',
                 '<div class="blank-document-info">',
                     '<h3><%= scope.newDocumentText %></h3>',
                     '<%= scope.newDescriptionText %>',
@@ -446,7 +452,13 @@ define([
             '<div class="thumb-list">',
                 '<% _.each(docs, function(item) { %>',
                     '<div class="thumb-wrap" template="<%= item.url %>">',
-                        '<div class="thumb"<% if (!_.isEmpty(item.icon)) { %> style="background-image: url(<%= item.icon %>);" <% } %> />',
+                        '<div class="thumb"',
+                            '<% if (!_.isEmpty(item.icon)) { ' +
+                                'print(\" style=\'background-image: url(item.icon);\'>\")' +
+                            ' } else { ' +
+                                'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                            ' } %>',
+                        '</div>',
                         '<div class="title"><%= item.name %></div>',
                     '</div>',
                 '<% }) %>',
diff --git a/apps/presentationeditor/main/index.html b/apps/presentationeditor/main/index.html
index ec74ec7ae..a75f2173c 100644
--- a/apps/presentationeditor/main/index.html
+++ b/apps/presentationeditor/main/index.html
@@ -261,6 +261,10 @@
 
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/pptx.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/odp.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/presentationeditor/main/index.html.deploy b/apps/presentationeditor/main/index.html.deploy
index 8ee29fc49..4e2c49bf9 100644
--- a/apps/presentationeditor/main/index.html.deploy
+++ b/apps/presentationeditor/main/index.html.deploy
@@ -283,6 +283,10 @@
     </script>
 
     <inline src="resources/img/header/buttons.svg" />
+    <inline src="resources/img/doc-formats/pptx.svg" />
+    <inline src="resources/img/doc-formats/pdf.svg" />
+    <inline src="resources/img/doc-formats/odp.svg" />
+    <inline src="resources/img/doc-formats/blank.svg" />
 
     <div id="viewport"></div>
 
diff --git a/apps/presentationeditor/main/resources/img/docformat.png b/apps/presentationeditor/main/resources/img/docformat.png
deleted file mode 100644
index 77528805a..000000000
Binary files a/apps/presentationeditor/main/resources/img/docformat.png and /dev/null differ
diff --git a/apps/presentationeditor/main/resources/img/docformat@2x.png b/apps/presentationeditor/main/resources/img/docformat@2x.png
deleted file mode 100644
index 5cab80522..000000000
Binary files a/apps/presentationeditor/main/resources/img/docformat@2x.png and /dev/null differ
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index a269387b9..f85a5a7fd 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -80,6 +80,17 @@
     overflow: hidden;
 }
 
+.btn-doc-format {
+    display: block;
+    width: 98px;
+    height: 125px;
+    cursor: pointer;
+
+    svg&:hover {
+        opacity:0.85;
+    }
+}
+
 #file-menu-panel {
     > div {
         height: 100%;
@@ -181,27 +192,7 @@
                 margin-bottom: 65px;
 
                 .btn-doc-format {
-                    display: block;
-                    width: 98px;
-                    height: 125px;
-                    cursor: pointer;
                     margin: 65px 25px 0px;
-
-                    background-repeat: no-repeat;
-                    background-position: 0 0;
-                    .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 918px);
-
-                    .icon-document-format(@shift-x, @shift-y: 0) {
-                        background-position: @shift-x @shift-y;
-
-                        &:hover {
-                            background-position: @shift-x+102 @shift-y;
-                        }
-                    }
-
-                    &.pptx  {.icon-document-format(-102px);}
-                    &.pdf   {.icon-document-format(-306px);}
-                    &.odp   {.icon-document-format(-816px);}
                 }
             }
         }
@@ -267,17 +258,10 @@
             .blank-document-btn {
                 display: inline-block;
                 margin: 25px 20px 65px;
-                .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 714px);
-                background-repeat: no-repeat;
-                background-position: -408px 0;
 
                 width: 102px;
                 height: 128px;
                 cursor: pointer;
-
-                &:hover {
-                    background-position: -510px 0;
-                }
             }
 
             hr {
@@ -297,9 +281,6 @@
                     .thumb {
                         width: 102px;
                         height: 128px;
-                        .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 714px);
-                        background-repeat: no-repeat;
-                        background-position: -612px 0;
                     }
 
                     .title {
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index c90858193..c82e90430 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -58,7 +58,9 @@ define([
                 '<% _.each(rows, function(row) { %>',
                     '<tr>',
                         '<% _.each(row, function(item) { %>',
-                            '<td><span class="btn-doc-format <%= item.imgCls %>" /></td>',
+                            '<td><div><svg class="btn-doc-format" format="<%= item.type %>">',
+                                '<use xlink:href="#svg-format-<%= item.imgCls %>"></use>',
+                            '</svg></div></td>',
                         '<% }) %>',
                     '</tr>',
                 '<% }) %>',
@@ -896,7 +898,11 @@ define([
         template: _.template([
             '<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />',
             '<div class="blank-document">',
-                '<div class="blank-document-btn"></div>',
+                '<div class="blank-document-btn">',
+                    '<svg class="btn-doc-format">',
+                        '<use xlink:href="#svg-format-xlsx"></use>',
+                    '</svg>',
+                '</div>',
                 '<div class="blank-document-info">',
                     '<h3><%= scope.newDocumentText %></h3>',
                     '<%= scope.newDescriptionText %>',
@@ -906,7 +912,13 @@ define([
             '<div class="thumb-list">',
                 '<% _.each(docs, function(item) { %>',
                     '<div class="thumb-wrap" template="<%= item.url %>">',
-                        '<div class="thumb"<% if (!_.isEmpty(item.icon)) { %> style="background-image: url(<%= item.icon %>);" <% } %> />',
+                        '<div class="thumb"',
+                            '<% if (!_.isEmpty(item.icon)) { ' +
+                                'print(\" style=\'background-image: url(item.icon);\'>\")' +
+                            ' } else { ' +
+                                'print(\"><svg class=\'btn-doc-format\'><use xlink:href=\'#svg-format-blank\'></use></svg>\")' +
+                            ' } %>',
+                        '</div>',
                         '<div class="title"><%= item.name %></div>',
                     '</div>',
                 '<% }) %>',
diff --git a/apps/spreadsheeteditor/main/index.html b/apps/spreadsheeteditor/main/index.html
index 868ad9ff1..98c20e95a 100644
--- a/apps/spreadsheeteditor/main/index.html
+++ b/apps/spreadsheeteditor/main/index.html
@@ -263,6 +263,11 @@
 
     <script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
     <img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/xlsx.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/ods.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
+    <img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);
diff --git a/apps/spreadsheeteditor/main/index.html.deploy b/apps/spreadsheeteditor/main/index.html.deploy
index 9f4009e4d..786eea1b4 100644
--- a/apps/spreadsheeteditor/main/index.html.deploy
+++ b/apps/spreadsheeteditor/main/index.html.deploy
@@ -282,6 +282,11 @@
     </script>
 
     <inline src="resources/img/header/buttons.svg" />
+    <inline src="resources/img/doc-formats/xlsx.svg" />
+    <inline src="resources/img/doc-formats/pdf.svg" />
+    <inline src="resources/img/doc-formats/ods.svg" />
+    <inline src="resources/img/doc-formats/csv.svg" />
+    <inline src="resources/img/doc-formats/blank.svg" />
 
     <div id="viewport"></div>
 
diff --git a/apps/spreadsheeteditor/main/resources/img/docformat.png b/apps/spreadsheeteditor/main/resources/img/docformat.png
deleted file mode 100644
index 1c176639b..000000000
Binary files a/apps/spreadsheeteditor/main/resources/img/docformat.png and /dev/null differ
diff --git a/apps/spreadsheeteditor/main/resources/img/docformat@2x.png b/apps/spreadsheeteditor/main/resources/img/docformat@2x.png
deleted file mode 100644
index 6afdf2836..000000000
Binary files a/apps/spreadsheeteditor/main/resources/img/docformat@2x.png and /dev/null differ
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 59e7c6ba8..924c1e413 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -79,6 +79,17 @@
     overflow: hidden;
 }
 
+.btn-doc-format {
+    display: block;
+    width: 98px;
+    height: 125px;
+    cursor: pointer;
+
+    svg&:hover {
+        opacity:0.85;
+    }
+}
+
 #file-menu-panel {
     > div {
         height: 100%;
@@ -170,29 +181,7 @@
                 margin-bottom: 65px;
 
                 .btn-doc-format {
-                    display: block;
-                    width: 98px;
-                    height: 125px;
-                    cursor: pointer;
                     margin: 65px 25px 0px;
-
-                    background-repeat: no-repeat;
-                    background-position: 0 0;
-                    .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 822px);
-
-                    .icon-document-format(@shift-x, @shift-y: 0) {
-                        background-position: @shift-x @shift-y;
-
-                        &:hover {
-                            background-position: @shift-x+102 @shift-y;
-                        }
-                    }
-
-                    &.xlsx  {.icon-document-format(-102px);}
-                    &.ods   {.icon-document-format(-102px, -128px);}
-                    &.csv   {.icon-document-format(-306px, -128px);}
-                    &.html  {.icon-document-format(-306px);}
-                    &.pdf   {.icon-document-format(-714px);}
                 }
             }
         }
@@ -337,16 +326,9 @@
             .blank-document-btn {
                 display: inline-block;
                 margin: 25px 20px 65px;
-                .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 612px);
-                background-repeat: no-repeat;
-                background-position: -408px 0;
                 width: 102px;
                 height: 128px;
                 cursor: pointer;
-
-                &:hover {
-                    background-position: -510px 0;
-                }
             }
 
             hr {
@@ -366,9 +348,6 @@
                     .thumb {
                         width: 102px;
                         height: 128px;
-                        .background-ximage('@{app-image-path}/docformat.png', '@{app-image-path}/docformat@2x.png', 612px);
-                        background-repeat: no-repeat;
-                        background-position: -408px -128px;
                     }
 
                     .title {